Documentation

Namespace

plugins

kiss.plugins

Plugin manager

Plugins are used to add features to the application.

Each feature can be added to a specific place in the application. For example, a plugin can add a feature to the form section, or the form menu. A single plugin can add multiple features at the same time.

Feature types are:

  • form-section: adds a section to the form
  • form-header: adds a section to the form header
  • form-footer: adds a section to the form footer
  • form-menu: adds an item to the form menu
  • model-menu: adds an item to the model menu
  • attachment-menu: adds an item to the attachment field menu (e.g. to process attachments)

A plugin can also have:

  • an init() method, which will be automatically called when the plugin is loaded
  • custom methods, which will be available in the plugin object
  • fields, which will be added to the target model

Plugin manage localization, so that the texts can be translated into multiple languages.

Check the example for further details.

View Source client/core/modules/plugins.js, line 30

Members

# static plugins

Array of loaded plugins

View Source client/core/modules/plugins.js, line 35

Methods

# static add(plugin)

Adds a plugin to the list

Parameters:
Name Type Description
plugin object

View Source client/core/modules/plugins.js, line 137

Example
// Defines the plugin which adds the form feature: "See JSON data"
kiss.plugins.add({
    // Plugin id
    id: "form-feature-show-json",

    // The plugin has an icon to recognize it
    icon: "fab fa-node-js",

    // The plugin has an order, which is used to display the list of plugins to the user.
    order: "0003",

    // A plugin can be disabled, so that it is not loaded by default.
    disabled: false,

    // A plugin can be admin-only, so that it is only available to administrators to configure a feature.
    admin: false,

    // A plugin must support multi-language texts
    texts: {
        // A plugin must at least have name and a description
        "name": {
            en: "see data as JSON",
            fr: "Voir les données JSON"
        },
        "description": {
            en: "this plugin displays the record data as JSON",
            fr: "ce plugin affiche les données JSON du document"
        }
    },

    // A plugin is an array of features because a single plugin can add multiple features at the same time.
    features: [{
        // The plugin "type" tells the application WHERE to integrate the plugin.
        // There are many places where a feature can be plugged into airprocess.
        // The most common one is "form-section", which adds a... form section, of course.
        type: "form-section",

        // The "renderer" is the function that will render the plugin into the page.
        // In the case of a form section, the function will receive the form itself as input parameter.
        // There are only 2 rules to follow to build the renderer:
        // - the function **must** return an HTMLElement.
        // - the HTMLElement **must** have a class with the plugin id. The class will be used as a selector when showing/hiding the plugin.
        renderer: function (form) {
            // The "record" property of the form allows to access the current record being edited.
            const record = form.record

            // Return your UI: can be any HTMLElement or KissJS component. The example below is a KissJS component:
            return createHtml({
                class: "form-feature-show-json",

                collections: [
                    kiss.app.collections[record.model.id]
                ],

                methods: {
                    async load() {
                        let recordDataToHtml = JSON.stringify(record.getRawData(), null, 4)
                        recordDataToHtml = recordDataToHtml.replaceAll("\n", "<br>")
                        recordDataToHtml = recordDataToHtml.replaceAll(" ", "&nbsp;")
                        this.setInnerHtml(recordDataToHtml)
                    }
                }
            })
        }
    }],

    // A plugin can add fields to the target model.
    fields: [
       {
          id: "workflow-initiator",
          type: "directory",
          label: "workflow initiator"
       },
       // ...
    ],

    // The plugin can have an optional "init" method, which will be called when the plugin is loaded
    async init() {
       log("Plugin " + this.id + " initialized")
    },

    // The plugin can have methods, which will be available in the plugin object
    methods: {
       doThis() {
          log("Doing this in the plugin " + this.id)
       }
    }
});

// The method can be used like this:
kiss.plugins.get("form-feature-show-json").doThis()

# static get(pluginIdopt) → {*}

Get one or all the plugin definitions

Parameters:
Name Type Attributes Description
pluginId string <optional>

If provided, returns only the specified plugin. Otherwise, return all plugins.

View Source client/core/modules/plugins.js, line 153

The array of all plugins, or only the specified plugin

*

# static getTexts(pluginId) → {object}

Get the texts of the plugin

Parameters:
Name Type Description
pluginId string

View Source client/core/modules/plugins.js, line 164

Plugin texts

object

# static init()

Init all the plugins at once

View Source client/core/modules/plugins.js, line 183

# static initTexts()

Translate main properties into the right language, at runtime

View Source client/core/modules/plugins.js, line 172

Members

Methods