Description:

This widget features a ratings control that enables users to configure and submit multiple ratings.

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 it. 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 displaying the ratings list appears below. Enter the rating label and value, then select 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 continue. Select the red icon (x) to remove 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. You can overwrite the translated text with something more suitable for your style. Click the “Save Translation” button. 

• Navigate to Page > Globalization menu. Select a language from the drop-down list and then click the “Translate” button. Click the “Save” button. 

• Save the Form definition. Then, select Actions > Create Form Instance to generate a new form. Check the box to edit it.

• The form is displayed for the user as shown below. 

• Select the first rating to display the textbox based on the display condition. This textbox remains hidden until the control field (or value) is chosen in this example. Choose the ratings, then click the Submit button to finish. The selected value will be saved in the Form Instance. 

Definition Sample:

You can download and extract the sample definitions from the provided link, then 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.