- Ratings are the customer’s feedback or measurement based on the quality of the products/services.
- They can be provided based on different criteria. In most cases, ratings are given by the customers in the form of stars
- Stars-based ratings are the most commonly used and standard rating system that you can use for your application.
- If you want to review any product or service, rating stars can be one of the smart ways to style and demonstrate ratings on your website.
Steps to Create a Rating Stars
1. Create Binary Files:
- Create–>Technical–>Binary File
| Name | Sample Values |
| Label | Star_BW |
| App Name | Webwb |
| File Type | jpg |
- Select Black & white Rating Star and save
- Save as this rule and create for Color Star binary file
| Name | Sample Values |
| Label | Star_Color |
| App Name | Webwb |
| File Type | jpg |
Images used for Rating Star:
https://drive.google.com/drive/folders/1mm9O5AROu14uN2zAejvaALrPbBzIv8Vh
2. Create Rating Star section:
Section-Star 1:
- Create–>User Interface–>Section
| Name | Sample Values |
| Label | Star1 |
| Apply to | O4zyqc-Sample-Work |
| Add to Ruleset | Sample |
- Click “Convert to full section editor”
- Add two dynamic layouts
- Drag and drop image fields for both layouts
- In Image field Include Image Property
| In Top Field Include B&W Image property | webwb/ Star_BW.jpg |
| In bottom field Include Color Image property | webwb/ Star_Color.jpg |
- Add visibility condition for both layouts
| In Top layout | .pyTempInteger<1 |
| In bottom layout | .pyTempInteger>=1 |
- Add Action-Set for both layouts
- Event–>Click ; Action–>Set Value
| In Top layout | .pyTempInteger=1 |
| In bottom layout | .pyTempInteger=0 |
- Save & review this section (Action–>Preview)
- Save as this section and create all other sections
Section-Star 2:
| In Image field | In Top Field | webwb/ Star_BW.jpg |
| In bottom field | webwb/ Star_Color.jpg | |
| visibility condition | In Top layout | .pyTempInteger<2 |
| In bottom layout | .pyTempInteger>=2 | |
| Action-Set | In Top layout | .pyTempInteger=2 |
| In bottom layout | .pyTempInteger=1 |
Section-Star 3:
| In Image field | In Top Field | webwb/ Star_BW.jpg |
| In bottom field | webwb/ Star_Color.jpg | |
| visibility condition | In Top layout | .pyTempInteger<3 |
| In bottom layout | .pyTempInteger>=3 | |
| Action-Set | In Top layout | .pyTempInteger=3 |
| In bottom layout | .pyTempInteger=2 |
Section-Star 4:
| In Image field | In Top Field | webwb/ Star_BW.jpg |
| In bottom field | webwb/ Star_Color.jpg | |
| visibility condition | In Top layout | .pyTempInteger<4 |
| In bottom layout | .pyTempInteger>=4 | |
| Action-Set | In Top layout | .pyTempInteger=4 |
| In bottom layout | .pyTempInteger=3 |
Section-Star 5:
| In Image field | In Top Field | webwb/ Star_BW.jpg |
| In bottom field | webwb/ Star_Color.jpg | |
| visibility condition | In Top layout | .pyTempInteger<5 |
| In bottom layout | .pyTempInteger>=5 | |
| Action-Set | In Top layout | .pyTempInteger=5 |
| In bottom layout | .pyTempInteger=4 |
3. Create Main Section:
- Create–>User Interface–>Section
| Name | Sample Values |
| Label | Rating Star |
| Apply to | O4zyqc-Sample-Work |
| Add to Ruleset | Sample |
- Click “Create and Open”
- Click “convert to full section editor”
- Open “pzRatingStar” Section
- Configure–>User Interface–>Gallery–>UI elements–>Available components–>Ratings–>View design time configuration–>Dynamic layout 2–>Rating–>pzRatingStar
- Copy & paste both layout into the main section
- Layout 1: Change Hidden content property into .pyTempInteger
- Layout 2: In the source field, Select the Rating Star section for all layout
4. Configure Casetype UI:
- App explorer–>Casetype–>User Interface–>Section–>Select your section you want to add Rating Star
- Drag & drop embed layout and select the main section
- Save and Run the Case in the user portal
- Open Your case in Devstudio & Check .pyTempInteger value in Clipboard
Youtube Video:
