Table Popins and Business Graphics in Web Dynpro ABAP

Size: px

Start display at page:

Download "Table Popins and Business Graphics in Web Dynpro ABAP"

Rosamund Cross
6 years ago
Views:

1 Table Popins and Business Graphics in Web Dynpro ABAP Applies to: SAP ECC 6.0. For more information, visit the Web Dynpro ABAP homepage. Summary Table Popins are the additional feature to a Table UI element. The BusinessGraphics UI element can be used to display graphical illustrations of data and data relationships. This is a sample application which include Business Graphics and Table Popins Author: Shaira Madhu Company: Applexus Technologies (P) Ltd. Created on: 15 August 2011 Author Bio Shaira Madhu is working as SAP Technology Consultant with Applexus Technologies (P) Ltd SAP AG 1

2 Table of Contents Introduction... 3 Table Popins... 3 BusinessGraphics UI Element... 4 A Sample Application... 5 Related Content Disclaimer and Liability Notice SAP AG 2

3 Introduction This is a sample application to which includes businessgraphics in Table Popins. The Output will looks like the below snapshot. Table Popins The TablePopin allows displaying detail information related to a data set (row popin) or a data cell (cell popin) as an insertion below the related row of the Table. With a cell popin the associated cell is assigned the background color of the popin, so popin and cell can be identified as belonging together. The UI element TablePopinToggleCell is provided for expanding and collapsing the TablePopin. However, the visibility of a TablePopin may also be toggled by clicking on any clickable UI element on the view. In this sample application we are using row popin SAP AG 3

4 BusinessGraphics UI Element The BusinessGraphics UI element can be used to display graphical illustrations of data and data relationships For Web Dynpro ABAP, the following chart types are available: Column chart (columns and stacked columns) Bar chart (bars and stacked bars) Line chart (lines, stacked lines, profiles and stacked profiles) Area chart (area, stacked area, profile area, stacked profile area, and pipeline) Pie chart (pie and split pie) Doughnut chart Radar chart (radar and stacked radar) Polar chart Speedometer chart Scatter chart (scatter and time scatter) Portfolio chart Gantt chart MTAChartamet, 2011 SAP AG 4

5 A Sample Application Create a Web Dynpro Component. In ComponetController context a node FLIGHT with cardinality 0..n and Dictionary types SFLIGHT. Refer the below snapshot SAP AG 5

6 Create attributes under node FLIGHT as shown in below snapshot. Select attributes from structure SFLIGHT 2011 SAP AG 6

7 Create another node FLIGHT_SEATS with cardinality 1..1 and dictionary structure SFLIGHT. This node is used to display the row related TablePopins. Select the attributes as shown in below snapshot SAP AG 7

to that node. Add a new attribute POPIN_NAME type STRING.

8 Select the node FLIGHT and remove the dictionary structure SFLIGHT as shown, so that we can add a new attribute POPIN_NAME to that node. Add a new attribute POPIN_NAME type STRING. This attribute will contain the selected Popin name of the TABLE SAP AG 8

Select the Methods Tab and double click WDDOINIT method and write code to fetch data from table SFLIGHT. method WDDOINIT. DATA lo_nd_flight TYPE REF TO if_wd_context_node.

9 Select the Methods Tab and double click WDDOINIT method and write code to fetch data from table SFLIGHT. method WDDOINIT. DATA lo_nd_flight TYPE REF TO if_wd_context_node. DATA t_flight TYPE TABLE OF wd_this->element_flight. lo_nd_flight = wd_context->get_child_node( name = wd_this->wdctx_flight ). *--Read the forst 10 rows from Table Sflight SELECT * FROM sflight INTO CORRESPONDING FIELDS OF TABLE t_flight UP TO 10 ROWS. *--Bind value to Context Node Flight CALL METHOD lo_nd_flight->bind_table EXPORTING new_items = t_flight. endmethod SAP AG 9

10 In Main view select the Context tab and drag and drop the nodes to the View context. Select ROOTELEMENTCONTAINER and click wizard button. Create a table from the template SAP AG 10

11 Select FLIGHT node from context. Select the entire attribute except POPIN_NAME SAP AG 11

12 Right click on TABLE UI element and create a table column as shown in snapshot. Arrange the Property as shown below SAP AG 12

13 Insert a CellVariant to the newly created TableColumn. Select type as TablePopinToggleCell. Click ok button SAP AG 13

value of the TablePopinToggleCell property variantkey have to be

14 Insert the property VariantKey as v_key as shown below. The value of the TableColume Property SelectedCellVerient and the value of the TablePopinToggleCell property variantkey have to be identical. The TablePopinToggleCell is given an identifier by setting the 2011 SAP AG 14

of the related TableColumn. Refer the below snapshot.

