Customizing WebApp Component Client Side

Client side customization is available through a JavaScript API. Unlike the server side customization, it can be used to modify the application's GUI.

The WebApp Component is an editing platform, but it is the job of the integrator to provide a way for the user to select which file is going to be edited. Afterwards, the user should be redirected to the WebApp Component editing page, and the following three URL parameters specified:

url - An absolute URL of the edited file.
ditamap - (Optional parameter) An absolute URL taken into account only when editing a DITA file. Provides the DITA map context of the edited DITA file.
author - The author name.

Suppose that the WebApp Component is deployed at the following URL:

http://www.example.com/oxygen-sdk-sample-webapp/

The user (John Doe) wants to edit a file (located at http://www.test.com/topics/topic.xml) in the context of a DITA map (located at http://www.test.com/map.xml). In this case, the editing URL should be:

http://www.example.com/oxygen-sdk-sample-webapp/app/oxygen.html
?url=http%3A%2F%2Fwww.test.com%2Ftopics%2Ftopic.xml
&ditamap=http%3A%2F%2Fwww.test.com%2Fmap.xml
&author=John%20Doe

Note: The parameter values are percent encoded before being added to the editing URL.

JavaScript API Method for Loading Content

The WebApp Component also offers an alternate method for loading editor content using a JavaScript plugin. The BeforeEditorOpenedEvent can be used for the following:

To specify the XML content to be loaded in the editor.
To add new actions to the action manager.
To change the startup options for the editor. For example, you can choose whether to only load the Review mode editing actions or to enable full editing support (Edit mode editing actions).

Loading Custom JavaScript Code

To extend the functionality provided by the WebApp Component, create a file called plugin.js and copy it in the app folder of the WebApp Component deployment. Alternatively, you can bundle JavaScript code with a Java Plugin.

The plugin.js file can contain JavaScript code that calls the JavaScript API provided by the WebApp Component.

Load JavaScript Code from a Framework

To load JavaScript code from a framework, put your code in the framework.js file (located in the web folder inside the particular framework folder) that calls the JavaScript API provided by the WebApp Component.