How to Customize your Login Screen in Pega

Share with Love

Are you not bored of the standard login screen and logout screens for desktop and mobile applications accessed by using the Pega app? You can actually customize some or all of the graphic elements for these login and logout screens by following these steps!

Create a ruleset and add the required rules

1. Open the developer studio.

2. Go to Application Definition and create a new ruleset.

Ruleset Name: Unauthenticated:01-01

3. Drag the Unauthenticated ruleset to the top in the Application Ruleset hierarchy.

4. In the Advanced tab, add the production ruleset (Unauthenticated:01-01) and save it.

5. Search for web-login in the search box and open it.

web-login: This HTML rule defines the login page, specifying (among other things) the images to use.

6. Copy this rule into your ruleset without changing the name.

7. Check the lines of the HTML code where the background of the login screen is defined.

Create a Binary File for Login Screen

8. Go to Records Explorer >> Technical >> Binary File.

9. Create a new Binary file in the Unauthenticated ruleset as shown below.


10. Upload the required image file to create the binary file .


Modify the web-login code

11. Modify the web-login code in the unauthenticated ruleset and add the URL of the binary file.


12. Save the code and preview it.

Preview of Login Screen

Create Access Group and add in Requestor Type

13. Go to Records explorer >> SysAdmin >> Requestor type.

Requestor type

14. Open — System name: Pega; Requestor Type: Browser

15. Create a new access-group (PepperTap: Unauthenticated) and click the crosshair of and configure as below.

Create a new access-group

16. Save both the Access Group and Requestor Type.

Verify your changes

17. To verify your changes Logoff the current user and check the background of the login screen.

The login screen of the Pega application is changed successfully. You can similarly add any image of .png, .jpeg or .gif formats to customize your login screen.



How enable and disable button will work in UI pages on pega ?