Creating a Chart Extension

Creating an extension often involves cycles of writing, running, and then debugging code.

When you make changes to the properties.js file for your extension, you need to clear the WebFOCUS cache in order for those changes to be recognized. Clear the cache using the Clear cache link in the WebFOCUS Administration Console.

If you change the .js code for your extension (for example, com.ibi.simple_bar.js), you do not need to make any changes to WebFOCUS. You only need to clear your own browser cache, to ensure that the new JavaScript file is downloaded. The same is true if you change any additional .js files included by your extension.

The Simple Bar extension example demonstrates the required and optional files in an extension, and how those files are typically laid out.

You can open com.ibi.simple_bar and com.ibi.simple_bar.js in a text editor to see exactly how an extension is written.

The extension ID (ext_id) is a string in the form com.your_company.extension_name. The ext_id must be all lowercase, and can include only letters, numbers, underscores and dots. The entire extension lives in a folder named ext_id. The core of the extension lives in a file named ext_id.js. This file includes code to render the extension as a new chart type within WebFOCUS.

The properties.json file configures your extension to run in WebFOCUS. This file includes all the metadata needed to include your extension in the WebFOCUS user interface, as well as a list of all properties you wish to expose to end users, so they can customize the behavior of your extension.

The extension folder can also include optional additional folders for external css and lib resources. If your extension uses any additional CSS or JavaScript library files, you can keep those resources organized in dedicated folders, such as css and lib, as you choose. External resources are configured and loaded inside the base ext_id.js file of your extension.