The beauty of ONEWEB is that each UX/ UI component can be easily integrated with the process or microflow component through simple configuration on the screen. This section details the steps to integrate each UI component with the back-end service.

Process with Page Page can be integrated with Process only through Microflow. So the page will call the Microflow and the Microflow in turn calls the Process Runtime.

Please check the details for integrating business process with Microflow in the Integrate Process with Microflow section. Also please refer

Smart Forms can be integrated with Microflow from version 4.0.0.19. This helps users to reduce the amount of customizations required to make the smart forms more dynamic. This section will explain how to trigger a call to the microflow on any event of the smart Form to implement dynamicity on UI.

Smart Form Integration with Microflow

1. Go to the App Designer

2. Open your Entity

3. Choose the element which should trigger the action and click on the integrate icon. (This icon is available on all the fields and all buttons)

4. Click for open Microflow Configuration Window

5. ON Microflow Configuration Window select "change()" in Event and click on Microflow button Select "Your Project Name" in Project Select "Your Flow Name" in Microflow Select "Y" in Async ('Y' for asynchronous call and 'N' for synchronous)

6. Map Entity Parameters to Flow Parameters.

7. Click on Response tab and map the output parameters from Microflow to the Entity parameters

8. Click OK and Save Entity. You have successfully integrated your Smart Form to the Microflow.

Now when you open the form in Runtime and change the value in field Postal Code, it will trigger the call to microflow and the value returned by Microflow will be displayed on the three text fields.

Page can be integrated with Microflow to create dynamic web pages using ONEWEB. This section shows you how to call a Microflow Service from Page, and also to display the data returned by service on the Page.

Page to call Microflow Go to the Page Designer and open the Page that you want to make dynamic.

Click on the input field to be passed to Microflow while calling

Select the State parameter to connect (Microflow mapping allows only state parameters to be mapped to microflow input parameter. Hence to pass parameter to microflow user needs to map the input field to State)

Click on the element or container which initiates the call to your microflow (1). In this example we will call the microflow on the click of a button.

Map the Page Designer parameter to the Microflow Parameter. Remember to Save mapping by clicking on the Save icon on mapping screen.

User can hook and add JavaScript functions both, before and after the microflow call. User can also redirect to another page on success of the call.

Update data on Page from Microflow Select object on page which displays the data coming from service

Select field name and click Connect.

Click 'Done' on the Connect to Data dialog.

Now the page is successfully integrated with the Microflow and can show the retrieved data on the screen.

In most enterprise applications, the UI needs to talk to the process engine to initiate a business process or to move the job to the next stage. Also, once a process reaches the next human task, you need to have a UI screen associated for the user to work on the job.

In ONEWEB Smart Form can be integrated with Process Flows using Process Button. This section will show you how to integrate a Smart Form/ Entity to a Process.

Smart Form Integration with Process Go to the App Designer Open your Entity Drag Process Button to the Layout Application

Map Entity Parameters to Process Parameter.

Complete the remaining button settings on the Other Settings tab. Click OK. You have successfully integrated your Smart Form into the Process.

Now when you open the form in Runtime and click on the button, it will call the process flow.

Integrating Process with Smart Forms Now in the process flow, when the process reaches a human task, the user needs to open a smart form to work on the task at hand. This section will explain how to associate a Smart Form with a human task node.

Open Process flow that you want to integrate with an Entity. Click on the Human Activity node that you want to map with the Entity. Click on the ‘Load Entity’ Tab in the configuration panel. Choose the Entity name that you want to integrate with this task. Choose the process parameter that is passed from process to Entity. Choose the field on Entity where the parameter value passed from BO is set. Click ‘Done’ to save your mapping

Now once a task reaches this human activity and is assigned to a user, the user can select this task from his Todo List / Inbox and the system will open the entity mapped to this human activity for the user to work on this task.