UI Elements

Along with SAP MII objects such as query templates, display templates, and so on, you can also create a user interactive page by adding UI elements such as text areas, buttons, images, text input fields, radio buttons, check boxes, and dropdown boxes. You can drag and drop the UI element to the selected cell of the layout. A reference grid is created in the background of the layout and the first UI element is always placed at the top left cell of the grid. The consecutive elements are placed at cursor position of the grid, where you choose to place the UI element. At cursor’s position, the cell in the background is highlighted with a green border. When you place new content into a cell with existing content, a red border appears and a confirmation dialog box to replace the existing content appears.

When you choose the selected UI element, the Properties tab displaying all the properties associated with that UI element appears on the right pane. You can configure the properties of the UI elements like ID, text value, visibility, event handlers, and so on. On adding an Eventhandler, a Javascript method is created in the custom code area in Source Code tab. You can write your implementation in the generated method and the method is executed on that selected event. You can preview the UI elements along with the configurations in the Preview tab. Also, source code is generated in the Source Code tab for every UI element dropped into the cell.

You can drag and drop a UI element group to another cell within the layout.

Additionally, you can import an image to any cell using Image from UI Controls tab. You can either select an image from your local system or browse for the existing images that are available in Resource/Files. If the selected image is from your local system, then the image is saved to My Content folder of Resource/Files pane.

Note Note

The dashboard cell height must be 40px when you design a form using UI elements.

End of the note.

Prerequisites

You must be assigned the following UME actions:

XMII_SSCE
XMII_SSCE_UIElements

For more details on users and roles, see User Management.

Features

The UI controls and their relevant properties are listed below:

UI Controls	Properties	Description
TextView	Name	Unique UI element name
	Text	Displays the entered text
	Text Size	Specifies the size of the text
	Visible	Sets the visibility of TextView at run time
	Required	If set to True, the * (asterisk) is added to text. This sign is usually used to inform the user that the corresponding input field is mandatory and requires to enter a value.
TextField	Name	Unique UI element name
	Placeholder	Placeholder for the Textfield
	TextSize	Specifies the size of the text
	Default Value	Enter any value or browse for the value from the value help. On selecting the value help, the input parameters name along with the values are displayed. You can select any paramter, and the parameter value is assigned to the UI element.For more information , see Default Value for Text Field and Text Area in the Activities section. Note Only the parameters with context type None, Query Parameters, and Session Parameters are shown in the value help. End of the note.
	Type	Specifies the type (Numeric or Date) of the TextField
	Tooltip	Provides quick information about the control
	Enabled	Enables or disables the control at runtime. You can set to either true or false.
	Visible	Sets the visibility of TextView at run time
	Show Value Help	False: Default Value Custom Function: You can create your customized value help functions in Source Code. At runtime, when you select the value help icon, your customized function is executed and the results are displayed. i5ValueHelp: Bind the input field with value help dialog which is defined by existing i5ValueHelp files. On selecting an existing i5ValueHelp, the assigned parameter list appears. You can further customize the value for each parameter from the Value column. At runtime, when you click on the value help, the select screen with the existing filter parameters and the selected fields of the query appears. For more details, see i5Value Help.
	OnLiveChange	Event called while typing in the TextField
	OnEnter	Event called when there is a change in the text field or when you choose Enter key
	OnValueHelp	Event called while Value Help icon is selected.
Button	Name	Unique UI element name
	Text	Displays the entered text
	TextSize	Specifies the size of the text
	Tooltip	Provides quick information about the control
	Enabled	Enables or disables the control at runtime. You can set to either true or false.
	Visible	Sets the visibility of TextView at run time
	OnClick	Event called when you click on the button
	i5Command iCommand	Used when you trigger an iCommand created in the MII Workbench
	i5Command Query Template	Used when you trigger an XacuteQuery created in the MII Workbench
