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.
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:
Figure: Primitive Data
Figure: Structured Data
To delete the parameters, select the added parameter and click the Delete icon.
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:
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:
Figure: Resulting Access Points
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
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
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.
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.
Figure: Configuration - Source Code
The design view offers the following options to edit the HTML markup code:
|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.|
Figure: Configuration - design view
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.
Figure: Code generation settings
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 which buttons should be generated for:
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.
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.
Figure: Reset Markup
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.
Figure: Insert an image
In the following example, we extend our template additionally with text and a heading.
Figure: Customized mashup template
The resulting UI mashup panel looks like the following during workflow execution:
Figure: Customized UI Mashup panel
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
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.
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.
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.
To retrieve output data fields in the Output Data area, click the button. The data output from the Web application is returned and displayed with the according JSON code in the Output Data area.
Create a UI Mashup application with IN/OUT parameter of a structured type Person having Name and Id as attributes.
Figure: Adding Parameters
In the Configuration tab, generate HTML markup with a Complete button and one column to display the data.
Figure: Example Configuration
The steps to run a test on this configured UI Mashup application are the following:
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.
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.