Dropdown

You have to go through a four-step form wizard to enable this Control, i.e., Design, Validation, API & Advance. Let’s explain these steps below:

1st Step – Design

This is the first step of the “Dropdown” control form wizard. Here you are required to fill in the following details:

1. Database Field Name (mandatory): These are the attributes of the form
2. Label Name (mandatory)
3. Column Width
4. Placeholder (mandatory)
5. Close on Select
6. Enable Tag
7. Enable Tooltip?: This button is set as “Yes” if you need to enable Tooltip Text in this Control
   1. Tooltip Text
   2. Help Text Direction: Select tooltip position from the following Top, Right, Bottom or Left

2nd Step – Validation

1. Selection Type
   1. Single Selection
      1. Store JSON Node
   2. Multi Selection
      1. Minimum Selection: Here you can define minimum how many values users can select in multi select control
      2. Maximum Selection: Here you can define maximum how many values users can select in multi select control
2. Is Mandatory?: This button is set as “Yes” if you need to apply this Control as mandatory
   1. Error Message: Here, you can define the error message that will be displayed if this control is left blank.
3. Default Value: As the name suggests, it defines a default value for a field. This default value can be changed by user input.

3rd Step – API

1. Data
1. Server Data
   1. Data Source: Select data source from the following HTTP, Workflow, No SQL or RDBMS
      1. HTTP
         1. Data Connection
         2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE or POCO
         3. API URL (mandatory)
         4. Query Parameters
            1. Key
            2. Value
            3. Query Variable
            4. Select Type
         5. Headers
            1. Name
            2. Value
         6. Others
            1. Enable raw query
   2. Response Attribute
   3. Enable Custom Option (Card view)
      1. Field Mapping
         1. Display Name
         2. Data Field
         3. Mobile Icon
         4. Web Icon
         5. Web Name Type: Select web name type from the following Name Only, Name & Icon, Icon Only or None
         6. Mobile Name Type: Select mobile name type from the following Name Only, Name & Icon, Icon Only or None
         7. Show
         8. Hide in Mobile
         9. Redirect Param
         10. Target Field
         11. Field Type: Select field type from the following Email, Date, Time, Description, etc.
         12. Enable Highlighter
             1. Highlighter Properties
                1. API Field Value
                2. Condition
                3. Css Class
                4. Title
      2. Action View: Popover or Show in Footer
      3. Align: Select alignment from the following Left, Center, Right, Between or Around
      4. Custom Action
         1. Name
         2. Button Type
         3. Web Icon
         4. Web Name Type: Select web name type from the following Name Only, Name & Icon or Icon Only
         5. Mobile Icon
         6. Mobile Name Type: Select mobile name type from the following Name Only, Name & Icon or Icon Only
         7. Action Type
            1. Side bar
               1. Sidebar Viewtype: Select sidebar viewtype from the following Edit, Read or Other Form
                  1. Other Form
                     1. Form Id
            2. Bookmark
               1. Icon Before Bookmark
               2. Icon After Bookmark
               3. Title Binding Field
               4. Subtitle Binding Field
            3. Bookmark in Action
               1. Icon Before Bookmark
               2. Icon After Bookmark
               3. Title Binding Field
               4. Subtitle Binding Field
            4. Popup Window
               1. Sidebar Viewtype: Select sidebar viewtype from the following Edit, Read or Other Form
                  1. Other Form
                     1. Form Id
            5. Submit
               1. Success Message
               2. Mapping Field in Response for Primary Key
               3. API URL
               4. API Param
                  1. Key
                  2. Value
                  3. Is page variable
                  4. Is model variable
               5. Enable Raw Query
            6. Submit & Redirect
               1. Success Message
               2. Mapping Field in Response for Primary Key
               3. API URL
               4. API Param
                  1. Key
                  2. Value
                  3. Is page variable
                  4. Is model variable
               5. Enable Raw Query
            7. Submit & Bookmark
               1. Icon Before Bookmark
               2. Icon After Bookmark
               3. Title Binding Field
               4. Subtitle Binding Field
         8. Primary Key
         9. Redirect URL
         10. Action: Choose action from the following Hide, Show, Enable or Disable
   4. Stop Binding On Load

2. Client Data
   1. Add Datasource
      1. Enter Text
      2. Enter Value
      3. Group Key
      4. Populate Json
   2. Bind Data With Model
   1. Bind Model Key

3. Text Field (mandatory)
4. Value Field (mandatory)
5. Store Extra Nodes: Store extra dropdown nodes with value field to Model Json
   1. Extra Nodes: Enter field from binding api response
   2. Stop Extra Nodes On Load
2. Rule
1. Action Datasource: Select data source from the following HTTP, Workflow, No SQL or RDBMS
   1. HTTP
      1. Data Connection
      2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE or POCO
      3. API URL (mandatory)
      4. Query Parameters
         1. Key
         2. Value
         3. Query Variable
         4. Select Type
      5. Headers
         1. Name
         2. Value
      6. Others
         1. Enable raw query
2. Response Attribute
3. Query Param (mandatory)
4. Allow Binding with Other Controls
   1. Control Properties
      1. Pre Populate
      2. Filter
         1. Stop Reset
      3. Refresh
         1. Refresh Controls On Change
         2. Select Refresh Form

4th Step – Advance

1. Design
1. Bootstrap Column Class
2. Description: Enter extra suggestions for user experience on this field
3. Value Field Type: Select from the following Number, Text or Date
4. Hide Selected
5. Need to show option with icon?
6. Text Field Type: Select either None or Date
7. Date Format

2. Others
1. Enable Lazy Loading
   1. Form Field Name (mandatory)
   2. Search Field Name (mandatory)
2. Link with Page Variable
   1. Page Variable
3. Enable Add Item link
   1. Link Text
   2. Link Name
   3. Button Type
   4. Form
   5. Web Icon
   6. Mobile Icon
   7. Web Name Type: Select web name type from the following Name Only, Name & Icon or Icon Only
   8. Mobile Name Type: Select mobile name type from the following Name Only, Name & Icon or Icon Only
   9. Add Button Position: Select add button position from the following Left, Right or Bottom
4. Enable Search Filter
   1. Not Found text
5. Reset Controls on Change: Add controls key to reset on dropdown value change
6. Group By
   1. Group by Field (mandatory)
   2. Selectable Group
7. Enable Caching
8. Show Image with Label
   1. Image Field (mandatory)
9. Auto Select First Value
   1. Default Selected Value
10. Enable Advance Form View
    1. Form

3. Mobile
1. z-Index
2. Convert to drilldown
   1. Dropdown Max Height
   2. Not Found Text
   3. Container Height
   4. Justify Item Content: Select justify item content from the following Flex-Start, Flex-End or Center
   5. Searchable Placeholder Text Color
   6. Searchable Placeholder
   7. Enable Arrow
3. Align Self
4. Flex
5. Form Control Margin Bottom

Click “Confirm” and “Dropdown” control is configured.