Customizing webcenter pages programmatically

Webcenter provides a very nice way to edit page at runtime using Ctrl+Shift+E.

Still it might be a bit difficult for end user (admin) to show/hide certain section of a page. For example if we have header, body and footer section on a page. To show/hide header or footer on a page at runtime, admin can follow these steps
1. Hit ctrl+shift+e
2. Change the page mode to source
3. Select appropriate component
4. Click edit button 
5. A new popup appears on which admin can select checkbox show/hide

But at times customer wants some quick easy options to show/hide these prominent areas. For example when admin hits ctrl+shift+e we may want to show him two checkboxes to show/hide header and footer. He just needs to check/uncheck them to show/hide these areas.Yes this approach will not be good if admin wants ability to show/hide each component but most of the time customer is just interested in show/hide prominent areas like header/left menus/ right boxes/footer etc.

In this blog I want to show how to create custom UI to show/hide (or do any kind of customization) ui components. Let us list down our requirements first
1. On ctrl+shift+e we need to show a checkbox to show/hide footer section. Checkbox should only be visible in ctrl+shift+e mode.
2. Check box should be checked by default if footer section is visible and uncheck if footer section is not visible.
3. If user checks to checkbox footer should become visible immediately. Similarly on uncheck footer section should become invisible immediately.
4. Any changes done by this approach should be saved as customization and should retain its value post login/logout


Now lets start working on these requirements

A) Initial page design: 

To enable page customization we need to have page-customizable component on page. Security of page should be set appropriately so that admin can edit page. Let say initial structure of page is as shown in below diagram

B) Bind footer section with bean:

C) Adding a section on page to have checkbox to show/hide footer

Now we want to add a section in which we will add checkbox to show/hide footer section. Add a panel group on page above header section as shown below

D) Corresponding bean code

To set initial value of checkbox:

To perform actual MDS operation on selecting/unselecting checkbox.

On check/uncheck we can validate MDS file and see if its entry is getting changed.

=======================================

Conclusion: Core part of this blog is to show api to programmatically customize a page and modify MDS entry. We can use it for endless opportunities.

Disclaimer: Any views or opinions presented in this blog are solely those of the author and do not necessarily represent those of the company.