Description:

Image Ratings — Provides an image-based ratings widget that can be included in a FlowWright form as part of the user interface.

Design:

The ImageRatings widget is a FlowWright form widget in the Engine category. It is implemented by FlowWright.Forms.clsRatingsIcon in FlowWright.Forms.dll and is displayed in the form designer as Image Ratings.

Use the Image Ratings widget when designing a FlowWright form that needs an image-based rating component.

Potential applications include customer feedback, service evaluation, employee feedback, and product satisfaction forms.

Typical Workflow Suggestions:

Customer Satisfaction Survey

Use ImageRatings on a customer feedback form when customers need to rate their experience visually.

Example workflow:

Start → Customer Feedback Form → Capture Rating → Review Feedback → Store Feedback → End

Consider the widget for the form's rating section. Confirm the available rating options and how the selected value is captured.

Product Evaluation

Use ImageRatings on a product evaluation form where users rate a product after using it.

Example workflow:

Start → Product Evaluation Form → Capture Product Rating → Analyze Feedback → Update Product Review → End

The widget may provide a visual way for users to express their product evaluation, subject to its actual runtime behavior.

Service Quality Assessment

Use ImageRatings on a service evaluation form where customers rate the quality of a completed service.

Example workflow:

Start → Service Completion → Customer Rating Form → Review Service Feedback → Close Request → End

Include the widget in the customer rating section of the form.

Employee Feedback

Use ImageRatings on an employee feedback form where staff members provide a visual rating of a workplace activity or internal service.

Example workflow:

Start → Employee Feedback Form → Capture Rating → HR Review → Prepare Feedback Summary → End

Consider the widget for the form's rating section after confirming how ratings are captured and made available to subsequent activities.

Training Session Evaluation

Use ImageRatings on a training evaluation form where participants rate a completed training session.

Example workflow:

Start → Training Session Completed → Training Evaluation Form → Capture Rating → Review Training Feedback → End

The widget can be used as part of the evaluation interface to collect rating-related feedback.

Example: 

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

• Create a new Form Definition called “FormRatingsDef.” 
• Drag a “BootstrapGrid, Form Ratings widget, Textbox, 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. Click the “Lock Widget” button to toggle the lock/unlock feature and prevent accidental configuration changes.

• 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 “Lock Widget” button to toggle the lock/unlock feature and prevent accidental configuration changes. 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 text box based on the display condition. This text box remains hidden until the control field (or value) is chosen in this example. Select the ratings, then click Submit to finish. The selected value will be saved in the Form Instance. 

Tips:

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: After the import, verify and complete any missing configuration steps, such as file path references and database connections. Then, save the definition to confirm the changes.

Click here to download the sample file.