UI Mashup Application

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. Process-based UI Mashups of the Infinity Concepts.

Setting Parameters

In the Parameters tab, you can define parameters to be used for input and output access during data mappings of the application activity. To add parameters click the Add icon. The parameter is added to the parameter definition table. This parameter definition is available as access point for the application activity.


Figure: Parameter Mapping

Specify the following properties for the parameter:

To delete the parameters, select the added parameter and click the Delete icon.

Accessing the Parameters in Data Flows

The parameters set in the configuration can be set as access points in data flow to and from the UI Mashup application. For example, add the following parameters:

Setting Parameters
Figure: Setting In and Out data parameters

These parameters are available as access points in data flow to and from the according UI Mashup application as indicated in the following screenshot:

Resulting Access Points
Figure: Resulting Access Points

Configuring the UI Mashup Application via URI

To configure the UI Mashup application via URI, select the Via URI option in the Configuration tab. You need to specify the URL for your application in the URL entry field.


Figure: URL for Configuration

Using a URI to a locally hosted UI

You can also reference a UI that is deployed together with IPP as utility JAR. Please note that the URL must not start with a leading slash /!

In the following example URL, plugins/corporate-actions/corporateActionsPanel.html references corporateActionsPanel.html, which resides in folder corporate-actions/META-INF/webapp of jar file corporate-actions.jar:


Figure: URL for Configuration

Configuring the UI Mashup Application via embedded Code

To configure the UI Mashup application via embedded code, select the Embedded option in the Configuration tab accordingly. You can add HTML code in the editor directly or use the Generate Markup option.

Adding and Editing Code in the Source View

To add source code or edit generated or existing source code, click the Source button in the left upper corner. The HTML markups source editor opens.

Configuration - Source Code
Figure: Configuration - Source Code

Editing HTML markup in the Design View

The design view offers the following options to edit the HTML markup code:

Icon Function Description
Source Enables you to copy-paste the HTML code in the editor
Cut Using this icon you can move the content. It is enabled when some text is selected in the editor.
Copy Using this icon you can copy the cut or selected content in the editor. It is enabled when some text is selected.
Paste Using this icon you can paste the copied or cut content in the editor.
Paste as Plain Text Using this icon you can paste the copied content as plain text.
Paste from Word Using this icon you can paste the copied content from Microsoft Word.
Undo/Redo Using this icon you can undo or redo the most recent action taken.
Spell-check Enables you to check the spellings in the content.
Bold, Italic and Strike through Applies bold, italic and strike through formatting to selected text.
Insert/Remove Numbered List Inserts or removes numbered list
Insert/Remove Bulleted List Inserts or removes bulleted list
Increase or Decrease Indent Increases or decreases the text indentation.
Block Quote Format a block of text to identify quotations.
Link, Unlink and Anchor Adds link to the selected text or unlink the linked text or provide anchor for the text.
Image Inserts an image at specified location.
Table Inserts a table at specified location.
Horizontal Line Inserts horizontal line at specified location.
Special Character Inserts special characters at specified location.
Styles Enables you to specify styles for the content.
Normal Enables you to format paragraph of the content.
Maximize Increases the size of the editor.
About CKEditor Displays information about editor.

HTML
Figure: Configuration - design view

Generating Code

Infinity provides the option to generate predefined embedded code containing specific buttons and an option to define the number of columns to be displayed. The HTML code is generated using the data mappings set up on the Parameters tab.

Once you have set your options, click Generate Markup to generate the code accordingly.

Code generation settings
Figure: Code generation settings

Setting the number of columns

You can set the number of columns to be used to display data in the column layout. Enter a number directly in the entry field or use the up- and down-arrows accordingly. The default is number of columns is 4.

Determine the buttons to be used

Determine which buttons should be generated for:

Adding Mobile code

An option is available to add UI Mobile code which can be used in the Infinity Mobile User Interface. Please refer to the Mobile UI Mobile UI user guide for details on how to use Infinity UI Mashups with a mobile interface.

If this option is enabled, which is the default, jQuery mobile code is included in the markup after the Generate Markup link is clicked.

Reset Markup

Once the HTML markup is generated, the Reset Markup option is displayed and all the Form Button checkboxes are hidden. Use the Reset Markup option to clear the application markup.

Reset Markup
Figure: Reset Markup

Extending the embedded code with custom Settings

You can further customize the embedded mashup code to change the resulting mashup panel. Simply edit and adjust the generated code accordingly.

For example, insert an image on top of the panel. Click the image icon to open the Image Properties dialog. Enter a URL with an image you like to insert.

Insert Image
Figure: Insert an image

In the following example, we extend our template additionally with text and a heading.

Customized mashup template
Figure: Customized mashup template

The resulting UI mashup panel looks like the following during workflow execution:

Customized UI Mashup panel
Figure: Customized UI Mashup panel

Testing the Configuration

Go to the Test tab in case you like to test your configuration. The Test tab provides three areas, a data input field, a preview field for the rendered application and a data output field.


Figure: Test - UI Mashup Application

Note
For the time being at least a Complete button needs to be generated as it is mandatory to click the Complete button to be able to retrieve OUT Data.

Reinitializing Data Input Fields

To reinitialize the data input fields in the Input Data area, click the Reinitialize Data Input Fields icon This generates the JSON code from data mappings defined on the Parameters tab and displays it in the Input Data area. You can add some values for testing.

Reinitializing the External Web Application

To reinitialize the Web application in the preview area, click the Reinitialize External Web Application button.

This renders the Web application with the data input in the Preview area as it would appear in the Portal. You can enter or modify data in the Web application for testing.

Retrieving the Output Data

To retrieve output data fields in the Output Data area, click the Retrieve Output Data button. The data output from the Web application is returned and displayed with the according JSON code in the Output Data area.

Example Testing of a UI Mashup Application

Create a UI Mashup application with IN/OUT parameter of a structured type Person having Name and Id as attributes.

Adding Parameters
Figure: Adding Parameters

In the Configuration tab, generate HTML markup with a Complete button and one column to display the data.

Configuration
Figure: Example Configuration

The steps to run a test on this configured UI Mashup application are the following:

  1. Click the Reinitialize Data Input Fields button

  2. The code from the data mapping is displayed in the Input Data area:

  3. Enter some input values for the parameters

  4. Click the Reinitialize External Data Application button

  5. The application is rendered as configured in the preview area with the data displayed in one column and a Complete button

  6. Change the values to prepare for testing the output and click the Complete button

  7. Click the Retrieve Output Data button

  8. The code with the output data is displayed in the Output Data area:

Tutorials

An example usage 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. 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.

Security Configuration

For information on security configuration of UI mashup application, please refer to chapter Security Propagation for Web Applications of the Concepts Security Propagation for Web Applications in the Concepts handbook.