Using code libraries


1. Overview

Code libraries allow developer users to create and manage reusable scripts to refer to from the script editor in dashboards and other views.

For example, you might have common lines of script or helper functions that you want to call from multiple dashboards. Code libraries allow you to write and save this script once and refer to it from multiple views. You can also refer to a code library in other code libraries to avoid further duplication.

2. Create a code library

You can create a code library while you have a file open for editing such as a dashboard or another type of view.

In the Explore window, right-click the Code Libraries folder, then choose New JavaScript Code Library.

Creating a new code library
Creating a new code library

The code library dialog opens. Click into the Name field to name the library and confirm the save location in the Save dialog that appears, then click the submit button at the bottom to return the code library dialog.

You can optionally create a new subfolder in the Save dialog by right-clicking the Code Libraries folder again and choosing New Folder, then typing a name and the enter/return key.

Creating a new code library
Creating a new code library

Click Add reference if you have other code libraries containing script that this code library should be able to refer to or should otherwise be included whenever this code library is used.

You can write or paste your script directly into the editor shown in the dialog, which has many of the same features as the script editor shown when editing a view, including auto-complete popups. You can also click Choose File or Browse... (depending on the browser) to upload a file with a .js file extension.

Code library JavaScript will run immediately when a view that references it is loaded, as a <script> element on its page. You can include any JavaScript that should be included on these pages, such as functions that should be called from script actions added to events in a dashboard. Below are some examples:

function mySimpleFunction() {
    return "Hello!";

window.corporateLibrary = {
    palette: ["#418cf0", "#fcb441", "#e0400a", "#056492", "#bfbfbf", "#1a3c69", "#e1e480", "#119cdd", "#cb6a49", "#005cdb", "#f4d288", "#506381", "#f1b9a8", "#e0830a", "#7893be"],
    applyPaletteColors: function (colorRules) {
        var discreteRules = colorRules.filter(function (rule) {
            return rule instanceof dundas.controls.DiscreteColorRule;
        discreteRules.forEach(function (rule, index) {
            var colorString = corporateLibrary.palette[index % corporateLibrary.palette.length];
            rule.value = dundas.controls.Color.fromString(colorString);

Click the submit button at the bottom of the dialog to save and check in the code library in the location you chose within the Code Libraries folder.

To edit the code library later, find it in the Explore window and double-click it, or right-click it and choose Edit.

3. Using a code library

When editing a dashboard, report, or other view, you can add a code library in the Properties window for that view. If any element or control is selected, click an empty part of the canvas to de-deselect it and show the view's own properties instead.

Under the Actions category, expand Code Libraries then click the + button.

Add a code library to a view in Properties
Add a code library to a view in Properties

In the Open dialog that appears, select the code library that you want to use and click the submit button at the bottom.

Select the code library
Select the code library

Code library script often needs to be accessed or called from script actions. Using the script editor accessed for an event such as Loading or Ready on the dashboard or view itself, or Click on a visualization or other control, you can now refer to the code library's script.

Using a code library in dashboard Loading script
Using a code library in dashboard Loading script

Code libraries added to a view are included on the page when that view is first opened. Click Sandbox View in the toolbar to immediately open the dashboard in view mode in a new tab or window with all code libraries loaded and scripts running.

If your code library script is causing a problem with your view even in edit mode, you can add ?IgnoreBuiltInResources=true to the URL in your browser's address bar, (or &IgnoreBuiltInResources=true following other parameters).

When using a view container to embed a view, code libraries from both views will be added to the page.

You can also re-open the current file or refresh the page for any newly added code libraries to be loaded, but note that script actions only run in view mode, and dashboards must be opened directly into view mode for script actions to run.

Example result after clicking Sandbox View
Example result after clicking Sandbox View

4. See also


Dundas Data Visualization, Inc.
400-15 Gervais Drive
Toronto, ON, Canada
M3C 1Y8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours:
Phone: 9am-6pm, ET, Mon-Fri
Email: 7am-6pm, ET, Mon-Fri