Pega Platform™ allows you to customize the look and feel of your application by providing the ability to include your own logo, display an image on a button or link control, use custom sprites in the UI design, and determine what the user sees during a guardrail warning. To use custom icons or images to your Pega Platform application, you first need to add your binary file to the Image Library. To do this, create a Binary File rule to store your icon or image to the Pega Platform Image Library

Steps to Adding a Binary File:

1. Create a Binary File rule

  • Create a Binary File rule in Designer Studio by selecting +Create > Technical > Binary File
  • Binary File record configuration:
Label The Binary File rule label and identifier
App Name The directory where the image is stored
File Type The binary file extension (do not include a period “.”)
  • Click Create and Open
  • Click Upload File to open the file browser.
  • Browse for an image of the type specified in the New/Save as form, and then click Upload File.
  • If the file is treated as a sprite, select the check box, and then enter the icon width and height.
  • Click Save
  • When the file save is successful, the image that was imported & added to the Image Library is displayed

2.Find your image in the Image Library

  • After the image has been successfully uploaded and saved, you can find it in the Image Library.
  • Open the Image Library by selecting Dev Studio > Technical > User Interface > Image Library.
  • Search for the image by rule name or image (label) name

3.Configure Section:

  • Go to Section (App explorer–>Casetype–>User Interface–>Section)
  • Drag & drop image field into the layout (Data Display–>Image)
  • In cell properties panel, Select Icon source as Image
  • Enter the binary file name in the Image field
  • Enter width & height of Image in the Image size field

  • Save and Run the Casetype

Youtube Video: