This content has been archived and is no longer being maintained.

Table of Contents


How to add a landing page to the Designer Studio


You can add landing pages to Version 6.1+. Landing pages enable you to make important information easily accessible to anyone using the Designer Studio.

A landing page is comprised of a harness rule that contains a number of section rules.

In this example, a landing page which shows a simple chart is added to the Pega button menu structure.

You will need to create or edit the following:

  • pyMainMenu navigation rule— Save a copy of the standard navigation rule into a different RuleSet
  • A new harness — Create new
  • Binary file — Create new
  • pzLanding.css text file — Save a copy with a new name
  • pzDeveloper harness — Save a copy with a new name
  • Developer portal — Save a copy with a new name

Suggested Approach

To create and add a landing page:

  1. Save the pyMainMenu navigation rule into a RuleSet you have access to.

  2. Update the Editor tab of the rule. Add a new node to the list where you want the new landing page to appear in the tree structure.

  3. Complete the Node Details panel:

  4. Click the Open icon next to the Harness Name field to create a harness . Create the harness with Pega-Landing as the Applies To class and in the same RuleSet version as you saved a copy of the pyMainMenu navigation rule. Create an empty section within the harness that has the Applies To class Pega-Landing.

  5. Configure the layout of the new harness rule to meet your requirements. In this example, a chart has been added.

Note: To improve the display quality of the chart, increase the dimensions to fill more of the screen. In this example, the chart dimensions are set to 800 by 500 px.

  1. Save the harness and navigation rules. To view the new landing page, log out, then log in to the Designer Studio. The new landing page appears at the location you placed it in the pyMainMenu navigation rule.

To add an icon to the landing page menu:

  1. Upload a .png image file (the image should have a transparent background) as a Binary File. From an open rule form, select the New icon > Technical > Binary File.

  2. Complete the New Instance of a Rule dialog. Ensure that the App Name (directory) field value is webwb.

  3. Upload a suitable .png image with the dimensions 38 pixels wide, 40 pixels tall. Enter desktopimages as the Relative Path. This enables the pzLanding CSS file to locate the image.

  4. Save a renamed copy in the same RuleSet of the following rules:
    • pzLanding — A text file that contains the CSS information for landing pages. In this example, this is renamed pzLandingCustom.
    • pzDeveloper — The harness that constructs the designer studio, and references the pzLanding CSS information. In this example, this is renamed pzDeveloperCustom
    • Developer — The name of the portal rule for the designer studio. In this example, this is renamed DeveloperCustom.
  5. Enter the following text in the body, within the icon of the renamed pzLandingtext file:

    .<IconDescription> {
    background-image: url(desktopimages/<BinaryFileName>.png);

    where <IconDescription> is a value you assign to the class and <BinaryFileName> is the name of the file you uploaded in step 2.

    For Example:

    .RulesByRuleSet {
    background-image: url(desktopimages/RulesByRuleSet.png);

  6. In the pyMainMenu navigation rule, add lpiBase <IconDescription> to the Icon Class field on the Advanced tab.
  7. In the renamed pzDeveloper harness, on the Scripts and Styles tab, replace pzLanding.css with the updated CSS name.

  8. In the renamed Developer portal, on the Spaces tab, specify the new harness rule in the Harness field.

  9. Add the renamed Developer portal to your access group as the Default Portal Layout and reload the Designer Studio.


Published March 23, 2010 — Updated October 7, 2014

100% found this useful

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.