UI Customizations with Oracle JET in Oracle WebCenter Sites 12c

Before You Begin

This blog assumes that you're familiar with Oracle JET, its custom modules, and overriding the default path/suffix configuration for JET modules so that you can include them as assets in your WebCenter Sites implementation. Otherwise, you may want to begin by reading this blog: Creating Oracle JET Modules as Assets in Oracle WebCenter Sites.


WCS 11g’s Admin and Contributor UIs are built with a version of Dojo that does...

WebCenter Sites 12c and a Custom Pick Asset Attribute Editor

The Sites 12c documentation has some instructions and examples of setting up a custom attribute editor, but they don't get very complicated. I wanted to add some functionality to the built in editor for picking an asset and realized there are a lot of steps so blogging about it might be usefull for others. Building UI enchancements can feel like putting together a puzzle for the first time. This won't show a full working example but I'll point out all the files and key things that had to be done to add a button next to each selected attribute whether or not the attribute is set to single...

How to create a custom left navigation pane in WebCenter Sites Contributor UI (

In this blog, I would like to show how to create a custom left navigation pane in contributor UI for 11g. As the name suggests, navigation panes are used to show trees or navigation hierarchy for assets within a site.

To create a new navigation pane, we will, first need to extend the LeftNaviagtionConfig element. This element can be found here:


Copy content of this element into a new CSElement. For this example, create the following element.

CustomElements/<your site name>/...

WebCenter Sites Dojo Tips & Tricks

WebCenter Sites allows you to customize the UI in many ways. Much of the UI is rendered using Dojo, but very little of WCS's Dojo APIs are documented. Here are a few simple Dojo code snippets that may be of use to you:

Display Info, Warning, or Error messages

The WebCenter Sites developer guide describes how to display an "info" message (the green message pictured above), but you can also display warning (yellow) and error (red) messages:

var view = SitesApp.getActiveView(); // the active view (AKA the current tab)
view.info("OK Message.");            // display...

Stay In Touch