Training - Custom UI Component (Advanced)
Related subfolder of the training project: "User Interface/Training/UIM/Exercise/UIPage/CustomUIComponentAdvanced"
Chapter Overview
In this training chapter you will get familiar to develop your own custom UI component with custom events.
Exercise
In this exercise you will develop a custom UI component, which displays the HTML content of two buttons: one to display an alert and a flow button.
You will get familiar with the advanced 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 "CustomUIComponentAdvanced"
-
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 "CustomUIComponentAdvanced" and keep option "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_CustomHtmlTextAdvanced" with double click
-
Step 6: Keep default option for "Default Device", "Default Label" and click button "OK" to create the UI page
Exercise 2: Modify UI Panel "CustomHtmlTextAdvanced"
-
Step 1: Double click on Referenced UI Panel to open model "Automation/User Interface/Training/Exercise/UIPanel/CustomHtmlTextAdvanced"
-
Step 2: Drag&drop a Grid element to the editor from Layout palette and specify Column Layout "1+1+1+1+1+1+1+1+1+1+1+1" and click button "OK"
-
Step 3: Drag&drop a button element in the last empty span and open TAB "Implementation", SubTAB "Events" select UI Flow checkbox and enter flow label "Custom Exit"
-
Step 4: Open TAB "Implementation", SubTAB "User Interface" to enter button label "Exit"
-
Step 5: Drag&drop a button element in the previous empty span and open TAB "Implementation", SubTAB "Events" to enter Action:alert ("Hello Event");
-
Step 6: Open TAB "Implementation", SubTAB "User Interface" to enter button label "Alert"
-
Step 7: Select the row and open TAB "Implementation", SubTAB "Visibility" to set property "Visible" on State "No"
-
Step 8: Select Custom Component and open TAB "Implementation", SubTAB "Java Script Code" to add the following code:
$('#show-content-container-id')[0].innerHTML = localData.htmlText;
// register event for buttons
$('#custom-button-alert-id').on('click',function(eve){
$('.hidden-alert-btn').click(); // execute btn Alert
});
$('#custom-button-exit-id').on('click',function(eve){
$('.hidden-exit-btn').click(); // execute btn exit
});
Exercise 3: Link UI Page to Frontend Service Model
-
Step 1: Open frontend service model "Automation/Service/Training/Exercise/CustomUIComponentAdvanced"
-
Step 2: Select UI page "CustomUIComponentAdvanced" to open TAB "General", SubTAB "Element"
-
Step 3: Click button “Search“ to open dialog "Select or Create Submodel" and select UI page "CustomUIComponentAdvanced" with double click
-
Step 4: Right click on both button flows to select button "Exit" and "Custom 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 using button "Source code"
<button id="custom-button-alert-id" class="btn btn-primary ams" type="button"> Alert </button> <button id="custom-button-exit-id" type="button" class="btn btn-primary ams"> Exit </button>
-
Step 4: Click at button "Alert" to display alert message
