Inserting a RowHeaderStamp

Note: This procedure assumes inline data (as shown in the example at the end of this topic) has been inserted in the UIX file. The inline data named "demoTableData" provides the data for the rows and columns.

To insert a rowHeaderStamp:

In the Design Structure Window, expand the table node to locate the rowHeaderStamp named child node.
Right-click the rowHeaderStamp named child and choose Insert inside rowHeaderStamp | styledText to insert the preferred child. Otherwise, you can insert any component.
In the Property Inspector, change the value of the text attribute for styledText to the row header text.
Or,

Enter ${uix.current.headerText} where headerText is the key to the row header text, if the table rows are using inline data bound to the table as shown in the example.
Note: To use data binding, see Data Binding a Component Attribute.
To add an inline style for the row header, do the following:
1. In the UIX Visual Editor, select the styledText component for the column header.
2. In the Property Inspector, modify the inlineStyle attribute. In the right column, click the icon to open a dialog, then click New to enter the CSS property values. The property element defines a single name/value pair. The name is defined by the Name attribute, and the Value by the plain-text contents of the element. For example, you can enter 'color' for Name, and 'red' for Value. In the Advanced tab, you can enter an EL syntax data binding expression or use the Bind to Data dialog to select a data source for this complex attribute.

Example (UIX XML)


...
<provider>
  <data name="demoTableData">
    <inline>
      <!-- data for 4 rows -->
      <demoRowData firstColumnText="First row"
                   secondColumnText="First Button"
                   thirdColumnText="First col"
                   fourthColumnText="111"
                   isSelected="false"
                   isDisabled="true" />
      <demoRowData firstColumnText="Second row"
                   secondColumnText="Second Button"   
                   thirdColumnText="Second col"    
                   fourthColumnText="222"   
                   isSelected="true" /> 
      <demoRowData firstColumnText="Third row" 
                   secondColumnText="Third Button"         
                   thirdColumnText="Third col"  
                   fourthColumnText="333"    
                   isSelected="false" />  
      <demoRowData firstColumnText="4th row"   
                   secondColumnText="4th Button"   
                   thirdColumnText="4th row col"   
                   fourthColumnText="444"  
                   isSelected="false" /> 
      <!-- data for the row headers -->
      <demoRowHeaderData headerText="1"/> 
      <demoRowHeaderData headerText="2"/>
      <demoRowHeaderData headerText="3"/>
      <demoRowHeaderData headerText="4"/> 
      <!-- data for the 3 column headers -->
      <demoColHeaderData textKey="H1"/> 
      <demoColHeaderData textKey="H2"/>
      <demoColHeaderData textKey="H3"/>
      <demoColHeaderData textKey="H4"/>
      <!-- formatting information for the rows -->
      <demoRowFormats/>
      <demoRowFormats displayGrid="false"/>
      <demoRowFormats/>
      <demoRowFormats/> 
    </inline>
  </data>
</provider>
...
<contents>
  ...
  <table alternateText="No Items Found."
         blockSize="25"
         tableData="${uix.data.demoTableData.demoRowData}"
         columnHeaderData="${uix.data.demoTableData.demoColHeaderData}"
         rowHeaderData="${uix.data.demoTableData.demoRowHeaderData}">

    <!-- rowHeaderStamp for all table rows -->
    <rowHeaderStamp>
      <styledText text="${uix.current.headerText}"/>
    </rowHeaderStamp>

    <contents>
      <!-- table's indexed children are the columns -->
      <column>
        <!-- first column stamp -->
        <contents>
          <styledText text="${uix.current.firstColumnText}"/>
        </contents>
        <!-- first column header -->
        <columnHeader>
          <styledText text="${uix.current.textKey}">
            <inlineStyle>
              <property name="color">red</property>
            </inlineStyle>
          <styledText>
        </columnHeader>
      </column>

      <column>
        <!-- second column stamp -->
        <contents>
          <styledText text="${uix.current.secondColumnText}"/>
        </contents>
        <!-- second column header -->
        <columnHeader>
          <styledText text="${uix.current.textKey}"/>
        </columnHeader>
      </column>

      <column>
        <!-- third column stamp -->
        <contents>
          <styledText text="${uix.current.thirdColumnText}"/>
        </contents>
        <!-- third column header -->
        <columnHeader>
          <styledText text="${uix.current.textKey}"/>
        </columnHeader>
      </column>

      <column>
        <!-- column formatting -->
        <columnFormat columnDataFormat="numberFormat" 
                      width="45%"/>
        <!-- third column header -->
        <columnHeader>
          <styledText text="${uix.current.textKey}"/>
        </columnHeader>
        <!-- fourth column stamp -->
        <contents>
          <styledText text="${uix.current.fourthColumnText}"/>
        </contents>
      </column>
    </contents>
  </table>
</contents>
...