Add a Fragment From a Dependency

When extending a dependency, you can add fragments you've created in your extension, and referenceable fragments defined in your extension's dependencies. For example, let's say that one of your dependencies contains a fragment containing some UI components that have already been formatted, and you would like to include the fragment in a dynamic form. If the fragment is referenceable, and has the correct type, you can add it to a dynamic form template (or field template) in a Layout.

To add a fragment from a dependency to a Layout's template:

1. Locate where you want to add the fragment.

   In this example, we're adding a fragment to a field template in a Layout, but fragments can be added to form templates and dynamic containers in the same way.

2. In the Components palette, locate the Fragment Container or the fragment you want to add.

   In the Components palette, you can use the palette's filter field to locate fragments. In this example, the palette lists the Fragment Container component and two referenceable fragments that can be added here:

   
   

   
   Description of the illustration fragments-add-fragment-component.png

   
   

   Though there might be many referenceable fragments defined in the dependencies, the Components palette only lists the fragments that can be used in this context. In this example, the context is a field template in a Layout, so only those fragments that the developer has tagged fieldTemplate are listed. For more about how developers tag fragments, see Manage Fragment Settings.

3. Drag the fragment (or Fragment Container) from the palette and position it on the canvas or in the Structure view.

   If you drag a fragment onto the template, the Fragment Container component required by the fragment is added automatically.

   If you drag a Fragment Container instead of the actual fragment, you'll need to select the fragment in the Properties pane:

   1. After adding the Fragment Container component, click Select in the component's General tab.
      
      
      Description of the illustration fragments-add-container.png
      
      
   2. Select the fragment in the dialog box. Click Select.
      
      
      Description of the illustration fragments-add-container-select.png
      
      

   Once added, the fragment is rendered with a placeholder on the canvas. When the fragment is selected, you'll see the fragment name and properties in the Properties pane:

   • A Select link to select a different fragment.
   • A Go to Fragment link to open the fragment in the Fragment Designer where you can customize it.
   • The fragment's input parameters.

   
   

   
   Description of the illustration fragments-container-properties.png

   
   

   Note:

   In this example, we've added a fragment to a field template in a Layout. The fragment's input parameters need to be specified in the Fragment Container so that data can be passed between the fragment and the Layout. In this case, you'll need to provide the context for the Layout and field in the dynamicLayoutContext field so that the field in the fragment can be bound to the data. For example, if the template contains a component that renders data from the countryName field, you can use the Variables picker or Expression editor to bind the fragment's Input Parameter variable to the field in the Layout. See Enable Fragment Variables as Input Parameters.