15 property variantkey to an appropriate value. The same value has to be assigned to the property selectedcellvariant of the related TableColumn. Refer the below snapshot. Right click the TABLE UI Element and Insert TablePopin. Right click TABLEPOPIN and insert content SAP AG 15

16 Select BusinessGraphics an type. Click OK. Edit the Property of BUSINESSGRAPHICE. Bind the FLIGHT_SEATS to the property SeriesSource SAP AG 16

Right click the BUSINESSGRAPHICS and insert Category.

17 Right click the BUSINESSGRAPHICS and insert Category. Bind the CATEGORY description to FLDATE of node FLIGHT_SEATS. Right click the BUSINESSGRAPHICS and insert Series. Select Series type as SimpleSeries. Edit the property of SIMPLE SERIES with Lable Economy class and bind data to attribute SEATSOCC of node FLIGHT_SEATS SAP AG 17

18 Create two more Series with attribute SEATSOCC_B with lable Business class and SEATSOCC_F with label First class. Come to TABLE_POPIN_TGL_CELL which created under TABLECOLUMN. Add an event as shown in below snapshot SAP AG 18

19 Double click on the action and write the logic for it as given below. method ONACTIONTOGGLE. DATA: v_carrid TYPE s_carr_id, v_connid TYPE s_conn_id, v_fldate TYPE s_date, x_flight TYPE wd_this->element_flight_seats, lo_nd_seat TYPE REF TO if_wd_context_node, lo_el_seat TYPE REF TO if_wd_context_element, ls_seat TYPE wd_this->element_flight_seats, lo_nd_flight TYPE REF TO if_wd_context_node, ls_flight TYPE wd_this->element_flight, t_flight TYPE TABLE OF wd_this->element_flight, x_flight1 TYPE wd_this->element_flight, ind TYPE i. *--Get the CARRID CALL METHOD context_element->get_attribute EXPORTING name = 'CARRID' IMPORTING value = v_carrid. *--Get the CONNID CALL METHOD context_element->get_attribute EXPORTING name = 'CONNID' IMPORTING value = v_connid. *--Get the FLDATE CALL METHOD context_element->get_attribute EXPORTING name = 'FLDATE' IMPORTING value = v_fldate. *--Get the flight details with respect to CARRID CONNID FLDATE SELECT SINGLE * FROM sflight INTO CORRESPONDING FIELDS OF x_flight WHERE carrid = v_carrid AND connid = v_connid AND fldate = v_fldate. lo_nd_seat = wd_context->get_child_node( name = wd_this->wdctx_flight_seats ). ls_seat-seatsocc = x_flight-seatsocc. ls_seat-seatsocc_f = x_flight-seatsocc_f. ls_seat-seatsocc_b = x_flight-seatsocc_b. ls_seat-fldate = x_flight-fldate. *--Bind the structure for current CARRID CONNID and FLDATE CALL METHOD lo_nd_seat->bind_structure EXPORTING new_item = ls_seat 2011 SAP AG 19

20 set_initial_elements = abap_true RECEIVING element = lo_el_seat. *--To close the popin of all the rows other than current row lo_nd_flight = wd_context->get_child_node( name = wd_this->wdctx_flight ). CALL METHOD lo_nd_flight->get_static_attributes_table IMPORTING table = t_flight. *-- Get the current index CALL METHOD context_element->get_index RECEIVING my_index = ind. *--Clear all the Popin_name of rows except for the current row LOOP AT t_flight INTO x_flight1. IF sy-tabix NE ind. x_flight1-popin_name = ''. ENDIF. MODIFY t_flight FROM x_flight1. ENDLOOP. CALL METHOD lo_nd_flight->bind_table EXPORTING new_items = t_flight. endmethod SAP AG 20

CONTEXT_ELEMENT->set_attribute( name = 'POPIN_NAME' value = space ). endmethod.

21 Create an Action for event oncolse in the property of TABLEPOPIN as in below snapshot. Double click the Action and write the code for event as given below. method ONACTIONCLOSE. CONTEXT_ELEMENT->set_attribute( name = 'POPIN_NAME' value = space ). endmethod. Select the POPIN_NAME attribute under FLIGHT node to the SelectedPopin property of TABLE UI element. Binding this property is the prerequisite for defining the Table Popins and its visibility row dependent SAP AG 21

22 Activate the entire component and Create Web Dynpro Application. The output will look like as shown below. Click on the small arrow till display the Seats details of the Flight on that date SAP AG 22

23 Related Content Web Dynpro table Popin BusinessGraphics For more information, visit the Web Dynpro ABAP homepage SAP AG 23

24 Disclaimer and Liability Notice This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade. SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk. SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document SAP AG 24

Using Drop Down By Index in Table UI Element in WebDynpro ABAP

Using Drop Down By Index in Table UI Element in WebDynpro ABAP Applies to: Enterprise portal, ECC 6.0, Web Dynpro ABAP. For more information, visit the Web Dynpro ABAP homepage. Summary This article would