The anatomy of a plugin

Plugin essentials

A Dashboard plugin requires three files to work.

• index.js
• style.css
• manifest.json

index.js

This production ready file containing all of your code. The index.js file needs at least one class out of: Agent, Application, Widget or Health. It could also use two, three or all of them. But never none.

style.css

In Dashboard-Plugin we use styled-components to handle styles. You still be able to use css with your plugin by writing your css rules in /src/js/plugin/style.css. You also can use sass by configure it and add your own loadder to webpack.

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.

manifest.json

---

💁🏻 The manifest is a important file. A plugin cannot be installed without a correct formatted manifest.json file with the following properties.

---

{
  "bundle": "se.infomaker.DashboardPlugin",
  "name": "Dashboard Plugin",
  "description": "Dashboard Plugin Description",
  "author": {
    "name": "Team Dashboard",
    "organization": "Infomaker Scandinavia AB",
    "email": "support@infomaker.se",
    "website": "www.infomaker.se"
  },
  "version": "1.1.1"
}

• bundle - a unique plugin id, create it by use reverse domain style and add your plugin name.
• name - your plugin name, must be unique for your organisation. This is what will be displayed in the Dashboard.
• author - plugin author
  • name - developer name
  • organization - developer organization name
  • email - developer email
  • website - developer organization website
• version - plugin version

Optional manifest properties

• graphic_url - plugin image displayed in Dashboard, defaults to default placeholder image if not defined.
• markdown_url - plugin markdown documnet displayed in plugin's settings in Dashboard store.
• thumbnail_url - plugin thumbnail image displayed in plugin widget in Dashboard toolbar, defaults to graphic image if not defined.
• wiki_url - plugin wiki url, for more details will point to wiki url.
• allowRunInModal - boolean value to specify if the plugin's application can be run inside a Dashboard modal, defaults true.

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 Dashboard.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 Dashboard.register.

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

Render

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