How Do I Split a Form into Sections or Tabs?

There are two forms and the requirement is to make into one activityA specific step in a process.  It will be the user interface for that step (web form or a screen), for example, the Leave Application (screen interface or web form) will be the first Activity in the Leave Requisition process.  The Leave Application Authorization will be the second step or Activity in the Leave Requisition process.  One Process can have multiple activities..

Answer

To use the stylesheet as below, the one activity will need to have their controls copied to the first activity, in essence, creating a new activity which is the combination of the first and second.

Then the stylesheet can split the screen into the two tabs as required.

Assuming the activities are merged and the one activity has all the controls, identify the index where the first activity ends and the second starts, that is, the place you want the tab to start.

In the stylesheet line 45 and 48 are the tab definitions, and line 57 and 69 are the loops that check the index for the two tabs.

You didn’t have any object groups in the images so they are left that part out of the style sheet.

ObjectTemplates.xsl

<xsl:template name="DefaultActivityWith2Columns">
   <div id ="tabs" style="display:none;">
       <ul>
          <li><a><xsl:attribute name='href'>#tab0</xsl:attribute><span>Tab One</span></a></li>
          <li><a><xsl:attribute name='href'>#tab1</xsl:attribute><span>Tab Two</span></a></li>
       </ul>
       <!--First Tab -->
        <div>
          <xsl:attribute name="id">tab0</xsl:attribute>
            <table width="100%">
              <xsl:for-each select="Activity/ObjectGroup[@type='default']/Object">
              <xsl:if test="@index &lt; 110"><xsl:apply-templates mode="TwoColumns" select="current()" /></xsl:if>
              </xsl:for-each>
            </table>
          </div>
       <!--Second Tab -->
       <div>
            <xsl:attribute name="id">tab1</xsl:attribute>
            <table width="100%">
              <xsl:for-each select="Activity/ObjectGroup[@type='default']/Object">
                 <xsl:if test="@index &gt; 110"><xsl:apply-templates mode="TwoColumns" select="current()" /></xsl:if>
              </xsl:for-each>
            </table>
       </div>
   </div>
</xsl:template>