HTML page automation template examples

 

 

Example 1 - Editing an HTML Page Automation Template

The HTML below represents a master template that has been modified (note comment sections) to achieve various display results. Following this master template are additional examples in the form of partial templates. These partial templates would be additions or changes to the master template to achieve the specific effects described.

 

<HTML><body>

  <!-- For this template, assume Data Entry pages have 4 columns -|

  <table name="DataEntryPageWrapper">

    <span name="PageContentsContainer">

      

      <!--

        Note that all elements named "*Container" will be emptied!

        Their contents are kept (elsewhere) to define other nodes. You can define

        them inside the container for convenience, but it is not necessary to do so.

      -|

      <span name="DataEntryGroupWrapper">

         <!-- Let's put a horizontal rule at the top of every group.

              colspan is 4 so it will stretch across the all the Date Entry Field columns -|

         <tr><td colspan="4"><hr /></td></tr>

        <span name="LabelContainer">

          <tr name="DataEntryGroupLabel">

            <!-- colspan is 4 so it will stretch across the all the Date Entry Field columns -|

            <td colspan="4" name="LabelText" class="sectionLabel">

                Sample Data Entry Group Label

            </td>

          </tr>

        </span>   <!-- end DataEntryGroupWrapper.LabelContainer -|

       <span name="GroupContainer">

        <span name="DataEntryGroup"> <!-- RepeatElement defaults here -|

          <span name="DataContainer">

             <!-- Here defining the "normal" data entry field -|

            <tr name="DataEntryField">

              <td class="label"><span name="FieldLabel">Sample Field Label</span></td>

              <td><span name="FieldRequired">*</span></td>

              <td><span name="FieldElement">Sample Field Element</span></td>

              <td><span name="FieldValidationError">Sample Validation Error</span></td>

            </tr>

            

          </span> <!-- end DataEntryGroup.DataContainer -|

         </span>   <!-- end DataEntryGroup construct -|

       </span>   <!-- end DataEntryGroupWrapper.GroupContainer -|

      </span>     <!-- end DataEntryGroupWrapper construct -|

    </span>   <!-- end DataEntryPageWrapper.PageContentsContainer-|

  </table>     <!-- end DataEntryPageWrapper construct -|

  <!-- For this Display Page, let's plan to have a table tag as the wrapper, and

       the fields will all have just two columns, for label and data. -|

   <table name="DisplayPageWrapper">

     <!-- Let's put a horizontal rule at the top of every group.

          colspan is 4 so it will stretch across the all the Date Entry Field columns -|

     <tr><td colspan="4"><hr /></td></tr>

    <span name="PageContentsContainer">

      <span name="DisplayGroupWrapper">

      <span name="LabelContainer">

          <tr name="DisplayGroupLabel">

            <!-- colspan is 2 so it will stretch across the label and data columns -|

            <td colspan="2" name="LabelText" class="sectionLabel">

                Sample Display Group Label

            </td>

          </tr>

        </span>   <!-- end DisplayGroupWrapper.LabelContainer -|

       <span name="GroupContainer">

         <span name="DisplayGroup">

          <tr><td colspan="2"><hr /></td></tr>

          <span name="DataContainer">

             <!-- Here defining the "normal" display field -|

            <tr name="DisplayField">

              <td class="label"><span name="FieldLabel">Sample Field Label</span></td>

              <td><span name="FieldElement" >Sample Field Data</span></td>

            </tr>

            

          </span> <!-- end DisplayGroup.DataContainer -|

         </span>   <!-- end DisplayGroup construct -|

       </span>   <!-- end DisplayGroupWrapper.GroupContainer -|

     </span>     <!-- end DisplayGroupWrapper construct -|

     

