How to use layouts
How to make a container with a scroll bar
To make a container with a scroll bar, you need to set an height on the container that is smaller than the height of its content.
This can be done using the layout:height. This can either be a fixed height (500 for example) or fill. However this cannot be auto because it sets the height of the container to the same height as its content.
Note
The same principles apply for the width and horizontal scroll bar.
Vertical scroll bar
<vertical-layout layout:height="fill"> <!-- Main container of the UI view, takes all the height of the web browser -->
<heading>My title</heading> <!-- Always displayed above the container with scroll -->
<vertical-layout layout:height="fill" layout:padding="medium" style:border-color="red"> <!-- Container with scroll, takes all the height between the <heading> and the <button> -->
<vertical-layout layout:height="750" style:border-color="blue">
<text>My content</text>
</vertical-layout>
<vertical-layout layout:height="750" style:border-color="blue">
<text>My content</text>
</vertical-layout>
</vertical-layout>
<button type="save" /> <!-- Always displayed under the container with scroll -->
</vertical-layout>
Horizontal scroll bar
<horizontal-layout wrap="false"> <!-- Main container of the UI view, takes all the width of the web browser -->
<heading>My title</heading> <!-- Always displayed at the left of the container with scroll -->
<horizontal-layout layout:width="fill" wrap="false" layout:padding="medium" style:border-color="red"> <!-- Container with scroll, takes all the width between the <heading> and the <button> -->
<horizontal-layout layout:width="1200" style:border-color="blue">
<text>My content</text>
</horizontal-layout>
<horizontal-layout layout:width="1200" style:border-color="blue">
<text>My content</text>
</horizontal-layout>
</horizontal-layout>
<button type="save" /> <!-- Always displayed at the right of the container with scroll -->
</horizontal-layout>
How to make a standard layout for list UI views
Generally, in list UI views, we align the quick-search horizontally with the toolbar, then below it, we display the editable-chips filter bar.
<vertical-layout layout:height="fill">
<horizontal-layout align="right" vertical-align="center">
<quick-search label-position="hidden" layout:width="fill" />
<toolbar layout:width="auto" />
</horizontal-layout>
<filter-bar display-mode="editable-chips" />
<datagrid layout:height="fill" />
</vertical-layout>
How to control the current page and tabs visibility in the Tabs component
To control the layout of the page with the Tabs component, you can use the selected-index attribute to set the default tab to display and the visible attribute to show or hide a tab.
In the following example, the selected-index attribute is bound to the TabIndex field and the visible attribute is bound to the Tab1Visible and Tab2Visible fields.
<vertical-layout>
<tabs selected-index="@Fields.TabIndex">
<tab-item caption="@Resources.Core.Tab1" visible="@Fields.Tab1Visible">
<text>
Tab 1
</text>
</tab-item>
<tab-item caption="@Resources.Core.Tab2" visible="@Fields.Tab2Visible">
<text>
Tab 2
</text>
</tab-item>
</tabs>
</vertical-layout>
How to make a layout with a groupbox
The groupbox component is a container that can be used to group a set of form fields or other components. It can be used to visually separate a set of form fields or other components from the rest of the form. The expandable attribute is used to make the groupbox expandable or not, and the extended attribute is used to set the state of the groupbox.
<vertical-layout>
<group-box expandable="true" expanded="false">
<group-box-header>
<text>Heading</text>
</group-box-header>
<group-box-content>
<datagrid />
</group-box-content>
</group-box>
<group-box>
<group-box-header>
<text>The header caption</text>
</group-box-header>
<group-box-content>
<form-field property-name="Id" />
<form-field property-name="Name" />
<form-field property-name="City" />
</group-box-content>
</group-box>
</vertical-layout>
How to display part of the UI view in a modal window
The modal component is used to display part of the UI view in a modal window. The modal window is displayed when the is-open attribute is set to true and is closed when the is-open attribute is set to false.
<modal is-open="@Fields.DisplayModal" dismissible="true">
<!-- modal-header is optional -->
<modal-header>
<heading level="1">A title</heading>
</modal-header>
<modal-body>
<text>
@DatasourceCurrent.MyProperty
</text>
</modal-body>
<!-- modal-footer is optional and typically contains button for validating / closing the modal -->
<modal-footer>
<horizontal-layout align="center">
<button type="action" action-name="Accept"/>
<button type="action" action-name="Close"/>
</horizontal-layout>
</modal-footer>
</modal>
How to make a responsive layout
<vertical-layout>
<message severity="info">
<text>
@Resources.UIViews.ResponsiveDescription
</text>
</message>
<checkbox display-mode="horizontal-radio" value="@Fields.UseUIComponent" required="true" false-label="@Resources.UIViews.InUIViewTemplate" true-label="@Resources.UIViews.WithUIComponent" />
<if condition="@Fields.UseUIComponent">
<time-line items="@Datasource"></time-line>
</if>
<else>
<vertical-layout align="center">
<if condition="@Viewport.IsWidthAtLeastMedium">
<text automation:id="breakpoint_title_large" size="extralarge" weight="strong">
@Resources.UIViews.LargeScreen
</text>
</if>
<if-not condition="@Computeds.IsSmallViewport">
<horizontal-layout space="none">
<repeat values="@Datasource">
<grid-layout>
<grid-layout-definition gap="none">
<grid-layout-rows>
<grid-layout-row />
<grid-layout-row height="40" />
<grid-layout-row />
</grid-layout-rows>
<grid-layout-columns>
<grid-layout-column />
<grid-layout-column width="fit" />
<grid-layout-column />
</grid-layout-columns>
</grid-layout-definition>
<grid-layout-content>
<text layout:margin="none large none large" grid:colspan="3">
$Item.Date
</text>
<if condition="$Item.IsNotFirst">
<horizontal-layout layout:height="4" layout:margin="large none none none" style:background="neutral-400"></horizontal-layout>
</if>
<else>
<horizontal-layout></horizontal-layout>
</else>
<horizontal-layout vertical-align="center">
<image name="Point" />
</horizontal-layout>
<if condition="$Item.IsNotLast">
<horizontal-layout layout:height="4" layout:margin="large none none none" style:background="neutral-400"></horizontal-layout>
</if>
<text layout:margin="none large none large" grid:colspan="3">
$Item.Event
</text>
</grid-layout-content>
</grid-layout>
</repeat>
</horizontal-layout>
</if-not>
<else>
<text automation:id="breakpoint_title_small" size="extralarge" weight="strong">
@Resources.UIViews.SmallScreen
</text>
<vertical-layout>
<grid-layout>
<grid-layout-definition gap="none">
<grid-layout-rows>
<grid-layout-row height="fit" />
</grid-layout-rows>
<grid-layout-columns>
<grid-layout-column width="fit" />
<grid-layout-column width="fit" />
<grid-layout-column />
</grid-layout-columns>
</grid-layout-definition>
<grid-layout-content>
<repeat values="@Datasource">
<text layout:margin="none large none large">
$Item.Date
</text>
<image name="Point" />
<text layout:margin="none large none large">
$Item.Event
</text>
<vertical-layout />
<if condition="$Item.IsNotLast">
<horizontal-layout align="center">
<vertical-layout layout:height="40" layout:width="4" style:background="neutral-400"></vertical-layout>
</horizontal-layout>
</if>
<vertical-layout />
</repeat>
</grid-layout-content>
</grid-layout>
</vertical-layout>
</else>
</vertical-layout>
</else>
</vertical-layout>
The IsSmallViewport computed is defined in the UI view as the following:
return Window.Current.Viewport.IsWidthBelowSmall;
How to make a master-detail layout with data grid to display detail collections
In this example, the master UI view contains 2 sub views with the relation property name UserTenantList and DataPersistenceList.
The context component is used to change the binding context of the components inside it. The datasource is the property UserTenantList and DataPersistenceList of the current item of the datasource of the parent context.
Inside the context component, the view model is changed to the sub view model of the property UserTenantList and DataPersistenceList. So inside the context component the name starts with @ are the properties of the sub view model.
<!-- A template with a grid layout component with 2 columns and a row -->
<grid-layout layout:height="fill">
<grid-layout-definition>
<grid-layout-rows>
<grid-layout-row />
</grid-layout-rows>
<grid-layout-columns>
<!-- The width of the column is the width of its contents -->
<grid-layout-column width="fit" />
<!-- The width of th column is the remaining available width in the grid layout -->
<grid-layout-column width="*" />
</grid-layout-columns>
</grid-layout-definition>
<grid-layout-content>
<card layout:height="fill">
<vertical-layout layout:height="fill" layout:padding="small">
<form-field property-name="Identifier" />
<form-field property-name="Name" />
<form-field property-name="Environment" />
<form-field property-name="CurrentState" />
</vertical-layout>
</card>
<card layout:height="fill">
<!-- Tabs to separate child collections in isolated pages -->
<tabs>
<tab-item caption="@Resources.Tenants.AuthorizedUsers">
<!-- Detail : UserTenantList-->
<context relation-property-name="UserTenantList">
<vertical-layout layout:height="fill" layout:padding="small">
<toolbar automation:id="user-tenant-list-toolbar" clone="true" />
<datagrid automation:id="user-tenant-list-grid" layout:height="fill" editable="true" />
</vertical-layout>
</context>
</tab-item>
<tab-item caption="@Resources.Tenants.ClusterDataLocations">
<!-- Detail : DataPersistenceList-->
<context relation-property-name="DataPersistenceList">
<vertical-layout layout:height="fill" layout:padding="small">
<toolbar clone="true" />
<datagrid layout:height="fill" editable="true" />
</vertical-layout>
</context>
</tab-item>
</tabs>
</card>
</grid-layout-content>
</grid-layout>
How to make a master-detail layout with <repeat> components to display detail collections
You can use the <repeat> component to display all elements of the master datasource and another repeat component to display the details of the current element.
<vertical-layout layout:height="fill">
<!--
<repeat> for the main datasource
@Datasource refers to the datasource of the main UI view.
-->
<repeat values="@Datasource">
<vertical-layout layout:margin="small" style:border-color="foreground">
<text>$Item.Name</text>
</vertical-layout>
</repeat>
<!--
<context> to change the datasource on which the template placed inside inside of it will use.
DetailEntityList is the sub-view that represents the list of details of the current element of the main UI view.
-->
<context relation-property-name="DetailEntityList">
<!--
<repeat> for the details of the current main datasource item.
@Datasource refers the datasource of the context which is the list of details of the current element of the main UI view.
-->
<repeat values="@Datasource">
<vertical-layout layout:margin="small" style:border-color="foreground">
<text>$Item.Name</text>
</vertical-layout>
</repeat>
</context>
</vertical-layout>
How to make a master-detail layout with a splitter
This template displays a master-detail view with a splitter component.
- The UI view contains a subview whose relationship property name is
DetailList. - The
DetailListproperty of the main UI views is a detail list. - The template has two vertical panels.
- The left panel displays the main entity and is divided into two horizontal panels.
- The top panel has a toolbar, a data grid, and a pagination bar.
- The bottom panel is a form that displays the current data grid row.
- The right panel displays the detail entity.
<vertical-layout layout:height="fill">
<!-- By default the orientation of the splitter is horizontal -->
<splitter>
<splitter-panel>
<toolbar clone="true" />
<datagrid />
<pagination-bar />
</splitter-panel>
<splitter-panel>
<vertical-layout layout:padding="small">
<form-field property-name="Name" />
<form-field property-name="StringProperty" />
</vertical-layout>
</splitter-panel>
</splitter>
<context relation-property-name="DetailList">
<splitter>
<splitter-panel>
<toolbar clone="true" />
<datagrid />
<pagination-bar />
</splitter-panel>
<splitter-panel>
<vertical-layout layout:padding="small">
<form-field property-name="DetailId" />
</vertical-layout>
</splitter-panel>
</splitter>
</context>
</vertical-layout>