Page 1 of 1

HowTo: Create a Plugin in 5 steps

Posted: 02 Mar 2018, 16:05
by rkarmann
Hi all,

Mantis is getting more and more interest, but as we are developers, it's hard to hear that something is "not possible". So Mantis developers gave us the ability to write plugin that can satisfy our specific needs.

Right now, I'm going to show you how to create a Plugin in 5 steps. This one will have the specific function : retire the "Invite Buton" from the toolbar, thanks to Jquery. So this is just an example, feel free to re-use this code and modify it. Share your work with others :D

The plugin is available on GitHub by the following link : GitHub repository.

Let's start.

Sorry for the pictures size, but I'm not able to set a higher format...

STEP 1: Declare your plugin
We need to declare the plugin so Mantis Plugin system can identify it and install it.
  1. Create a folder in Mantis's plugin directory and rename it with the exact name of your plugin (case is important) (for example : JqueryExample )
  2. In this folder create a file named with your plugin's name, for example : JqueryExample.php
  3. In this folder create the files folder : JqueryExample/files
  4. In the /files folder, create a JS file named : JqueryExample.js (so the path will be: JqueryExample/files/JqueryExample.js)
  5. Let's know take a look at the JqueryExample.php file...
In the main plugin's file, in this case JqueryExample.php we will ad the following class declaration :

Code: Select all

<?php

  /** Plugin declaration
   * extends MantisPlugin
   * Example plugin that implements Jquery files
   */

class JqueryExamplePlugin extends MantisPlugin
 { 
 }


You can notice that the class has to be renamed : <YourPluginName> + <Plugin> (in this case, JqueryExamplePlugin) if you want Mantis to be able to identify it. It also extends the MantisPlugin class.

STEP 2: Register and hooks
So that Mantis can identify your plugin, and create an instance of it, you need to override the register function by adding the following code into your plugin's php file (in this case, JqueryExample.php is concerned).

1. Add the register() method:

Code: Select all

# Declare your plugin here
   # Properties will be used by Mantis plugin's system
   function register()
    {
      $this->name = 'JqueryExample';
      $this->description = 'A Jquery plugin to modify Mantis Look';
      $this->page = '';

      $this->version = '0.0.1';
      $this->requires = array(
        "MantisCore" => "2.0.0",
      );

      $this->author = 'Your Self';
      $this->contact = 'yourmail@address.com';
      $this->url = 'yourwebsite.org';
    }
2. Add the hooks() method:

Code: Select all

# Hooked functions runs when the event is triggered
    # Here we need to display a '<scrit>' link into Footer
    # So we trigger the EVENT_LAYOUT_PAGE_FOOTER so Jquery can run after page is fully loaded
    function hooks()
      {
        return array(
          "EVENT_LAYOUT_PAGE_FOOTER" => 'scripts',
        );
      }
In this case, we USE the EVENT_LAYOUT_PAGE_FOOTER to implement a JS / Jquery script after Mantis has loaded the footer. Feel free to search for other display events in the documentation : see the event reference.

STEP 3: Add the hooked function to implement JqueryUI.js

Code: Select all

    # This method will echo our '<script>' link to Jquery
    function scripts()
      {
        # Implement the Jquery files
        echo '<script type="text/javascript" src="' . plugin_file( 'JqueryExample.js' ) . '"></script>';
      }
Here we use one the pre-wrote method for plugin management system : plugin_file( 'FileName'). See the documentation to learn more about the pre-wrote methods that you can call in a plugin : see the plugin section.

STEP 4: install your plugin
Now that all the files are ready (except the JqueryExample.js, we'll set it later), you can install the plugin to see if everything is correctly set. Go in Configuration Page > Manage Plugins. The plugin you create will appear in the Available Plugins section.

Image

All you need to do, is to click on the "install" button. You will get the following screen :

Image

STEP 5: Add the Jquery function to modify Mantis look

In this example, I want to remove the "Invite User" button from the navbar. So I'll call it with Jquery thanks to its class name (checked with the browser DOM explorer, >F12).

Code: Select all

  //-- Jquery function

  $(document).ready( function(){
    $(".btn-corner").hide();
  });
See the Jquery documentation to learn more about it.

Clean your cache brower and verify that the Jquery function is loaded.

The end.

Feel free to do more (switch logo, background color, fonts...).

Good luck and feel free to ask question in this topic for specific purposes. Download the plugin.

RK

Re: HowTo: Create a Plugin in 5 steps

Posted: 02 Mar 2018, 21:14
by atrol
You might consider renaming your plugin to avoid confusions, as nearly the same name is well known for a JavaScript library and also a Mantis plugin
https://jqueryui.com
https://github.com/mantisbt-plugins/jQuery-UI

Re: HowTo: Create a Plugin in 5 steps

Posted: 02 Mar 2018, 21:48
by rkarmann
Ok, the plugin has been renamed JqueryExample. GitHub repo > JqueryExample.

Re: HowTo: Create a Plugin in 5 steps

Posted: 12 Mar 2021, 10:49
by LukeWCS
Thanks for this HowTo, it helped me a lot to create my first plugin. :)