Description:

This widget displays a drop-down list of choices. These choices could be based on a static list, a database call, roles, or a lookup list category.

Design:

Example: 

Let’s build and execute the “DropdownListDef” example.  

• Create a Form definition called “DropdownListDef.” 
• Drag a “BootstrapGrid, Label, Select, and Submit” control to the canvas and arrange them as shown below.

• Double-click the “Select” widget to configure the “Settings” properties. Provide a name for the control. You may select one of the “Data Connection Types” from the UI. Select the “Static” type and set the additional properties. Provide the static values in “value, key” format. The “key” is required to configure other Form fields' conditional display (show or hide).  Select the “Data Sort” check box to sort the list values. Provide the default “key” value to render a drop-down list item as pre-selected. Select the “Required” checkbox for mandatory input. Select the “Multiple items” checkbox to select multiple items from the drop-down list. Select the “Hide” checkbox to hide this widget during runtime. Select the “Read-Only” checkbox to view the list and not make any selection. Select the “Use type ahead” checkbox to make a selection by typing the item value. Click the “Preview” button to view the list in design time. Click the Save button. 

• Double-click the “Select” widget to configure the “Settings” properties. Select the “Database” type and set the additional properties. Select the DB connection from the drop-down list. Provide the SQL Select query. Select the “Required” checkbox for mandatory input. Select the “Multiple items” checkbox to select multiple items from the drop-down list. Select the “Hide” checkbox to hide this widget during runtime. Select the “Read-Only” checkbox to view the list and not make any selection. Select the “Use type ahead” checkbox to make a selection by typing the item value. Click the “Preview” button to view the list in design time. Click the Save button. 

• Double-click the “Select” widget to configure the “Settings” properties. Select the “Roles” type and set the additional properties. Select the application role from the drop-down list. You may select multiple roles from the list. Users who belong to the application roles are listed at runtime.  Select the “Required” checkbox for mandatory input. Select the “Multiple items” checkbox to select multiple items from the drop-down list. Select the “Hide” checkbox to hide this widget during runtime. Select the “Read-Only” checkbox to view the list and not make any selection. Select the “Use type ahead” checkbox to make a selection by typing the item value. Click the “Preview” button to view the list in design time. Click the Save button. Note: To create and manage application roles, navigate to the Administration - User Management - Roles page. 

• Double-click the “Select” widget to configure the “Settings” properties. Select the “Lookup” type and set the additional properties. Select the lookup data from the drop-down list. You may select multiple lookup data from the list. The values from the lookup data category are listed during runtime. Select the category filter from the drop-down list. Select the “Required” checkbox for mandatory input. Select the “Multiple items” checkbox to select multiple items from the drop-down list. Select the “Hide” checkbox to hide this widget during runtime. Select the “Read-Only” checkbox to view the list and not make any selection. Select the “Use type ahead” checkbox to make a selection by typing the item value. Click the “Preview” button to view the list in design time. Click the Save button. Note: To create and manage lookup values, navigate to the Manage Config - Lookup Data page. 

• Double-click the “Select” widget to configure the “Conditions” properties. Click the plus sign (+) to insert an empty row. Configure the display conditions here. Provide the control key value and map it with the required Form field to show on this condition. Otherwise, the selected Form field is hidden during runtime. The example below displays the label Form field during runtime when the user selects the “Jan or Feb” values from the drop-down list. Click on the plus sign (+) to add more display conditions. The form controls are displayed when the appropriate checkbox values are selected at runtime.     

• Double-click the “Select” widget to configure the “Styling” properties. Select the input width size from the drop-down list. Provide the syntax for the CSS styles. Select the classes to apply from the global drop-down list. Click the Save button. 

• Double-click the “Select” widget to configure the “Other” properties. Provide the tool tip text information. Click the Save button. 

• Double-click the “Select” widget to configure the “Globalize” properties. The application will alert you if there is nothing to globalize, as shown below. Otherwise, select the language from the drop-down list and click the Translate button. Click the Save button. 

• Save the Form definition. Select Actions - Create Form Instance menu option. Generate a new Form instance and select the check box to edit this Form instance.

• The Form is rendered to the user as shown below.  Click the drop-down list to make a selection. The Form field remains hidden as the control field (or value) is not selected in this example below. Click the Submit button to complete.  

• Click the drop-down list to make a selection. The Form field is displayed as the control field (or value) is selected, as shown in the example below. Click the Submit button to complete.  

Note : 

• The drop-down values are available on the resource page for translation.  
• The widget configured with the "read-only" option provides a list of selected items when the form is rendered on mouse hover. The widget in "read-only" mode can still be clicked open to view the previous selection. 
• The 'x' feature removes the user selection for Static, Database, Roles, and Lookup options. The Static option should be configured with an empty value for the' x' feature. 
• The drop-down list in the read-only mode is click-enabled to show all items, including the selected ones, as shown below. 

Definition Sample:

You may download the sample definition(s) from the link here and later import them (drag-and-drop) to your FlowWright Process Definition (XML file) or Form Definition (HTML file) page. 

Note: Please verify and complete the process steps for any missing configurations, such as file path references and database connections, after import. Then, save the definition to confirm the changes. 

Click here to download the sample file.