Advanced Dropdown control

The Advanced Dropdown control is very similar to dropdown control but with additional extensive properties like image support, color property, return value selection, and more.

The Advanced Dropdown control helps users to view much more details in the dropdown itself. You can view different columns of the data along with different colors as well as images with respect to each column. You easily assign a color, image, icon, and prefix text to each option.

Control 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 Table Grid 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 the 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 are 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 control is hidden the space is maintained in the preceding 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.

Property

  1. Title Column: This property decides the title of every option to be shown in the dropdown menu from bounded data columns.

  2. Description Column: This property is helpful when you want to show data of a column from an array of object data as a description right under the title.

    image

  3. Value Column: This property is helpful when you want to return the value of a specific column from an array of object data, from the selected dropdown option.

    image

  4. Color Column: This property helps you to select a column with color properties or you can say that it helps to select the color key from an array of objects to apply color/theme with respect to each option present in the dropdown menu.

  5. Image Column: This property helps you to select a column with image details or you can say that it helps to choose the image key from an array of objects to show the images with respect to each option present in the dropdown menu.

  6. Selection Type: This lets you define if the user can select just one of the available options is the Dropdown or multiple options. There are two types that you can choose from in the dropdown.

    1. Single Select: This enables you to only select one option from the dropdown list.

    2. Multi-Select: This enables you to select multiple options from the dropdown list. If the Multi-select option is selected, then a toggle button to enable or disable a Summarized view is also provided

    image

  7. Placeholder: It is a prompt that gives a hint to the user as to what has to be done. It is present in the Dropdown container and is overridden when the user selects one or more items. It will only be displayed when there is no default selected option in the Dropdown list.

  8. Border Radius(Image): As the property name suggests, it helps to provide border-radius to images selected in the options

    image

How to use Advanced Dropdown control?

Start with selecting the Advanced Dropdown Control from the Advance section of the Controls Menu.

Bind data in Advanced Dropdown control

There are different ways in which you can bind data to the Advanced Dropdown control. We have Options to work with all the dropdown options and Selected Option to work with default selected value.

  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, color, image and more.

  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.

Options- Data binding

The Bind Data- Option section contains the data with all the options which are to be displayed in the dropdown list. Since advanced dropdown control is very customizable with various available properties, we have to make sure that we pass the right keys and values in the data-bind section.

You can bind data through various options available such as controls, connectors, variables and keywords, and more.

Let us have a look at binding static JSON data to understand the right format to be used in advanced dropdown control.

Data Used -

 [
    {
    "name": "Approve",
    "description": "John@studio.com",
    "value": "approve",
    "color": "#26bc6a",
    "image": "https://dronamobilepublic.s3.amazonaws.com/DRONA5_Team108/content/app/images/public/Tick_c5Abe.svg"
},
    {
    "name": "Reject",
    "description": "Dave@studio.com",
    "value": "reject",
    "color": "#FF5656",
    "image": https://dronamobilepublic.s3.amazonaws.com/DRONA5_Team108/content/app/images/public/Close_jCmgk.svg"
    },
    {
    "name": "None",
    "description": "Doe@studio.com",
    "value": "none",
    "color": "#F5AB00",
    "image": "https://dronamobilepublic.s3.amazonaws.com/DRONA5_Team108/content/app/images/public/Info_BCFfd.svg"
    }
]

In the above JSON format data, we can see that there are various keys and values. The keys of name and value are compulsory for advanced dropdown control. These keys help in the proper mapping of JSON data with the advanced dropdown control properties. The keys of color and image can be used as we have the property to map the key for color and image. So, users have to make sure to pass the right format of data in order to bind or map properties correctly without facing any errors.

image

Selected Options- Data binding

The Bind Data- Selected Option section contains the data with all the options which are to be displayed as selected by default in the dropdown control. Since advanced dropdown control is very customizable with various available properties, we have to make sure that we pass the right keys and values in the data-bind section.

You can bind data through various options available such as controls, connectors, variables and keywords, and more.

Let us have a look at binding static JSON data to understand the right format to be used in advanced dropdown control.

Data Used -

 [
    {
    "name": "None",
    "description": "Doe@studio.com",
    "value": "none",
    "color": "#F5AB00",
    "image": "https://dronamobilepublic.s3.amazonaws.com/DRONA5_Team108/content/app/images/public/Info_BCFfd.svg"
    }
]

In the above JSON data, you can notice that it is same as used in options. The value and name keys are compulsory along with other keys like color and image in terms of mapping them with the advanced dropdown control properties.

image

If your dropdown is set to multi-select from the properties then you can provide more than one selected option.

Data used:

 [
    {
    "name": "Reject",
    "description": "Dave@studio.com",
    "value": "reject",
    "color": "#FF5656",
    "image": "https://dronamobilepublic.s3.amazonaws.com/DRONA5_Team108/content/app/images/public/Close_jCmgk.svg"
    },
    {
    "name": "None",
    "description": "Doe@studio.com",
    "value": "none",
    "color": "#F5AB00",
    "image": "https://dronamobilepublic.s3.amazonaws.com/DRONA5_Team108/content/app/images/public/Info_BCFfd.svg"
    }
]

App preview:

image