Using Flow layout in webdynpro ABAP

Using Flow layout in web dynpro for ABAP, working with flow layout in web dynpro

+ -

This layout arranges all the UI elements sequentially in a single line from left to right, this is a default layout.

Example of using flow layout.

Go to SE80, select web dynpro component from drop down, provide name as ZSAPN_FLOW_LAYOUT and press enter.

Using flow layout in web dynpro ABAP

Provide description and enter.

Go to main view, click on change, go to context and right click on context -> Create -> node, provide name as KNA1, dictionary structure as KNA1, cardinality as 1-1 and click on add attributes from structure.

Using flow layout in web dynpro ABAP

Select some attributes as below and press enter.

Using flow layout in web dynpro ABAP

Clear dictionary structure immediately after creating node.

Using flow layout in web dynpro ABAP

Go to layout, right click on ROOTUIELEMENTCONTAINER -> insert element.

Using flow layout in web dynpro ABAP

Click on context.

Using flow layout in web dynpro ABAP

Select KNA1 and enter.

Using flow layout in web dynpro ABAP

Select follow layout from drop down and enter.

Using flow layout in web dynpro ABAP

Again right click on ROOTUIELEMENTCONTAINER -> insert element.

Using flow layout in web dynpro ABAP

Provide an ID, select button from drop down and press enter.

Using flow layout in web dynpro ABAP

Select button, provide a button text and click on create to create an action method.

Using flow layout in web dynpro ABAP

Provide action method name, descriptions and press enter.

Using flow layout in web dynpro ABAP

Go to actions tab, double click on ON_GET and add below code.

Using flow layout in web dynpro ABAP

METHOD ONACTIONON_GET . 
DATA LO_ND_KNA1 TYPE REF TO IF_WD_CONTEXT_NODE. 
DATA LO_EL_KNA1 TYPE REF TO IF_WD_CONTEXT_ELEMENT. 
DATA LS_KNA1 TYPE WD_THIS->ELEMENT_KNA1. 
* navigate from to via lead selection 
LO_ND_KNA1 = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_KNA1 ). 
* get element via lead selection LO_EL_KNA1 = LO_ND_KNA1->GET_ELEMENT( ). 
* @TODO handle not set lead selection 
IF LO_EL_KNA1 IS INITIAL. 
ENDIF. 
* get all declared attributes 
LO_EL_KNA1->GET_STATIC_ATTRIBUTES( 
                IMPORTING 
                   STATIC_ATTRIBUTES = LS_KNA1 ). 
SELECT SINGLE * FROM KNA1 INTO CORRESPONDING FIELDS OF LS_KNA1
                   WHERE KUNNR = LS_KNA1-KUNNR.
 LO_EL_KNA1->SET_STATIC_ATTRIBUTES( 
                  EXPORTING 
                     STATIC_ATTRIBUTES = LS_KNA1 ). 
ENDMETHOD. 

Double click on component and right click -> activate.

Using flow layout in web dynpro ABAP

Right click on component and create -> web dynpro application.

Using flow layout in web dynpro ABAP

Provide name, enter, click save (Ctrl + S) and save it in a local object.

Using flow layout in web dynpro ABAP

Right click on application name and click test to test the application.

Using flow layout in web dynpro ABAP

A browser will open, provide a customer no(get from KNA1 table) and click on get.

Using flow layout in web dynpro ABAP

Learner Questions


No Questions by learners, be first one to ask ..!!

    Please Sign in to ask a question

    Was this lesson helpful to you? Yes No 10 People out of 10 think this lesson helpful


    Lesson Navigation

    ←Previous Chapter
    Next Chapter →