Fragment Patterns

Example 1-57 Tab Bar containing three tabs, and all tabs except the first one are hidden

In this example, when the page loads, only the 'list' tab item fragment is loaded and rendered. The 'map' and 'schedule' tab items are hidden, and the fragment and associated artifacts are not loaded, and the components inside those fragments are not rendered.

1. The <oj-vb-fragment> component is used to isolate the content of each tab item

2. In the switcher associated with the tab bar, the <oj-defer> slot is used to hide tabs. The fragments are loaded and rendered when their tabs become visible.

3. For details on configuring the component, see Deferred Rendering in the JET Developer Cookbook.

<oj-tab-bar selection="{{ $variables.incidentsLayout }}">
<ul>
  <li id="list">List</li>
  <li id="map">Map</li>
  <li id="schedule">Schedule/li>
</ul>
</oj-tab-bar>
<oj-switcher value="[[ $variables.incidentsLayout ]]">
  <div slot="list">
    <oj-vb-fragment id="incLL" name="incidentsListLayout"></oj-vb-fragment>
  </div>

  <oj-defer slot="map">
    <oj-vb-fragment id="incML" name="incidentsMapLayout"></oj-vb-fragment>
  </oj-defer>
   
  <oj-defer slot="schedule">
    <oj-vb-fragment id="incSL" name="incidentsScheduleLayout"></oj-vb-fragment>
  </oj-defer>
</oj-switcher>

Example 1-58 Content inside a dialog is hidden initially, and loaded when the user opens the dialog

1. The <oj-vb-fragment> component is used to isolate the content of the dialog.

2. In the dialog 'body' slot, <oj-defer> is used to wrap the oj-vb-fragment. When the dialog is opened, the input parameters are passed to the fragment component, and the fragment is loaded and rendered.

3. If the fragment fires an event, binding the event to a listener on the page enables the page to listen to it. The "saveproduct" event has the "propagationBehavior": "container" property, so the fragment component on the page can listen to it, and then call the 'onSaveProduct' listener on the page.

4. For details on configuring the component see Deferred Rendering in the JET Developer Cookbook.

Note:

It's best to have all the content of the dialog within the fragment and the 'body' slot, rather than splitting it, for example, having the buttons in the footer and having the content within the <oj-defer>.

<oj-dialog id="newProductDialog" title="New Product" initial-visibility="hide">
    <div slot="body">
      <oj-defer>
        <oj-vb-fragment id="createProd1" name="create-product"
                        on-saveproduct="[[ $page.listeners.onSaveProduct ]]"
                        on-cancelproduct="[[ $page.listeners.onCancelProduct ]]">
          <oj-vb-fragment-param name="products"
                                value="[[ $page.variables.productList ]]"></oj-vb-fragment-param>
      </oj-vb-fragment>
    </oj-defer>
  </div>
</oj-dialog>

The event is declared in the fragment:

"saveproduct": {
  "description": "fired when a product has been created. The mutated product is returned in
        payload",
  "behavior": "notify",
  "payloadType": {
    "data": [
      {
        "id": "string",
        "name": "string",
        "unitPrice": "number",
        "inventory": "number",
        "productCategory": "string"
      }
    ]
  },
  "propagationBehavior": "container"
}

Example 1-59 A single fragment used to display different content

It's possible to reuse a fragment in multiple places in the page. To use the same fragment in two different parts of the page, use a different unique id on each oj-vb-fragment component.

In the example below, the 'edit-product' fragment is used by two components, and each fragment has a unique id. The parameters and event configurations are also different.

<oj-bind-if test="[[ $page.variables.productIdDynamic ]]">
  <oj-vb-fragment id="editProd1" name="edit-product"
    on-saveproduct="[[ $page.listeners.onEditProductDynamic ]]">
     
    <oj-vb-fragment-param name="products"
                          value="[[ $page.variables.productListDynamic ]]"></oj-vb-fragment-param>
  </oj-vb-fragment>
<oj-bind-if>

<!-- fragment used for static case -->
<oj-bind-if test="[[ $page.variables.productIdStatic ]]">
  <oj-vb-fragment id="editProd2" name="edit-product"
    on-saveproduct="[[ $page.listeners.onEditProductStatic ]]">
     <oj-vb-fragment-param name="products"
                          value="[[ $page.variables.productListStatic ]]"></oj-vb-fragment-param>
  </oj-vb-fragment>
<oj-bind-if>