Author: Avinash Palavai, SAP Technical Consultant, Atos India Pvt. Ltd..
Layouts are used to arrange the UI elements as per our requirement. As we don’t have the drag and drop facility in WebDynpro, we use layouts.
There are four types of layouts,
1. Flow Layout :- It is a default layout. In this layout, all the UI elements will flow from left to right sequentially in a view.
2. Row Layout :- In this layout, we have the options to set the UI element in a same or separate line. They are,
a) Row Head Data : It places the UI element in separate or fresh line.
b) Row Data : It places in same line.
The disadvantage with row layout is, it doesn’t follow any vertical format.
3. Matrix Layout :- This layout is also almost same as row layout, which is used to place the UI element in a separate or same line. The options available are,
a) Matrix Head Data : It places the UI element in separate or fresh line.
b) Matrix Data : It places in same line.
The main advantage is, it follows the vertical format.
4. Grid Layout : This layout has user friendly options to arrange the UI elements like column count, padding left, padding right, padding top, padding bottom, cell spacing etc. This layout also follows the Grid layout.
The below demo explains the usage and significance of all these layouts.
1. Create a WebDynpro component.
2. In the context of main view, create a node ” NODE_MARA ” with any four fields from MARA structure.
3. Create four Group Containers in the Main view with the name Flow.
4. Maintain the text property under Caption as Flow Layout.
5. In the same way create another 3 group containers with names Row, Matrix and layout with texts under caption as Row Layout, Matrix Layout and Grid Layout respectively.
6. Maintain a transparent container between each Group Container and set the height property as 40px, to maintain some space between all the four Group containers.
7. Create container form in all the four group containers by right clicking on the container name and bind the fields.
8. Click on context and select the node NODE_MARA from the context.
9. Main view will appear as below after creating container forms and binding the context node in all the four containers, as the default layout is Flow Layout.
10. Now leave the first container (FLOW) as it is and set the layout property of Row, Matrix and Grid group containers as Row layout, Matrix Layout and Grid Layout respectively and set the colcount property in Grid group Container as 2.
11. Now in the row group container, set the Layout Data property of all the labels as Row Head Data and all the input fields as Row Data.
12. Similarly in matrix group container, set the Layout Data property of all the labels as Matrix Head Data and all the input fields as Matrix Data.
13. Now in grid group container set the padding Top property of MTART input field as 20px.
14.Create the WebDynpro application and test it.
15. The screen will appear as below according to the layout settings done.
16. The differences in the vertical format between Row and Matrix layouts can be clearly observed and also the impact of padding Tip property set in Grid group container.