Table Popins

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 COMMUNITY NETWORK 2011 SAP AG
SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 1
Table of Contents
Introduction ......................................................................................................................................................... 3 Table Popins ....................................................................................................................................................... 3 BusinessGraphics UI Element ............................................................................................................................ 4 A Sample Application .......................................................................................................................................... 5 Related Content ................................................................................................................................................ 23 Disclaimer and Liability Notice .......................................................................................................................... 24
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.
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,
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.
Create attributes under node FLIGHT as shown in below snapshot.
Select attributes from structure SFLIGHT
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.
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.
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.
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.
Select FLIGHT node from context.
Select the entire attribute except POPIN_NAME.
Right click on TABLE UI element and create a table column as shown in snapshot.
Arrange the Property as shown below.
Insert a CellVariant to the newly created TableColumn.
Select type as TablePopinToggleCell. Click ok button.
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
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.
Select BusinessGraphics an type. Click OK.
Edit the Property of BUSINESSGRAPHICE . Bind the FLIGHT_SEATS to the property SeriesSource.
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.
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.
Double click on the action and write the logic for it as given below.
method ONACTIONTOGGLE DATA: v_carrid v_connid v_fldate x_flight lo_nd_seat lo_el_seat ls_seat lo_nd_flight ls_flight t_flight x_flight1 ind . TYPE TYPE TYPE TYPE TYPE TYPE TYPE TYPE TYPE TYPE TYPE TYPE s_carr_id, s_conn_id, s_date, wd_this->element_flight_seats, REF TO if_wd_context_node, REF TO if_wd_context_element, wd_this->element_flight_seats , REF TO if_wd_context_node, wd_this->element_flight, TABLE OF wd_this->element_flight, wd_this->element_flight, 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
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.
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 value = space ). endmethod. = 'POPIN_NAME'
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.
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.
Related Content
Web Dynpro table Popin BusinessGraphics For more information, visit the Web Dynpro ABAP homepage.
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.

Table Popins

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Table Popins

Uploaded by

Copyright:

Available Formats

Table Popins and Business Graphics in Web Dynpro ABAP

Company: Applexus Technologies (P) Ltd. Created on: 15 August 2011

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 1

Table Popins and Business Graphics in Web Dynpro ABAP

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 2

Table Popins and Business Graphics in Web Dynpro ABAP

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 3

Table Popins and Business Graphics in Web Dynpro ABAP

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 4

Table Popins and Business Graphics in Web Dynpro ABAP

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 5

Table Popins and Business Graphics in Web Dynpro ABAP

Create attributes under node FLIGHT as shown in below snapshot.

Select attributes from structure SFLIGHT

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 6

Table Popins and Business Graphics in Web Dynpro ABAP

Select the attributes as shown in below snapshot.

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 7

Table Popins and Business Graphics in Web Dynpro ABAP

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 8

Table Popins and Business Graphics in Web Dynpro ABAP

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 9

Table Popins and Business Graphics in Web Dynpro ABAP

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 10

Table Popins and Business Graphics in Web Dynpro ABAP

Select FLIGHT node from context.

Select the entire attribute except POPIN_NAME.

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 11

Table Popins and Business Graphics in Web Dynpro ABAP

Arrange the Property as shown below.

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 12

Table Popins and Business Graphics in Web Dynpro ABAP

Insert a CellVariant to the newly created TableColumn.

Select type as TablePopinToggleCell. Click ok button.

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 13

Table Popins and Business Graphics in Web Dynpro ABAP

Insert the property VariantKey as v_key as shown below.

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 14

Table Popins and Business Graphics in Web Dynpro ABAP

Right click the TABLE UI Element and Insert TablePopin.

Right click TABLEPOPIN and insert content.

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 15

Table Popins and Business Graphics in Web Dynpro ABAP

Select BusinessGraphics an type. Click OK.

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 16

Table Popins and Business Graphics in Web Dynpro ABAP

Right click the BUSINESSGRAPHICS and insert Series.

Select Series type as SimpleSeries.