Description:
Displays a ratings control where a user can configure as many ratings as required.
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.”
- Select the Open Designer checkbox and click the “Create” button
- Drag a Form Ratings widget, Label, Textbox, and Submit button to the canvas
- Double-click on the Form Ratings widget
- Select the "Settings" tab to configure the inputs as shown in the below graphic
- Choose an image file for the rating icon and provide the label and value. Click on the ADD button to build the list.
- Repeat the above step for the required ratings, as shown in the image below.
- Click on Save and Navigate to the "Conditions" tab. Configure the input as shown below. The label and the text fields are visible when the user selects the rating with the value 1 when the form is rendered for submission. This tab setup is optional.
- Click on Save and navigate to the “Styling” tab. Configure the input as shown below. The CSS-style scripts enhance the UI. This tab setup is optional.
- Click on Save and navigate to the “Other” tab. The tooltip information is included here. This tab setup is optional.
- Click on Save and navigate to the “Globalize” tab. Click on the “Auto Translate” drop-down. Select the language choice. Click on Translate. This tab setup is optional.
- The translation feature uses Google / Azure ML services (as configured) to render the rating labels. The user may correct the translation (if necessary) before saving the changes.
- Here, the translate feature is used to globalize the text in Finnish.
- Save the form definition.
- Navigate to Page - Globalisation to globalize the form resources in English.
- Navigate to Page - Globalisation to globalize the form resources in Finnish.
- Navigate to the Form Instance page to create a new instance of this definition. Select the instance and edit.
- The rendered widget will appear as shown in the below graphic. Use the language selector to render the form accordingly. Click and mouse over to select the star rating and submit.
- Select the culture flag in the top right corner and choose Finnish. The form is rendered accordingly.
