How to customize the login screen (6.2 SP2)
PRPC's standard login and logout screens identify Pegasystems and feature PRPC branding:
You can replace the images used by the login and logout screens with elements that reflect the brand of your organization by following the steps outlined below.
Suggested approach
You can customize some or all of the graphic elements for the login and logout screens. However, to make any changes, you need to create and deploy a custom ruleset. Place in that ruleset the rules that hold and display your custom images.
Create and deploy a custom ruleset and access group for visitors
PRPC presents the login page to guest requestors — users who have started the PRServlet servlet but have not yet been authenticated by logging in. By default, the system uses the PRPC:Unauthenticated access group for guest requestors.
To customize the pages, you need to create an alternate access group and a ruleset for your custom rules for the login and logout screens, and to instruct the system to use them instead of the defaults for guest requestors.
1. Create a ruleset for your custom rules
Create a ruleset and version to hold the rules for the login and logout screens. Give the ruleset a name that makes it easily identifiable, such as unauthenticated:01-01-01.
Log out and back in to make the new ruleset is available in pick lists.
2. Create a new access group and add the new ruleset to it
Create a new access group for unauthenticated users. Specify the application and version as "PegaRULES" and set the current ruleset version.
Add the guest role.
Add unauthenticated:01-01 in the Production RuleSets field to the new access group and to your own current access group (so you can save rules into it).
When you save the access group, a warning appears that the ruleset you created is not defined in the application. You can disregard the warning for this ruleset.
3. Save copies of the login and logout screen rules to the new ruleset
Save copies of these six standard rules to customize into the unauthenticated:01-01 ruleset:
| Screen | Rule | |
|---|---|---|
| Login | ||
| pxloginbackground | A binary file rule holding the background image for the login page. It holds a jpg image of 1738 x 1104 pixels. Save the rule with a distinct name, such as pxloginbackgroundCustom. | |
| pxloginbutton | A binary file rule holding the image for the login button. It holds a png image of 125 x 36 pixels. Save the rule with a distinctive name, such as pxloginbuttonCustom. | |
| pxlogindivbackground | A binary file rule holding the image for the area around the operator ID and password fields, often displaying a corporate logo and text. It holds a png image, 524 x 524 pixels. Save the rule with a distinctive name, like pxlogindivbackgroundCustom. | |
| pxlogindivbackgroundwithcaptcha | When CAPTCHA login security is enabled, the system uses this binary file rule to provide the background for the login fields and the CAPTCHA challenge. It holds a png image of 524 x 700 pixels. Save the rule with a distinctive name, such as pxlogindivbackgroundwithcaptchaCustom. Note If you customize some login images but not this one, you may prevent CAPTCHA features from displaying when they are enabled. For information about CAPTCHA, see How to Configure Login Security and Password Policies. | |
| web-login | This HTML rule defines the login page, specifying , (among other things) the images to use. Copy this rule into your ruleset without changing the name. | |
| Logout | ||
| web-session-return | This HTML rule defines the logged-out page, specifying (among other things) the background image to use. Copy this rule into your ruleset without changing the name. | |
4. Update the HTML rules to reference the custom rules
Open web-login and update the references to the rules that the login page uses with the names of the binary rule copies that you saved. The references are in the Cascading Style Sheet (CSS) declaration near the top of the page:
For the page background, change the bolded text to pxloginbackgroundCustom:
body
margin: 10px;
font-family: Tahoma, sans-serif;
font-size: 10pt;
text-align: center;
background-image: url(webwb/desktopimages/pxloginbackground.jpg);
background-position: top center;
background-repeat: no-repeat;
background-color: #8da3b5;
Similarly, update the references for the two images that frame the login fields: one for use when CAPTCHA is enabled and one for when it is disabled:
<pega:choose>
<pega:when java='<%= tools.findPage("LoginError") != null %>'>
<pega:choose>
<pega:when test='(LoginError.pxShowCaptcha=="true")'>
background-image: url(webwb/desktopimages/pxlogindivbackgroundwithcaptcha.png);
height: 705px;
</pega:when>
<pega:otherwise>
background-image: url(webwb/desktopimages/pxlogindivbackground.png);
height: 524px;
</pega:otherwise>
</pega:choose>
</pega:when>
<pega:otherwise>
background-image: url(webwb/desktopimages/pxlogindivbackground.png);
height: 524px;
</pega:otherwise>
</pega:choose>
If you wish to use a custom image for the login button, update the bolded text in this reference:
.loginButton
background-image: url(webwb/desktopimages/pxloginbutton.png);
width: 125px;
height: 36px;
margin: 0px;
padding: 0px;
cursor: pointer;
To use a custom image for the background to the logout screen, open Web-Session-Return and update the bolded text in this reference with the name of the version of pxloginbackground that you saved:
body
margin: 10px;
font-family: Tahoma, Arial, sans-serif;
font-size: 10pt;
text-align: center;
background-image: url(webwb/desktopimages/pxloginbackground.jpg);
background-position: top center;
background-repeat: no-repeat;
background-color: #8da3b5;
Save the HTML rules.
Update the Requestor Type
Requestor Type data instances define the types of requestors that can access PRPC, such as a browser session, an external application, or an internal background process. The BROWSER Requestor Type establishes what is available to someone trying to access PRPC in the normal way, through the browser.
- In the Rules Explorer, select .
- Select the Requestor Type "BROWSER" for System Name "pega".
- Add the unauthenticated access group to the Access Groups list and click the radio button beside it:
- Save the Requestor Type. Make sure the radio button remained selected beside the "unauthenticated" access group. If it did not, select it again and save the rule again.
You have prepared the ruleset and have updated the Requestor Type; however, you cannot see any changes yet because you have not updated any images or text.
Add custom images
You are now ready to add your custom images to the binary rules.
You can easily download the original images to customize in the image-management software of your choice. There are two options:
- Open the binary rule form that holds the image you want to modify. Click Download File to download the image to your computer.
- In Designer Studio, click
. Browse for the image that you want and right-click it. Select Save Picture As... to save the image to your local computer.
You can start from the existing images or create images from scratch. Make sure you save the image with the same extension that the original image has (usually .jpg or .png).
When the images are ready, add them to their binary file:
- Open the binary file you want to update.
- Click Upload File. A form appears where you specify the image file you want to use.
Once you have located the file, click Upload File to upload it and close the upload form.
In the binary rule form, the original image has disappeared.Save the rule to display the image you uploaded.
When you are ready to review your changes, clear your browser cache and then go to your login page. Your custom login screen will appear. (The example below is intentionally bright to emphasize the extent to which you can make changes):
