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
The dashboard cell height must be 40px when you design a form using UI elements.
You must be assigned the following UME actions:
XMII_SSCE
XMII_SSCE_UIElements
For more details on users and roles, see User Management.
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 |
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.
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.