Using PartialRoot

To insert a partialRoot component:

In the Design Structure Window of the desired file, locate the node in which you wish to insert a partialRoot component.
In the Component Palette, select Miscellaneous Components from the dropdown list, and then drag and drop the partialRoot component to the parent node of your choice.
The partialRoot node is inserted and highlighted under the expanded parent node.
Right-click the partialRoot node and choose Insert inside partialRoot to insert any child component.

Example (UIX XML)

...
<header text="First partialRoot block">
  <contents>
    <partialRoot>
      <contents>
        <styledText styleClass="OraInstructionText"
                    text="This section is enclosed within a
                          <partialRoot> element, so partial page rendering capability is available."/>
        <stackLayout>
          <contents>
            <form name="cbform_1" method="get">
              <contents>
                <checkBox id="partialCheckboxID_1"
                          name="partialCheckBoxName_1"
                          checked="${httpSession.checked1}">
                  <primaryClientAction>
                    <firePartialAction targets="partialCheckBoxStateString_1"
                                       event="changeCheck1State"
                                       formSubmitted="true"/>
                  </primaryClientAction>
                </checkBox>
                <styledText id="partialCheckBoxStateString_1"
                            styleClass="OraInstructionText"
                            text="The box is currently ${ui:cond(httpSession.checked1, 'checked', 'unchecked')}"/>
              </contents>
            </form>
          </contents>
        </stackLayout>
      </contents>
    </partialRoot>
  </contents>
</header>
<spacer height="20"/>
<header text="Non partialRoot block">
  <contents>
    <styledText styleClass="OraInstructionText"
                text="This text is not contained within any
                      <partialRoot> block, therefore it cannot be
                      updated with PPR"/>
  </contents>
</header>
<spacer height="20"/>
<header text="Second partialRoot block">
  <contents>
    <partialRoot>
      <contents>
        <styledText styleClass="OraInstructionText"
                    text="This section is enclosed within a second
                          <partialRoot> element, so partial page
                          rendering capability is available again."/>
        <stackLayout>
          <contents>
            <form name="cbform_2" method="get">
              <contents>
                <checkBox id="partialCheckboxID_2"
                          name="partialCheckBoxName_2"
                          checked="${httpSession.checked2}">
                  <primaryClientAction>
                    <firePartialAction targets="partialCheckBoxStateString_2"
                                       event="changeCheck2State"
                                       formSubmitted="true"/>
                  </primaryClientAction>
                </checkBox>
                <styledText id="partialCheckBoxStateString_2"
                            styleClass="OraInstructionText"
                            text="The box is currently ${ui:cond(httpSession.checked2,
                            'checked', 'unchecked')}"/>
              </contents>
            </form>
          </contents>
        </stackLayout>
      </contents>
    </partialRoot>
  </contents>
</header>
...
...
<handlers>
  <event name="changeCheck1State">
    <set property="checked1"
         value="${param.partialCheckBoxName_1=='on'}"
         target="${httpSession}"/>
  </event>
  <event name="changeCheck2State">
    <set property="checked2"
         value="${param.partialCheckBoxName_2=='on'}"
         target="${httpSession}"/>
  </event>
</handlers>
...