Support

Add-on configuration

defaultConfiguration

This document describes how to use the defaultConfiguration option.

  • The addon configuration will be persistent based on the installation scope of the addon.
    • e.g. if the addon installation scope is USER, settings will be saved on user level.
    • e.g. if the addon installation scope is GROUP, settings will be saved on group level.

The example below demonstrates how to add a sample detail button with an action handler. The action handler makes use of custom addon configuration options.

As seen in the example we need to setup a configurationSchema (https://json-schema.org/) which will be available via the addon detail page in the marketplace (not yet available during development(sideloading)).

The needsConfiguration needs to be set before we can use a custom configuration.

Development

As stated in the top of this document the addon configuration will be persistent after the addon is published within the eLab marketplace.
Since the addon is sideloaded while development it's not possible to connect the configuration to a specific group/person yet. To mimic a production situation we can init our application via the following code snippet:

context.init({
    condition: true,
    string: "myChoice",
    defaultOptionValue: "value1"
});

This snippet will load our addon configuration with the values provided in the init. Please find the function customAction to see how to make use of the configuration options.

Example code

/*
@rootVar: MY_EXAMPLE_ADDON 
@name: My example addon
@description: Description for my Example addon
@author: Awesome Developer
@version: 0.0.1
@defaultConfiguration: {"condition": true, "string": "", "defaultOptionValue": "default"}
*/
var MY_EXAMPLE_ADDON = {};
(function (context) {
    context.needsConfiguration = true;
    context.configurationSchema = function () {
        return {
            'condition': {
                'type': 'boolean',
                'title': 'Toggle condition one',
                'format': 'checkbox',
                'default': true
            },
            'string': {
                'type': 'string',
                'title': 'My custom string',
                'format': 'string',
                'default': ''
            },
            'defaultOptionValue': {
                'title': 'Please select your option',
                'type': 'string',
                'enum': [
                    'default',
                    'value1',
                    'value2',
                ],
            },
        };
    };
    context.init = function (config) {
        $(function() {
            context.myExampleAddon = new context.myExampleAddon(config);
        });
    };

    context.myExampleAddon = new Class({
        Implements: [Options, Events],
        Extends: eLabSDK.Base,
        options: {},
        initialize: function (config) {
            var self = this;
            self.setOptions(config);

            var sp = new eLabSDK.Page.Sample({
                onSampleDetailReady: function(){
                    var sampleID = LabBrowser.getSampleID();

                    if (sampleID !== '') {
                        var primaryGroupID = primGroupID;
                        var timeFormat = userTimeFormatMomentJS;
                        var pageType = 'sample';
                        var objectNameSelector = '#samplename';

                        var button = new eLabSDK.GUI.Button({
                            label: 'My Label',
                            icon: '',
                            actionID: 'mcs_actionID',
                            action: function () {
                                self.customAction(sampleID, primaryGroupID, timeFormat, pageType, objectNameSelector);
                            }
                        });
                        if($('#mcs_actionID' + sampleID).length > 0) return;
                        sp.addSampleDetailButton(button);
                    }
                }
            });
        },
        customAction: function (sampleID, subGroupID, momentTimeFormat, pageType, objectNameSelector) {
            const self = this;
            
            // `condition` is coming from the configuration settings
            if(self.options.condition) {
                console.log('Run my action');
            }

            // `string` is coming from the configuration settings
            if(self.options.string === "myChoice") {
                console.log('Run my action');
            }
            console.log({
                sampleID,
                subGroupID,
                momentTimeFormat,
                pageType,
                objectNameSelector
            });
        },
    });

    // This need to be called to make the add-on active via the developer tab inside eLab. When the add-on is added to the marketplace, this is not needed anymore.
    context.init({
        condition: true,
        string: "myChoice",
        defaultOptionValue: "value1"
    });
})(MY_EXAMPLE_ADDON);