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): Defines the name of the database field to which the component's data will be mapped and stored.
  2. Label Name (mandatory): Specifies the display name or title for a field or control in the user interface.
  3. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
  4. Placeholder (mandatory): Defines the hint text displayed inside a form field or input box when it is empty, providing guidance on the expected input.
  5. Close on Select: Determines if the dropdown or selection menu closes after a value is selected.
  6. Enable Tag: Allows tagging functionality for this control, enabling users to add or select tags.
  7. Enable Tooltip?: This button is set as “Yes” if you need to enable Tooltip Text in this Control
    1. Tooltip Text: Defines the text to be displayed in the tooltip when the user hovers over the icon.
    2. Help Text Direction: Select tooltip position from the following Top, Right, Bottom or Left

2nd Step – Validation

  1. Selection Type: Specifies the selection behavior for the control.
    1. Single Selection: Allows selecting only one value at a time.
      1. Store JSON Node: Stores the selected value as a JSON node.
    2. Multi Selection: Allows selecting multiple values at once.
      1. Minimum Selection: Defines the minimum number of values a user can select in the multi-select control.
      2. Maximum Selection: Defines the maximum number of values a user can select in the multi-select control.
  2. Is Mandatory?: Specifies whether the control is mandatory for form submission.
    1. Error Message: Defines the error message displayed if this control is left blank.
  3. Default Value: Sets a default value for the field, which can be modified by user input.

3rd Step – API

  1. Data
    1. Server Data: Configures the server-side data interactions.
      1. Data Source: Select the data source type such as HTTP, Workflow, No SQL, or RDBMS.
        1. HTTP: Handles HTTP-based data connections.
          1. Data Connection: Specifies the connection to use for data transfer.
          2. Method (mandatory): Select an HTTP method such as GET, PUT, POST, PATCH, DELETE, or POCO.
          3. API URL (mandatory): Defines the endpoint for the API call.
          4. Query Parameters: Configure additional parameters for the API request.
            1. Key: The name of the parameter.
            2. Value: The value of the parameter.
            3. Query Variable: Specifies a dynamic variable for the query.
            4. Select Type: Choose the type for the query parameter.
          5. Headers: Add custom headers to the API request.
            1. Name: Header name.
            2. Value: Header value.
          6. Others: Additional settings for the query.
            1. Enable raw query: Allows sending raw queries in the request.
      2. Response Attribute: Define attributes to handle the response data.
      3. Enable Custom Option (Card view): Enable a custom card view option.
        1. Field Mapping: Map fields for the custom card view.
          1. Display Name: The name to display.
          2. Data Field: The associated data field.
          3. Mobile Icon: Icon for mobile view.
          4. Web Icon: Icon for web view.
          5. Web Name Type: Select the web name type: Name Only, Name & Icon, Icon Only, or None.
          6. Mobile Name Type: Select the mobile name type: Name Only, Name & Icon, Icon Only, or None.
          7. Show: Specify visibility settings.
          8. Hide in Mobile: Hide this field on mobile view.
          9. Redirect Param: Parameters for redirection.
          10. Target Field: Specify the target field for this mapping.
          11. Field Type: Select the type of the field such as Email, Date, Time, Description, etc.
          12. Enable Highlighter: Highlights specific fields based on conditions.
            1. Highlighter Properties: Set properties for highlighting.
              1. API Field Value: The value to highlight.
              2. Condition: The condition for applying highlights.
              3. Css Class: The CSS class to apply for styling.
              4. Title: Tooltip title for the highlight.
        2. Action View: Select how the action is displayed: Popover or Show in Footer.
        3. Align: Set the alignment: Left, Center, Right, Between, or Around.
        4. Custom Action: Define a custom action.
          1. Name: Name of the action.
          2. Button Type: The type of button for the action.
          3. Web Icon: Icon for web view.
          4. Web Name Type: Choose the web name type: Name Only, Name & Icon, or Icon Only.
          5. Mobile Icon: Icon for mobile view.
          6. Mobile Name Type: Choose the mobile name type: Name Only, Name & Icon, or Icon Only.
          7. Action Type: Select the type of action.
            1. Side bar: Configure sidebar actions.
              1. Sidebar Viewtype: Select viewtype: Edit, Read, or Other Form.
                1. Other Form: Specify additional form details.
                  1. Form Id: The ID of the form.
            2. Bookmark: Configure bookmark actions.
              1. Icon Before Bookmark: Icon displayed before bookmarking.
              2. Icon After Bookmark: Icon displayed after bookmarking.
              3. Title Binding Field: Field for bookmark title.
              4. Subtitle Binding Field: Field for bookmark subtitle.
            3. Popup Window: Configure pop-up actions.
              1. Sidebar Viewtype: Specify the type of pop-up view.
                1. Other Form: Specify form details.
                  1. Form Id: The ID of the form.
      4. Stop Binding On Load: Disable binding during the initial load.
    2. Client Data
      1. Add Datasource: Define and add a new data source.
        1. Enter Text: Specify the text to display.
        2. Enter Value: Provide the associated value for the text.
        3. Group Key: Define a key to group the data.
        4. Populate Json: Add or populate data in JSON format.
      2. Bind Data With Model: Link data fields with a model.
        1. Bind Model Key: Specify the key to bind the model data.
    3. Text Field (mandatory): The field used to display the label or text in the dropdown.
    4. Value Field (mandatory): The field used to hold the associated value for each dropdown option.
    5. Store Extra Nodes: Enables storing additional dropdown nodes to the Model JSON.
      1. Extra Nodes: Specify the field from the binding API response to include extra nodes.
      2. Stop Extra Nodes On Load: Prevents extra nodes from being loaded initially.
  2. Rule
    1. Action Datasource: Select the source for fetching or sending data. Options include HTTP, Workflow, No SQL, or RDBMS.
      1. HTTP: Use an HTTP connection for data interaction.
        1. Data Connection: Select or configure the HTTP connection.
        2. Method (mandatory): Choose an HTTP method such as GET, PUT, POST, PATCH, DELETE, or POCO.
        3. API URL (mandatory): Specify the API endpoint URL.
        4. Query Parameters: Define parameters to be sent with the API request.
          1. Key: Parameter name.
          2. Value: Parameter value.
          3. Query Variable: Variable to use in the query.
          4. Select Type: Specify the type of parameter (e.g., String, Number).
        5. Headers: Configure HTTP headers for the request.
          1. Name: Header name.
          2. Value: Header value.
        6. Others: Additional HTTP request options.
          1. Enable raw query: Allows sending raw queries instead of predefined formats.
    2. Response Attribute: Define the attribute from the response to map or process.
    3. Query Param (mandatory): Specify mandatory query parameters for API calls.
    4. Allow Binding with Other Controls: Enable linking this control with other UI controls.
      1. Control Properties: Configure properties for linked controls.
        1. Pre Populate: Preload values in the control.
        2. Filter: Set filtering options for the control.
          1. Stop Reset: Prevent resetting the control's value.
        3. Refresh: Define conditions to refresh linked controls.
          1. Refresh Controls On Change: Refresh controls when this control's value changes.
          2. Select Refresh Form: Choose a form to refresh based on changes.

