V GANGIREDDY SAPUI5_On_BTP Linkedin

Layouts: Layouts refer to the arrangement of UI elements in a specific order. SAP UI5 provides
various types of layouts.

Form Layouts

1. Grid Layout

2. Simple Form

3. Panel

4. VBox

5. HBox

6. FlexBox

7. ObjectHeader

8. IconTabBar

Grid Layout and Simple Form are primarily used for designing forms. These are the most
powerful layouts for form design.

Descriptions of Layouts:

● Panel:
A container used to group other controls. It can include a header (title) and can be
collapsible.

● VBox:
A vertical layout container. It arranges child elements from top to bottom.

● HBox:
A horizontal layout container. It arranges child elements from left to right.

● FlexBox:
A flexible layout container that can arrange elements both vertically and horizontally. It
provides advanced options for alignment and spacing.

● Grid Layout:
The screen is divided into 12 equal parts (columns). Each part is referred to as a "grid." It
is present in the “[Link]. LAYOUT” library. We need to add it in the view.
Grid Layout supports various field arrangements such as:

● 1 field per row

vgangireddy09@[Link] 1
V GANGIREDDY SAPUI5_On_BTP Linkedin

● 2 fields per row: When there are two fields in a row, we assign 3 grids to each
UI element — 3 grids each for the two labels and the two input boxes.

● 4 fields per row

Grid Layouts:

CASE 1 (1 field per row):

When there is one field per row, we typically assign 6 grids to each UI element — 6 grids for the
label and 6 grids for the input box. In the diagram below, the total display is divided into 12
equal parts, with each part representing 1 grid. We allocate 6 grids to the label and 6 grids to
the input box, together occupying the full row.

STEP 1: In this scenario, we are using the second view to include all the UI elements within a
single application. The goal is to cover all UI-related topics in one place, making it easier for
anyone to understand and learn from the application.

[Link]: The code in [Link] has been updated as shown in the image below.
The [Link] library is added and assigned the alias l. The Grid layout is part of the
[Link] library.

The property defaultSpan="L6 M6" is used to define how many grid columns each element
should span:

● L6 specifies that the element spans 6 columns on large devices

● M6 specifies that it spans 6 columns on mobile devices

All fields must be placed inside the content area of the Grid to be displayed correctly within the
layout.

vgangireddy09@[Link] 2
V GANGIREDDY SAPUI5_On_BTP Linkedin

[Link]: There are no code changes in the [Link] file.

vgangireddy09@[Link] 3
V GANGIREDDY SAPUI5_On_BTP Linkedin

STEP 2: To run the application, right-click on "Webapp" and select "Preview Application".

STEP 3: Choose the “start-noflp”

vgangireddy09@[Link] 4
V GANGIREDDY SAPUI5_On_BTP Linkedin

STEP 4: Since the grid layout is not present on the first page, click the "Go to 2nd page" button
to view the grid layout.

STEP 5: On the second page, the grid content can be seen as shown in the image below.

vgangireddy09@[Link] 5
V GANGIREDDY SAPUI5_On_BTP Linkedin

CASE 2:

In the image above, the distance between the input fields is too large, so set vSpacing="0" on
the Grid to remove the extra vertical spacing.

STEP 1: In the [Link] file, set the vSpacing="0" property inside the <l:Grid> tag to
remove the space between the input fields, as shown below.

STEP 2: Rerun the application, go to the second page, and you will see the content displayed as
shown in the image below.

vgangireddy09@[Link] 6
V GANGIREDDY SAPUI5_On_BTP Linkedin

CASE 3:

In the image above, there is another issue: the label and input box are too close to the header.
To improve the layout and provide better structure, we can use a container layout called a
Panel. By placing the grid layout inside the panel and adding a header to the panel, we can
create a cleaner look with proper spacing and a clear section title.
STEP 1: Update the code in the [Link] file by placing the Grid layout inside a Panel.
The Panel has a property called headerText, which allows us to display a header above the
content.

vgangireddy09@[Link] 7
V GANGIREDDY SAPUI5_On_BTP Linkedin

STEP 2: Rerun the application, go to the second page, and you will see the content displayed as
shown in the image below.

CASE 4:

The Panel has a property called expandable. When expandable is set to true, the panel can be
expanded or collapsed by clicking the toggle button. This feature is useful when working with
forms that have multiple sections.
STEP 1: Update the code in the [Link] file by setting the expandable property of the
Panel to true, as shown in the image below.

vgangireddy09@[Link] 8
V GANGIREDDY SAPUI5_On_BTP Linkedin

STEP 2: Rerun the application, go to the second page, and you will see that the employee
details are hidden by default. The details will be displayed only when you click the highlighted
toggle button, as shown in the image below.

vgangireddy09@[Link] 9
V GANGIREDDY SAPUI5_On_BTP Linkedin

CASE 5:

When the application runs, one section should be expanded by default, and all others should be
collapsed. The first section will be expanded by default (with the expanded="true" property),
while the second section will be collapsed initially. The second section can be opened by
clicking on the toggle button, as the expandable="true" property allows it to be expanded and
collapsed.

STEP 1: Earlier, there was only one section in the [Link]. The code has now been
updated to include a second section, as shown below.

vgangireddy09@[Link] 10
V GANGIREDDY SAPUI5_On_BTP Linkedin

STEP 2: Rerun the application, go to the second page, and the employee details will be
expanded by default, while the family details will be hidden initially. The family details will be
displayed only when the highlighted toggle button is clicked, as shown in the image below.

vgangireddy09@[Link] 11
V GANGIREDDY SAPUI5_On_BTP Linkedin

