Tutorial: Customizing the Side Views

Customizing the Side Views

oXygen XML Web Author includes support for side views that can improve the editing experience for users by providing more information about the edited document. The JavaScript API provides control over which views are rendered, and provides support for installing a new view from either a plugin or a document framework.

Removing a View

To disable the Review side view, simply include the following code snippet at the top of the JavaScript plugin file:

workspace.getViewManager().removeView('review-panel-list');

To obtain a list with the IDs of all the defined views, type the following code in the browser console:

workspace.getViewManager().getViewIds();

Installing a Custom View

To implement a custom view, first you need to add it in the layout by calling the following code snippet when your plugin is loaded:

workspace.getViewManager().addView('cms-custom-view');

Next you need to implement a view renderer. The following is a simple example of such a view renderer:

/**
 * CMS View Renderer
 */
MyViewRenderer = function() {
};
MyViewRenderer.prototype = new sync.view.ViewRenderer();

MyViewRenderer.prototype.getTitle = function() {
  return 'Custom View';
};

MyViewRenderer.prototype.install = function(element) {
    element.innerHTML = 'Welcome to my view';
};

For more customization options for a view renderer, see the sync.view.ViewRenderer class.

Later, when you want to actually render the custom view, you should install a view renderer for it:

workspace.getViewManager().installView('cms-custom-view', new MyViewRenderer());

Contributing a Custom View from a Framework

Framework custom code is executed after the view layout is created. The good news is that we reserved several views for frameworks to use. Their IDs are 'framework-specific-N' (with N being from 1 to 9). Thus, you do not have to call sync.view.ViewManager#addView. Instead, just use one of these IDs, as in the following:

workspace.getViewManager().installView('framework-specific-1', new MyViewRenderer());