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
NameSample Values
App NameWebwb
File Typejpg
  • 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:


  • Create–>User Interface–>Section
NameSample Values
Apply toO4zyqc-Sample-Work
Add to RulesetSample
  • 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 propertywebwb/BW_excellent.jpg
In bottom field Include Color Image propertywebwb/ 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


In Image fieldIn Top Fieldwebwb/BW_good.jpg
In bottom fieldwebwb/color_good.jpg
visibility conditionIn Top layout.pyTempInteger<2 || .pyTempInteger>2
In bottom layout.pyTempInteger=2
Action-SetIn Top layout.pyTempInteger=2
In bottom layout.pyTempInteger=0


In Image fieldIn Top Fieldwebwb/BW_average.jpg
In bottom fieldwebwb/ color _average.jpg
visibility conditionIn Top layout.pyTempInteger<3 || .pyTempInteger>3
In bottom layout.pyTempInteger=3
Action-SetIn Top layout.pyTempInteger=3
In bottom layout.pyTempInteger=0


In Image fieldIn Top Fieldwebwb/BW_Poor.jpg
In bottom fieldwebwb/ color _Poor.jpg
visibility conditionIn Top layout.pyTempInteger<4 || .pyTempInteger>4
In bottom layout.pyTempInteger=4
Action-SetIn Top layout.pyTempInteger=4
In bottom layout.pyTempInteger=0

Section-Very poor:

In Image fieldIn Top Fieldwebwb/BW_Verypoor.jpg
In bottom fieldwebwb/color_Verypoor.jpg
visibility conditionIn Top layout.pyTempInteger<5 || .pyTempInteger>5
In bottom layout.pyTempInteger=5
Action-SetIn Top layout.pyTempInteger=5
In bottom layout.pyTempInteger=0

3. Create Main Section:

  • Create–>User Interface–>Section
NameSample Values
LabelFeedback Ratings
Apply toO4zyqc-Sample-Work
Add to RulesetSample
  • 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:

1 Comment

Add yours →

  1. 🙏Please attach the emoji image that you have used in the video .

© 2024 Pega Tech

Theme by Anders NorénUp ↑

error: Content is protected !!