Automatically Create and Wire a Fragment Variable on Its Container

You can mark fragment variables or constants that are enabled as input parameters to be automatically created on the container that uses the fragment. This way, when a page is created from the fragment or the fragment is dropped onto an existing page or container, Visual Builder creates the variable (or constant) on the page and wires it back to the fragment variable's (or constant's) value.

This option is especially useful when input parameters must be passed from a page for the fragment to work. By autowiring the required input parameters, you won't have to create and configure those variables on the page when the fragment is added to it, though you'd still need to assign values. Further, if the autowired variables include customizations to display an enhanced UI in the Properties pane, those customizations are also carried over to the container.

Note:

Only fragments tagged as pageContent (default) or page in its Used For setting (either from its Properties pane or Settings editor) can be autowired on their containers.

Open the fragment that contains the variable or constant you want to be created on the parent container.
On the Variables tab, select the variable or constant to view its Properties pane. When the variable or constant is enabled as an input parameter (with either Enabled or Required selected under Input Parameter), you'll see more properties under a Container Options section:

Description of the illustration fragmentvar-autowire-container.png
Select Create variable in container or Create constant in container:

Description of the illustration fragmentvar-autowire-container-options.png
When this option is selected, the @dt.createOptions metadata is added to the fragment's JSON definition; for example:
```
  "variables": { 
    "days": {
      "type": "number",     
      "input": "fromCaller",
      "defaultValue": "5",
      "@dt": {       
        "createOptions": {}
      }  
    },
```
Optional: If you want to make the variable or constant on the container an input parameter of the container:
- Select Enabled to make the container variable or constant an optional input parameter.
- Click Required to make the container variable or constant required input parameter.
Optional: If you chose to pass the variable or constant as an input parameter, select Pass on URL to pass this input parameter to the container as part of the URL.

After you add the fragment to a page or a container, you'll see your variable/constant created on the page or container's Variables editor with the settings you specified.

If you were to look at your page's code, you'll see the parameters wired in HTML, for example:

  <oj-vb-fragment bridge="[[vbBridge]]" name="welcome" class="oj-flex-item oj-sm-12 oj-md-12">
    <oj-vb-fragment-param name="avatar" value="[[ $variables.avatars ]]"></oj-vb-fragment-param>
    <oj-vb-fragment-param name="days" value="[[ $variables.days ]]"></oj-vb-fragment-param>
    <oj-vb-fragment-param name="title" value="[[ $variables.title ]]"></oj-vb-fragment-param>
  </oj-vb-fragment>