Automatically Write Back a Fragment Variable's Value to Its Container Variable

When a fragment variable is enabled as an input parameter, you can mark it for writeback, allowing changes in the variable's value to be automatically written back to a variable on the fragment's parent container.

Let's say your employees page defines an empAvatar variable, which takes a URL as its value. When this variable is passed as an input parameter to a fragment, the fragment receives it through an avatar variable. This variable also has the option to write back to the container enabled. Assuming that the fragment is set up to update the employee's profile picture, when the avatar variable on the fragment is updated to use a new URL, the change is written back to the outer page variable (empAvatar). Depending on your setup, this might also update the table of employees where the new picture is shown in the currently selected row.

(To see an example of writeback in action, see the Passing Values To and From Fragments blog post.)

Writeback is supported for primitive (string, number, boolean, and any), array, and object type variables. Note that writeback is not required if an input parameter value is already passed in by reference (for example, an SDP or dynamicLayoutContext).

To write back updates made to a fragment variable enabled as an input parameter:

1. Open the fragment that defines the variable whose parameter value you want to be automatically updated on the parent container's variable (for example, the fragment-level avatar variable whose value you want to directly update on the page-level empAvatar variable).
2. On the fragment's Variables tab, select the variable (avatar in our example).
3. Select Write Back to Container in the variable's Properties pane:
   
   
   Description of the illustration fragment-writeback.png
   
   

   If you don't select this option, the only other way for a parent container to be notified of updates to a fragment's variable is to raise a custom event that "emits" the event's payload to the parent container.

   Events are a more formal contract that may be a better option when you want to consolidate changes made in the fragment and communicate them to the outer container, for example, when all changes made to the employees contact information are pushed to the server and the same needs to be communicated back to the page. Automatic writeback to a parent container variable, on the other hand, is desirable when you want the outer container to be notified immediately of a change to a fragment input parameter variable.