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
	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	If set to True, a Value Help icon will be shown at the end of TextField
	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
DropdownBox	Name	Unique UI element name
	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
	TextSize	Specifies the size of the text
	Default Visible Values	Defines the number of items to be displayed at once in the list
	Static Data Provider	Used when you have to display data in the list at design time. You must enter the data in key-value pair.
	Dynamic Data Provider	Used when you display data dynamically using query template. The data provider uses columns to set the key-value pairs.
	OnSelect	Event called when there is a change in text in the field
	OnInitialize	Event called when the control is initialized
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
	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.