HTML5 Application Readiness landing page

The HTML5 Application Readiness landing page helps you upgrade your pre-Pega 7 application to render in the HTML5 Document Type. Applications built in Pega 7 use the HTML5 Document Type by default.

Access this landing page by selecting the Designer Studio> User Interface > HTML5 Application Readiness menu item.

Rendering the user interface in HTML5 Document Type ensures cross-browser and cross-platform compatibility, use of the latest HTML markup, and improved performance, among other benefits.

It also ensures that you can take advantage of all of the new features in Pega 7, including the following responsive, contemporary layouts that enable you to separate content from presentation:

• Screen layouts
• Dynamic layouts
• Column layouts

Rendering an application in HTML5 Document Type

Note: If you are testing in Internet Explorer, verify that Compatibility View is disabled.

You can render guardrail compliant applications developed prior to Pega 7 in HTML5 Document Type by selecting Render in HTML5 on the Definition tab of the Application rule.

If your pre-Pega 7 application is not guardrail compliant, use this landing page to guide you in upgrading your application.

Upgrade process

The following is an overview of how to upgrade your application to render in HTML5 Document Type. For more details, see PDN article Upgrading an application to render in HTML5 Document Type.

Upgrade the following:

• application
• harnesses that use None (quirks mode) as the Document type or contain custom CSS or JavaScript
• user interface elements that reference outdated controls

Upgrading the Application

1. Access Designer Studio> User Interface > HTML5 Application Readiness and select the Applications tab. By default, the current application displays. To select additional applications in the default application stack, click the Applications link, select the application, and then click Apply.
2. For each application, if the Render in HTML5 setting is disabled, click the application name link to open the Application rule.
3. On the Definition tab of the Application rule, select the Render in HTML5 check box in the User Interface area, and then save the rule.

Upgrading Harnesses

Upgrade harnesses that use None (quirks mode) as the Document type; they are rendered in quirks mode. The Document type setting on the harness overrides the Application setting. Ensure that the harness Document type is set to Inherit from application rule or HTML5 (standards mode).

1. On the HTML5 Application Readiness page, select the Harnesses tab.
2. In the Harnesses not configured to render in HTML5 Document Type area, click the Harness Name to open the harness.
3. Select the Advanced tab, change the Document type from None (quirks mode) to Inherit from application rule, and then save the harness.
   

Upgrade harnesses with custom CSS or JavaScript. The following is an overview of the process. For details, click the information icon to access PDN article Upgrading harnesses with custom CSS and JavaScript to render in HTML5 Document Type.

1. On the Harness tab of the HTML5 Application Readiness page, in the Harnesses with custom CSS and JavaScript area, click the Harness Name to open the harness.
2. Update the harness to remove custom JavaScript. For example, instead of using JavaScript to handle events, use an auto-generated control configured with events and actions.
3. Remove custom CSS from the harness. Instead, define multiple formats and custom styles in the Skin rule, and then reference the skin rule.
4. In cases in which custom CSS is unavoidable, use the Upgrade CSS tool to automatically convert non-auto-generated CSS to standards-compliant CSS.

Upgrading UI Elements

Upgrade sections, controls, properties, and flow actions that reference outdated controls. The following is an overview of the process.

For details, click the information icon to access guidelines for Upgrading deprecated and outdated controls and Upgrading properties that reference deprecated controls on the PDN.

1. On the HTML5 Application Readiness page, select the UI Elements tab.
2. Select the name of the UI element and upgrade:
   • Non-Auto-Generated sections: on the HTML tab, select the Auto-Generated HTML check box.
   • Sections referencing deprecated controls: open the section and click the Update Controls button to automatically upgrade controls. Some controls may require a manual update.
   • Properties referencing deprecated controls: in the property rule, replace deprecated controls. For details, see PDN article Upgrading properties that reference deprecated controls.
   • Flow actions referencing HTML rule: open flow actions that reference an HTML rule to define their presentation and update the flow actions to reference section rules to determine their presentation instead. Referencing section rules is the default for Pega 7 6.1 and later.
   • Sections using inline styles: open sections containing inline styles and replace the inline styles with formats or styles available in the skin. See Skin form — Components tab — General — Custom styles for information on defining custom styles in the skin. For details on creating additional formats in the skin, see PDN article Creating multiple style formats in the skin.
     
     Remove inline styles from all sections — Click this button to remove inline styles from all unlocked ruleset versions in your application. Make sure that the sections are checked in.

   Note: When you open or save a section that contains an inline style, a guardrail warning appears and you have the option to use the Remove Inline Style button.

   • Upgrade Menus: Click the Upgrade "Show Menu" button to update menu controls configured using Show Menu. This button is only available for existing applications. After upgrading the application, this button no longer displays. New applications are upgraded by default.
3. Save your changes.

Refresh and Test

1. Refresh the tabs of the HTML5 Application Readiness page to ensure that you have completed all recommended updates.
2. If you are testing in Internet Explorer, verify that Compatibility View is disabled.
   
   The implementation and CSS classes for elements may differ, depending upon whether your application is rendered in HTML5 Document Type - standards mode or in quirks mode. If your application contains modal dialogs and is rendered in both standards and quirks modes, generate test cases for each. See PDN article Displaying a modal dialog in a custom format created in the skin.

To disable Compatibility View:

1. Open the Internet Explorer tools menu, access Compatibility View Settings.

2. Make sure that your Pega 7 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.

3. Clear the Display all websites in sites in Compatibility View and Display intranet sites in Compatibility View check boxes and then click Close.
   
   In IE 9, you can use the icon in the toolbar to enable or disable Compatibility View.
   
   
   

Related Information

Open topic with navigation