WebCenter Portal, ADF, REST API & JS templating – another approach to faster portlets.

So there are a few ways to create portlets, widgets and gadgets for WebCenter -

I’m going to show a few tips and tricks and one of the methods I use – to create faster interactive portlets using the WebCenter REST API and Javascript to leverage the services available.

As an example I will show you the basics to recreating the “OOTB WebCenter Portal forum taskflow” that hooks into JIVE as a light weight Async JS template driven portlet that you can drag and drop from the resource catalogue and supply configurable values.

This will enable marketing or IT teams who have no knowledge of ADF to manage, customise and enhance the look and feel of the portlet with just HTML and CSS skills. Also they will not need to redeploy the portlet via weblogic to apply enhancements – if they have access to the files on the server ie with FTP or SCP – you could also include these files on the content server – if it’s externally facing to handle revisioning version control much like sitestudio.

Click here to see the viewlet

Here’s a quick video that shows the OOTB Spaces Forum on the bottom against a simple one on the top that I created using this approach. You’ll also noticed I added an upload capability that allows the user to upload docs into WebCenter Content associated to the JIVE forum that is not part of the OOTB taskflow capability.

Read on to view the guides on how to recreate this approach and learn some useful tips on the way -

Over next month I will posting articles on how to achieve this (Keep an eye out)

Step 1) ENHANCE WEBCENTER LOGIN TEMPLATE
How to pre-authenticate with the REST API and WebCenter Content if you don’t have SSO enabled.

Step 2) ENHANCE ADF PAGE TEMPLATE
Taking the ADF Page to the next level – improve load times, caching via asynchronous calls to additional assets and JavaScript libs. (With RequireJS)

Step 3) REQUIREJS LOADING DEPENDENCIES
How to use RequireJS with WebCenter Portal effectively

Step 4) MOUSTACHE JS TEMPLATING
Moustache Template driven portlets

Step 5) EVENT DRIVEN PORTLET INTERACTION WITH “HTML5 DATA ATTRIBUTES”
How to navigate and interact between templates/screens with event listening

Step 6) SETTING UP THE FORUM PARAMETRISED PORTLET
How to create your first parametrised portlet for WebCenter Portal and deploy it to the resource catalogue 

Step 7) REQUIREJS COMPRESSING/MERGINING JS AND CSS ASSETS INTO A SINGLE FILE WITH NODEJS
Compress all libraries to Single script and CSS file that loads and caches all dependencies

Step 8) WebCenter Caching and Compression 
How to get the best performance from your portal!

Step 9) TIPS AND TRICKS 
Additional tips for integrating template driven portlets for WebCenter

Leave a Reply