Pega Icons in 8.4.1 | Add Icon for Properties | PEGA Tutorials

Introduction

In this post, we will learn about how we can use Pega Icons in 8.4 and how we can add those icons to PEGA properties in the section.

Creating Binary File

To create a binary file open PEGA designer studio and follow the below navigation and as shown in the image below. 

Create –> Technical –> Binary File 

Now you have to configure the binary files with required fields like Label, App Name (Directory),File Type (extension), and click on create and open. For example, I am using the Facebook icon as shown in the below screen.

Now it will ask you to upload the file, you can select any icon/image from your local desktop and upload it by just clicking the upload button. As shown below and save the binary file, you can also see the preview of your icon/image once you have uploaded it.

Configure Section

Once you have saved the binary file with the required Icon/Image, create a section where you have to display the icon. For creating the section follow the below navigation

Create –> UserInterface –> Section

You can create a section with any name and in any class that you want as shown below enter the label and class name and click on create and open.

Once the section is created, drag and drop the image property from the Data Disolaycolumn as shown below screenshot.

Once done, you can configure the image properties. Select Icon source as image and also Image and path that you have given while creating the binary file. Moreover, you can also customize the height and width of the icon as for the requirement as shown in the image below.

You can add the text field or label whatever you want to display on UI, once done just run the case/section to see the output.

Conclusion

This is how you can set Pega Icons in 8.4. If you looking for any other concepts/scenarios please feel free to contact us. Along with PEGA real-time scenarios, you can also learn to complete PEGA Tutorials with provided PEGA Index.