Enable Page Variables to Provide Initial Values for a Fragment's Input Parameters

You can pass a page variable as an input parameter from the page to a fragment that it references in order to provide initial values for the fragment's input parameters.

Say you have a page that displays employee data in a table, including employee contact information defined in a fragment. When a user selects a row in the table of employees, the selected employee's contact information is displayed from the fragment. To pass the selected employee's ID from the page to the fragment, you might define a page-level variable (for example, selectedEmp) and pass its value to a fragment variable enabled as an input parameter (for example, empId) via the expression [[$variables.selectedEmp]].

1. Set up a fragment to display an employee's contact information. For example, here's one that uses different components to display employee contact information:
   
   

   
   Description of the illustration employee-contact-fragment.png

   
   
2. On the fragment's Variables tab, create a number-type variable for the employee's ID (for example, empId) and enable it as an input parameter.
   
   

   
   Description of the illustration pagetofragment-variabledefinition-visapp.png

   
   

   Note:

   You can mark the variable to be automatically created on the container that uses the fragment. This way, when the fragment is dropped onto an existing page or container, the variable is created on the page and wired back to the fragment variable's value. If you don't select this option, you'll need to follow the rest of this procedure.
3. Now open the page where the employee-contact-details fragment is used (drag and drop the fragment onto the canvas, if needed). If it isn't already, make sure the selectedEmp variable is defined for the page.
   
   

   
   Description of the illustration pagetofragment-addtopage-visapp.png

   
   
4. In the fragment's Properties pane, under Input Parameters, use the variable picker on the empId parameter and select the selectedEmp variable as the source of its value.
   
   

   
   Description of the illustration pagetofragment-selectsource.png

   
   

   Assuming you've wired up the employee contact fragment to retrieve the information based on the selected employee's ID, your page will display the selected employee's record. Now any time the page variable changes (selectedEmp), the new value will be automatically applied on the fragment variable (empId).

   If you want to refresh the fragment's content on the page when the variable's value changes (in other words, when another employee is selected), an onValueChanged event can be triggered on the fragment variable that calls an action chain to update the contact details of the newly selected employee.