Set Data Context for a Fragment Slot

You can set the context on a fragment slot to pass data via a slot template, so fragment users see some actual data in the custom slot component.

Suppose you want to display a default greeting with the first and last names of a particular user, here's how you can do this:

1. In the Fragment Designer, drag a Fragment Slot from the Components palette and drop it onto your fragment.
2. In the Properties pane, give the slot a name in the Name property (for example, greeting), then set the value of the Context property to [[{ "$current": { "firstName": "John", "lastName": "Doe" } }]]:
   
   
   Description of the illustration slotdata-context.png
   
   

   The context can be an arbitrary object. By convention, it contains the field $current with the actual data. You can specify a literal object or a complex expression. In our example here, we're passing an object with field $current (that contains field firstName with value John and field lastName with value Doe) to the slot.

3. Switch to Code mode and add this snippet inside the <oj-vb-fragment-slot> element to define a slot template for your data:

    <template>
       <div></div>
    </template>

   Optionally, right-click and select Format Document.

4. Switch to the JSON editor and define the data attribute in the fragment slot's metadata to describe the shape of the data that the component will be exposing through to the slot contents via $current.
   For our example, locate the greeting slot and add the data attribute as follows:

     "slots": {
       "greeting": {
         "data": {
           "firstName": {
             "type": "string"    
           },
           "lastName": {         
             "type": "string"
           }
         }
       }
     }
   }

5. Switch to the Fragment Designer, locate the Text component in the Components palette, then drag and drop it onto the bottom-most <div> element in the Structure view:
   
   
   Description of the illustration slotdata-div.png
   
   
6. In the Text component's Properties pane, click on the Value property to open the Variables picker and select firstName under Current:
   
   
   Description of the illustration slotdata-selectvar.png
   
   
7. Drag another Text component and drop it onto the div element in Structure view again. This time, use the Variables picker on the Value property to select lastName under Current.
8. Add some greeting text to the <div> element within the slot template in Code view, for example:

     <div>
       Hello
       <b><oj-bind-text value="[[ $current.firstName ]]"></oj-bind-text></b>       
       <b><oj-bind-text value="[[ $current.lastName]]"></oj-bind-text></b>,
       how are you?
     </div>

Now when the fragment is used on a page, your data (first and last names) is passed as slot content:

Description of the illustration slotdata-implicittemplate.png

Users can also provide custom slot content for a more visually appealing display:

Description of the illustration slotdata-custom.png