The anatomy of a plugin

Plugin essentials

A Dashboard plugin have 3 main files needed to work and run it in Dashboard.

• manifest.json required

• index.js required

• style.css

index.js

This production ready file containing all of your code. The index.js file needs at least one component to render.

style.css

This is where your plugin style lives. This file is built and you should write your style in the sass file

We recommend using styled-components to style your plugin

Best practise* is to wrap all of your style in a reverse domain name style.

.se-infomaker-hello-world {
    /* css */
}

For the time be this is just a recommendation. This can change to a requirement and plugin that don't follow will then be invalid.

How Dashboard loads and initialize plugins

Load

When the Dashboard starts it will try to load the plugin index.js and style.css files by the url given on installation by adding /index.js and /style.css to that url. If it cannot find index.js the plugin will fail to load. If it cannot find style.css it will still continue to initialize your plugin, without the style.

Register

When the Dashboard have loaded the index.js successfully it will be executed and the Plugin.register function will be call and the plugin will register itself in the Dashboard.

For this to be successful an Agent, Application or Widget must be defined in the object passed to the register function.

The only difference in how these components is registered is that an Agent is also initialized in this stage.

Read more about register method and what can you register with your Plugin:

register

Render

Next time the Dashboard renders it will try to render registered widgets and applications.