Table Popins and Business Graphics in Web Dynpro ABAP

24 Pages·2011·0.74 MB·English

by  Shaira Madhu

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 SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2011 SAP AG 1
Table Popins and Business Graphics in Web Dynpro ABAP
Table of Contents
Introduction ......................................................................................................................................................... 3
Table Popins ....................................................................................................................................................... 3
BusinessGraphics UI Element ............................................................................................................................ 4
A Sample Application .......................................................................................................................................... 5
Related Content ................................................................................................................................................ 23
Disclaimer and Liability Notice .......................................................................................................................... 24

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2011 SAP AG 2
Table Popins and Business Graphics in Web Dynpro ABAP
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 COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2011 SAP AG 3
Table Popins and Business Graphics in Web Dynpro ABAP
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,
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2011 SAP AG 4
Table Popins and Business Graphics in Web Dynpro ABAP
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 COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2011 SAP AG 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 SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2011 SAP AG 6
Table Popins and Business Graphics in Web Dynpro ABAP

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 COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2011 SAP AG 7
Table Popins and Business Graphics in Web Dynpro ABAP
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 COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2011 SAP AG 8
Table Popins and Business Graphics in Web Dynpro ABAP
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 COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2011 SAP AG 9
Table Popins and Business Graphics in Web Dynpro ABAP
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 COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2011 SAP AG 10