DropdownBox	Name	Unique UI element name
	Enabled	Enables or disables the control at runtime. You can set it to either true or false.
	Visible	Sets the visibility of TextView at run time
	TextSize	Specifies the size of the text
	Default Visible Values	Defines the number of items to be displayed at once in the list
	Data Provider Data Source Static	Used when you display data in the list at design time. You must enter the data in key-value pairs.
	Data Provider Data Source Dynamic	Used when you display data dynamically using query template. The data provider uses columns to set the key-value pairs. You can configure the query template by choosing (Configure Query Parameters). The values provided are displayed at runtime.
	Data Provider Data Source Time Period	Allows you to link with two input text fields. Example You define two input text fields with type Date and Time and a dropdown box with Time Period property. At runtime, the time period UI element displays a list of predefined time periods. On selection of a time period from the dropdown list, the time periods, start and end date and time are displayed in the two specified text fields. Additionally, you can customize and select your own date from the text field. For details, see Time Periods. End of the example.
	OnSelect	Event called when there is a change in text in the field
	OnInitialize	Event called when the control is initialized
List	Name	Represents the unique UI element name
	Enabled	Enables or disables the control at runtime. You can set it to either true or false.
	Visible	Sets the visibility of List at run time
	TextSize	Specifies the size of the text
	Data Provider Data Source Static	Used when you have to display data in the list at design time. You must enter the data in key-value pairs.
	Data Provider Data Source Dynamic	Used when you display data dynamically using a query template. The data provider uses columns to set the key-value pairs.
Image		Allows you to select an image from the server or client. The default Server option displays a list of projects to select a image from the list of projects whereas the Client allows you to browse and upload an image from the local machine.
TextArea	Name	Unique text area name
	Placeholder	Displays the content within the boxed area. You can update the placeholder content.
	Text Size	Specifies the size of the text
	Default Value	Enter any value or browse for the parameter with default text from the value help. For more information , see Default Value for Text Field and Text Area in the Activities section.
	Tooltip	Provides quick information about the control
	Enabled	Enables or disables the control at runtime. You can set to either true or false.
	Visible	Sets the visibility of TextArea at run time
	OnLiveChange	Event called when you click on the button
	OnEnter	Event called when there is a change in the text field or when you choose Enter key
Radio Button	Name	Unique name of the radio button
	Text	Displays the radio button label text
	Group Name	Name of the group. Group indicates a bundle of radio buttons that belongs to same group. In Preview mode, you can select radio buttons with different group names.
	Tooltip	Provides quick information about the control
	Enabled	Enables or disables the control at runtime. You can set to either true or false.
	Visible	Sets the visibility of Radio Button at run time
	OnSelect	Event triggered when you select the checkbox
Check Box	Name	Unique name of the check box
	Text	Displays the check box label text
	Tooltip	Provides quick information about the control
	Enabled	Enables or disables the control at runtime. You can set to either true or false.
	Visible	Sets the visibility of Check Box at run time
	OnSelect	Event triggered when you select or de-select the check box

Activities

Select UI Elements.
From the UI Controls tab, drag and drop any UI element to any cell of the selected layout.
The first UI element will be placed at the top left cell of the reference grid.

Note
When you move an image to the cell, the dialog box Select File displays options to select the image from the available projects or from your local machine.

The Server option allows you to select a image from the available projects whereas the Client option allows you to browse for an image in your local machine.

End of the note.
Click the UI element to configure its properties.
The Properties dialog box appears on the right side of the screen.
Enter the relevant information.

To delete a UI element, select the element and choose either Delete icon on top of the cell or Delete key on the keyboard.

Default Value for Text Field and Text Area

Select the UI element on the dashboard.
From the Properties tab, choose the value help from the Default Value field.
The Input Parameters table with parameters and default values appears. To enter the default value for the parameters, do the following:
1. Navigate to Preferences tab.
2. Choose Add.
3. Choose None in the Context column.
4. Enter a value in the Default Value column.
The dashboard displays the default value of the parameters.