The framework enables you to build complex metadata-driven UIs.
The following configuration example describes the tile’s layout as presented in this
picture:
<Tile tileId="leave_request_list">
<P pid="title" value="{$_i18n.leaverequests}" />
<P pid="imageSrc" value="{$_resource.lr_tab_icon}" />
<Event ...
</Event>
<BindingRef ref="filtered_leave_requests">
<P pid="forceReload" value="{$_context.forceReloadLeaveRequests}" />
</BindingRef>
<LinearContainer layout="vertical">
<P pid="width" value="100%" />
<LinearContainer layout="vertical">
<P pid="width" value="100%" />
<UIElement type="label">
<P pid="text" value="{$_i18n.since} {$_format.date($_now('-744'),'short')}" />
<P pid="width" value="100%" />
<P pid="padding_vertical" value="2" />
<P pid="padding_horizontal" value="5" />
<P pid="style" value="bg_title" />
</UIElement>
</LinearContainer>
<ListContainer>
<P pid="width" value="100%" />
<ListSection>
<ListItem feed="filtered_leave_requests">
<Event ...
</Event>
<LinearContainer layout="horizontal">
<P pid="width" value="100%" />
<P pid="halign" value="left" />
<P pid="valign" value="center" />
<P pid="padding" value="0" />
<LinearContainer layout="horizontal">
<P pid="width" value="100%" />
<P pid="halign" value="left" />
<P pid="valign" value="center" />
<P pid="padding" value="0" />
<LinearContainer>
<P pid="width" value="20%" />
<P pid="height" value="100" />
<P pid="halign" value="center" />
<P pid="valign" value="center" />
<P pid="padding" value="0" />
<UIElement type="image">
<P pid="imageSrc"
value="{$filtered_leave_requests.$_selected.AbsenceTypeIcon}" />
<P pid="scaleType" value="fit_center" />
<P pid="height" value="75" />
<P pid="width" value="75" />
</UIElement>
</LinearContainer>
<LinearContainer layout="vertical">
<P pid="width" value="80%" />
<P pid="padding_horizontal" value="5" />
<P pid="padding_vertical" value="2" />
<UIElement type="label">
<P pid="text" value="{$_format.date($filtered_leave_requests.$_selected.StartDate,'short')} - {$_format.date($filtered_leave_requests.$_selected.EndDate,'short')}" />
<P pid="width" value="100%" />
<P pid="halign" value="left" />
<P pid="style" value="bold_title" />
</UIElement>
<UIElement type="label">
<P pid="text"
value="{$filtered_leave_requests.$_selected.WorkingDaysDuration}" />
<P pid="width" value="100%" />
<P pid="halign" value="left" />
<P pid="style" value="highlighted" />
</UIElement>
<LinearContainer layout="horizontal">
<P pid="width" value="100%" />
<P pid="valign" value="center" />
<UIElement type="label">
<P pid="text"
value="{$filtered_leave_requests.$_selected.AbsenceTypeName}" />
<P pid="width" value="50%" />
<P pid="halign" value="left" />
<P pid="valign" value="center" />
</UIElement>
<UIElement type="label">
<P pid="text" value="{$filtered_leave_requests.$_selected.StatusName}" />
<P pid="width" value="50%" />
<P pid="halign" value="right" />
<P pid="valign" value="center" />
</UIElement>
</LinearContainer>
</LinearContainer>
</LinearContainer>
</LinearContainer>
</ListItem>
</ListSection>
</ListContainer>
</LinearContainer>
</Tile>