Multi Select Dropdown

This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0

The “Multi Select Dropdown” element allows the user to select more than one value from the list of available options. To enable the user to select multiple values, the dropdown list displays a checkbox with each of the options.

Usage

When to use
Use Multi Select dropdown element when you allow the user to select multiple options from the dropdown list.

For example: – You can use the multi-select dropdown list if you want the user to select multiple skills when the user provides information about his or her technical skills.

Multi-Select Dropdown Configuration

On the “Multi-Select Dropdown” element, you can perform the following types of configuration:

  • UI Configuration
  • Event Configuration

UI Configuartion

For the “Multi-Select Dropdown” element, you can configure the following UI (User Interface) properties:

TabProperty NameDescriptionMandatoryNew Default ValueVisibility Rules
BasicReference NameSpecifies a unique name of the element. At the application level, an element is identified and managed by the reference name.YesMultiSelect_1
BasicCaptionSpecifies the title of the element.NoCaption
BasicInput SourceThis property allows you to configure the source location for the following purposes:
–> Fetch data from the source and the display it on the element.
–> Store data in the source.


You can click one of the following tabs to configure the input source:
1) Data Store:-
If you select this tab, the Input Value box appears. In the Input Value box, select an entity based array type JSON object. After you select an array type JSON object, the application will access the object and then perform one of the following functions:
–> Fetches data from the object and displays it in the element
–> Stores data in the object


2) Enumeration:-
If you select this tab, a Select Master list appears. Click the Select Master list, and then it displays a list of “enum” objects from the Data Modeler. In the list, select an enum object. After you select an enum object, the application will perform one of the following functions:
–> Fetch data from the enum and then display it on the element
–> Store data in the enum


Note:- To use the enum object, you need to define the “enum” object in the Data Modeler.
YesData Store
BasicInput ValueClick in this box and then select an array type object. After you select the object, the application will perform one of the following functions:
–> Fetch data from the object and then display it in the element.
–> Store data in the object.
YesWhen Input Source = Data Store
BasicMulti Select TypeAllows you to configure the chip for the Multi Select Dropdown element. With the “With Chip” feature activated, the element displays the name of items after you select these items from the list of items.NoWithout Chip
BasicVisibleAllows you to define the default visibility of the UI element. Nomarked
BasicSearchableAllows you to configure the “search” feature for the multi select dropdown element. With the active “search” feature, you can enter the name of the item in the “Multi Select Dropdown” element and search. After you enter the name of the item, the element filters the list of items and then displays the item that you search for.Nomarked
BasicEnableAllows the user to enable/disable an element. You can decide whether the element needs to be clickable and usable.Nomarked
BasicMandatoryAllows you to configure the element as a mandatory element.Nounmarked
BasicMessage on FailureThis property becomes visible when you select Yes under Mandatory. In the Message on Failure box, enter the error message that the application will display if the user does not perform the function on the element. NoRequiredwhen mandatory = checked
BasicDefault ValueThis property allows you to define the default value of an element.

To define the default value:
–> Click in this box, and it displays the list of the pre-define functions, attributes, and element IDs.
–> In the list, select an attribute from which the application will fetch the default value and then display it in the element.
BasicParent Element IDIn this list, you can select the ID of an element. Based on the selected ID of an element, the current element will display the list of values.

To select the element ID:
i. Click in this box, and it displays the list of the pre-defined functions, attributes, and element IDs.
ii. In the list, select an element’s ID.
UI PropertiesStylesAllows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element.NoDefault
UI Properties- BackgroundColorClick the Color list and then select the color to define the background color of the element.NoTheme Variable (Neutral)
UI Properties- BackgroundOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.No100%
UI Properties- Alignment & SpacingMarginAllows you to desirably define margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom border of the element.NoTheme Variable (Margin)
UI Properties- Alignment & SpacingElement AlignmentClick this list to align the element as follows:
–> Right
–> Top
–> Bottom
–> Top Right
–> Top Left
–> Bottom Right
–> Bottom Left
–> Center
NoLeft Top
UI Properties- CaptionFontClick this list to select the type of font (for example: – Calibri) of the item descriptor.

