bbui-forms-tabs-main

Tabs are defined on the spec. But field placement is defined with a UI Model. Defining tabs on the spec provides server-side access to the tabs and enables localization of the captions. For example the following FormMetaData element defines two tabs for the form: TABX and TABY.

FormMetaData Element from Spec

  <common:FormMetaData>

    <common:FormFields>

      <common:FormField FieldID="FIELD1" Caption="Field 1" DataType="String" MaxLength="10" />
      <common:FormField FieldID="FIELD2" Caption="Field 2" DataType="String" MaxLength="20" />
      <common:FormField FieldID="FIELD3" Caption="Field 3" DataType="String" />
    </common:FormFields>

    <common:WebUIComponent>
      <common:UIModel AssemblyName="Blackbaud.CustomFx.BBUIExamples.UIModel.dll" ClassName="Blackbaud.CustomFx.BBUIExamples.UIModel.BbuiTabTestAddDataFormUIModel" />
      <common:WebUI>
        <common:ExternalResource Url="browser/htmlforms/BbuiTabTestAddDataForm.html" />
      </common:WebUI>
    </common:WebUIComponent>

    <common:Tabs>
      <common:Tab Caption="X" ID="TABX" />
      <common:Tab Caption="Y" ID="TABY" />
    </common:Tabs>

  </common:FormMetaData>

However there is no specification about how to arrange the fields. Without a UI Model to define the location of fields, the platform will render the tabs but the fields will be placed outside of the tabs.

Once a UI Model is generated, the elements that map to the fields can be placed in the DIV elements that map to the tabs. Without adjustment, the fields are still placed outside of the tabs.

Generated UI Model HTML

<div id="#MAP#BbuiTabTestAddDataForm">
    <h2 id="#MAP#FORMHEADER_value"></h2>
    <div class="bbui-forms-tabs-main">
        <div id="#MAP#TABX_caption"></div>
        <div id="#MAP#TABY_caption"></div>
    </div>
    <table>
        <tr id="#MAP#FIELD1_container">
            <td>
                <label id="#MAP#FIELD1_caption" for="#MAP#FIELD1_value"></label>
            </td>
            <td>
                <input id="#MAP#FIELD1_value" type="text" />
            </td>
        </tr>
        <tr id="#MAP#FIELD2_container">
            <td>
                <label id="#MAP#FIELD2_caption" for="#MAP#FIELD2_value"></label>
            </td>
            <td>
                <input id="#MAP#FIELD2_value" type="text" />
            </td>
        </tr>
        <tr id="#MAP#FIELD3_container">
            <td>
                <label id="#MAP#FIELD3_caption" for="#MAP#FIELD3_value"></label>
            </td>
            <td>
                <input id="#MAP#FIELD3_value" type="text" />
            </td>
        </tr>
    </table>
    <!-- To define fields in multiple columns on the form, simply add/move the fields to this div
        <div class="bbui-forms-fieldset-column">
            <table>
            </table>
        </div>
        -->
</div>

Once adjusted, the fields are now rendered within the tabs.

Adjusted UI Model HTML

<div id="#MAP#BbuiTabTestAddDataForm">
    <h2 id="#MAP#FORMHEADER_value"></h2>
    <div class="bbui-forms-tabs-main">
        <div id="#MAP#TABX_caption">
            <table>
                <tr id="#MAP#FIELD1_container">
                    <td>
                        <label id="#MAP#FIELD1_caption" for="#MAP#FIELD1_value"></label>
                    </td>
                    <td>
                        <input id="#MAP#FIELD1_value" type="text" />
                    </td>
                </tr>
                <tr id="#MAP#FIELD2_container">
                    <td>
                        <label id="#MAP#FIELD2_caption" for="#MAP#FIELD2_value"></label>
                    </td>
                    <td>
                        <input id="#MAP#FIELD2_value" type="text" />
                    </td>
                </tr>
            </table>
        </div>
        <div id="#MAP#TABY_caption">
            <table>
                <tr id="#MAP#FIELD3_container">
                    <td>
                        <label id="#MAP#FIELD3_caption" for="#MAP#FIELD3_value"></label>
                    </td>
                    <td>
                        <input id="#MAP#FIELD3_value" type="text" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>