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: "" (the value is not set) = 464px "middle" = 344px "low" = 224px
events	String	Y	Specify the actions to perform after one of the predefined templates is selected: click context mouseOver
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: ['mouseover'] – the user moves the pointer over the menu section. ['click'] – the user clicks the menu section.
events	Object	Specify the event that takes place when a user interacts with the menu element. Possible values: "click": "runScript()" – a script is called when the user clicks the menu element. "mouseover" : "runScript()" – a script is called when the user moves the pointer over the menu element.
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	Description	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: [],
                },
            ]
        }
    }
})();

Page tree

dropdownMenu

Attributes

Menu structure

Decorations