docs: updates on the UIB "interact with your process" page (#2728)

Big updates on the "interact with your bonita process" page

modules/applications/pages/create-an-interface.adoc

@@ -1,5 +1,5 @@
 = Create an interface
-:description: Once you have downloaded and launch Bonita UI Builder, it's time to create an interface. 
+:description: Once you have downloaded and launched Bonita UI Builder, it's time to create an interface. 
 
 {description}
 
@@ -18,7 +18,6 @@ You land on the design interface:
 
 image::images/create-an-interface/design-interface.png[design-interface]
 
-Describe
 On the left part can be found all widgets (visual elements) that you can drag and drop anywhere you want on the central part. 
 This is also where you can define your API requests (`Queries` tab) that will help you connect your widgets to your Bonita process, see xref:applications:interact-with-your-bonita-process.adoc[next section] for more details.
 

modules/applications/pages/interact-with-your-bonita-process.adoc

@@ -1,25 +1,34 @@
 = Interact with your Bonita process
-:description: Defines how to interact with a Bonita runtime using the REST APIs..
+:description: Interact with a Bonita runtime in multiple ways using API requests.
+
+{description}
+
+
+== Pre-requisites 
+* Bonita UI Builder downloaded and launched
+* Bonita Studio version {bonitaVersion} or any later version
+* A running Bonita project with a defined process diagram, BDM, and contract. Follow the xref:getting-started:getting-started-index.adoc[Getting Started tutorial] if you need any help
 
-[NOTE]
-====
-For Subscription editions only.
-====
 
 == Create a Bonita datasource
-From a page in edit mode, click the `Data` icon from the left panel.
-Then, you get the list of the provided datasources.
+From a page in edit mode, click the `Data` icon from the left panel then click the `+` button to add a datasource in the workspace.
 
-From the `APIs` section, click on the `Bonita API`. By default, it will connect to the Bonita runtime running on the local machine. No need to provide any credential information,
-since they are already provided at the xref:download-and-launch.adoc[Download and launch] step.
+You get the list of the provided datasources. On the `APIs` section, click on the `Bonita API`. By default, it will connect to the Bonita runtime running on the local machine. No need to provide any credential information, since they are already provided at the xref:download-and-launch.adoc[Download and launch] step.
 
 Then, click on the `Save` button to save the datasource.
 
-== Create a Bonita API
-Once the datasource is saved, you can create a new API, and interact with the Bonita runtime with the xref:api:rest-api-overview.adoc[REST APIs].
+image::images/interact-with-your-bonita-process/create-datasource.gif[create-datasource]
+
+
+== Create Bonita API requests
+Once the datasource is saved, you can create API requests and interact with the Bonita runtime with the xref:api:rest-api-overview.adoc[REST APIs].
+We will describe below how you can for example get a list of Bonita processes, and instantiate one of them.
 
-For instance, to get the list of the processes deployed on the Bonita runtime (first 10), you can create a new API with the following configuration:
+=== Get a list of processes
+To get the list of the processeses deployed on the Bonita runtime (first 10): click the `Editor` icon from the left panel, click the `Queries` tab, then click the `new query / API` button and select the Bonita datasource created previously. 
+Enter the following configuration:
 
+* `Name`: getProcess
 * `Method`: GET
 * `URL`: /bonita/API/bpm/process
 * `Params`:
@@ -30,11 +39,60 @@ For instance, to get the list of the processes deployed on the Bonita runtime (f
 
 Then, click on `Run` to test the API and see the result in the `Response` tab.
 
+image::images/interact-with-your-bonita-process/get-process.gif[get-process]
+
+
 [NOTE]
 ====
 The authentication to the Bonita runtime is automatically handled by the Bonita datasource.
 ====
 
-Then, you can use the `Table` widget to display the list of the processes in your application.
 
+=== Instantiate a process
+Now, we will instantiate one of the processes with what the user typed in the form we created xref:create-an-interface.adoc[previously]. 
+
+Click the `Editor` icon from the left panel, click the `Queries` tab, then click the `new query / API` button and select the Bonita datasource created previously. 
+Enter the following configuration:
+
+* `Name`: instantiateProcess
+* `Method`: POST
+* `URL`: /bonita/API/bpm/process/{{getProcess.data[0].id}}/instantiation
+* `Params`:
+    - `Key`: p
+    - `Value`: 0
+    - `Key`: c
+    - `Value`: 10
+* `Body`: 
+[source, JSON]
+----
+{{
+	{
+		claimInput: {
+			description: Input1.text,
+		}
+	}
+}}
+----
+
+
+This API will instantiate the first process returned by `getProcess` with the `body` 's content. 
+
+[NOTE]
+====
+In Bonita, you need to refer to your contract in order to instantiate a process.
+Here, we used the contract defined in the Getting Started tutorial as an example: `description` is a mandatory input for the `claimInput` xref:getting-started:declare-contracts.adoc[contract], and `description` will take as value what is typed in the `Input1` widget of the form.
+====
+
+Now, we need to tell the form to execute this API request after clicking the `submit` button.
+
+Go to the `UI` tab and click the form's `submit` button. On the right panel, click the `onclick` label, then select `execute a query` and choose `instantiateProcess`:
+
+image::images/interact-with-your-bonita-process/bind-data.gif[bind-data]
+
+
+
+Everything is settled. Now, click the `preview` button on top of the screen and test your form:
+
+image::images/interact-with-your-bonita-process/test-instantiate.gif[test-instantiate]
 
+You now have a working interface that interacts with your Bonita process and data, congratulations!