Editing the source HTML of your login screen

Your Pega application uses several rules that form the source markup HTML and CSS of your login screens. To customize these login screens, you can add your own HTML structure, CSS elements, or background images to the source fields in each of their respective HTML and Text rules.

Before you begin: If you have not yet done so, create an authentication service. Your application requires an authentication service for users to securely log in. For more information, see Creating an authentication service.

After creating an authentication service, you must configure your browser requestor. For more information, see Configuring a browser requestor.

Note: When editing the source HTML or CSS, make sure to observe Pega guardrails and analyze potential security risks of your customized structure. Observe notes included by the developers in the original HTML stating what not to change. For more information about guardrails, see Application Guardrails landing page.
If you want to edit the source HTML of your login screens, open the HTML rules your Pega application uses, then edit the source HTML. HTML rules containing your login screen source HTML include the following items:
HTML login rules
Rule name Description
Web-Login HTML rule used for the login screen for an unauthenticated operator session. Used by the /prWeb/ servlet. Prompts users for login ID and password.
Web-Login-LDAPAuth HTML rule used for the LDAP login screen for an unauthenticated operator session. Prompts user for LDAP login ID and passwords.
pyDisplayAuthScreenSelector HTML rule used for an authentication screen for an unauthenticated operator session. Used by the /PRAuth/ servlet. Requests users for an identity provider (IDP) for single sign-on. If users select a third-party IDP on this screen (such as Google), the user redirects to an IDP login screen not managed by Pega. Prompts users for login ID, password, and single sign-on credentials.
pyForgotPassword HTML rule used for the session Forgot Password screen.
  1. In the navigation pane in Dev Studio, open the existing HTML rule by clicking Records > Technical > HTML.
  2. In the Stream name column, click the Search icon.
  3. In the Search Text field, enter the rule name of the login screen that you want to edit.
  4. Click Apply.
  5. Click the resulting row. Pega Platform displays the HTML rule form.
  6. In the Generate For list, select whether your customized login screen uses HTML directives or JavaServer screen (JSP) tags.
  7. In the Browser Support list, select whether Modern browsers or Microsoft Internet Explorer only (IE only) support your customized login screen.
  8. In the Accessibility list, tag whether your customized login screens meet your requirements when calculating the application Accessibility compliance report. For more about Accessibility compliance reports, see Using the Accessibility report.
  9. In the HTML source field, enter your customized login screen HTML.
    1. Optional: If your customized login references to clipboard pages, click the Pages and Classes tab.
    2. Optional: Enter the required clipboard pages and the classes to which they belong.
  10. Click Save. The customized HTML of your login screen is built into your application instance of Pega-Engine.
  11. Click Check-in to add changes to the unauthenticated ruleset you created.
  12. In the Actions list, select Preview.
  13. Confirm that the login screen reflects your customized HTML.
What to do next: If you want to edit the source CSS of your login screens, see Editing the text rules containing the source CSS for login screens.

If you want to add a new background image to your login screens, see Adding a new background image to your login screen.