Suppose you need to update some data to the database from the page or show some data from another system, you need to integrate Page with Microflow. Assume we need to show data such as exchange rate from the Fixer.io website to be shown dynamically on the Page. For this, we can use the Web Service Node in Microflow (REST or SOAP) to get data from the website and integrate it with Page Designer.
In most enterprise applications to make the UI dynamic, it needs to be integrated with the back-end server to provide updated information as per user interaction. For example, when the user enters the code zip code, the system can return the name of the province, district, and sub-district from the database. In ONEWEB, Microflow provides the interface for integration.
In this section, we will see how to integrate the Smart Form with database to implement dynamicity on UI using the Microflow
Smart Form Integration using 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)
5. ON Microflow Configuration Window select "change()" in Event and click on the 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 the 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 into the Microflow.
Now when you open the form in Runtime and click on the button, it will call the microflow.
4. Click to open Microflow Configuration Window
Page can be integrated with other internal and external systems like databases or web services using Microflow to create dynamic web pages on ONEWEB. This section shows you how to call a Microflow Service from Page, and also to display the data returned by the service on the Page.
Page to call Microflow Go to the Page Designer and open the Page that you want to make dynamic.
1. Click on the input field to be passed to Microflow while calling
4. Select the State parameter to connect (Microflow mapping allows only state parameters to be mapped to the microflow input parameter. Hence to pass a parameter to microflow user needs to map the input field to State)
5. Click on the element or container which initiates the call to your microflow (1). In this example, we call the microflow at the click of a button.
Click on the Add icon under Action
Select "click" in Event
Select "Microflow" in the tabs
Click Refresh to reload the available services.
Select "Your Project Name" in Microflow project name
Select "Your process Name" in Microflow process name
8. Map the Page Designer parameter to the Microflow Parameter. Remember to Save mapping by clicking on the Save icon on the mapping screen.
9. User can hook and add JavaScript functions before and after the microflow call.
10. User can also redirect to another page on the success of the call.
Update data on Page from Microflow
1. Select an object on a page which displays the data coming from service
4. Select the field name and click Connect.
5. 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.
2. Click on to Connect to data icon 3. Click on the State tab and click on Connect to State button
6. Click on the tools panel on the left menu to open the interaction & data flow configuration panel (2)
7. Click to open Mapping Window (3)
2. Click to Connect to Data 3. Click the Microflow tab and choose the value from Microflow. Click on the 'Connect to Data' button
