In the Pega 7 Platform, you can associate a skin with your application to ensure that all portals in an application use a single skin. Using a single skin enables greater reuse and consistency across your application.

This article describes how to:

• Specify a skin for your application
• Style the user interface
• Override the default skin

For information about the skin, see Styling your application using a skin.

Specifying a skin for your application

To associate a skin with your application:

1. Open the Application rule and click the Definition tab.
2. In the User Interface section, select the skin that you want to apply to this application (in this example, pyUservCorporateSkin).
   

The list of available skins is based on your profile and might include skins that are not available within the current application. If you save an application with a skin that is not available within the application's rulesets, the default skin, pyEndUser, is applied at run time. To avoid this, log in using the application.

For upgraded applications, the skin defaults to pyEndUser (the default Pega end-user skin) when the application rule is opened and saved.

User interface styling

You can determine the source of the styling that is applied to your UI at run time by answering the following questions:

• Are custom styles attached to the harness?
• Does the portal specify a skin or default to the application skin?

Determining if custom styles are attached to the harness

Open the harness to determine if a style sheet is attached to the harness. Custom style sheets at the harness level override styles set in the application or portal skin. Attaching custom style sheets to the harness is not recommended. However, you can find custom style sheets in many older harnesses.

To determine if a custom style sheet is applied to the harness:

1. Use Live UI to determine which harness the application is using. See Using the Live UI tool.
2. Open the harness and click the Scripts & Styles tab. In the Style Sheets area, note whether custom styles are attached to the harness.
3. Observe the File Name field:
   • If this field is empty, the harness does not contain a custom style sheet style override. Open the portal to determine whether the skin is specified by the portal or the application. Refer to Does the portal specify a skin or default to the application skin? for instructions.
     
   • If this field contains a custom style, click the magnifying glass to open the style sheet.
     

As a best practice, create an additional format in the skin that mirrors the custom style, and then remove the custom style sheet from the harness. See Creating multiple style formats in the skin.

If the skin does not support specification of certain attributes or if the custom CSS has specific targeting, then a better approach is to attach the CSS file to the skin.

Does the portal specify a skin or default to the application skin?

The skin setting on the portal rule indicates whether the portal is rendered in the application skin or a skin that was specified for the portal. Setting the portal skin to Default to Application Skin means that the portal uses the skin that is associated with the application. The default for new portals is Default to Application Skin.

To determine which skin is specified:

1. Open the portal rule in which the application is displayed, for example, the UServ 7 Portal.
2. On the Skins tab, note whether the portal references a skin or defaults to the application skin:
   • If the portal skin is set to Other Skin, then the portal and the application are rendered in the skin shown.
     
     In this example, the EndUser62 skin is used, as shown in the following image:
     
   • If the portal skin is set to Default to Application Skin, then the portal and the application are rendered with the skin specified in the application.
     
     In this example, the default skin is used, as shown in the following image:​
     

To determine which skin is specified in the application, open the Application rule. In the User Interface section on the Definition tab, note the name of the skin (in this example, pyUservCorporateSkin). The portal and the application are rendered in this skin.

If a skin is not defined or not found, then the application is rendered by using the Pega 7 Platform default end-user skin, pyEndUser.

Determining which skin is in use in Designer Studio works in the same way: the skin is defined in the portal rule, and the portal rule can default to a skin specified in the application rule.

Overriding the default skin

As a developer, you can set preferences to override the skin that is specified in the application or portal. This enables you to develop and view processes in a different skin when running an application from Designer Studio. This skin also takes precedence in the design view of the section rule.

The Pega 7 Platform default skin selection behavior is as follows:

• Use the skin that is set in the operator preferences.
• Use the skin that is set on the portal record.
  • The portal is specified in the operator Access Group.
  • This skin can be either a Designer Studio skin or an end-user portal skin.
• Use the application skin.
• Use the Pega 7 Platform's default skin, pyEndUser.

To view a process in a different skin within Designer Studio:

1. In the toolbar, select the operator name, and then select Preferences.
2. In the Preferences dialog box, under the Run Process In section, specify the skin in which you want to view the process in the Using Skin field.
   
3. Open the process that you want to run and click Actions > Run in the toolbar. The process is rendered in the skin that you specified in your preferences​.
   

Applying an application skin to a Pega Web Mashup application

A Pega Web Mashup site does not automatically inherit the application skin. You must add a parameter to your Pega Web Mashup configuration file as shown in the following example. For example:

<!DOCTYPE HTML>
<html>
<head>
<script src="https://docs-previous.pega.com/PegaInternetApplicationComposer.js"></script>
<!--Uncomment the line below to view client logs-->
<!--<script src="https://docs-previous.pega.com/PegaInternetApplicationComposerLog.js"></script>-->
</head>
<body style="text-align:center">
<!--Note: The values for UserIdentifier and Password may be assigned dynamically. The values shown here are for a specific user.-->
<div id="TestDisplayHarness"
style="overflow:auto;"
data-pega-gadgetname="HarnessTest"
data-pega-resizetype="stretch"
data-pega-action="display"
data-pega-classname="PegaCA-Work"
data-pega-harnessname="<HarnessName>"
data-pega-model=""
data-pega-isdeferloaded="false"
data-pega-parameters={UserIdentifier:"n",Password:"<encrypted>",pzSkinName:"<pzSkinName>"}>
</div>
<script type="text/javascript">
</script>
</body>
</html>