Blog

There are a multitude of reasons organizations will turn to a content management system, but the underlying goal is the same across the board: Managing your content in an organized way.  The examples that first come to mind include managing assets such as page titles, articles, images, but what happens when a more complex asset is introduced like an AngularJS widget?

A Tale of Two Cities:

With WebCenter Sites you don’t have to give up control of the contents of your organization’s widgets. Out of the box WebCenter Sites does not natively support AngularJS integrations, but not to worry.  Through customization and integration not only is it possible, but the result is optimal for both the user and content contributors.  The key to success begins with figuring out what your organization really needs to control. 

The practical approach for AngularJS widgets is to store them on an external web server as opposed to the WCS application server. Treating the logic, views, and CSS as a separate entity improves development workflow and page performance as well. The widgets themselves live entirely outside WCS but are dropped into a template via either custom directive tags or tag attributes. With the widgets stored outside of the CMS we then have to figure out a way to link the contributor interface back to the desired controllable elements in the widget. 

Enter JSON:

JSON stands for JavaScript Object Notation.  A standard in its own right, it is lightweight, easy to read, and easy for applications to parse.  Angular widgets are capable of driving their text content from a supplied JSON string.  Once a schema or data structure is decided upon and put in place the widget can then use the information in that string via a simple GET call to a .json file. 

Tying in Oracle WebCenter Sites:

While the widget itself is hosted on the external webserver, the supplied JSON file can be set up in WCS as an asset. Through the use of a JSON attribute editor within the WCS widget content definition, content managers can then have full control over the content of that widget. As values are changed in WCS, the JSON file is updated and the changes are reflected in the widget.

AngularJS apps provide a lot of functionality for organizations and greatly contribute to the customer experience.  Through a WebCenter Sites custom integration your company can take advantage of having the best of both worlds.