dropdownMenu
Use the <dropdownMenu> tag to create a nested drop-down menu.
Attributes
Available attributes:
| Attribute | Type | Mandatory | Description |
|---|---|---|---|
| class | String | N | Specify the CSS class name defined in the CSS field of the widget. |
| size | String | Y | Specify the dropdown menu size by selecting from the predefined options:
|
| events | String | Y | Specify the actions to perform after one of the predefined templates is selected:
|
| isShow | Boolean | N | Set the value to true to enable the menu display. The default value is false. |
| doClose | Function | N | Specify an additional action when the menu closes. Set the attribute value to the custom s_widget_custom method created in the client script. |
| model | String | Y | Specify a reference to the dynamic variable that stores menu items and actions. |
Example:
dropdownMenu
<dropdownMenu model="data.menu"></dropdownMenu>
The template above displays a menu with three dots on the page: 
Menu structure
The menu structure is described in the server script. Available properties of the menu object:
| Property | Type | Description |
|---|---|---|
| event_to_display | Array of Strings | Specify the event that opens the menu section. Possible values:
|
| events | Object | Specify the event that takes place when a user interacts with the menu element. Possible values:
|
| sections | Array | Specify the list of menu sections. |
| order | Number | Specify section order. Sections are displayed in ascending order. |
| elements | Array | Specify the elements of the section. |
| title | String | Specify the title of the element. |
| child_elements | Array | Specify the child elements of the element. |
| decoration | Object | Specify the decoration structure. |
Server script example with the menu structure
; (() => {
data.menu = {
"menu": {
"size": "low",
"event_to_display": [
"click"
],
"sections": [
{
"order": "1",
"elements": [
{
"title": "Text",
"order": "1",
"event_to_display": ["click"],
"events": {
"click": "runScript()"
},
"child_elements": [
{
"title": "Text22",
"event_to_display": ["click"],
"events": {
"click": "runScript()"
},
"child_elements": [
{
"title": "Text2",
"event_to_display": ["click"],
"events": {
"click": "runScript()"
},
"child_elements": []
}
]
}
]
},
{
"title": "Title",
"order": "2",
"event_to_display": ["click"],
"events": {
"click": "runScript()"
},
"child_elements": [
{
"title": "Text2",
"event_to_display": ["click"],
"events": {
"click": "runScript()"
},
"child_elements": []
}
]
}
]
},
{
"order": "2",
"elements": [
{
"title": "Text",
"order": "1",
"event_to_display": ["click"],
"events": {
"click": "runScript()"
},
"child_elements": []
}
]
}
]
}
}
})();
Decorations
You can add decorations to the elements of the dropdownMenu. Available properties of the decoration object:
| Property | Type | Possible values |
|---|---|---|
| text | Add a label that is displayed to the right from the element name in the drop-down menu. | Any symbols, including emoji. Max: 3 symbols |
| hint | Add a tooltip that appears when the user moves the pointer over the element. | Any symbols. There are no maximum length limitations. Default value: not set |
| color | Specify the color for the text label. | Recommended values: '#ABB1BA', '#ffffff' Default value: '#ffffff' You can use any other HEX colors, but the colors above are recommended as they comply with the platform design. |
| backgroundColor | Specify the background color for the text label. | Recommended values: '#E52600', '#0086E5' Default value: 'transparent' You can use any other HEX colors, but the colors above are recommended as they comply with the platform design. |
| borderRadius | Specify the roundness of the text label background. | Recommended values: '4px' (a rectangular with slightly rounded corners), '24px'/'50%' (a circle/oval, depending on the numbers of symbols in the text label) Default value: '0' The value can be set in pixels or percentage. |
Server script example with decoration
;(() => {
data.menu = {
"menu": {
"size": "middle",
"event_to_display": ["click"],
"events": {},
"sections": [
{
title: 'All',
order: 1,
event_to_display: ['mouseover'],
events: {},
decoration: {
text: '🎁',
hint: '',
color: '',
backgroundColor: 'transparent',
borderRadius: '0',
},
child_elements: [],
},
]
}
}
})();