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:
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.
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.
Tip: In IE 9, you can use the icon in the toolbar to enable or disable Compatibility View:
Upgrading an application to render in HTML5 Document Type
Upgrading deprecated and outdated controls
Upgrading properties that reference deprecated controls
Upgrading Work Area controls to Dynamic Containers