A landing page consists of a harness rule that contains a number of section rules. You can use landing pages to make important information easily accessible from the Designer Studio main menu. To enhance the Designer Studio experience, you can create your own landing pages, and associate them with options in the main menu.
Before you begin
Before you begin, let's look at the Designer Studio menu option . Application is a Level A menu option. It has several Level B menu options, including Profile, Structure, Inventory, and so forth. The Level B option, Profile, has three Level C options: Requirements, Specifications, and Analysis.
This article details how to add a new Level A menu option (Designer Studio menu, and associate it with a custom landing page. You then add three Level B options (Child 1, Child 2, and Child 3). Each Level B option is associated with a tab that contains a separate and unique section.
) to the
By following the example, you'll add a new option to the Designer Studio menu in the context of the DemoApp application. If you are adding custom images to your landing page, refer to the article Quick Start: Adding a file to the Image Library. You can then:
To customize the pyMainMenu navigation rule, and then add your own menu option (node) and action.
menu, make a copy of the
- Search for pyMainMenu, and then open the navigation rule.
- Click Save as to make a copy of the menu.
- Create and open the navigation rule in the context of your application. Do not change the Label, Identifier, or Apply to class.
- From the Editor tab, determine where, within the menu, you want to add your new option. To add a Level A menu option below pxMainMenu, select the row, and then click the Add below icon.
- Select (highlight) the new menu option row, select the General tab, and enter label text. In this example, we are adding a menu option called .
- From the Actions tab, click Add an action, and then click All actions to see all action choices.
- From the All actions pop-up, select the Launch Landing page action.
- After returning to the Actions tab, complete fields to describe the action.
- Action — Display is filled in when landing page action is selected.
- Name — Enter a name for the landing page (this name displays on the tab).
- Class — Enter Pega-Landing. This name should match the the navigation rule Apply to context.
- Harness Name — Enter the name of the landing page harness to display.
- Do one of the following steps:
Create a Landing Page harness to display when your new menu item is selected from the
- If the Harness New/Save as form is not already open, select User Interface > Harness from the +Create menu.
- In the New/SaveAs screen, verify that:
- The Identifier matches the harness name that was entered in the Landing Page action form.
- The Context matches the context of the associated navigation rule — the Apply to class should be Pega-Landing and the ruleset and version should match the location where your pyMainMenu navigation rule was saved.
- Click Create and open.
- From the <drag section here>.
menu, drag an empty section into the harness container where you see the text
- Complete the fields in the Section Include dialog box.
- Page context — Use current page context
- Class — Pega-Landing is filled in from the navigation rule Apply to context
- Section — Enter a name for the new section (for example: DemosOptionParentSection)
- If the section does not exist, click the Open icon () to create a section by using the New/SaveAs screen.
- The Section form is populated with the values that are required to save your section in the same context that contains your landing page harness. Click Create and open.
- Customize the section as needed. For this example, drag a Basic > Label into the section, and then change text to Demo landing page section. (A more extensive example is covered in Create a landing page section.)
- When the section is ready to use, click .
- Return to the Section Include dialog box in the harness rule form, and click OK.
- Complete any additional edits to the layout of your harness rule (for example, enter Demo harness as the title text), and then click Save.
- Return to the pyMainMenu tab. Click OK in the Actions tab, and then click Save.
- Select Refresh from the Actions menu.
Your menu option should now be included in the navigation list.
- Log out and log back in to see your new option in the Designer Studio menu.
- Select your new menu option to view the updated harness and section.
- To add child options to your menu option, continue to the Add child options to the Designer Studio menu option section.
After you add a new option to the Designer Studio menu, you can expand it by adding child-level options.
- Open the pyMainMenu navigation rule.
- Select your custom menu option (Demos) and click Add child node.
- With the new child node selected:
- From the General tab, enter label text (for example: Child 1) for the menu option.
- From the Actions tab, click Add an action > All actions > Launch Landing page.
- Complete action fields.
- Action — Display is filled in when the landing page action is selected.
- Name — Enter a name for the landing page. This name is displayed on the tab. Important: For all landing pages in this family to share the same active harness, Name must contain the same value. Otherwise, a new tab is created.
- Class — Enter Pega-Landing. This name should match the navigation rule Apply to context.
- Harness Name — Use the same name for each landing page at this menu level to share the same harness.
- Level B — Select a level, and then enter a name for the text property used to identify the menu option.
- Click OK to save the Action, and then click Save to save navigation updates.
- Repeat steps 2 to 3 to create two more Level B menu options. Your navigation layout should now look like the following example:
- To test your current configuration, log out, log back in and open the Designer Studio menu.
The Designer Studio menu option allows for the selection of child options. For each Level B option, add tabs on the custom landing page.
- Open your landing page harness (this example used
- Click Layout > Section and drag a new section into the top of the harness container. In the Section Include dialog box, enter:
- Page context — Use current page context
- Class — Pega-Landing
- Section — By name, pxLPHeader
- Section HelpURL —
"https://pdn.pega.com/" (must be within quotation marks)
- Click OK to close the Section Include dialog box.
- Add a tab group within the Section Include for the demo landing page:
- Click Layout > Tab and drag a tab into the Dynamic Layout section.
- Click the View Properties gear icon for the tab and change the title text to Child 1.
- Click the View Properties gear icon for the Tab Group and set Style format to Standard.
- Drag a second tab next to the first tab. Add more tabs, as needed (for this example, you should have three tabs).
- For each tab, click the View Properties gear icon for the tab (make sure that you select the full tab and not just the cell) and edit the dynamic layout properties as follows:
- Choose whether you want to Defer load contents (wait to load tab contents until the tab has been clicked) or to load contents when the harness is accessed (default).
- Update the title text (use Child 1, Child 2, and Child 3) that displays on your tabs.
- Enter an Active when condition name (for example, the container is active when DemoChild1Selected, or DemoChild2Selected, and so forth)
- Click the Open () icon to create the Active when rule. Keep defaults in the New/SaveAs screen and click Create and open.
- Double-click to add a condition, and then set the when rule to:
.pyLandingNavigation.pyLevelB = "Child 1" where:
- LevelB is the level that was set in the menu option landing page action parameters
- "Child 1" is the name of the property flag for this option node
- Selections match action fields (see Action Fields for Navigation menu option).
- Click Submit to save the condition, and then click Save to save the When rule. Close the When rule tab.
- Click Submit to close the Dynamic layout properties form for the tab.
- Repeat step 5 for all tabs, and then click Save to save the harness updates.
You now have a custom Level A menu option in the Designer Studio menu, and it has three Level B options. Each Level B menu option opens a tab within the landing page.
To test your work, log out, log back in and open the Designer Studio menu. After you are ready, continue to Cleanup the harness UI and add detail to each tab.
In this section, we take the harness rule and clean up the UI by removing the unneeded title and adding a text label to display when each of the tabs is selected.
- Search for and then open your custom landing page harness (
Click the View Properties gear icon for the container, change the format to No header to remove the default title, and then click Submit.
- For each tab, do the following steps:
- Click to select the tab.
- Drag a Basic > Label below the Tab group.
- Click the View Properties gear icon for the label.
- Change the sample text to identify the tab (for example: Child 1 information, Child 2 information and so forth).
- Save updates to the harness.
- To view the new landing page, log out, and then log back in to the Designer Studio portal. The landing page option now appears in the
- Click a menu option to open the custom landing page.