Integration

In the previous sections we have created our first WEM application, a simple CRM application to store and manage company data.

In this section we are going to expand the application with the use of external data by interaction with a web service in WEM. To facilitate this section we will use publicly available web services. We are going to use a public service with ‘Country data’ to add to our CRM application.

Add web services (consume)

WEM applications can use web services to integrate with external systems. One of the simplest ways to integrate in WEM is to use SOAP (“Simple Object Access Protocol”). It is a highly standardized and self-documenting messaging framework, where everything you can do is strictly defined in a WSDL (“Web Service Description/Definition Language”) document. For more detailed infomation about web services and WEM, check out online documentation.

First return to the Home tab of the modeler and click on Web services (consume). Here you can add SOAP-based service to retrieve external data.

Click on (+) Add web service in the top menu of the modeler and select From web.

The Add web service window appears:

We are going to use a URL from which we can load the service’s WSDL (“Web Services Description Language”) file. This file contains the description of the web service we want to use.

We use the following URL: 

http://webservices.adamei.nl/webservices/countryservices/?wsdl

Next copy and paste the exact URL above (http://webservices.adamei.nl/webservices/countryservices/?wsdl) into the first field of the Add web service window.

Enter a short but clear Service name in the second field, for example ‘Country services’ and click Ok.

WEM is now importing the WSDL definition into the modeler. When the import has been successful, the following message appears:

You will see that a web service ‘Country services’ has been created in the modeler. Unfold the service by clicking on the plus [+] before the globe icon () and six (6) methods (also called functions or operations) are presented. Every method performs a specific function/operation within the webservice.

 

 

You can unfold every one of the 6 methods. Notice that every method has an Output folder and some have a Input folder. Every folder contains fields that we can use throughout our WEM project.

Test web service (consume)

Before we use the ‘Country services’ SOAP web service that we imported in the previous section in flowcharts, it is wise to test the web service and its behavior first.

Return to the Home tab and click on Flowcharts. Create a new Regular flowchart by clicking on New flowchart. Name this flowchart ‘Test Country services’.

Drag and drop a user interaction node onto the canvas and name it ‘Input Country services’ and double click on the node.

Place a Form below the title and select it by clicking it once.

Note: instead of selecting fields from the Data model we are going to select fields from the Web services (consume) folder. Unfold the Web services (consume) folder by clicking on the plus [+].

Next select the ‘Country-Name’ field from the ‘Input’ folder of the method ‘GetISOCodeByCountryName’.

Note: make sure that the Form is properly selected, otherwise the selected field will not appear in the Form.

Note: optionally you can change the Label name into ‘Country Name’ (without the -).

Next place a Button and name it ‘Test web service’.

Next place the output field ‘ISO-Code’ in the template by selecting it from the Data panel. Optionally, you can type a field name before the output field, for example ‘ISO Code:’. The result should look something like this:

Don’t forget to Save the template!

Finally, we connect the user interaction node node with the Start node. Then drag and drop the Invoke web service node () onto the canvas and select the ‘GetISOCodeByCountryName’ method.

The result should look something like this:

The last step is to connect the Invole web service node with the user interaction node. Select the ‘Test web service’ exit.

The result of the Invoke web service node can be returned to the user interaction node by drawing an arrow back and select ‘Default exit’. The result should look something like this:

Test your web service call by previewing the project. The result should look something like this:

You can test with other countries (e.g. United States, Germany, United Kingdom)

In the next section we are going to integrate the same web service (consume) in our CRM application.

Integrate web service

We are going to integrate the ‘Country services’ SOAP web service that we imported and tested in the previous section in our flowcharts.

Prepare the integration

Before we use the ‘Country services’ web service, we have to prepare the input field. We are going to store the ‘Country name’ in our data model list ‘Company’ and use this as an input field for the web service.

Return to the ‘Company’ list in the Data model and add a text field named ‘Country Name’. Also use a technical name ‘Company.Country Name’.

Next add the ‘Country Name’ field to the Form on the ‘Company details’ user interaction node.

Next add the output field ‘ISO-Code’ of the Web services (consume) below the Form. The result should look something like this:

Don’t forget to Save the template!

Test your modification by previewing your project! Also add country names (for example Netherlands, United States, Germany) to your data, so we can retrieve the ISO Code by the web service.

Invoke web service with Action flowchart

In the previous section we prepared the environment to integrate with the web service. We added the ‘Country Name’ field tot the ‘Company’ list and user interaction screens so we can use it as an input field for the web service.

Now instead of invoking the web service directly, we are going to use an Action flowchart to do this. If all is correct, the country name is now stored in the database and we can use this country name to invoke the web service and return an ISO code.

First return to Flowcharts on the Home tab and create a new Action flowchart named ‘Get ISO Code’.

The first step in this flowchart is to fill the input field ‘s Country-Name’ of the ‘GetISOCodeByCountryName’  web service (consume) method with the stored ‘Country Name’ in the ‘Company’ list. We are going to use a green assignment node () to do this.

Drag and drop a green assignment node onto the canvas. Select the ‘Country-Name’ field from the Input folder of the ‘GetISOCodeByCountryName’  web service method.

Select ‘Advanced’ as Action for the assignment node.

Next click on the [Fx] button of the Operand property. The WEM Expression editor appears. Select ‘Country Name’ from the ‘Company’ list.

Click Ok.

This way the input field of the web service is filled with the ‘Country Name’ from the ‘Company’ list.

Next drag and drop the Invoke web service node () onto the canvas and select the ‘GetISOCodeByCountryName’ method.

Next drag and drop an End node () onto the canvas.

The last step is to connect all the nodes. The result should look something like this:

Note: you can check the option ‘Clear input after call’ of the Invoke web service property.

Integrate the action flowchart

The Action flowchart ‘Get ISO Code’ from the previous section is now ready to be used in the Regular flowchart ‘Companies’.

Return to the ‘Companies’ flowchart.

Drag and drop a subflowchart node onto the canvas and select the Action flowchart ‘GET ISO Code’.

Draw an arrow from the ‘Company overview’ user interaction node to the subflowchart ‘GET ISO Code’ and select the ‘Edit’ exit. Next connect the subflowchart ‘GET ISO Code’ to the ‘Company details’ user interaction node. The result should look something like this:

Test your integration by previewing your project!

Note: when creating a new company, you will see that the last ISO Code retrieved remains. This may not be your intention. You can resolve this by “flushing” the ‘ISO Code’ value from the web service. To do so, use a green assignment node and the action ‘Clear value’ when adding a new company.

Finish

Congratulations, you have finished your first WEM application. You have learned how to model a simple CRM application in WEM where you can manage, search and filter company data and integrate with external data based on web services. All without coding.

So far, we’ve tested the application by previewing it. You can easily publish the application to a test or production server.

Optionally you can embellish your application with a different template (look and feel), colors, icons, tables, widgets. Or you can extend the simple CRM application with other data (model lists) such as ‘Persons’, ‘Locations’ or ‘Address information’.