Training - Custom UI Component (Basic)

Related subfolder of the training project: "User Interface/Training/UIM/Exercise/UIPage/CustomUIComponent"

Chapter Overview

In this training chapter you will get familiar to develop your own custom UI component.

A custom UI component consists of a UI panel which has one row that contains a custom widget located in the advanced palette.

The following development possiblities of the custom widget are available in TAB Implementation:

SubTAB Properties: to specify width and heigth of the widget
SubTAB Visibility: to configure the visible status
SubTAB HTML Code: to enter HTML code
SubTAB Javascript Code: to enter Javascript code
SubTAB CSS Code: to enter CSS code

Private data and input/output data of the custom widget can be configured in TAB Data of the UI Panel and can be accessed from Javascript.

Exercise

In this exercise you will develop a custom UI component, which displays the HTML content of string attribute, which is created using the HTML Editor UI Element.

You will get familiar with the configuration possibilities of the Custom UI element.

You can test the implementation in UIM Preview and optionally in the xAPPnow User Portal.

Exercise

Exercise 1: Create UI Page "CustomUIComponent"

Step 1: Open context menu of folder "Automation/User Interface/Training/Exercise/UIPage" in the model tree
Step 2: Select menu function "Create Model" to open dialog "Create User Interface Model"
Step 3: Enter model name "CustomUIComponent" and keep options "Default Device", "Default Label" and "Model Type: UI Page"
Step 4: Select option "From: UI Page" to open dialog "Select UI Page"
Step 5: Open folder "…/Training/Template" to select template "TMPL_CustomHtmlText" with double click
Step 6: Keep default option for "Default Device" and click button "OK" to create the UI page

Exercise 2: Create UI Panel "CustomHtmlText"

Step 1: Open context menu of folder "Automation/User Interface/Training/Exercise/UIPanel" in the model tree
Step 2: Select menu function "Create Model" to open dialog "Create User Interface Model"
Step 3: Enter model name "CustomHtmlText" and select option "Model Type: UI Panel"
Step 4: Keep default option for "Default Device" and "Default Label" and click button "OK" to create the UI page

Step 5:Open TAB "Data" and add a new attribute "htmlText" type string using button "New"

Step 6: Drag&drop a Grid element to the editor from Layout palette and specify Column Layout "12" and click button "OK"

Step 7: Drag&drop a Custom element from Advanced palette into the empty row
Step 8: Select Custom element and open TAB "Implementation", Sub TAB "HTML Code" to enter the following code:

<h3> Show the <strong> content </strong> of the HTML Editor here: </h3>

Step 9: Select Custom element and open TAB "Implementation", Sub TAB "Java Script Code" to enter the following code:

$('#show-content-container-id')[0].innerHTML = localData.htmlText;

Exercise 3: Add Referenced Panel "CustomHtmlText"

Step 1: Open model "Automation/User Interface/Training/Exercise/UIPage/CustomUIComponent" in the model tree
Step 2: Drag&drop a Referenced Panel element into the first empty span to open dialog "Select and create UI Panel"

Step 3: Open folder "…/Training/Exercise/UIPanel" to select UI panel "CustomHtmlText" with double click

Step 4: Check the final view of the model

Exercise 3: Link UI Page to Frontend Service Model

Step 1: Open frontend service model "Automation/Service/Training/Exercise/CustomUIComponent"
Step 2: Select UI page "CustomUIComponent" to open TAB "General", SubTAB "Element"
Step 3: Click button “Search“ to open dialog "Select or Create Submodel" and select UI page "CustomUIComponent" with double click
Step 4: Right click on button flow to select button "Exit".

Exercise 9: Test the UI Page

Step 1: Open UI Page and click button "Preview" in the toolbar to directly test the UI page within the UI editor
Step 2: Optionally publish the frontend service model and test the UI page in User Portal
Step 3: Enter the following code into the source code of the HTML Editor element

<h2 style="text-align: center;">xAPPnow HTML Code Sample</h2>

<p style="text-align: center;">Code Sample automatically applies color highlighting to PRE and CODE elements. Highlight some text, click the Code Sample button to see `code` applied to the text.</p>

<h3 style="text-align: center;">How to insert a snippet</h3>

<p style="text-align: center;">To create a snippet, insert the cursor on a new/empty line and click the Code Sample button in the toolbar. Add a code snippet to the modal, select the language and click OK to add the snippet to the page.</p>

<p style="text-align: center;">You can use this to see how<strong> Code Sample </strong>changes the HTML in the editable area.</p>

Step 4: Check the code is correctly displayed