4th Step – Advance

  1. Design
    1. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
    2. Description: Enter additional suggestions or tips to enhance the user experience for this field.
    3. Value Field Type: Select the type of value the field will accept: Number, Text, or Date.
    4. Hide Selected: Enable or disable the option to hide selected values in the dropdown or list.
    5. Need to show option with icon?: Specify whether options should be displayed with icons for better visualization.
    6. Text Field Type: Choose the type of input for the text field: None or Date.
    7. Date Format: Define the format in which the date should be displayed (e.g., DD/MM/YYYY).
  2. Others
    1. Enable Lazy Loading: Load data in chunks for performance optimization when dealing with large datasets.
      1. Form Field Name (mandatory): The field in the form used to identify data for lazy loading.
      2. Search Field Name (mandatory): The field used to filter data during lazy loading.
    2. Link with Page Variable: Bind the control with a variable at the page level for dynamic data handling.
      1. Page Variable: The specific page-level variable to link with this control.
    3. Enable Add Item link: Allow users to add new items directly from the control interface.
      1. Link Text: The text displayed for the add item link.
      2. Link Name: The unique identifier for the add item link.
      3. Button Type: The style of the add item button (e.g., primary, secondary).
      4. Form: The form associated with the add item functionality.
      5. Web Icon: The icon displayed on the web interface for the add item link.
      6. Mobile Icon: The icon displayed on the mobile interface for the add item link.
      7. Web Name Type: Specify how the name appears on the web: Name Only, Name & Icon, or Icon Only.
      8. Mobile Name Type: Specify how the name appears on mobile: Name Only, Name & Icon, or Icon Only.
      9. Add Button Position: Position of the add button: Left, Right, or Bottom.
    4. Enable Search Filter: Allow users to search through options in the dropdown.
      1. Not Found text: The message displayed when no matching options are found.
    5. Reset Controls on Change: Specify controls to reset when the dropdown value changes.
    6. Group By: Group dropdown options based on a specific field.
      1. Group by Field (mandatory): The field used to group the dropdown options.
      2. Selectable Group: Allow users to select the grouped options directly.
    7. Enable Caching: Cache dropdown data to improve loading times and performance.
    8. Show Image with Label: Display an image alongside the text label in the dropdown options.
      1. Image Field (mandatory): The field containing the image to be displayed with the label.
    9. Auto Select First Value: Automatically select the first value in the dropdown as default.
      1. Default Selected Value: The value automatically selected by default.
    10. Enable Advance Form View: Provide an advanced view of the form for additional functionality.
      1. Form: The form associated with the advanced view.
  3. Mobile
    1. z-Index: Defines the stack order of the dropdown relative to other elements on the page.
    2. Convert to drilldown: Enables drilldown functionality for the dropdown, providing hierarchical navigation.
      1. Dropdown Max Height: Specifies the maximum height of the dropdown container.
      2. Not Found Text: Message displayed when no matching items are found in the dropdown.
      3. Container Height: Defines the height of the dropdown container.
      4. Justify Item Content: Aligns dropdown items. Options: Flex-Start, Flex-End, or Center.
      5. Searchable Placeholder Text Color: Sets the text color of the searchable placeholder.
      6. Searchable Placeholder: Placeholder text displayed in the dropdown search field.
      7. Enable Arrow: Displays an arrow indicator in the dropdown for better visual cues.
    3. Align Self: Adjusts the alignment of the dropdown relative to its container.
    4. Flex: Specifies how the dropdown element grows or shrinks to fill space in a flex container.
    5. Form Control Margin Bottom: Adds space below the form control to separate it from other elements.

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