Using CellFormat Around RowLayout Child Components

To specify additional formatting for cell contents using cellFormat:

In the Design Structure Window of the desired file, locate the rowLayout node in which you wish to insert child components.
In the Component Palette, select Layout Components from the dropdown list, and then drag and drop the cellFormat component to the rowLayout node.
The cellFormat node is inserted and highlighted under the expanded rowLayout node.
Drag and drop a component from the Component Palette to the cellFormat node.
The child component is inserted and highlighted under the expanded cellFormat node.
To set formatting attributes for a child component in a cell, do the following:
1. In the Design Structure Window, select the cellFormat node.
2. In the Property Inspector, set the following attributes for the cell:
  - columnSpan - Enter the number of cells the child layout element will span horizontally.
  - headers - Indicates which table cells are the headers for this cell. This attribute is used by screen readers to associate header information with data cells. This must be set to a space-separated list of IDs. Each ID must be the ID of a pertinent header cell.
  - height - Enter the preferred height of the enclosed layout elements.
  - hAlign - Enter the default horizontal alignment of the grid row elements. The options are center, left, right, start, and end.
  - rowSpan - Enter the number of cells the child layout element will span vertically.
  - shortText - Enter the abbreviated form of the cell's content. Abbreviated names should be short since user agents may render them repeatedly (especially if this cell is a header cell).
  - vAlign - Enter the default vertical alignment of the grid row elements. The options are middle, top, and bottom.
  - width - Enter the preferred width of the enclosed layout elements.
  - wrappingDisabled - Enter true to disable automatic text wrapping for this cell.
Repeat steps 2 to 4 to add additional formatted child components.

Note: To use data binding, see Data Binding a Component Attribute.

Example (UIX XML)


...
<pageLayout>
  
  <!-- Insert cellFormat around child components -->
  
  <contents>
    <header text="Example">
      <contents>
        <rowLayout hAlign=right">
          <contents>
            First Column
            <cellFormat vAlign="bottom">
              <contents>
                Second Column
              </contents>
            </cellFormat>
            <flowLayout>
              <contents>
                Third Column
                <spacer height="100" width="1"/>
              </contents>
            </flowLayout>
          </contents>
        </rowLayout>
       <rowLayout>
         <contents>
           <header text="Second Row"/>
           <cellFormat columnSpan="2">
             <contents>
               <header text="Column Span Two"/>
             </contents>
           </cellFormat>
         </contents>
       </rowLayout>
       <rowLayout>
         <contents>
           <cellFormat columnSpan="2" hAlign="right">
             <contents>
               <text text="Right Aligned Text and Column Span Two"/>
             </contents>
           </cellFormat>
           <text text="Third Column">
         </contents>
       </rowLayout> 
     </contents>
   </header>
 </contents>
  
 <!-- REST OF PAGE LAYOUT -->
  
</pageLayout>
...