Description:

This widget displays a drop-down list of options. These options could be drawn from 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 onto 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 conditional display (show or hide) for other Form fields. 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 allow multiple selections from the drop-down list. Select the “Hide” checkbox to hide this widget at runtime. Select the “Read-Only” checkbox to view the list without making a selection. Select the “Use type ahead” checkbox to select an item by typing its value. Click the “Preview” button to view the list at 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. Enter the SQL Select query. Select the “Required” checkbox for mandatory input. Select the “Multiple items” checkbox to allow multiple selections from the drop-down list. Select the “Hide” checkbox to hide this widget at runtime. Select the “Read-Only” checkbox to view the list without making a selection. Select the “Use type ahead” checkbox to select an item by typing its value. Click the “Preview” button to view the list at 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. At runtime, users who belong to the selected application roles are listed. 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 at runtime. Select the “Read-Only” checkbox to view the list without making a selection. Select the “Use type ahead” checkbox to select an item by typing its value. Click the “Preview” button to view the list at 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 items from the list. The values from the lookup data category are listed at runtime. Select the category filter from the drop-down list. Select the “Required” checkbox for mandatory input. Select the “Multiple items” checkbox to allow multiple selections from the drop-down list. Select the “Hide” checkbox to hide this widget at runtime. Select the “Read-Only” checkbox to view the list without making a selection. Select the “Use type ahead” checkbox to select an item by typing its value. Click the “Preview” button to view the list at 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 to the required Form field to show under this condition. Otherwise, the selected Form field is hidden at runtime. The example below shows the label Form field at runtime when the user selects the “Jan or Feb” values from the drop-down list. Click 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 from the drop-down list. Enter the CSS syntax. 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. Enter the tool tip text. 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 a language from the drop-down list, then click the Translate button. Click the Save button. 

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

• The Form is rendered to the user as shown below. Click the drop-down list to make a selection. The Form field remains hidden because the control field (or value) is not selected in this example. 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 displays a list of selected items when the form is rendered on mouse hover. The widget in "read-only" mode can still be clicked to open and 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 when the 'x' feature is used. 
• In read-only mode, the drop-down list is click-enabled to display all items, including the selected ones, as shown below. 

Definition Sample:

You may download the sample definition(s) from the link provided and later import them (drag-and-drop) into 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 the import. Then, save the definition to confirm the changes. 

Click here to download the sample file.