Note: – The item descriptor is the option or value that the “Multi Select Dropdown” list displays to the end-user.
NoTheme Variable (Font Family)
UI Properties- CaptionSizeIn this box, enter the size of the font (for example: – 16) of the item descriptor.No12
UI Properties- CaptionColorClick the Color box and then select the color of the font of the item descriptor.NoTheme Variable (Caption)
UI Properties- CaptionBoldIn this box, enter the numeric value (for example: – 6) that defines the thickness of the font of the item descriptor.No4
UI Properties- CaptionStyleClick this list to select any of the following styles of the item descriptor’s font:
1.Normal
2.Italic
NoNormal
UI Properties- CaptionSelected TextAllows user to provide their own customized library also it will also act like a content library. No
UI Properties- CaptionCancel Action TextAllows you to define the text that appears on the Cancel push button.NoCancel
UI Properties- CaptionOk Action TextAllows you to define the text that appears on the OK push buttonNoOk
UI Properties- IconPrefix SourceAllows you to configure an icon that you want to use with the element. After you configure the icon, the app will display the icon to the left of the element.

You can use the following options to configure the icon:
–> None
–> URL
–> Asset Library
NoNone
UI Properties- IconPrefix URLIn this box, enter the URL of the icon. The application fetches the icon from the URL-based location and then displays it to the left of the element.YesIf prefix Source = URL
UI Properties- IconSelect Prefix IconAllows you to fetch the image of icon from the Assets Manager module. In this box:
–> Click the asset library icon (), and the Select Asset dialog box opens.
–> In the Select Asset dialog box, select an icon, and then click Select, and you successfully configure the image of the icon.
YesIf prefix Source = Assets
UI Properties- IconPrefix SizeIn this box, enter the numeric value (for example:-14) to define the size of the icon.Yes16When Prefix != None
UI Properties- IconPrefix ColorClick the Color box and then select the color to define the color of the icon.

Note: – The “Color” property can only be configured for “Material” icons. If you have defined the URL to load the image, the “Color” property cannot be applied to the URL-based images.
Yes#161616When Prefix != None
UI Properties- IconSuffix SourceAllows you to configure an icon that you want to use with the element. After you configure the icon, the app will display the icon to the right of the element.

You can use the following options to configure the icon:
–> None
–> URL
–> Asset Library
NoNone
UI Properties- IconSuffix URLIn this box, enter the URL of the icon. The application fetches the icon from the URL-based location and then displays it to the right of the element.YesWhen Suffix = URL
UI Properties- IconSelect Suffix IconAllows you to fetch the image of icon from the Assets Manager module. In this box:
–> Click the asset library icon (), and the Select Asset dialog box opens.
–> In the Select Asset dialog box, select an icon, and then click Select, and you successfully configure the image of the icon.
YesIf Suffix Source = Assets
UI Properties- IconSuffix SizeIn this box, enter the numeric value (for example:-14) to define the size of the icon.Yes16When Suffix != None
UI Properties- IconSuffix ColorClick the Color box and then select the color to define the color of the icon.

Note: – The “Color” property can only be configured for “Material” icons. If you have defined the URL to load the image, the “Color” property cannot be applied to the URL-based images.
Yes#161616When Suffix != None
UI Properties- HintTextEnter the description of the hint text that the application displays as a brief help about the element.NoPlease Select
UI Properties-HintSizeEnter the size of the font of the hint text.No14
UI Properties-HintColorClick in the Color box and then define the font color of the hint text.No#6F6F6F
UI Properties-HintDialogue TextIn this box, enter the dialogue text. The dialogue text appears on the pop-up when the user clicks the “Multi Select Dropdown” element to select items.The dialogue text helps the user perform subsequent function before s/he selects the items.No
UI Properties – OptionFontClick this list to select the type of font (for example: – Calibri) of the item descriptor.

Note: – The item descriptor is the option or value that the “Multi Select Dropdown” list displays to the end-user.
NoTheme Variable (Font Family)
UI Properties – OptionSizeIn this box, enter the size of the font (for example: – 16) of the item descriptor.No14
UI Properties – OptionColorClick the Color box and then select the color of the font of the item descriptor.NoTheme Variable (Answer Text)
UI Properties – OptionBoldIn this box, enter the numeric value (for example: – 6) that defines the thickness of the font of the item descriptor.No4
UI Properties – OptionStyleClick this list to select any of the following styles of the item descriptor’s font:
1. Normal
2. Italic
NoNormal
UI Properties- Shape & DecorationTypeUnder the Shape and Decoration section, this property has the two following options:

Autofill:- If you select this option, you cannot change the element’s dimensions. When you drag the element to the canvas, this option is selected by default.

