Developers' Guide to MSM Plugins

Plugins allow easy modification, customisation, and enhancement of your MSM application. Instead of needing to change the core programming of MSM, you can add functionality with plugins.

Following on from our previous announcement, we would like to share with you how you can start creating your own plugins for MSM. In this article we will go through how you can create a plugin, whilst using examples from our JIRA for MSM Plugin which can be found on GitHub here.

Getting Started

As previously discussed we are utilising the emerging Web Component standards, specifically the following specifications:

• Custom Elements
• HTML Templates

Custom Elements allow developers to create their own elements as part of the DOM structure with the ability to interact with them just like any other HTML tag.

HTML Template’s allow developers to define markup with the ability to inject dynamic content using JavaScript.

Firstly we have the HTML page. As the plugin developer you will want to include the Template.js polyfill found at http://www.webcomponents.org. This will allow you to use the HTML Template feature in browsers that do not support it natively.

Within the template tags you can write normal HTML markup:

 

In the example above we have included the polyfill and have some standard HTML markup inside our template tag. Be careful with your CSS as you only want it to affect the elements inside your plugin. In this example we have wrapped all our elements with a “div” tag that has the “MarvalSoftware-Jira” class. We will then use this in any subsequent style rules to ensure only our elements are affected.