1. Oracle Visual Builder Studio Page Model Reference
  2. Understand the Page Model
  3. Fragments
  4. Define a Fragment Component

Define a Fragment Component

To include a fragment in a page or other component, you use the <oj-vb-fragment> component, specifying the name of the fragment.

A fragment with the name "incident-list-fragment" could be written like this:

<oj-vb-fragment id="incLF1" name="incident-list-fragment"></oj-vb-fragment>

When the component above is rendered, it starts loading the fragment identified by the 'name'. The fragment instance created for the page is identified by the 'id'. The component can have the following properties:

Property Name Description
id Optional.

A <string> unique to the container where the fragment is included.

A fragment id must be unique, whether it's generated automatically or set by the author. This id is accessible within the fragment scope using $fragment.info.id. This can be used within expressions set on the 'id' property of components, and even the id of a "nested" fragment.

Note:

The id property need not be set on the oj-vb-fragment component. When an id is not provided a system generated unique id will be used. Though unique for the container consuming the fragment, this id is not considered "stable" and cannot be used for persisting variable values. If you want to persist variable values in a fragment, you'll need to provide an id, ensuring that it is both unique and stable, particularly when fragments are used inside of stamping components.
name Required.

A <string> name of fragment to load. The component loads the physical fragment artifacts using the 'name' property. This needs to be statically defined and cannot be an expression.
bridge Required within a VDOM. Also works within a component.

This property allows the fragment to discover the current context and establish a bridge between the component and Visual Builder eco-system. It's value is always "vbBridge".

The example below shows the 'bridge' property configured on an oj-vb-fragment. The same configuration can be used with oj-dynamic-form component as well.

<oj-vb-fragment id="incLL" name="incidentsListLayout" bridge="[[ vbBridge ]]">
  <oj-vb-fragment-param name="userId" value="[[ $page.variables.technician.id
      ]]"></oj-vb-fragment-param>
  <oj-vb-fragment-param name="filterCriterion" value="[[ $page.variables.filterCriterion
      ]]"></oj-vb-fragment-param>
 </oj-vb-fragment>
- oj-vb-fragment-param (sub-component)

For each input parameter a fragment defines via the 'input' property on a variable, this sub-component can be used to provide the values for the input parameters. Parameters marked as "required" in the fragment must be provided.

  • name: string, name of param
  • value: any, value of the input param

A fragment model (the descriptor JSON) can tag its variables with these properties to declare the input parameters (see Define Fragment Input Parameters below):

  • input ("fromCaller"),
  • required, that can be true (if the caller has to pass a value) or false, and
  • writeback, that can be set to true to allow the fragment variable value to be automatically written back to the input parameter variable.

Example 1-60 Include fragments in a page or another fragment

In this example of fragments in a page, the tab bar (oj-tab-bar) selection drives the fragment that is to be loaded.

incidentsShell-page.html Notes 
1  <oj-tab-bar selection="{{ $variables.incidentsLayout }}">
2  <ul>
3    <li id="list">List</li>
4    <li id="map">Map</li>
5    <li id="schedule">Schedule/li>
6  </ul>
7  </oj-tab-bar>
8  <oj-switcher value="[[ $variables.incidentsLayout ]]">
9    <div slot="list">
10     <oj-vb-fragment id="incLL" name="incidentsListLayout"></oj-vb-fragment>
11   </div>
12    <oj-defer slot="map">
13     <oj-vb-fragment id="incML" name="incidentsMapLayout"></oj-vb-fragment>
14   </oj-defer>
15    <oj-defer slot="schedule">
16     <oj-vb-fragment id="incSL" name="incidentsScheduleLayout"></oj-vb-fragment>
17   </oj-defer>
18 </oj-switcher>

Line 10, 13, 16: <oj-vb-fragment> uses the 'name' property to specify a static fragment to load. The 'id' property is expected to be unique to the current page.

Lines 13, 16: component is wrapped in an oj-defer (see Deferred Rendering of a Fragment).