Creating a composite portal

A composite portal is a user portal defined by a set of harnesses and sections. Composite portals provide improvements in flexibility, appearance, user interactivity, and functional capabilities over traditional ("fixed") portals such as WorkManager and WorkUser.

Pega 7 Platform includes these composite portals as working examples:

• User — For application users. Supports log off, find work, enter new work, news, show full profile, recent work, and multiple user forms, using the Multiple Document Interface (MDI) form of the Work Area View control.
• Manager — For line managers and supervisors. Provides all the facilities of the User portal plus additional facilities: a process dashboard with four charts, Monitor Activity reports, and access to the worklists and workbaskets associated with a work group.

• pyCaseManager, pyCaseWorker, and pyCaseManager7 – Provide application managers and users with a standard user interface for:

  • Creating, viewing, and working on cases
  • Displaying unresolved cases, their subcases, and a case's open assignments
  • Displaying associated content, users, roles, and subjects
  • Monitoring work group status, goals, and deadlines
  • Generating work management reports

Note: As a best practice, use pyCaseManager and pyCaseWorker for new development.

For examples and more information about composite portals, consult these PDN articles:

• About composite portals
• How to create a composite portal
• How to use multiple spaces in a composite portal

Step 1. Plan

A composite portal consists of multiple spaces, each defined by a harness with a specific arrangement of regions (in a screen layout) or panels (in a panel set).

Note: Starting in the Pega 7 Platform, panel sets are deprecated. Existing panel sets continue to function, but you cannot create a new panel set in applications rendered in HTML 5 document type (standards mode). You can create new panel sets in Quirks mode.

Screen layouts are available only to user interfaces rendered in HTML 5 document type (standards mode). You can choose from one of many different screen layout formats, each of which can be styled in the skin.

Screen layout regions are identified by position as Main, Header, Left, Right, and Footer.

• Each region can present a section.
• Plan the purpose of each region.
• Consider the size of each region and how well it can support the intended functions.

You can choose from one of many different screen layout formats, each of which can be styled in the skin.

Screen layouts can also exhibit responsive behavior, which you can configure in the skin. Responsiveness enables the screen layout to adjust according to screen size, providing an optimal user experience on a desktop, tablet, and phone.

A composite portal consists of multiple spaces, each defined by a harness with a specific arrangement of panels (forming a panel set). Panels within a panel set are identified by position as Top, Bottom, Left, Right, and Center; most panel sets contain a subset of these five. Each panel set can present a section that at runtime delivers capabilities.

Navigation from space to space is typically provided by a Menu Bar, buttons, or links.

Plan the purpose and panels of each space. Consider the size of each panel and how well it can support the intended functions. If you plan to offer a Menu Bar to allow switching among spaces, identify the panel that is to contain the menu. See Harnesses — Adding a Menu Bar control.

Step 2. Create an application skin

The Pega 7 Platformcontains standard skin rules recommended for composite portals. These rules are final, but you can copy either (using a new name) to use as a starting point for your application's skin rule.

As a best practice, create at least an initial version of the application skin rules using the Skin form before you develop other parts of the user interface, such as the portal, work object forms and flow action forms. You can evolve and refine the skin later by updating the skin rule. See About Skin rules.

Next, select Preferences from the Designer Studio Operator menu. Identify a skin name in the Using skin field. This allows you to see a presentation of composite harnesses, sections, and flow actions that is close to the runtime presentation that users will experience. CSS styles in a skin control colors and fonts, field widths and heights, margins, and padding.

For more details, see Designer Studio — Setting your preferences.

Step 3. Create a harness for each space

Create a harness for each space.

1. In most cases, set the Applies To class to a work class, such as the class group of the application, or by convention to the Data-Portal class.
2. On the Design tab, click the down-arrow () at the right end of the Layout control group () and select the Panel Set control (). Select a panel layout that is appropriate for the space, in terms of arrangement and sizes of panels. See Harnesses — Adding a Panel Set control.
3. Save the harness.

If your portal is to have multiple spaces, ensure that each space offers a mechanism to switch to the others. Use OnClick="pega.desktop.showSpace('Sname')" where Sname is the name of the space to change spaces. Users can switch spaces using links, buttons, or a MenuBar control. See Harnesses — Adding a Menubar control.

Step 4. Add sections to the harnesses

Add a section to each panel of the harnesses.

You can use any of the standard sections listed below. You can also refine and evolve these sections in an application ruleset version.

Certain sections require parameters. See Section form — Completing the Parameters tab and PDN article How to use parameters in section rules.

Step 5. Complete the portal rule

1. Create a portal rule.
2. On the Skins tab, set the Type to Composite.
3. On the Skins tab, identify the application skin you developed.
4. Complete the Spaces tab. Link each space to a harness you have chosen or created. Identify one space as the default space. Enter a distinct name for each space. One space must be named Work.

See About Portal rules.

Step 6. Adjust access groups and application rules as necessary

Most composite portals use the standard section @baseclass.NewWork to allow users to enter new work items. At runtime, this section allows users to identify the application — not a work pool within an application — to which the new work item belongs. To support this capability:

• In each access group, select a composite portal in the Portals field on the Definitions tab. Do not mix traditional and composite portals in one access group.
• Leave the Work Pools array (on the Advanced tab of the Access Group form) blank.
• Update the Case Types area on the Cases and Data tab of the application rule. Identify each case with a name and a prefix. (The prefix value you enter here supersedes any prefix set in the data transform that applies to that case type.)

Step 7. Test and evolve

Save all rules.

1. Select Access Group from the profile menu.
2. On the Definition tab of your own Access Group form, add the portal rule to the Definition area. Save.
3. Select > portal to open the composite portal.
4. Test and evolve.

Available standard sections

The following standard sections are designed for composite portals. The sections in the first list are all in @baseclass. The sections in the second list are in Data-Portal. Some sections are easy to customize and adapt. Review the Parameters tab of each section to tailor the section to the needs of your portal.

Report Browser

In PRPC Version 6.1, adding the Report Browser to a composite portal requires adding two sections side by side to a harness. The "Left Column" layout is appropriate for hosting the Report Browser sections.

In PRPC Version 6.2, you can add the Report Browser two a two-panel harness layout using two sections. You can also use a single section in a single-panel harness layout:

For more about adding the Report Browser to a custom composite portal, see Using the Report Browser.

Related information

Open topic with navigation