Any data in a component is saved as a <context> variable. Variables can be declared and initialized in the workflow or step scope of the component, depending on where you need them:

<context> 
    <param name="Title" type="string">Please choose one</param>
</context>

Available data types: stringbooldoublelong and object.

Note: It is always a best practice to specify the data type.

Example component

Use the setvar action to manipulate data. This action can also be used to declare and set undeclared variables.

<setvar id="next_step">
    <context_of>workflow</context_of>       
<!-- possible values: step, workflow, root, user_session,global -->
    <context_update>
        <param name="current_step_index" type="long">#{current_step} + 1</param>
        <param name="string_concat" type="string">Step #{step_name} with description: #{step_description}</param>
    </context_update>
</setvar>
  • The <context_of> element lets you set the scope in which the variable is stored. This action is used whenever you want to store data in the "root", "user_session" or "global" scope. When using these scopes, be careful with your variable naming. Make sure other components/workflows using the same variable names do not cause side effects (especially if you reuse components accessing these scopes)

Tips & tricks: When passing data between components, you should normally use an output parameter in your finish_workflow action. In this case, the output will be available in the step scope of the start step of your subsequent component. Only use the root scope if this is not sufficient for you and managing output parameters becomes too complicated.

The above example also shows, how data variables can be accessed:

In the context_update tag, two variables are set with the same setvar action.

  • The first parameter current_step_index is set by accessing the context variable, #{current_step} and incrementing it by 1.
  • The second variable string_concatshows an example of string concatenation with existing context variables.

Accessing data variables works by enclosing their name, starting with '#{' and ending with '}'.

  • Finally, the special scope user_session will save the value globally until the user signs out. It can be accessed even after the user leaves the workflow and enters the same or another workflow. It can be accessed using #{user_session::my_value}.

📌Assignment

Assignment 1: Let's test how the root context works:

  • Use the setvar action to save the choice of the user in a root variable choice.
  • Insert a "Code Comparison" component into your workflow.
  • Put #{choice} into the component configuration input field "Labels -> Component Title". If you run the workflow your chosen value should be shown in the Header of the code comparison component.
  • Try it out and make sure that the choice is correctly shown in the "Code Comparison" component.

Assignment 2: As described, the root context should be used sparingly and encompasses risks, especially when reusing the component in the same workflow. Revert the changes you did previously (you can select an older version in the workflow panel, next to the publish workflow option) or change the existing code.

  • Save the choice in the workflow scope instead.
  • Pass the content of that variable on as an output parameter of the finish_workflow action.
  • Put your output parameter into the configuration panel of the "Code Comparison" component and test if it works.

Download Component (Pre-Assignment)

Help and resources

  • Documentation for the setvar action.
  • Documentation for the finish_workflow action.

Solution Notes

As you saw, you can even use context variables in the configuration panel. This can help you configure components based on previous user actions.

 Download Workflow with Root Variable (Post Assignment) 

 Download Workflow with Output Parameter (Post Assignment)

FAQ

Question: I tried inserting a different component than "Code Comparison", but the title now shows #{initialChoice} (or another variable name) instead of the actual content of the variable. Why?

Answer: Not all our standard components are written in a way that supports evaluating the variable into the layout immediately. You could change any component so that it works, but this touches on user interface and component configuration knowledge, which we will discuss in later lessons. The difference between the "Code Comparison" component and some others, is that the code comparison component inserts the configuration value directly into the mapping, while the other components initialize a context variable with the configuration. A simple way to make this work for other components is to put the configuration value directly into the mapping or layout, e.g.:

<mapping>
    <ui_element name="Topic">
        <param name="content">§{configuration.labels.value.title.value}§</param>
    </ui_element>
</mapping>

Now you have finished the third lesson. The next lesson will provide a deep-dive into rule expressions.