Flow Layout SAP ABAP Web Dynpro

If we use the FlowLayout layout, all the UI elements are displayed in a line. Byusing the property WRAPPING of the container into which the UI elements are going to be integrated, we can manipulate the modality of putting these UI elements on screen. In case this property is ABAP_TRUE, the UI elements that don’t enter in the first line are arranged bellow, in another line, to automatically adapt to the client window. In case of ABAP_FALSE, the UI elements are not automatically adapted to the client window.

For a better understanding, we create a Registration Form with three fields: first name, last name and date of birth. The WD component structure and the view layout are presented.

WD component structure and view layout

WD component structure and view layout

In View context, we create the same well-known STUDENT contextnode with the dictionary structure YSTR_PERSON.

ROOTUIELEMENTCONTAINER and Group UI element are both UI elements of container type, which have the FlowLayout layout in the default mode.Each UI element reference to a LayoutData object and every UI element inserted within a container must have the data layout that matches the respective container.

Layout and layout data

Layout and layout data

Runtime: wrapping ABAP_TRUE

Runtime: wrapping ABAP_TRUE

As we can see, the UI elements are arranged in a line. Because the attributes of STUDENT context node are empty, the InputField’s UI elements bound to these attributes are not shown. After the user presses the Save Button, we show all the data that the user has entered in the InputField UI elements.In this case, all the UI elements don’t enter in a line anymore, because the client window is too small for that. The elements that don’t enter in the first line are arranged below in another line, to automatically adapt to the client window.

We can see that, for the layout data, we can set two properties: cellDesign that specifies the distance between rows and vGutter that specifies the additional distance to the left edge. The default of these values is cellDesign – padless (there is no distance between the row and the edges) and vGutter – none (no additional distance).In case the wrapping property is ABAP_FALSE, the UI elements that don’t enter in the first line are not arranged below in another line, they are not visible anymore.

Runtime: wrapping ABAP_FALSE

Runtime: wrapping ABAP_FALSE

For a dynamic manipulation, we can use the runtime class CL_WD_FLOW_DATA to embedding the UI elements into the container that has a FlowLayout layout.An example of using this class we have seen in the wdDoModifyView example.



Face Book Twitter Google Plus Instagram Youtube Linkedin Myspace Pinterest Soundcloud Wikipedia

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

SAP ABAP Web Dynpro Topics