<!-- while we are still inside the DisplayPageWrapper.PageContentsContainer, let s

       go ahead and define the TableWrapper construct, as well. Remember that it

       might have to live inside either a DisplayGroupWrapper OR a

       DataEntryGroupWrapper. Note that both of those are TABLE tags, with either

       2 or 4 columns expected. -|

   <span name="TableWrapper">

    <span name="LabelContainer">

      <tr name="TableLabel">

        <td colspan="4" name="LabelText" class="sectionLabel">Sample Table Label</td>

      </tr>

    </span>   <!-- end TableWrapper.LabelContainer -|

     <tr><td colspan="4">    <!-- to fit inside Data Entry Page Wrapper -|

       <span name="GroupContainer">    <!start of   TableWrapper.GroupContainer -|

        

         <table name="Table" class="myTableClass">

          <tr name="TableHeaderContainer">

            

            <th name="ColumnHeader" align="left" class="label">

              <span name="HeaderElement">Sample Header</span>

            </th>

            <th name="ColumnHeaderSorted" align="left" class="label">

              <a name="HeaderElement" class="labelSortLink">Sample Header 2</a>

            </th>

          </tr>   <!-- end Table.TableHeaderContainer -|

          <tr name="RepeatElement">

              

              <td name="ColumnData" align="left" class="myColumnData">

                <span name="DataElement" >Sample Data</span>

              </td>

          </tr>        <!-- end Table.RepeatElement -|

         </table> <!-- end Table construct -|

       </span>   <!-- end TableWrapper.GroupContainer -|

      </td></tr>

     </span>   <!-- end TableWrapper construct -|

   </span>   <!-- end DisplayPageWrapper.DataContainer -|

</table>     <!-- end DisplayPageWrapper construct -|

</body></HTML>

 

 

Example 2 - Adding Spacer Rows to a Table

By changing only the template, we can add spacer rows anywhere in a table: before the header, between the header and the data, before or after each data row, and after the entire table. This example has far too many spacer rows. Notice that it uses a Construct Name Qualifier of "ByName_PhoneNumber" so that this construct will only apply to a Container with the name "PhoneNumber."

The important step for adding spacer rows before and after the data rows was to separate the RepeatElement from the DataContainer. In the basic template, the DataContainer element of the Table construct was not specified, so it defaulted to the same XML node as the RepeatElement. In this example, we want to repeat more than just the data row, we want to repeat around a section that includes the data row and the spacer rows. This is accomplished by adding a <span> tag which acts as the repeat element, and adding the <tr> for the DataContainer within it.

Note that all of the Containers are left empty. This is because this overrides only the Table construct, and the system will continue to use the ColumnHeader and ColumnData constructs that are already defined in the template. The (rather hideous) result of this addition to the basic template is beside it.

 

<table name="TableByName_PhoneNumber">

    <tr><td colspan="100">

         --- spacer row above header ---

    </td></tr>

    <tr name="TableHeaderContainer"></tr>

    <tr><td colspan="100">

         --- spacer row below header ---

    </td></tr>

    <span name="RepeatElement">

        <tr><td colspan="100">

             --- spacer row above each data row ---

        </td></tr>

        <tr name="DataContainer"></tr>

        <tr><td colspan="100">

             --- spacer row below each data row ---

        </td></tr>

    </span>     <!-- end Table.RepeatElement -|

    <tr><td colspan="100">

         --- spacer row below entire table ---

    </td></tr>

</table> <!-- end Table construct -|

 

Example 3 - Changing Page Layout Based on Control Type

Often you will want to change the layout for a field based on the control type. The most common situation is that you want any field which is edited using a textarea get the entire width of the screen for the textarea, even though the other fields are using only the right-hand portion for their edit devices.

With the following change to the basic template, plus a Data Field Modifier builder on the "Comments" section which tells it to use a textarea for editing, we get the desired results. For comparison, the normal Data Entry Field construct is shown here along with the qualified one.

 

<tr name="DataEntryField">

              <td class="label"><span name="FieldLabel">Sample Field Label</span></td>

              <td><span name="FieldRequired">*</span></td>

              <td><span name="FieldElement">Sample Field Element</span></td>

              <td><span name="FieldValidationError">Sample Validation Error</span></td>

            </tr>

            

            <span name="DataEntryField_textarea">

              <tr>

                <td class="label"><span name="FieldLabel">Sample Field Label</span></td>

                <td><span name="FieldRequired">*</span></td>

                <td></td> <!-- Leave empty so Validation column lines up. -|

                <td><span name="FieldValidationError">Sample Validation Error</span></td>

              </tr>

              <tr><td colspan="4">

                  <textarea name="FieldElement" cols="40" rows="10"></textarea>

              </td></tr>

            </span>