How to design a customized form using the workflow UI form designer for an MDM workflow task (deprecated)

When working with MDM workflows in Talend Studio, you can use the workflow UI form designer to build customized forms to allow simplified data entries and easy interactions with Talend MDM.

Basic concepts and working principles of a human task in a workflow

Deprecated

Before getting started, you are recommended to get familiar with the basic concepts and working principles of a human task in a workflow in Talend Studio:

Once a workflow is initiated, the pool variable mdm_context is populated, which must be included in each task in the workflow. If needed, you can add Pool variables and/or Local variables in a task to transfer data from Talend MDM to the form designer. In addition, there must be a Contract that defines the information a task requires to execute.
An MDM REST API extension is configured automatically when the MDM workflow is deployed to the MDM server, which can be used to fetch data from Talend MDM directly and conveniently. For more information, check the REST API extensions listed under the Resources tab after logging into the Bonita BPM web portal as a Bonita administrator.
For further information, see the Talend Studio User Guide.
Correspondingly, in the workflow UI form designer, variables must be defined, which will be used to store data fetched from Talend MDM or user inputs, process the data if needed, and finally send the data back to Talend MDM through the contract variables.
When a user of the form submits, the Operations (actions) defined in the workflow will be executed, so that values entered or modified by the user or other aggregated data are submitted to Talend MDM to fulfill the Contract.

An example of how to design a customized form for a workflow task using the workflow UI form designer

Deprecated

The following scenario introduces how to design a customized form for a workflow task using the workflow UI form designer.

Based on the MDM demo project in Talend Studio, this scenario aims to create a customized Web form for non-technical users responsible for product pricing. With the fit-for-purpose form, the non-technical users can post a price modification request without having to access the complete Talend MDM Web UI.

In this scenario, a web form contains one title New Price Request and four fields Product Name, Enter Product Price, Request Reason and Request Date will be designed. In the form, the original values of product name and product price are fetched from Talend MDM through the REST API extension. Authorized users (price requester) can then enter a new price for the product, enter the new price request reason, and select the new price request date before finally submitting the new price request.

Prerequisites:

The MDM server is up and running.
The Bonita BPM bundles have been installed in Talend Studio.
The Bonita BPM server is up and running.
You have been assigned roles with the appropriate user authorization and access rights.
The information about MDM users has been synchronized to the Bonita BPM server.

Defining contract variables and operations in Talend MDM

Deprecated

Procedure

From Talend Studio, open the workflow Product_Product in the BPM perspective.
Click the task Price Request.
From the Execution view, select the Contract tab, and add one input of TEXT type: c_productPrice, which will be used to receive data from the form designer.
Go to the Operations tab, and click Add to add one new operation.
Select mdm_context from the variable list.
Click the operator link to open the Select operator dialog box and select Use a Java method from the Operation type list.
Select setValue and click OK.
Click the Edit button and add the script "Product/Price#" + c_productPrice, so that the product price in Talend MDM will be updated with the new value submitted by the form user and received by the contract variable c_productPrice.

Designing a customized form for a workflow task

Deprecated

Now you are ready to design a customized form for the workflow task Price Request.

Creating a form

Deprecated

Procedure

From Talend Studio, go to the Form tab, and select the UI Designer option.
In the Target form field, select Create a new form... to open a new form designer page.

You can see a default form designer with the defined contract variable.

On this Form Editor page, you can drag and drop the widgets on the left to the central design area, and then define them specifically on the right panel.
Give the new form a name RequestNewPriceForm.
Add a new title for the form.
1. Drag a new TITLE widget from the left area and drop it in the central design area.
2. On the right panel, change its Text to be New Price Request.
3. Select center from the Alignment list.

Editing the form to fetch data from Talend MDM

Deprecated

Procedure

Add a new field Product Name for the form.
1. Drag and drop a new INPUT widget in the design area to be aligned with the product price INPUT.
2. Make its width 6.
3. Select the yes option in the Read-only area.
4. Name its label to be Product Name.
Click Create a new variable to open a new page and define a new variable in the form designer to fetch data from Talend MDM through the REST API extension.
Enter productName in the Name field.
Select External API from the Type list.
Enter ../API/extension/mdmcontext?xpath=Product%2FName&taskId={{taskId}} in the API URL field to retrieve the original value of the product name from Talend MDM, in which %2F is the escape character for / and taskId is a variable that represents the unique id of the workflow task created when a process is launched.
Click Save to save your changes.
On the right panel, in the Value field of the Product Name INPUT, enter productName.value.
Change the label of the existing C_product Price INPUT to be Enter New Price.
Follow the similar procedure to add a new variable productPrice with the API URL of ../API/extension/mdmcontext?xpath=Product%2FPrice&taskId={{taskId}} and edit the Value field of the product price INPUT to be productPrice.value.

Editing the form to receive data directly from user inputs

Deprecated

Procedure

Name the other two widgets to be Request Reason and Request Date respectively.
Click Create a new variable to open a new page and define a new variable in the form designer to receive data from user inputs.
Enter requestReason in the Name field.
Select String from the Type list.
Click Save to save your changes.
On the right panel, in the Value field of the Request Reason INPUT, enter requestReason.value.
Remove the original Request Date INPUT, then drag a new DATE PICKER widget and drop it in the central design area.
Follow the similar procedure to create a new variable requestDate of String type, and edit the Value field for the Request Date DATE PICKER to be requestDate.value.

Editing the form to transfer data back to Talend MDM

Deprecated

Procedure

At the bottom of the form designer, remove the variable formInput.
Edit the variable formOutput and add the following information that must match the contract requirements:
```
return {
	'c_productPrice': $data.productPrice.value
};
```
In this example, the new product price entered by the form user will be sent back to Talend MDM.
Make sure the Submit BUTTON has the action of Submit task, and the data sent on click is formOutput so that all data required by the contract is sent back to Talend MDM.
After you have done your changes, click Save.
If needed, click Preview to have a preview of the customized form.

Verifying that the customized form takes effect

Deprecated

Procedure

In Talend Studio, deploy the updated workflow process Product_Product to the Talend MDM Server.
Log into Talend MDM Web UI, and launch the process Request Price Change for the product data record whose price you want to change.
Log into the Bonita BPM web portal, and assign the price request task to the appropriate user, for example, a commercial user who is responsible for product pricing in a real-life project.
Take the task as the assigned user, and check that the customized form works well as expected.