Enable Fragment Variables as Input Parameters

To pass values to a fragment from a page that consumes the fragment, you first define input parameters on the fragment that are either required or optional. For example, you might define a default placeholder title in a fragment variable and enable it as a parameter for a page. In this case, you'll have the option of overriding the default value with an alternate value on a particular page.

To enable a fragment variable as an input parameter:

1. Define your fragment as needed, for example, an employee-contact-details fragment that displays an employee's contact information. Let's assume the fragment uses a heading component, as shown here:
   
   

   
   Description of the illustration fragment-parameter-headingcomponent-vb.png

   
   
2. On the fragment's Variables tab, create a string-type variable for the title (for example, title) and enable it as an input parameter. Optionally, set a default value (say, Contact Info).
   
   

   
   Description of the illustration fragment-parameter-variabledefinition-vb.png

   
   
3. Switch to the Fragment Designer and bind the Heading component to the variable you just created.
   
   

   
   Description of the illustration fragment-parameter-bindcomponenttovariable.png

   
   
4. Now open the page where the employee-contact-details fragment is used (drag and drop the fragment onto the canvas, if needed). Fragment variables marked as input parameters become available to you on the page.
   
   

   
   Description of the illustration fragment-parameter-addtopage-vb.png

   
   
5. You can now customize the default title to something that the page (or container) provides. To do this, in the fragment's Properties pane, under Input Parameters, update the title input parameter's value (for example, Employee Personal Info).
   
   

   
   Description of the illustration fragment-parameter-overridedefault-vb.png

   
   

   Tip:

   You can extend this use case to bind the fragment input parameter to a page constant. For example, if the page author has defined a page-level constant called heading, when the fragment input parameter is mapped to the constant, you'll be able to edit the value of the bound constant. To do this:

   1. Click the variable picker on the title input parameter and select heading under Page and Constants.
   2. Use the constant's default value if one is defined (for example, About Me), or enter a new value.

   
   

   
   Description of the illustration fraginputparam-bound-pageconstant-string.png

   
   

   You can click the expression ($constants.heading) to view the constant's definition on the page-level Variables editor.