How can i transfer data between two pages?

Q&A
1

Hi,

i want to transfer some data between two pages and change page clicking a button; how can i do it?

Thanks in advance

2

Basically you need to store the data that the user will input in the form in a persistent storage in the first task and retrieve them in the second task. The easiest solution for storage is to use Business Data Management (BDM) feature of Bonita. And to retrieve data you will use form variables initialize by calling Bonita Engine REST API.

Here is a description of the data flow from the user web browser to the business database schema managed by Bonita BDM:

  1. When user input some data in a form widget the value is saved in the form variable (i.e. a JavaScript object) associated with the Value property of the widget.
  2. The submit button of the form is configured (Action property of the widget button) to either start a new process instance or submit a task. When clicked it will call the Bonita Engine API giving the order to start the process or execute the task and, in the same call, data entered by the user are sent. Data to send are defined by the Data sent on click property of the widget button. Value of Data sent on click is usually a form variable. It can be directly a variable associated with one or several form widgets (as variable are JavaScript objects they can have multiple attributes and each attribute value can be updated by a different widget) or a JavaScript variable that is used to aggregate together values of different form variables. The form variable is convert into some JSON to be sent in the HTTP request to Bonita Engine API.
  3. Data received by the Engine will be matched against the process or step contract. They should exactly match. For example the following JSON: {“contractInput”: {“attributeA”: 123, “attributeB”: “test”}} should be used with a contract input named “contractInput” declared with a type “complex”. This “complex” contract input must have two attributes: one named “attributeA” of type integer (or long, or float…) and one named “attributeB” of type “text”.
  4. Next the contract information can be used to set the default value of a business variable declared in the process definition. Usually the first step is to declare the business variable and then generate the form or step contract out of it: this will automatically generate the Groovy script that create the new business variable object based on contract inputs. Then you usually generate a first form based on the contract definition.
  5. Setting the default value of a business variable actually automatically trigger the insertion of the data in the database. Note that contract information can also be used in operations on task (an operation can be used to initialize a business variable or update an existing one), as connectors input data…

Now here is a description of how to display some data in a form like in your second task:

  1. Create a new form variable
  2. Set the type to “External API” (this will trigger a GET REST API call)
  3. Set the name of the form variable, for example: myData
  4. Set the API URL to: ../{{context.myBusinessVariable_ref.link}} myBusinessVariable must be exactly the name of the business variable as declared in the process definition. context is a form variable initialize with a REST API call (to /bonita/API/bpm/userTask/{{taskId}}/context) and taskId is also a form variable initialize using an URL parameter named id.
  5. Add widgets to your form. For example: an input widget
  6. Set the widget value property to: myData.myAttributeName where myData is the name of the form variable and myAttributeName is the name of one of the attribute of the BDM object.

This process of creating a form to display data will become a lot easier in the upcoming Bonita version (7.9.0)

3

By two pages are you referring to:

  1. User web interfaces associated to two different tasks in a process definition (what we refer to as “forms”)
  2. User web interfaces put all together in an “application” (what we actually refer to as “pages”)

?

4

Hi,
i’m referring to forms

5

ok, thanks :slight_smile:
last question : how can i change form clicking a button? (target url on success)

6

In the configuration of the button widget you have an “Action” property:

  • For a form associated with the process, select the “Action”: Start process
  • For a form associated with a step, select the “Action”: Submit task

In both case (instantiation and task forms), the “Target URL on success” value is by default /bonita. Meaning the user will be redirected to the Bonita Portal and will be display the list of pending task it might performed.

In Bonita task processing is asynchronous. Meaning that if a user John submit a task, it immediately get a response from the Bonita Engine even if the task processing might still be on going. In a scenario where a single user perform the first task and the immediate next task it will be redirected to the Bonita Portal because the second task might not be available immediately after the submission of the first one. In the Portal he will be able to claim the second task when available (a task can possibly be performed by a set of candidates) and then actually be able to submit the form of the second task.

If you want to immediately redirect the user to the next form, you need:

  • First to make sure that the next task is claimed by the user. This can be done with an actor filter returning a single user or by doing an API call.
  • Second, don’t use the default button widget that immediately redirect the user to the task list. Rather use a custom button that will poll the Engine API to make sure that the task is available and redirect the user to the form URL. Such widget was developed for a previous version of Bonita but should be updated to work properly on the latest one.

Hope it will helps.

7

Thanks!