If you select Auto Fill, vDesigner places the element with the default dimensions.

Manual:- If you select this option, you can change the dimensions of the element.
UI Properties-Shape & DecorationXAllows you to move the element along the X-axis; when the value increases, the element moves from left to right.NoShow & Disable
UI Properties-Shape & DecorationYAllows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.NoShow & Disable
UI Properties-Shape & DecorationWidth ValueEnter the width of the element in the pixel unit.No100%
UI Properties-Shape & DecorationHeight ValueEnter the height of the element in the percentage unit or pixel unit.NoSet as ___ & Disable
UI Properties-Shape & DecorationSelect ColorClick the first box and then define the color of the element when the user selects the element to perform the function.NoTheme Variable (Primary)
UI Properties-Shape & DecorationBorder RadiusIt allows you to define the element’s corners’ radius. Defining the radius of the corner makes the element’s corner round.
UI Properties-Shape & DecorationBorder RadiusAllows you define the color of the element’s border. To define the color:
–> In the Border Color box, click the left color box (), a color canvas open.
–> On the canvas, on the horizontal bar, move the circle to select the color.
–> In the upper section, move the circle to select the tone of the color.
UI Properties-Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.No100%
UI Properties-Shape & DecorationAnimateClick to select this check box to activate the animate feature. The animate feature expands the multi dropdown list with the animation effect.Nounmarked
DataEntity PathThis property allows you to map an attribute to the element. You define the JSON based attributes in the entity in the Data Modeler module.

To define the entity path:
–> Click in the Entity Path box, and a list expands.
–> The list displays several attributes from the entity.
–> In the list, select an attribute to map it to the element.

After the user performs the function on the element, the application can perform the following functions:
a. Fetches data from the attribute and then displays it in the element.
b. Stores data in the attribute.
YesEntityName.
DataMaximum Item SelectedIn this box, enter the maximum number (for example: – 8) of items that can be selected in the “Multi Select Dropdown” list.Yes1Max >= Min
DataMinimum Item SelectedIn this box, enter the maximum number (for example: – 3) of items that the user needs to select in the “Multi Select Dropdown” list.Yes1Min <=Max
Security- MaskingRegexIn this box, enter a regular expression. The regular expression will validate an option (value) before the application displays the respective option in the multi-select dropdown list.No
Security Properties-BasicData MaskingThis property allows you to mask the data. After you click the Data Masking check box, the following boxes appear:
1. Masking Type
2. N
3. Masking Symbol
NoClear Check box
Security Properties-BasicMasking TypeClick this list to select one of the following options:
1. From Start
This option masks a specific number of characters (for example:- **ample123) from the left.

2. From End
This option masks a specific number of characters (for example:- Example1**) from the right.

3. From Start & End
This option masks a specific number of characters (for example:- **ample***) from the left and right of the string.

4. Except Start
This option masks all characters except a specific number of characters (for example:- Ex********) from the left.

5. Except End
This option masks all characters except a specific number of characters (for example:- ********23) from the right.

6. Except Start & End
This option masks all characters except a specific number of characters (for example:- Ex*****123) from the left and right.

7. All Alphabets
This option masks all alphabets (for example:- *******123) in the string.

8. All Numbers
This option masks all numbers (for example:- Example***) in the string.

9. All
This option masks all characters in the string.
NoFrom StartIf Data Masking check box is selected
Security Properties-BasicNThis box comes into view after you click the Data Masking check box.

In this box, enter a numeric value that specifies the number of characters that are masked from right or left in the string.

For example:- If you select From Start in the Masking Type list and then enter 4 in the N box, the data masking property masks four characters from the left.

If you select From End in the Masking Type list and then enter 4 in the N box, the data masking property masks four characters from the right.
NoIf Data Masking check box is selected
Security Properties-BasicMThis box comes into view after you select From Start & End in the Masking Type list.

In the M box, enter a numeric value that specifies the number of characters that the Data Masking feature masks from the right of the string.

For example:- If you enter 4 in the M box, the data masking property masks four characters from the right.
YesIf Masking Type = From Start & End
Security Properties-BasicMasking SymbolClick this list and then select one of the following characters that you can use as a masking symbol or character:
1. *
2. &
3. %
4. $
5. #
6. @
7. x
8. –
9. +
NoIf Data Masking check box is selected

Event Configuration

on the Multi Select dropdown element, you can configure the following event:

  • onSelect
Was this article helpful?
YesNo