table popins and business graphics in web dynpro abap · pdf filetable popins and business...

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

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.

http://www.sdn.sap.com/irj/sdn/nw-wdabap

Table Popins and Business Graphics in Web Dynpro ABAP


© 2011 SAP AG 2

Table of Contents

Introduction ......................................................................................................................................................... 3

Table Popins ....................................................................................................................................................... 3

BusinessGraphics UI Element ............................................................................................................................ 4

A Sample Application .......................................................................................................................................... 5

Related Content ................................................................................................................................................ 23

Disclaimer and Liability Notice .......................................................................................................................... 24



© 2011 SAP AG 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.



© 2011 SAP AG 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 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.



© 2011 SAP AG 6

Create attributes under node FLIGHT as shown in below snapshot.

Select attributes from structure SFLIGHT



© 2011 SAP AG 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.



© 2011 SAP AG 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.



© 2011 SAP AG 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.



© 2011 SAP AG 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.



© 2011 SAP AG 11

Select FLIGHT node from context.

Select the entire attribute except POPIN_NAME.



© 2011 SAP AG 12

Right click on TABLE UI element and create a table column as shown in snapshot.

Arrange the Property as shown below.



© 2011 SAP AG 13

Insert a CellVariant to the newly created TableColumn.

Select type as TablePopinToggleCell. Click ok button.



© 2011 SAP AG 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 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.



© 2011 SAP AG 16

Select BusinessGraphics an type. Click OK.

Edit the Property of BUSINESSGRAPHICE . Bind the FLIGHT_SEATS to the property SeriesSource.



© 2011 SAP AG 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.



© 2011 SAP AG 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.



© 2011 SAP AG 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


EXPORTING

name = 'CONNID'

IMPORTING

value = v_connid.

*--Get the FLDATE


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 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.



© 2011 SAP AG 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.



© 2011 SAP AG 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.



© 2011 SAP AG 23

Related Content

Web Dynpro table

Popin

BusinessGraphics

For more information, visit the Web Dynpro ABAP homepage.

http://help.sap.com/saphelp_nw70/helpdata/en/b5/ac884118aa1709e10000000a155106/content.htm

http://help.sap.com/saphelp_nw70/helpdata/en/43/2715bf17b0601ee10000000a422035/content.htm

http://help.sap.com/saphelp_nw70/helpdata/en/ed/258841a79f1609e10000000a155106/content.htm

http://www.sdn.sap.com/irj/sdn/nw-wdabap



© 2011 SAP AG 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.

table popins and business graphics in web dynpro abap · pdf filetable popins and business...

Documents