By using preflight optimization to reduce unnecessary static content, you can speed up your application’s initial display time. This reduction can be especially important for applications that users access occasionally or just once. However, if your application is based on a primary Pega^® Express application type—Request Approval, Service Request, or Task Tracker—you might need to configure preflight optimization to ensure the correct display of user interface elements.

Preflight optimization performs a design-time analysis of the application's model. In this process, the optimizer determines which components are used in the model (typically, a subset of all available components).

The optimizer consists of two parts:

• The JavaScript part uses information from the design-time analysis to load only those JavaScript files that are necessary to support the components that are used in the application.
• The Cascading Style Sheet (CSS) part determines which CSS formats have been used for each component and loads only the CSS formats that are used in the application.

If you build an application on one of the primary Pega Express application types, the specific classes that are used to represent some aspects of the user interface are not known until run time. Therefore, some classes that are associated with objects in the model are used at run time but have not been included in the design-time optimizations, leading to user interface display issues. To avoid this possibility, configure the preflight optimization to include certain sections so that the model analyzer recognizes them as used by the application.

Configuring sections to display correctly

To configure preflight optimization to include the sections that are needed for the Case Worker and Case Manager portals to display correctly, complete the following steps:

1. Click Designer Studio > User Interface > Application readiness > Preflight optimization.
2. On the Preflight Optimization screen, click Add optimization.
3. In the Add optimization configuration dialog box, complete the following steps:
   1. In the Access group list on the Basic tab, select the access group that you want to optimize. The associated portal name is displayed on the right.
   2. Under Optimize, specify whether you want to optimize JavaScript files, Cascading Style Sheet (CSS) files, or both. Selecting CSS optimization is required for formatting updates to take effect.
   3. Optional: To reduce the size of your JavaScript files by removing comments and other unnecessary elements, select the Use JS Compacting check box.

   4. On the Advanced tab, specify the individual rules that will be included in the analysis of the application's design-time model for the Case Worker portal:

      

   5. On the same tab, specify the rules that will be included in the analysis for the Case Manager portal:

      
   6. Click Submit.

What happens if these sections are not correctly configured

If you do not specify the appropriate preflight optimization configuration settings for an application that is based on a primary Pega Express application type—Request Approval, Service Request, or Task Tracker—certain user interface elements are not correctly rendered in your application, if they are in fact included in your application.

See the following example of the Case Worker portal, first with incorrect settings and then with correct settings.

Sample Case Worker portal with incorrect preflight optimization configuration settings

Sample Case Worker portal with correct preflight optimization configuration settings

For more information about preflight optimization, see Optimizing application load time .