Configure Rating Emoji’s in Pega 😊🙂😐🙁☹️

• 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 emojis.
• Emoji’s 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 emojis can be one of the smart ways to style and demonstrate ratings on your website.

Steps to Create a Rating Emoji’s:

1. Create Binary Files:

• Create–>Technical–>Binary File

Name	Sample Values
Label	BW_excellent
App Name	Webwb
File Type	jpg

• Select Black & white Excellent emoji and save
• Save as this rule and create all other binary files
  • Black & white Good
  • Black & white Average
  • Black & white Poor
  • Black & white Very poor
  • Color Excellent
  • Color Good
  • Color Average
  • Color Poor
  • Color Very poor

2. Create emoji section:

Section-Excellent:

• Create–>User Interface–>Section

Name	Sample Values
Label	Excellent
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/BW_excellent.jpg
In bottom field Include Color Image property	webwb/ color _excellent.jpg

• Add visibility condition for both layouts

In Top layout	.pyTempInteger<1 || .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-Good:

In Image field	In Top Field	webwb/BW_good.jpg
	In bottom field	webwb/color_good.jpg
visibility condition	In Top layout	.pyTempInteger<2 || .pyTempInteger>2
	In bottom layout	.pyTempInteger=2
Action-Set	In Top layout	.pyTempInteger=2
	In bottom layout	.pyTempInteger=0

Section-Average:

In Image field	In Top Field	webwb/BW_average.jpg
	In bottom field	webwb/ color _average.jpg
visibility condition	In Top layout	.pyTempInteger<3 || .pyTempInteger>3
	In bottom layout	.pyTempInteger=3
Action-Set	In Top layout	.pyTempInteger=3
	In bottom layout	.pyTempInteger=0

Section-Poor:

In Image field	In Top Field	webwb/BW_Poor.jpg
	In bottom field	webwb/ color _Poor.jpg
visibility condition	In Top layout	.pyTempInteger<4 || .pyTempInteger>4
	In bottom layout	.pyTempInteger=4
Action-Set	In Top layout	.pyTempInteger=4
	In bottom layout	.pyTempInteger=0

Section-Very poor:

In Image field	In Top Field	webwb/BW_Verypoor.jpg
	In bottom field	webwb/color_Verypoor.jpg
visibility condition	In Top layout	.pyTempInteger<5 || .pyTempInteger>5
	In bottom layout	.pyTempInteger=5
Action-Set	In Top layout	.pyTempInteger=5
	In bottom layout	.pyTempInteger=0

3. Create Main Section:

• Create–>User Interface–>Section

Name	Sample Values
Label	Feedback Ratings
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 emoji section for all layout

4.Configure Casetype UI:

• App explorer–>Casetype–>User Interface–>Section–>Select your section you want to add rating emoji
• Drag & drop embed layout and select main section
• Save and Run the Case in user portal
• Open Your case in Devstudio & Check .pyTempInteger value in Clipboard

Youtube Video:

Share this post: on Twitter on Facebook on Google+