This document covers how to mark a section to be used as integral component needed in web channel creation and this is continuation from “How to create web channel interfaces” post:

https://community1.pega.com/community/pega-support/question/how-create-web-channel-interfaces

While creating a web channel you will need to first choose the layout of your choice. There are 3 layout available out-of-the-box.

1. Header, Left: This template is saved under pyAppViewTemplateTopLeft in Data-Portal. When configuring this layout you would have to choose 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. The list for “Header widget” is populated by D_pzAppViewHeaderSections datapage sourced by pyAppViewHeaderSections report definition. Currently 4 such sections are shipped with the product which are pyCaseWorkerAlternatePortalHeader , pyCWPortalHeader , pyPortalHeader and pyPortalHeaderAlternate .The list for “Menu widget” is populated by D_pzAppViewLeftSections sourced by pyAppViewLeftSections report definition. There are 3 left nav sections shipped with the product which includes pyWorkerPortalNavigation, pyPortalNav and pyRecents. These 3 sections also serve as right nav layout. Finally, the list for “Default content (show on startup)” is populated by D_ D_pzAppViewPageViews sourced by pyAppViewPageViews report definition. There are 7 main content sections shipped, which are pyCMCases7, pyDashboard7, pyRecents, pyCWPortalContent, pyWorkerPortalContent, pzBulkProcessing and pyDocumentDashboard.

1. Header: This template is saved under pyAppViewTemplateTop in Data-Portal. This layout excludes the “Menu widget” when compared to “Header, Left” layout.

1. Mobile – Slide Up: This template is saved under pyAppViewTemplateSlideUp in Data-Portal. This layout is specifically built for mobile experience and has “Footer widget” selection. The list for “Footer widget” is populated by D_pzAppViewFooterSections sourced by pyAppViewFooterSections report definition. Out-of-the-box there are 2 sections pyCaseManagerIconBar and pyCaseWorkerIconBar readily available.

How to configure a section for web channel?

If you want to create a (right/left) nav section to be listed in its corresponding layout then you must create a section and mark it appropriately in the section ruleform “Settings” tab.

After creating the section go to the “Settings” tab and select “Column2” for that section to be marked as right nav.

When creating a web channel with “Channels and interfaces” if there is a preconfigured “Header, Right” it will be shown in the configure screen. Selecting that template will show the section that has been marked as “Column 2” in its “Settings” tab

Note: The above screenshot of “Header, Right” configuration is not shipped with the product. Option to create a new layout is only available for Pega developers.

You have created a web channel with the above configuration and it can be seen in the form-factor preview menu from App Studio.

When selecting the “Operator” portal it will render with the preconfigured screen layout in the main case area. The form-factor preview has three modes as highlighted in the above screenshot:

1. Desktop: Shows how the case content would render in a desktop
2. Tablet: Preview with different kinds of tablet options
3. Phone: Preview with different kinds of phone option

What are the limitations?

• Creating a new web channel layout is not possible with non-Pega developer role
• The section must be in baseclass or Data- or Data-Portal class.