1. Knowledge Base
  2. Plugin Editor
  3. Getting started

Getting started

Available for Enterprise users

Ardoq has a powerful Plugin Editor that lets you create your own views, or really, anything you like. It has it’s own Plugin Storage that allows you to store JSON objects, scoped by workspace or available for the entire organization. The JSON objects can be used for storing configuration and so forth.

The Plugin Editor is currently in BETA and might have breaking changes both to it’s API and the Data it exposes. We will strive to keep it backwards compatible though.

Open the Editor

Click the Plugin Editor button from the top-right of the app:



  1. Select an existing plugin for editing, or base it on the templates Statistics or Dendrogram

  2. Click Save and Run to save your plugin and execute it.

  3. Click New to create a new Plugin

  4. Give your plugin a unique id.

  5. Give your plugin a visible Name

  6. If you have a preview of your plugin, or a screenshot enter the URL here.

  7. Give it a nice description

  8. Your code. The editor has autocomplete for all available methods.

    • Type this. and press CTRL+Space to get available methods


Editing code

Your plugin must include two methods. init for initializing your plugin and localRender for rendering your data.

The init-method is called only once and is used for initializing your plugin, like loading stored data and styling your plugins visualizations, while localRender is called everytime the context or filter changes, or a component or reference is changed.


Example

JavaScript Libraries

We rely on both jQuery and D3.js for visualizing data. We also have the NVD3 library for working charts and graphs preloaded. For handling models and collections we use Backbone.js, which includes Underscore.

Methods

The methods below are subject to change, but are considered stable enough to use as of now. 🙂

Working with views

Please remember that Ardoq can contain a lot of data and your localRender method is called whenever an update occurs, or the context changes, which can be costly for graphic intensive renderings.

getContainerElement

Returns the jQuery <div> container element for your plugin’s view.

getD3SVG

Creates and returns a D3-list containing a scaled SVG that’s appended to the container element.

autoResizeSVG

Automatically resizes your SVG based on the contents size (boundingbox).

getWidth

Gets your view plugin available width.

getHeight

Gets your view plugin available height.

isActive

Returns true of our plugin is active and selected as a view.

isVisible

Returns true if your view is currently visible.

isMultipleWorkspaces

Returns true if multiple workspaces are opened.

addCSS

Adds a styles via JavaScript. Useful for initializing your plugin with CSS.

Working with stored component and references in Ardoq

The below methods returns collections and trees of D3 components that you can use for selecting data for your domain.

getStartReferences

Returns all the start references between component (links from a component without components) for the current context (e.g. all start links in a workspace, or start links beneath a component).

getD3ComponentHierarchy

Return all the components for the current context as a hierarchy.

getD3LinksAndComponents (includeParents=false, maxDegrees=1)

Returns all the incoming and outgoing references for the current context and the component nodes that are linked.

getD3LinksByComponent (component, includeParents=false, maxDegrees=1)

Returns all the incoming and outgoing references for the specified component and the component nodes that are linked.

getContext

Returns the current context, which workspace is open, selected component and/or selected reference.

Organization Storage

The Organization storage is useful for storing data that should be available regardless of the workspaces. For instance, storing configuration data for the view. In other words, it will be globally available.

isConfigLoaded

Returns true if configuration is loaded.

loadConfig

A method for loading configuration for the given plugin, takes a success and error callback as parameters.

getValue

Returns the given value for a key.

putValue

Stores the given value for a key.

Workspace Storage

The Workspace storage is used to store data for your plugin for the current opened

isWorkspaceConfigLoaded

Returns true if the config for the current workspace is loaded.

loadWorkspaceConfig

Loads the workspace config for the current workspace.

getWorkspaceValue

Returns the value for the given key.

putWorkspaceValue

Stores a value for the given key.

Was this article helpful?