Documentation

Namespace

plugins

kiss.plugins

Plugin manager

Allow to add / get plugins. Plugins are used to add features to the application. Check the example for further details.

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

Members

# static plugins

Array of loaded plugins

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

Methods

# static add(plugin)

Adds a plugin to the list

Parameters:
Name Type Description
plugin object

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

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",

    // 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 pickaform.
        // 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) {
            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)
                    }
                }
            })
        }
    }]
});

# 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 107

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 118

Plugin texts

object

# static init()

Init all the plugins at once

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