Upgrading your application to HTML5 Document Type (standards mode)

Updated on May 3, 2020

Applications built in Pega 7 use the HTML5 Document Type by default, ensuring cross-browser and cross-platform compatibility, use of the latest HTML markup, and improved performance, among other benefits.

In addition, Pega 7 includes a number of features that are available only to applications rendered in HTML5 Document Type.

This article provides a quick overview of those features, as well as a summary of how to render your application in standards mode, and tips for a smooth upgrade to standards mode.

Rendering an existing application in HTML 5 Document Type (standards mode)

If your pre Pega 7 application is guardrail compliant:

Select Include HTML5 document type on the Definition tab of the Application rule to render the application in HTML5 Document Type

If your pre Pega 7 application is not guardrail compliant:

Select DesignerStudio > User Interface >HTML5 Application Readiness to access a customized upgrade path to guide you in upgrading your application. See Upgrading an application to render in HTML5 Document Type.

Features available only to applications rendered in HTML 5 Document Type (standards mode)

The following features and capabilities are available only to applications rendered in standards mode.

Responsive layouts

Pega 7 includes a number of new layout formats that are flexible, responsive, and configured entirely in the skin. These layouts enable you to set responsive breakpoints and achieve responsive behaviors in your UI. Since these layouts are configured in the skin, they also provide a new level of separation between your content and its presentation, facilitating greater reuse and consistency throughout your application.

The following layouts are available only to applications rendered in standards mode:

Screen layouts — layouts that determine the overall structure of your application (portal and harness)
Dynamic layouts — highly flexible DIV-based layouts that determine the presentation of your content
Repeating dynamic layouts — layouts for presenting lists
Column layouts — layouts for displaying information in columns

Elements in the skin

The enhanced Pega 7 skin includes many powerful new capabilities. The following features are available only to applications rendered in standards mode:

Container formats — New container formats create optimal markup and CSS
Configurable rounded corners for overlays, modal dialogs, buttons, smart tip, and smart info controls
Modal dialog styling — The implementation and CSS classes for custom modal formats differs, depending upon whether your application is rendered in HTML5 Document Type - standards mode or in quirks mode. For example, in HTML5 Document Type – standards mode, modal dialogs honor the design time width of the layout, while, in quirks mode, modal dialogs shrink to the minimum width and height possible. Drag and drop is not supported in modal dialogs rendered in standards mode.

Tips for working with applications rendered in standards mode

For applications rendered in Internet Explorer, verify that Compatibility View is disabled. Note that by default, Compatibility View is enabled for intranet sites.

To disable Compatibility View:

Open Internet Explorer and select Tools > Compatibility View Settings.
Make sure that your PRPC site does not display in the list of Websites you’ve added to Compatibility View. If it does, select your site in the list, and then click Remove.
Clear the following checkboxes:
- Display all websites in sites in Compatibility View
- Display intranet sites in Compatibility View
Click Close.