Help

In the scope of a page, form, or layout, a variable can be used to handle business data, or can contain structural information that determines how page elements behave.

Create a variable here. Using the variable in a widget property depends on the property value type, described in the page editor general help, in the Properties section.

Available variables types are string and JSON (static), and External API, Business data, JavaScript expression, and URL parameter (dynamic).

You can extend our REST API capacities by creating REST API extensions in the Studio Development menu and use them as External API variables in the UI Designer.

Variables can be bound to input fields to create conditional behavior between widget properties.

A binding is dynamic, so every time data changes, all variables are re-evaluated and the UI is updated. In consequence:

  • A variable initialized with a JavaScript expression is executed when the page is loaded. Then, when one of its dependencies changes, its value is updated. Dependencies are created using $data.XXX.
  • A variable initialized with an External API is reloaded every time the URL value changes.
  • A Business data variable is reloaded every time the filter value changes.

When you generate a form from a contract in the Studio, the form contains a Submit button and some default variables: formInput, formOutput, taskId, and context

formInput is a JSON object.
Its structure is defined by the contract inputs and the attributes are initialized with default values. It could be used to set initial values for form fields.
You can set the values in formInput either by editing the default values with constants (useful for test and debug) or with values from an object in an external source that has the same model (such as with a BDM external API).
You can also set the initial values of a form from some other source without using formInput. However, you will then have to edit formOutput manually.

formOutput is a JavaScript expression returning an object.
Its structure matches the contract requirements and is filled with formInput by default. Its goal is to aggregate the fields from the form and to submit them to the task or process to fulfil the contract. On Submit, values entered or modified by the end-user and aggregated in the formOutput object (as defined by the Data sent on click property of the Submit button) are submitted to the process or task

taskId is a URL Parameter.
It is the id of the current BPM task. You can use it as a BPM API parameter.

context is an External API.
It provides references to all business variables and documents in the process instance (case). To retrieve a business variable instance, create an External API variable with value ../{{context.myBusinessData_ref.link}}

To retrieve a document instance, create an External API variable with value ../API/{{context.documentData_ref.url}}

To allow your user to download a document add a link widget with its url property bound to'../API/' + context.documentData_ref.url

submit_errors_list is a JavaScript expression formatting the response payload to html when a submit fails.

In some cases, other types of variables are created:

  • When the business variable is edited in the form (as specified in the contract creation wizard), a UI Designer variable is created for each variable (External API).
    For example, if the contract input has been created from a business variable 'invoice' in the process, a variable invoice is created in the form and its URL is set to ../{{context.invoice_ref.link}}.
    If invoice contains lazy relations, additional variables are generated for each lazy relation to resolve (using lazyRef filter).
    For example, if 'invoice' has a 'customer' relation in lazy, an External API variable invoice_customer is added. Its URL is set to {{invoice|lazyRef:'customer'}}.
  • To display an aggregated object, a Select widget is generated to display the available values of the object. The variable (External API) bound to the widget is created. It queries the BDM.
    For example, when the object Invoice has an aggregated object Customer, a variable customer_query is created with URL: ../API/bdm/businessData/com.company.model.Customer?q=find&p=0&c=99. By default it uses the find query with a default pagination (only first 100 objects are returned).