Using External Web Applications (Process-based UI Mashups)

Process-based UI Mashup Applications provide the option to integrate data and services provided by different sources and support interactions between them. For details on the concept of using UI Mashup Applications, please refer to chapter Process-based UI Mashups of the Infinity Concepts.

Using External Web Applications in Process Models

To add an External Web Application to a model perform the following steps:

  1. In the diagrams toolbar select Int. Applications > External Web Application.
    (Alternatively, in the Outline view right-click Applications and choose New Interactive Application > External Web Application.)

    Create an External Web Application
    Figure: Create an External Web Application.

  2. Open the properties dialog.
  3. Expand the Interactive tree in the left pane and select External Web Application.

    External Web Application Properties
    Figure: External Web Application Properties.

  4. In the right pane enter an arbitrary URL for your application.
  5. Select Typed Access Points in the Interactive tree in the right pane.
  6. In the Typed Access Points pane, you may define an arbitrary list of access points for your application. Supported data types are primitive (except of type char or Calendar) or structured data.
  7. Note that if the Displays Imported Model Elements as Groups check box is selected, the access point list displays references for the referenced structured data. Selecting the check box also groups local and referenced elements.

Add Input Source Parameters
Figure: Add Input Source Parameters

Setting Typed Access Points
Figure: Setting Typed Access Points.

Modifying the Typed Access Points

You can modify the specified source and target access points.

  1. In the Typed Access Points pane, right-click the root of access point and then select Modify

    Modify Typed Access Point
    Figure: Modify Typed Access Point

  2. Specify the parameters in the Modify Parameter dialog box and click OK

    Modify Typed Access Point
    Figure: Modify Typed Access Point

Deleting the Typed Access Point

You can delete the source and target access points.

  1. In the Typed Access Points pane, right-click the root of access point and then select Delete Parameter

    Delete Typed Access Point
    Figure: Delete Typed Access Point

    The Warning dialog box gets displayed.
  2. Click OK to delete the access point parameter

    Warning
    Figure: Warning - Delete Typed Access Point

Data Mappings

You can use access point path as well as data path in the data mapping. Per default, only the full value of a parameter is used. You can change this behavior to either enter the name of declared parameters or the data mapping IDs. To have both options, change the property Carnot.Compatibility.Interactions.SupportDataMappingIds, in your carnot.properties file to true.

It is also possible to write an attribute of a structured parameter to a primitive variable, e.g.:


Figure: Using a Structured Data Attribute in Out Data Mapping

Example External Web Application Usage

This is a small example to demonstrate the usage of an External Web Application associated with an application activity.

In a dynamic Web project create a model as follows:

Your model now looks similar to the model in the following figure:

Example Model
Figure: Example Model

Testing the example

Now start your server, deploy the model and run the activity associated with the External Web Application in the Infinity Portal. Your application should come up with the URL you entered in the properties page.

For example, if you entered the URL http://www.wikipedia.com, the following page is coming up:

Example URL
Figure: Example URL.

Now you may inspect the interaction via its REST interface.

Interaction URI
Figure: Interaction URI

Selecting one of these options displays the according xml file. For example Show In Data Values displays all the in-data values of the activity, which invoked the External Web Application:

Show In Data Values
Figure: Example - Show In Data Values

entered in the entry fields for a structured data:

Show In Data Values
Figure: Example - Entered In Data Values.

Using External Web Applications in the same Domain

If you like to use an External Web Application in your Web project domain, add your sources like JavaScript and HTML files to the Web-Content folder of your Web project.


Figure: Web-Content with HTML source

In the External Web Application, enter the URL to your Web project domain accordingly.


Figure: URL containing Web Project resource

Customizing the Close Panel Command for External Web Applications in the same Domain

You have the option to participate in the Close Panel command if you use External Web Applications in the same Domain. To adjust the command, define method performIppAiClosePanelCommand() in your resource.

This allows for example to add a preprocessing command or even to reject the processing of the close command.

For example to add a preprocessing command use the following code:

<script>
function performIppAiClosePanelCommand(commandId){
   if (doPreprocessing()) {
      parent.IppProcessPortalClient.confirmCloseCommandFromExternalWebApp(commandId);
   }
}

function doPreprocessing(){
   // Do Preprocessing, and if successful then return true
}
</script>

Example Close Panel Application

In this example we create an External Web Application in a RAD environment, which opens a confirmation dialog with an alert about the type of closing when an activity is closed or suspended and saved.

  1. Create a dynamic Web project
  2. In your Web-Content folder, create an HTML resource, e.g. called confirmClose.html.

  3. Enter the following code:
    <html>
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
       <title>Insert title here</title>
       <script>
       function performIppAiClosePanelCommand(commandId){
          alert("Confirming Close Panel Command for: "+commandId);
          parent.IppProcessPortalClient.confirmCloseCommandFromExternalWebApp(commandId);
       }
       </script>
    </head>
    <body>
    Welcome in Application using the Close Panel Command!
    </body>
    </html>
  4. Create a model with an application activity and an External Web Application
  5. Open the property page of the External Web Application
  6. Select Interactive > External Web Application and enter the URL according: http://<hostname>:<portnumber>/<your project name>/confirmClose.html

  7. Associate your application activity with the External Web Application
  8. Save and deploy the model
  9. Login the Portal and start your process containing the External Web Application
  10. If you click the Complete button, the following close confirmation dialog opens:

  11. In case you click the Suspend and Save button, the following close confirmation dialog opens:

Tutorial

An example use case is to mashup angular based UI into the IPP Portal. For details on the steps to perform such a mashup, please refer to chapter Mashing up Angular based UI into IPP Portal in our Tutorial Guide. This tutorial guides you through the steps to mash up Angular based UI into the IPP Portal. It describes how to ensure that data entered on the Angular UI is saved in the IPP data and the IPP data can be read and displayed in the Angular UI mashed up in the IPP Portal.

Note that the tutorial model is created in the Modeling perspective, but the usage concept is applying to the Eclipse modeler as well.