Discussion

1183
Views
jayac2 Member since 2015 6 posts
PEGA
Posted: 1 year ago
Last activity: 1 year 9 months ago

How to create web channel interfaces

Web channel was introduced as “Application views” as part of Pega 7.2.1 release. There is a wide range of communication channels available as of 8.1 and is configurable in both App Studio as well as Dev Studio.

Why web channel?

Before the introduction of web channel, one must know the creation and configuration of an application portal as well as requiring them to have a high level of understanding of both desktop and mobile experiences. They must know the components involved such as portal, screen layouts, sections, access groups and then integrate them together to realize their goal.

What are web channel offerings?

Developer will be able to create a portal simply by selecting from a predefined set of web channel templates for the various layouts and features required. The templates will support responsive application development as well as mobile only templates.

Provides different experience (desktop, tablet and modile) within App Studio and allows a simple intuitive authoring for portals.

How to create a web channel?

There are two ways to create a web channel.

When in Dev Studio selecting the “Application” menu from header will show “Channels and interfaces” as an available item.

From App Studio selecting “Interfaces” from the left nav will show the landing page for channel interface.

Selecting “Channels and interfaces” will take you to its landing page where you have multiple channels that Pega offers as a mode of communication to its end users.

Selecting “Web” from the landing page will take you to configure screen where name and description for the new web channel are required to be entered and a default layout which is “Header, Left” will be selected. The first 2 layouts “Header, Left” and “Header” can offer any kind of experience (like desktop, tablet or mobile) but the third one is specific to a mobile experience.

“Configure” button will show up when hovering on any of the layout and selecting it opens up different dropdown lists to be chosen for the desired layouts. For example, in case of a “Header, Left” selection you will select an item to be shown as header (Header widget), one for the left nav (Menu widget) and one for the content (Default content) of the portal. Those items listed in the dropdown are from existing set of templates. Some templates are shipped out-of-the-box and developer can also mark a section that they want to be listed here. Marking of section using section ruleform’s “Settings” tab for this purpose is covered in a different post:

https://community1.pega.com/community/pega-support/question/how-mark-sections-use-when-configuring-web-channels

After all the inputs are entered selecting “Save” would create 3 rules required to render the web channel.

  1. Portal
  2. Harness (using a screenlayout)
  3. Section (main content)

All the rules will have same name and saved under Data-Portal class.

Note: Above steps are performed using Pega 8.1 version.

How to update web channel?

If an existing web channel need to be reconfigured open the “Channel and interfaces” landing page and select the web channel you want to reconfigure. When the web channel to be reconfigured is selected it takes you to the configure screen like the one for creating web channel with an addition “Actions” button at the header.

You can choose to save your updated web channel or you can delete it from the “Actions” menu “Delete channel interface”.

Some of the limitations:

  • You cannot upgrade an old portal/ harness to become a fully configurable Web channel interface (must be created from scratch using the landing page)
  • The harness and section will be at Data-Portal and currently there is no support for class inheritance both for creation and marking a section for web channel.
  • It is not recommended to edit the portal / harness or section manually after creating a web channel.
Low-Code App Development Low-Code App Development Dev/Designer Studio User Interface Developer Knowledge Share
Share this page LinkedIn