Screencast 8 – WebCenter Sites Document Library Gadget for WebCenter Content

Screencast 8 – WebCenter Sites Document Library Gadget for WebCenter Content

Within a web experience, internal or external, it may make sense to expose highly interactive components that surface backend data. One way in which WebCenter Sites supports this capability is in the form of Gadgets. In our previous post, WebCenter Sites Gadget Development Concepts Quickstart, we took at look at some of the fundamentals of Gadget development.

View of the Gadget running in a dashboard in WebCenter Sites

Confirmation dialog after a user has clicked on the bell icon for a given content item to subscribe to updates

The foundation from our prior post can now be extended to illustrate how information from other systems, namely WebCenter Content, can easily be included within the WebCenter Sites via the Gadget paradigm. The screen shot above of the Gadget that we review in this episode illustrates how we ultimately expose a simple interface on top of WebCenter Content by way of its RESTful services.

WebCenter Sites Document Library Gadget for WebCenter Content Functions
Our sample Gadget will allow the following functionality to be exposed within WebCenter Sites

  • Display Folders and Content Items from WebCenter Content on the basis of our authenticated user
  • Allow a user to Subscribe / Unsubscribe to a Content Item from within the Gadget
  • Allow an administrator to set a start node for the document library
  • Allow an administrator to specify a server location for the WebCenter Content connection

Gadget Directory Structure & Code
For our sample we used a local Apache HTTP Server instance to host the Gadget. For development purposes we disabled browser security that checks for Cross Site Scripting attacks to allow us to mix host names for portions of the environment (without doing this some AJAX calls would not work). In order to get around this, simply launch your browser (in this case Chrome) using the command line and specifying arguments to disable the checking.

Running Google Chrome in Windows disabling some cross site scripting security

Directory structure for Gadget


The doclib.xml file is what is registered within WebCenter Sites. It can contain all of the logic for the Gadget, but in our case we have isolated some of the code in an external file to make it more manageable.


For our Gadget we have chosen to place most of the processing logic within the wc.doclib.js file to make it more manageable. The browseFolder function is the cornerstone of the Gadget and handles all of the content rendering within the Gadget by making RESTful calls into to WebCenter Content to retrieve folder and content item listings. (modified)

The following lines have been added to the Oracle UCM JQuery plugin to add additional functionality required for our document library.


The following plain old CSS styles the contents within our Gadget.

Special Thanks to Third Party Components

  • Icons – The excellent set of icons used within the Gadget have been designed by Yusuke Kamiyamane
  • JQuery UCM Plugin – A great piece of work supplied by Bex Huff

Gadget Code Download
Download a copy of the WebCenter Sites Document Library Gadget for WebCenter Content


  1. […] E2.0 Workbench Podcast 8 – WebCenter Sites Document Library Gadget for WebCenter Content […]