You are here: Portals > About composite portals > How to create a composite portal

How to create 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 and pyCaseWorker (version 6.2+), and pyCaseManager7 (Pega 7.1+)composite portals 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

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 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

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.

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.
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.
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

Create a portal rule.
On the Skins tab, set the Type to Composite.
On the Skins tab, identify the application skin you developed.
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.

Select Access Group from the profile menu.
On the Definition tab of your own Access Group form, add the portal rule to the Definition area. Save.
Select > portal to open the composite portal.
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.

Section	Description
DashboardReports	Contains a two-by-two layout with an interactive chart in each cell, using the Chart control. See Harnesses, Sections, and Flow Actions — Adding a Chart.
FindWork	The `FindWorkDisplay` parameter has four values: Advanced — default, includes the search bar. Basic — search by work item ID only. Classic — matches the gadget in the WorkUser portal. V6Search — Supports Elasticsearch full-text search as well as work "Entered by me," "Resolved by me," and other choices. The user can refine search results in various ways, and can opt to search for attached text documents that contain the search string.
MyDelegatedRules	Presents a list of rules delegated to this user as links, arranged horizontally or in a vertical list. When clicked, each link opens the appropriate version of the associated rule.
Logoff	Presents a Log off button or Log Off link, depending on the value of the `LogOffDisplay` section parameter. Use this section directly only in a panel of a panel set. Do not use this section in a Pega Web Mashup form. Do not use this section as an included section within other sections, unless you can provide a custom JavaScript that targets the top level.
News	Displays the text of the Data-Broadcast message (if any) associated with the operator's current organization unit. Using the Edit button, the operator can update this message. See About Broadcast data instances.
NewWork	Starts entry of a new user form. Complete the `DisplayOption` parameter to control the presentation of starting flows: as a select list, menu option, labeled buttons, or links. Buttons or links can be presented horizontally or in a vertical list. If a user has access to two or more applications, work item entry can occur only for one at a time. The user selects an application from those listed in the user's access groups. (Each access group identifies a single application.) The set of work items that a user can enter depends on the currently selected application, the list of work types on the Details tab of the associated application rule, and privileges required (if any) by the Security area of the Process tab of the starter flow rule.
MonitorActivity	Provides links to 20+ standard reports and charts for managers.
Profile	A simple section that presents the user's name, portal layout, current application, access group, and other facts.
pyMyProcessActions	Supports bulk processing by managers. See How to process assignments in bulk.
RecentWork	Contains an advanced control that lists work items recently updated by this operator.
SearchField	Allows users to find work items using full-text search, when configured. See Search landing page.
Workbaskets	Displays a drop-down list of the workbaskets available to this user. When a user selects a workbasket, the assignments in the workbasket appear.
Worklist	Contains a ListView control linked to the standard list view rule Assign-WorkList.ListViewEmbed. See Harness and Section forms — Adding a ListView control and Interacting with ListView displays.
WUNavigation	Provides the capabilities of RecentWork, FindWork, NewWork, Profile, and News in a vertical presentation.

Report Browser

In V6.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.

6.1 Report Browser Sections	Description
pzRBLeftPanelContainer	Add this section to the left panel of a two-panel harness layout. It provides the tools (search, create reports and categories, browse by category) for the Report Browser.
pzRBRightPanelContainer	Add this section to the right panel of a two-panel harness layout. It displays the list of reports available to the Report Browser.

In V6.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:

6.2 Report Browser Sections	Description
pxRBLeftPanelContainer	Add this section to the left panel of a two-panel harness layout. It provides the tools (search, create reports and categories, browse by category) for the Report Browser.
pxRBRightPanelContainer	Add this section to the right panel of a two-panel harness layout. It displays the list of reports available to the Report Browser.
pxReportBrowswer	Add this section to a single-panel harness layout to provide the complete Report Browser (navigation and list of available reports).