Skip to content

SurveyJS Designer

As an alternative to WebForm Designer, you can use SurveyJS Designer 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. As with generated forms, the existing data elements can be mapped to input and output parameters in the wizard. Generated forms cannot be opened in survey creator or elements cannot be added through it. However, you can select the Webform Design in the wizard, so that the user is offered the three buttons Sending, Suspending, and Resetting for editing the process step as shown in following image. This is possible with all SurveyJS activities. In addition, the added input and output parameters are mapped in this window as with other activities.
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 node 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, since there are no existing data elements, 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 type it is, i.e. Default or Survey Data (see next image). The Default parameters are individual data and are treated as already known. But the Survey Data parameter contains all the data of a form and is best created as described below. On the parameter mapping page 4 in the previous image, the proposing mapping from parameters to data elements can be adopted or assigned manually.

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 you have opened, modeled and saved 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 in 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.

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. There you can add elements to Survey and these are automatically added to input and output parameters and mapped to data elements that you can confirm 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.

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

If you have already defined the survey via the Creator and then also enter an external URI, then 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 form is filled out, which is uploaded via an external URI and in the second step the form with data is displayed. The output parameter Name is from the template Default and it is read explicitly from the form data.


In the second step the external survey URI is also entered in the wizard as in the first step and the survey data from the first step is integrated as an input parameter as shown in the next picture.

We can use the parameter Name to show the instance name from the 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.

We change the form by adding a field, for example Date of birth, and the modified form can be called up in the client after the activity has been suspended (see next image).

In the second step you review the data from the first step editor.

Example Expression Survey

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

For this, the required expression is entered in the Survey Creator under Expression of the corresponding input as shown in the picture. This is comparable to entering scripts in WebForm Designer.

The form at runtime looks like this: