Collapsible Menu control

Often, we want to showcase the menu sidebar with a collapsible style containing various menu icons and sub- menus. The studio has dedicated control of the Collapsible Menu to provide an attractive and sleek menu with a collapsible feature.

Users can create several menu items along with child menus for each of them meaning that you can create multilevel menu items. You can even set icons for each menu item and provide properties like tags and active menu items.

UI Properties

Info

  • Type : The Type field is automatically generated depending upon the type of control used. In this case, it is a “dhq_collapsible_menu” type.

  • Unique Name : A Unique Name is used to uniquely identify a control in your App. Every control that is added on the screen gets an auto-generated Unique Name on the basis of the Label name given to the control.

  • Label : Label is the text that is displayed above the control and helps the user to understand the purpose of the Collapsible menu Control.

  • Hide Label : This option hides the label of the control from the view.

  • Tooltip: This allows you to add the Tooltip text that would provide a hint to the user for providing input. The Tooltip icon would be visible if you switch on the Show tooltip icon toggle property available below.

  • Description: Is the description that you can add for your controls. The Description would only be visible if you switch on the Show Description toggle property available below.

  • External CSS: With this property, one can imply exclusive CSS on controls. You can customize your control with CSS by selecting the correct class or id of the control. You can read more here.

  • Generic :

    • Caching : When the caching option is selected and if a LOOKUP formula is applied to this control, the state that the LOOKUP returns will be cached and the user will be able to see this state of the field even when user accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and getting the latest data from the sheets always is not critical.

    • Hidden : The hidden option helps you to hide the field from the user. This might help to perform some computation you don’t want the user to see or if you want to show certain fields only when a specific condition is met/not met.

    • Trigger dependents: When you Disable Trigger Dependents, it helps you to reduce or optimize the unnecessary evaluation of the dependent control’s formula. For a detailed explanation refer to this article here ..By default, Trigger dependents is enabled. However, in complex apps by switching it off, you would limit the evaluation in the dependent control and in turn ensure quicker response times.

  • Grid Configuration :

    • Hide on desktop: This option hides the selected control in the desktop view.

    • Hide on Mobile : This option hides the selected control in the mobile view.

    • Dynamic Height : This option dynamically increases /decreases the height of the text control based on the given content.

    • Maintain space when hidden : This option maintains the specified space between controls when a particular control is hidden. When a control is hidden the space is maintained in the preceeding control depending on the space the previous control has occupied.

Note: Dynamic height, Hide on Mobile, Hide on Desktop, Maintain space when hidden properties are used in Freeflow Editor only.

Properties

  1. Background: You can change and select the background color of the collapsible menu control.

  2. Indentation: This property is to provide space at the beginning or start of each menu item and its child menu items.

  3. Spacing: This property is to provide space between menu items and child menu items vertically.

  4. Default State: This property enables you to set the initial default state of the collapsible menu, whether to expand the menu or collapse the menu.
    We can select from four different default states for the collapsible menu:

    • Collapse All - It will collapse all the menu items with child menu items.
    • Expand first - It will expand only the first menu item with child menu items.
    • Expand only selected - It will expand the menu item having the property of active with several child menu items. In case of more than one active menu, this will expand only the first menu with the active property.
    • Expand all - It will expand all the menu items with children’s menu items.
  5. Arrow Type: This property is basically to choose the icon to depict a collapsible menu. It can be an up/down arrow or plus/minus arrow.

  6. Expand Type: This property enables users to set whether to keep a single menu with child menu items as expanded or multiple menu items can be expanded.

  7. Menu Items: This section of the property enables you to set different visual properties for the menu items.

  8. Active Menu Items: This section of the property enables you to set different visual properties for the menu items with active property set as true.

  9. Menu Item Hover: This section of the property enables you to set different visual properties for the menu items on hover.

  10. Tag: This section of the property enables you to set different visual properties for the menu items with tag property present in the data. The tag property user can add in the data while binding.

How to use Collapsible Menu control?

Select Collapsible Menu under Advanced section from Controls.

Bind data to Collapsible Menu control

  1. Data: This is the data that does not change over a period of time. Such data is used to assign default values in fields in your application. The static data should be based on JSON data type of array of objects consisting of label, value, icon, and children object.

  2. Controls: This allows you to get data from one of the App controls.

  3. Variables & Keywords: This assigns the value of the variables and keywords defined or available in the app.

  4. Query String: You can also select from the available query string to bind data to the control.

  5. LoggedIn User: You can display the properties related to the LoggedIn User like username, usermail, Admin, status, and so on. You can select a single property only. Select column and click Save .

  6. Connectors: This allows you to select a configured connector and call its API to fetch values and bind the values returned by the respective API. You can select multiple keys to display values.

  7. Custom Formula: This can be used to apply formulas and store the output of those formulas. You can learn more about formulas here.

  8. Custom JavaScript: You can also add a Custom JavaScript to fetch data and use it for your app operations.

The general format for the collapsible menu to bind data is:

[
    {  
        "label": "Home",  
        "value": "home",  
        "icon": "icon-home"  
    },  
    {  
        "label": "Job",  
        "value": "job",  
        "icon": "icon-briefcase",  
        "children": [{  
            "label": "Analyst",  
            "children": [ 
                {  
                "label": "Project Analyst",  
                "value": "project_analyst",  
                "icon": "icon-grid",  
                "tag": {  
                "color": "#FF00F5",  
                "value": "new"  
           	  }  
                },  
                {  
                "label": "Program Analyst",  
                "value": "program_analyst",  
                "icon": "icon-vector",  
                "active": true  
                }  
            ],  
            "value": "analyst",  
            "icon": "icon-graph"  
        }]  
    },  
    {  
        "label": "User",  
        "value": "user",  
        "icon": "icon-user",  
        "image": "",  
        "tag": {  
        "color": "#5C3BE2",  
        "value": "3"  
        }  
    }  
]

In the above JSON data, you will notice that we have some common attributes and a specific format to introduce child elements/ menu items.
You can set the label name, icon, color, active property, image, tag, value, and more using the proper format of JSON data.

NOTE: You can use class names of font-awesome to include icons in your collapsible menu.

NOTE: The data/value of the Value attribute in the JSON data is returned on select of its respective menu item.


Since the Program Analyst menu item is selected it is returning its value attribute data.

Add event to Collapsible menu

With Collapsible Menu control event handling is also possible from the Events section. There is an event available of value_select which can be used to add actions on select of menu options from the control.

As we know that the return value supported by the Collapsible Menu is the value attribute, this can be used as passing keywords in various sorts of actions available in the Studio.

Let’s see how to implement actions to the event binding section of the control.

Click on Events and select the value_select event.

You can add any action you want. We will be using the TOAST action here. You can bind the keyword of the Collapsible Menu control in the Message to showcase the returned value in the Toast action from the control.

Click Continue and Finish .

Preview the app and select any menu option and you will notice a pop-up with value selected in the control.