Developer

Tile Layouts

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 Layouts

<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>