Hide/Show parts of the form¶
Our process basically consists of the following steps:
In this example we work with a form that already contains all the input fields and information for the entire process. However, the individual parts are only displayed in the according process step. First we model a SurveyJS form as described in detail under SurveyJS Creator on the first process step and then copy it to the other process steps via the context menu. The focus of our example is on using a form master with the help of process variables. The first step is the input, the second step is the check of the entered data. The data is passed from Survey Data to the second step. The text fields are required and editable in the first node, but they are read-only in the second node. For detailed information on conditional visibility or editability within a survey, please see the example in the SurveyJs Online Documentation ⧉. In the following, we only show how survey parts can be edited depending on the process variable.
From the previous image you can see that the panel with name and address is enabled when the Input node is active. If several form elements should be visible or editable in certain process steps, we combine them in a panel and link its logic (visibility or editability) with the number of the process step (i.e. node id). The panel with text fields should be editable, if the process variable ${Node.id} matches the id of the node Input. To do this, we define the following Custom Variables under Survey Settings / Conditions.
We first declare the variable Node.id (process variable ${Node.id} without dollar sign and curly brackets). We do not need to assign a value to this variable, because this will be overridden at runtime by the process variable ${Node.id}. Then we need a second variable whose value evaluates to true if the newly created variable Node.id has the value 2, i.e. the id of the first node. To do this, enter the expression {Node.id} == 2 for the variable node.input as in the next image. That means, if the current node id of the instance is 2, then the Input node is active.
Only now you can manage the editability or visibility of the panel via the Conditions as in the following image. The panel may only be edited if the Node.id corresponds to the ID of the Input node, i.e. the 'Input' process step to be executed with the Id '2' is pending.
