Description:
This widget presents a ratings control that allows users to set up and submit multiple ratings.
Inputs
- ID/Name - Name of widget
- Required - Select the checkbox for mandatory (tick mark)
- Hide - Select the checkbox to Hide (tick mark)
- Read Only - Select the checkbox to Read-Only (tick mark)
- Rating Label - Provide label name
- Rating Value - Provide rating value
- Rating Icon - Choose the image file
- Add button - Add button to include multiple ratings
- 'X' red button - Remove rating
- Conditions Tab - Display Condition - Configure form fields to display according to the rating value
- Styling - Styles - CSS style scripts to enhance the UI
- Styling - Styles - Apply Classes - Select between custom classes defined
- Other Tab - Tool Tip - Enter information to display on mouse hover on form render
- Globalize - Auto Translate - Localize the rating label names
- Save - Save the input values
- Delete - Remove this form widget from the designer page
- Close - Close the input popup window
Design:
Example:
Let’s build and execute the “FormRatingsDef” example.
- Create a new Form Definition called “FormRatingsDef.”
- Drag a “BootstrapGrid, Form Ratings widget, Label, and Submit” button onto the canvas and position them as shown below.
- Double-click the “Form Ratings” control. A pop-up window appears with configuration options. Select the “Settings” tab to configure. Use the checkbox to hide the form, mark it read-only at runtime, and make user input mandatory. Enter the rating label and rating value, then choose the image file from the local folder. Click the Add button to build the list.
- The pop-up window showing the ratings list appears below. Enter the rating label and value, then choose the image icon from the local folder. Click the Add button to create the list.
- You can add multiple ratings as shown below. Click the Close button to proceed. Select the red icon (x) to delete the list item.
- Select the “Conditions” tab. Enter the control field value and choose the Form field value from the list to hide or display. You can control the display condition for multiple Form field values, as shown below. Setting up this tab is optional. Click the Save button.
- Select the “Styling” tab. Enter the CSS-style scripts. Choose the style classes from the drop-down list to apply. On the Form Definition page, select Import > Global CSS style options to apply the style classes across multiple forms, as shown below. This tab setup is optional. Click the Save button.
- Select the “Other” tab. Enter the tooltip information text. This tab setup is optional. Click the Save button.
- Select the “Globalize” properties. The application will alert you if there is nothing to globalize, as shown below. Otherwise, choose the language from the drop-down list, then click the Translate button. The Azure ML service will translate the text into the empty text boxes. Click the Save button.
- Save the Form definition. Select Actions > Create Form Instance. Generate a new Form instance, then check the box to edit it.
- The Form is displayed for the user as shown below. Select the ratings, then click the Submit button to finish. The chosen value will be saved in the Form Instance.
Definition Sample:
You can download and extract the sample definitions from the link provided and later import them by dragging and dropping them 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.