Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Editing the source HTML of your login screen

Updated on April 5, 2022

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 unauthenticated ruleset.

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 nameDescription
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-LDAPAuthHTML rule used for the LDAP login screen for an unauthenticated operator session. Prompts user for LDAP login ID and passwords.
pyDisplayAuthScreenSelectorHTML 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 RecordsTechnicalHTML.

  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.

If you want to edit the source CSS of your login screens, see Editing the text rules that contain 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.

  • unauthenticated ruleset

    After you create an authentication service, you must associate a Browser requestor and Pega application with an unauthenticated Access Group and ruleset to synchronize customizations of your login screens with your application.

  • 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.

  • Customizing login screens for your Pega application

    Your Pega application uses several rules that correspond to each screen accessed by unauthenticated operators (users who have not logged in). Pega Express allows you to customize these screensincluding the login screen, authentication screen, logout screen, and other screensthrough their source HTML and custom cascading style sheets (CSS).

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us