Set Data Context for a Fragment Slot

Because fragment slots are similar to component slots, they rely on the idea of template slots for data context in much the same way as component slots. Template slots allow components in a slot to access data from the component's surrounding page model as well as from within the custom component. Here's how we can break down this concept:

What is Data Context?

Fragment slots, by design, allow fragment authors to leave placeholders for users to customize with their own content. A typical example is a toolbar used within a fragment view that provides a set of default buttons, but which also supports a slot for fragment users to add some of their own. In this case, slot content is supplied by the user but "managed" from a layout perspective by the fragment (or a component used within it).

Often, fragment authors use components like oj-table, oj-list-view, or oj-bind-for-each, which stamp a list of rows where the data for each row is supplied by the fragment. A fragment author who wants the user to have the ability to shape how each row should be rendered as it is stamped out, may also provide access to (current row/item) data that the stamping component sets up. For example, an oj-list-view supports an "itemTemplate" slot, which provides contextual item data via a standard variable called $current.

Tip:

The data-oj-as attribute can be used to define an alias for $current. If data-oj-as is defined, then the alias is used instead of $current.

List View Example

Here's an example of an oj-list-view used in a fragment to display a list of user names and roles. To define the shape of the data (user names and roles) that the component (oj-list-view) will expose through to the slot via $current (or the assigned data-oj-as name), you'd first define the data attribute in the fragment's metadata:

"slots": {
  "userRowTemplate": {
    "data": {
      "$current": {
        "type": "object",
        "properties": {
          "data": {
            "type": "object",
            "properties": {
              "name": {
                "type": "string"
              },
              "role": {
                "type": "string"
              }
            }
          }
        }
      }
    }
  }
}

You might then implement the fragment view as shown here:

<oj-list-view data="[[ $variables.userArrayDataProvider ]]">
  <template slot="itemTemplate">
    <oj-vb-fragment-slot bridge="[[vbBridge]]" name="userRowTemplate" context="[[ { $current: $current } ]]">
      <!-- Default template used if fragment consumers do not provide their own. -->
      <template>
        <p>
          <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
          <oj-bind-text value="[[$current.data.role]]"></oj-bind-text>
        </p>
      </template>
    </oj-vb-fragment-slot>
  </template>
 </oj-list-view>

In this example, the template slot "itemTemplate" contains a fragment slot that provides the current row's data via the $current variable. The fragment slot's default template displays the user name and role as simple text (oj-bind-text). Note that the value for "name" and "role" is provided by the fragment, or more accurately the stamping component used within the fragment, not the surrounding page model.

Now when the fragment is used on a page, fragment users by default see a list of user names and user roles in text and can choose to customize how the list items render, for example:

<h1>Users</h1>
 <oj-vb-fragment bridge="[[vbBridge]]" name="user-list">
  <!-- Custom template for row with user data. -->
  <template slot="userRowTemplate">
    <h2 class="oj-header">
      <oj-bind-text value="[[ $current.data.name ]]"></oj-bind-text>
    </h2>
    <div>
      <oj-bind-text value="[[ $current.data.role ]]"></oj-bind-text>
    </div>
  </template>
 </oj-vb-fragment>

Table Example

An oj-table supports a template slot "rowTemplate" that provides contextual row data via $current (or the assigned data-oj-as name). Here's an example of an oj-table in a fragment:

<oj-vb-fragment name="products" bridge="[[vbBridge ]]">
  <template slot="productRowTemplateSlot" data-oj-as="productRow">
        <oj-bind-text value='[[ productRow.data[ "name" ] + ":" + productRow.data[ "code" ] ]]'></oj-bind-text>
  </template>
</oj-vb-fragment>

In this example, the data-oj-as attribute on the template tag defines an alias for $current, specifying that the template slot's data can be accessed through the productRow variable. If an alias is not specified, then $current can be used.