CASE 6 (2 fields per row):

For this scenario, the change is applied to the family details section only.
The property defaultSpan="L3 M3" is used to define how many grid columns each element
should span:

● L3 specifies that the element spans 3 columns on large devices.

● M3 specifies that it spans 3 columns on mobile devices.

STEP 1: Update the property defaultSpan="L3 M3" for the family details panel in the
[Link] file.

vgangireddy09@[Link] 12
V GANGIREDDY SAPUI5_On_BTP Linkedin

vgangireddy09@[Link] 13
V GANGIREDDY SAPUI5_On_BTP Linkedin

STEP 2: Rerun the application, go to the second page, and the employee details will display one
field per row by default. The family details will be hidden initially. The family details will be
displayed in 2 fields per row only when the highlighted toggle button is clicked, as shown in the
image below.

vgangireddy09@[Link] 14
V GANGIREDDY SAPUI5_On_BTP Linkedin

CASE 7:

In the above picture, there is an issue: the labels are not properly aligned with the input boxes.
This can be achieved by using margin classes to ensure proper alignment. By adding
class="sapUiTinyMarginTop", proper alignment can be achieved.

STEP 1: Update the class property to "sapUiTinyMarginTop" for the labels in the [Link]
file.

vgangireddy09@[Link] 15
V GANGIREDDY SAPUI5_On_BTP Linkedin

STEP 2: Rerun the application, go to the second page. The employee details section will display
one field per row by default, and the family details section will be hidden initially. The
class="sapUiTinyMarginTop" property has been applied to the labels in both sections to
improve alignment with the input fields. The family details will be displayed in two fields per
row only when the highlighted toggle button is clicked, as shown in the image below.

vgangireddy09@[Link] 16
V GANGIREDDY SAPUI5_On_BTP Linkedin

CASE 8 (3 fields per row):

For this scenario, another section is needed — the Personal Details section.
The property defaultSpan="L2 M2" is used to define how many grid columns each element
should span:
● L2 specifies that the element spans 2 columns on large devices.
● M2 specifies that it spans 2 columns on mobile devices.

STEP 1: Update the [Link] file by adding the Personal Details section. The property
defaultSpan="L2 M2" will ensure that three fields are displayed per row.

vgangireddy09@[Link] 17
V GANGIREDDY SAPUI5_On_BTP Linkedin

vgangireddy09@[Link] 18
V GANGIREDDY SAPUI5_On_BTP Linkedin

STEP 2: Rerun the application, go to the second page. The Employee Details section will display
one field per row by default. The Family Details section will be hidden initially and will display
two fields per row only when the highlighted toggle button is clicked. Similarly, the Personal
Details section will also be hidden by default and will display three fields per row, using the
defaultSpan="L2 M2" setting, when its toggle button is clicked — as shown in the image below.

vgangireddy09@[Link] 19
V GANGIREDDY SAPUI5_On_BTP Linkedin

CASE 8 (Zigzag Design):

For this scenario, we need to arrange fields in a zigzag manner where fields are aligned
alternately in rows. The Zigzag Design ensures that the UI is visually more dynamic, with some
fields on the left and others on the right, within the same row. This pattern helps to break up
the monotony of having all fields aligned in a single straight line.

Explanation for Zigzag Design:

1. Grid Layout Setup: We use the l:Grid layout to create a flexible grid where each field can
be placed in a column.

o The defaultSpan="L12 M12" ensures that on large and mobile devices, the grid
will take up 12 columns in total, thus taking the entire width of the screen.

2. Zigzag Design with span="L3 M3" and span="L6 M6":

o The span="L3 M3" property is used for the smaller fields, making them take up 3
columns on large devices and mobile devices.

o The span="L6 M6" property makes certain fields take up 6 columns on large and
mobile devices, aligning them in a way that the layout alternates.

3. Zigzag Alignment: Fields are placed in such a way that they alternate between spanning
3 columns and 6 columns. The alignment of these fields alternates between left and
right, creating a zigzag pattern.

vgangireddy09@[Link] 20
V GANGIREDDY SAPUI5_On_BTP Linkedin

4. Using layout Data with l:GridData: The l:GridData inside the layoutData of each Label
and Input ensures that each field follows the defined span, and is placed properly within
the grid.

STEP 1: To Implement Zigzag Design for Employee Details:

● The first field (Salary) takes up 6 columns on both large and mobile screens, thus
occupying half the available width.

● The second field (Technology) spans 3 columns, which will be aligned on the left.

● The next field (Date of Joining) spans 3 columns, aligning it on the right side of the same
row.

● The process continues for the remaining fields (Previous Company, Role, and Hike),
where each is alternatively aligned using span="L2 M2", which ensures they are evenly
distributed within the grid.

vgangireddy09@[Link] 21
V GANGIREDDY SAPUI5_On_BTP Linkedin

vgangireddy09@[Link] 22
V GANGIREDDY SAPUI5_On_BTP Linkedin

vgangireddy09@[Link] 23
V GANGIREDDY SAPUI5_On_BTP Linkedin

STEP 2: Rerun the application and navigate to the second page. By default, the Employee
Details section displays one field per row. The Family Details section is initially hidden and will
display two fields per row when its corresponding toggle button is clicked. Similarly, the
Personal Details section is also hidden by default and will display three fields per row upon
toggling. Additionally, another Employee Details section is hidden initially and will appear in a
zigzag layout when its toggle button is clicked, as illustrated in the image below.

vgangireddy09@[Link] 24
V GANGIREDDY SAPUI5_On_BTP Linkedin

vgangireddy09@[Link] 25