Skip to content

SurveyJS Creator

As an alternative to WebForm Designer, you can use SurveyJS Creator to create web forms. This tool is added in process steps via drag & drop like all other activities from the Activity Repository. We are not going into the individual functionalities of SurveyJS here, but rather the integration into your processes. To better understand this application, test the Survey Creator and review the End-user guide in the official online documentation.

Various form activities are available in the de.aristaflow.form.SurveyJS Activity Repository. Drag the corresponding activity onto the process step or on an edge where the new step should be created.

The types of forms that can be created with the SurveyJs are as follows:

  • Generated Survey
  • Survey
  • WebForm

Generated Survey

You can use this activity to replace the de.aristaflow.form.GeneratedForm activity. Just like AristaFlow Generated Forms, you can create input and output parameters in the wizard and map them to the existing data elements. Generated Surveys cannot be opened or adapted in SurveyJS creator. Therefore the context menu entry to open it in creator is disabled. However, you can select the Webform Design in the wizard, so that the user is offered the three buttons Sending, Suspending, and Resetting for processing the activity as shown in following image. Of course, this is also possible for the other SurveyJS activities. At the end of the wizard, the parameters are assigned to the data elements. Here either the proposed assignment is accepted or a manual assignment can also be made.
In the next image you can compare the surface of generated survey with default design and with web form design.

Parameterhandling in Survey and WebForm

Immediately after integrating this activity, the wizard for adjusting the most important activity properties opens. On the second page Parameters you can add new input or output parameters via Add Parameter.... The parameters inserted here can then be found in the survey when you open the survey in Creator. At the beginning, if there are no existing data elements, then the Add Parameter for... option is of little use, as you have to link the existing data elements with input or output parameters. So if you know exactly which parameters the process needs, you can link them with Add Parameter..., otherwise you create the form with Survey Creator and then link the automatically created input and output parameters with the data elements. Before a parameter is inserted, it must be determined which parameter template it has, i.e. Default or Survey Data (see next image). The Default parameters are single data and are treated as already known. But the parameter Survey Data contains all the data of a form and can be used as described below.
The survey data contains all input and output parameters as JSON object. To be able to add survey data as a parameter, you have to define the survey first. After opening, modeling and saving the activity with SurveyJS Creator, the survey is defined and survey data is generated as input and output parameter of the activity (see next image). If you link Survey Data as input or output parameter, the current activity receives all values ​​of the previous activity as input or writes all values ​​of the current activity as output to the JSON object. Survey data can contain more complex data or tables that would be time-consuming to submit individually. With the help of this parameter you can pass all activity data through the whole process. In the next image the parameters Survey Data and Name are linked as output, where Name can be accessed separately.

In contrast to generated Survey, you can open and edit the Survey and WebForm activities with Survey Creator. After opening and saving the activities with Survey Creator, you can no longer add the parameters via the wizard. The parameters can then only be managed via SurveyJS Creator. All inserted questions to Survey are automatically added to input and output parameters but are not enabled until you confirm the assignment in the wizard.
In the following example a Webform Survey without parameters is opened in Surveyjs Creator and a single input called Question1 is added.

Hint

Normally, after changing the parameters via the SurveyJS Creator, you should let the wizard rebuild the parameters on the Survey JS page so that you can map the new parameters to the data elements afterwards.

Then the Question1 is mapped to a new data element in the wizard as an output parameter.

The result looks like this:

External Survey URI

In the wizard on the Survey JS page you can define an external Survey URI (a local or an http URI) from which the Survey can be read. For this, however, the survey must be saved in Json format under this URI and must be accessible from the activity at runtime.
We recommend that you develop the survey in the Online Survey Creator and save the associated Json data from the Tab Json Editor in a file as shown in the next example.

Then enter the file URI in the wizard on the Survey JS page as follows and press the Rebuild Parameters to import the parameters of the integrated form.

In the next picture you can see the automatically mapped parameters after integrating the external Survey URI.

Hint

In the Activity Configuration of the Survey activity there may only be one survey definition. If you have already defined the survey via the Survey Designer and then also enter an external URI, then it may happen that you have two definitions under Activity Configuration. In this case you have to delete the survey definition so that the URI definition is used. You can find this in Properties -> Advanced-> Misc-> Executable Business Process -> Activity Configuration as shown in the next picture.

Example External Survey URI

In the following example in the first step a survey form is filled out, which is uploaded via an external URI and in the second step inputs from the first step have been read and displayed. The output parameter Name has the template Default and it is written from the survey form data.


In both steps, the external Survey URI is entered in the wizard as already shown above. The inputs from the first step are integrated in the second step using Survey Data as parameter as shown in the next picture.

At execution time for the user we can show the name of the form, in this case the name of the person. In the basic properties of the process we set a reference to the parameter Name of the type String (%s:Name%) and let it display as instance name of this template. This means that the Name is taken from the form at runtime and displayed as the instance name in the second step.

The form created in the external survey is displayed as follows at runtime.

The changes to the external survey are applied directly at runtime without prior adjustment of the process. For example we add a new field Date of birth to the external Survey form and this modified form is called in the client directly after the activity is suspended (see next image).

In the second step Review Data you review the data from the first step Enter Data. At the same time, you can see the resolved parameter reference in the worklist.

Example Expression Survey

In the following example in the first step two entries from type float are made and in the second step these entries are added.

The result is displayed at runtime in a read-only field in the survey. The toolbox element Expression(read-only) represents this field. The required expression for the calculation is entered in the Survey Creator in the Properties -> General -> Expression of this element. You get the question value by entering the question name in curly brackets as shown in the next picture. For additional help by entering expression press the ctrl and space key. This feature of SurveyJs is comparable to entering scripts in WebForm Designer.

The form at runtime looks like this: