Struktur eines Plugins¶
In diesem Kapitel wird auf die allgemeine Struktur eines Plugins eingegangen.
Dateistruktur¶
Ein Plugin hat typischerweise folgende Dateistruktur:
plugin.zip
├── manifest.json
├── button.js
├── pane.html
├── settings.html
└── images
└── logo.png
- manifest.json
- Die zentrale Datei eines Plugins. Sie enthält Informationen wie den Namen und die Version des Plugins aber auch Informationen darüber, welche Extension Points von diesem Plugin implementiert werden.
- button.js, pane.html und settings.html
- JavaScript und HTML Dateien dienen zur Implementierung der UI und Logik eines Plugins. Typischerweise wird pro Erweiterungstyp eine eigene HTML bzw. eine JavaScript Datei angelegt.
- images
Die einzelnen Dateien können Sie in Unterordner organisieren.
Die einzige Ausnahme ist die
manifest.jsonDatei. Diese muss im Root-Verzeichnis liegen.
Manifest¶
Die manifest.json Datei muss im Root-Verzeichnis des Plugins abgelegt werden und besitzt folgende Struktur:
{
"pluginId": "sample-plugin",
"label": "Sample plugin",
"version": "0.2",
"description": "This is just a sample Plugin",
"icon": "images/logo.png",
"buttons": [
{
"buttonId": "sampleButton",
"extensionPoint": ["agentclient.*"],
"label": "Just a label",
"icon": "maps:local-cafe",
"filename": "button.js",
"function": "messageSend",
"disabled": true
}
],
"panes": [
{
"paneId": "samplePane",
"extensionPoint": ["agentclient.*"],
"label": "Just a label",
"hidden": false,
"defaultOpen": true,
"filename": "pane.html",
"height": "100px"
}
],
"dialogs": [
{
"dialogId": "sampleDialog",
"width": "300px",
"height": "400px",
"modal": "true",
"filename": "dialog.html",
"functionClose": "onClose",
"functionCancel": "onCancel",
"functionSave": "onSave"
}
],
"settings:": {
"type": "iframe",
"filename": "settings.html",
"function": "onClose"
}
}
Metainformationen¶
- pluginId - Pflichtfeld
Die technische ID des Plugins, die möglichst eindeutig sein sollte.
Die ID muss dem HTML 4 Standard erfüllen. Das heißt sie muss mit einem Buchstaben
([A-Za-z])beginnen und kann mit beliebig vielen Buchstaben([A-Za-z]), Zahlen([0-9])und den Sonderzeichen(-_:.)fortgesetzt werden. Leerzeichen sind nicht erlaubt.- label
- Der Name des Plugins, der dem Benutzer angezeigt wird.
- version
- Eine optionale Versionsnummer.
- description
- Eine Kurzbeschreibung des Plugins.
- icon
Ein optionales Icon für das Plugin.
Erlaubt sind relative Pfade auf Bilddateien, die mit dem Plugin ausgeliefert werden.
Erweiterungstyp Schaltfläche¶
- buttons
Falls das Plugin Schaltflächen in der Kontrollleiste hinzufügen will, müssen sie in diesem Attribut angegeben werden.
Ein Plugin kann mehrere Schaltflächen definieren.
- buttonId - Pflichtfeld
- Die technische ID der Schaltfläche.
- extensionPoint - Pflichtfeld
Der Extension Point an dem die Schaltfläche hinzugefügt werden soll.
Beispiele:
["agentclient.livechat.*", "agentclient.teamchat.videochat"],["agentclient.livechat.public.videochat"]- label - Pflichtfeld
Das Label für die Schaltfläche.
Es kann entweder ein internationalisierbares Label referenziert (siehe Internationalisierung) oder ein Freitext angegeben werden.
Beispiele:
Plugin Button,IDS_CLOSE- icon
Das Icon der Schaltfläche. Sie können alle Icons aus der Material Design Spezifikation wählen.
Bei mehrwörtigen Icons müssen die Leerzeichen durch einen Bindestrich ersetzt werden. Unterstriche müssen ebenfalls durch Bindestriche ersetzt werden.
Sollten Sie ein Icon auswählen welches nicht aus der Kategorie Action stammt, müssen die die Kategorie als Prefix vor den Iconnamen setzen.
Beispiele:
3d-rotation,accessibility,av:add-to-queue- filename - Pflichtfeld
- Die JavaScript Datei, die die Logik für die Schaltfläche enthält. Insbesondere die Funktion, die bei Betätigen der Schaltfläche aufgerufen werden soll.
- function - Pflichtfeld
Der Name der Funktion, die bei Betätigen der Schaltfläche aufgerufen wird.
Die JavaScript Datei muss eine entsprechende globale Methode auf dem
windowObjekt implementieren.- disabled
Der initiale Zustand der Schaltfläche.
Erlaubte Werte:
true,falseDefault:
false
Erweiterungstyp Pane¶
- panes
Falls das Plugin einen neuen Bereich in der Erweiterungs Pane hinzufügen will, müssen sie in diesem Attribut angegeben werden.
Ein Plugin kann mehrere Bereiche definieren.
- paneId - Pflichtfeld
- Die technische ID der Pane.
- extensionPoint - Pflichtfeld
Der Extension Point an dem die Schaltfläche hinzugefügt werden soll.
Beispiele:
["agentclient.livechat.*", "agentclient.teamchat.videochat"],["agentclient.livechat.public.videochat"]- label - Pflichtfeld
Die Überschrift des neuen Bereichs.
Es kann entweder ein internationalisierbares Label referenziert (siehe Internationalisierung) oder ein Freitext angegeben werden.
Beispiele:
Plugin Button,IDS_CLOSE- hidden
Die initiale Sichtbarkeit des Bereichs.
Sie kann zur Laufzeit über die lcapi.ui.pane API geändert werden.
Default:
false- closed
Definiert ob der Bereich initial auf- oder zugeklappt ist.
Der Zustand kann zur Laufzeit über die lcapi.ui.pane API geändert werden.
Default:
false- filename - Pflichtfeld
Die HTML Datei für den neuen Bereich.
Es werden nur relative Pfade unterstützt. Die referenzierte Datei muss mit dem Plugin ausgeliefert werden.
- height - Pflichtfeld
Die Höhe des neuen Bereichs in einer CSS Einheit.
Beispiel:
150px
Erweiterungstyp Dialog¶
- dialogs
Falls ein Plugin Dialoge hinzufügen will, müssen Sie in diesem Attribut definiert werden.
- dialogId - Pflichtfeld
- Die technische ID des Dialogs.
- width - Pflichtfeld
Die Breite des Dialogs in einer CSS Einheit.
Beispiel:
300px- height - Pflichtfeld
Die Höhe des Dialogs in einer CSS Einheit.
Beispiel:
200px- modal
Gibt an ob der Dialog als modaler Dialog dargestellt werden soll. Modale Dialoge lassen sich nur über die definierten Schaltflächen schließen.
Default:
false- filename - Pflichtfeld
Die HTML Datei, die im Dialog angezeigt wird.
Es werden nur relative Pfade unterstützt. Die referenzierte Datei muss mit dem Plugin ausgeliefert werden.
- functionClose
Der Name der Funktion, die beim Betätigen der Schließen Schaltfläche ausgeführt wird.
Die JavaScript Datei muss eine entsprechende globale Methode auf dem
windowObjekt implementieren.Falls keine Funktion hinterlegt ist, wird die Schließen Schaltfläche nicht angezeigt.
- functionCancel
Der Name der Funktion, die beim Betätigen der Abbrechen Schaltfläche ausgeführt wird.
Die JavaScript Datei muss eine entsprechende globale Methode auf dem
windowObjekt implementieren.Falls keine Funktion hinterlegt ist, wird die Abbrechen Schaltfläche nicht angezeigt.
- functionSave
Der Name der Funktion, die beim Betätigen der Speichern Schaltfläche ausgeführt wird.
Die JavaScript Datei muss eine entsprechende globale Methode auf dem
windowObjekt implementieren. Als Argument wird eine Callback Funktion mitgeliefert, die zum Beispiel nach einer Validierung aufgerufen werden muss. Über diese Callback Funktion kann auch gesteuert werden, ob der Dialog sich schließen, oder weiterhin offen bleiben soll.Beispiel:
window.onSave = function(cb) { let isValid = true; // Some logic to determine if it is valid to close the dialog. cb(isValid); }
Falls keine Funktion hinterlegt ist, wird die Speichern Schaltfläche nicht angezeigt.
Erweiterungstyp Einstellungen¶
- settings
Falls Sie für das Plugin Einstellungsmöglichkeiten anbieten wollen, können Sie sie hier definieren.
Im Agentenclient werden unter Einstellungen -> Plugins alle installieren Plugins angezeigt. Über diese Ansicht können auch die Einstellungen eines Plugins geöffnet werden.
- filename
Die HTML Datei für die Einstellungen. Öffnet der Benutzer die Einstellungen des Plugins, wird diese Datei in einem Dialog angezeigt.
Es werden nur relative Pfade unterstützt. Die referenzierte Datei muss mit dem Plugin ausgeliefert werden.
- function
Der Name der Funktion, die beim Schließen des Einstellungsdialogs aufgerufen wird.
Die JavaScript Datei muss eine entsprechende globale Methode auf dem
windowObjekt implementieren.