pCon.basket is a client side web application running in a web browser. Therefore JavaScript and webpack has to be used to develop a plugin. If JavaScript is used directly or any other language which can be transpiled to JavaScript is up to the developer. To simplify the development process it is recommended to use TypeScript. The provided plugin SDK has type definitions of all interfaces that are required when implementing a pCon.basket plugin. For the GUI it is recommended to use React because the SDK also provides some react helper components but using other UI-frameworks is also possible. The basket itself is developed using the fluentui/react component library.

2.1 Plugin Structure

Each plugin is located in its own directory. The name of the directory is free to choose. Inside the plugin directory are the two mandatory files plugin.json and plugin.js. The plugin.json is a manifest used for the plugin registration. The plugin.js file contains the javascript logic of the plugin. Other than that each plugin directory can contain further files (e.g. assets)

<plugin_directory>
  ├─ plugin.json
  ├─ plugin.js
  └─ ... additional plugin related files and folders

2.2 plugin.json

The plugin.json is a required manifest of the plugin and defines which plugin categories are implemented by this plugin. The content of the manifest will be loaded immediately at the start of the application. The plugin.js will be loaded on-demand.

Structure of the manifest (optional fields are marked with ?):

{
/**
* Object with major and minor version of the required plugin API.
* e.g.: { "major": 1, "minor": 0 }
* This version is used by the pCon.basket application to verify plugin compatability.
* To be compatible the major version has to match exactly and the minor version
* has to be less than or equal to the API of pCon.basket.
* A plugin will be ignored if its requiredApiVersion is not comptatible.
*/
"requiredApiVersion": {
"major": number,
"minor": number
},
/**
* Custom version string of the plugin e.g. "1.0.0"
* Note: The version is also used to control the browser cache and therefore
* should be changed with every plugin release.
*/
"version": string,
/** vendor of the plugin e.g. "EasternGraphics GmbH" */
"vendor": string,
/** Array of plugin category implementations contained in this plugin */
"plugins": [
{
/** unique name of the plugin implementation */
"name": string,
/** plugin category for this plugin, see SDK for list of available categories */
"category": string,
/** subCategory of the plugin if the `category` supports it */
"subCategory"?: string,
/**
* If true this plugin will be handled as a default plugin.
* If multiple plugins exist for the same plugin category default plugins have lower priority.
* This is only relevant for plugin categories that support only a single
* implementation at runtime (e.g. `Catalog`).
*/
"isDefault"?: boolean,
/**
* Name of the icon to use. See section 2.4 for details.
* It depends on the plugin category if an icon is supported.
*/
"iconName"?: string,
/**
* Url of the icon to use. If an icon url is defined the `iconName` will be ignored.
* It depends on the plugin category if an icon is supported.
*/
"iconUrl"?: string,
/** If the plugin category supports it, a multilingual title can be defined. */
"title"?: {
"en"?: string,
"de"?: string,
/* ... more translations */
},
/** If the plugin category supports it, a multilingual description can be defined. */
"description"?: {
"en"?: string,
"de"?: string,
/* ... more translations */
}
},
/* ... further category definitions */
]
}

2.3 plugin.js

The plugin.js contains the bundled plugin code and will be loaded on-demand by the pCon.basket. The plugin.js can contain implementations of multiple plugin categories. For each category the corresponding plugin interface has to be implemented. After the plugin was been loaded each plugin category implementation has to be registered at the plugin manager. The registerPlugin method can be used for this purpose. The global egr.wbkApp instance which is available to all plugins at runtime can be used to access the plugin manager.

egr.wbkApp.pluginManager.registerPlugin(new MyPluginImplementation());

2.4 Using Icons

The are several interfaces in the plugin API where an icon can be defined (e.g. for tabs or buttons). Icons can usally be defined in two ways. By defining an url to a custom icon or by using a name of a predefined icon. pCon.basket includes an open source icon library named material design icons. The complete list of available icons can be found here: https://materialdesignicons.com The names of the icons in this list have to be prefixed with mdi- in order to be used with pCon.basket e.g. mdi-account

Generated using TypeDoc