Das Plugin base/dashboard stellt eine UI in Kartenform bereit, die man mit ORM-Tabellen und Links füllen kann.
Die Karten werden in dashboard.jsons mit folgender Syntax konfiguriert.:
dashboard.json Beispiel
| Codeblock | ||||||
|---|---|---|---|---|---|---|
| ||||||
{
"category":"product/shop", "cards": [
{ {
"header":{ "labelcategories":{ [
"de":"Katalog", "shop-shop"
"en":"Catalog" }],
"iconheader":"fa-table", {
"accent":"info" }, "label": {
"category":"product/cms", "mainTables":{ "100de": "shopArticleLorem ipsum",
"200":"shopArticleVariant" }, "contextTablesen":{ "Lorem ipsum"
"100":"shopVatRate", "200":"shopUnit"},
"300":"shopDeliveryTime" }, "mainLinks"icon":[ "fa-image",
{ "iconaccent": "fa-shopping-cart","
"label":{},
"dedefaultTableLinks":"Bestellungen", [
"en":"Orders"ShopSomething"
}],
"attributessettingsTableLinks":{ [
"data-request":"base/ui.index&tableID=shopOrder" "ShopSomething"
} }],
{ "maintenanceTableLinks": [
"icon":"fa-info", "labelShopSomething":{
"de":"Schriften"],
"enrelationTableLinks":"Fonts" [
"ShopSomething"
}, "target":"blank"],
"hrefstaticLinks":"https://documentation.brandbox.de/pages/viewpage.action?pageId=25202937"
[
} ], {
"contextLinks":[
{ "icon": "fa-shopping-cartdatabase",
"label":{ "label": {
"de":"Bestellungen", "en":"Orders" "de": "Import",
}, "attributes":{ "data-requesten":"base/ui.index&tableID=shopOrder" "Import"
} },
{ "iconattributes":"fa-info", {
"label":{ },
"de":"Schriften", "enisAuthorizedResource": "Fonts"Shop/Package.something"
}, }
"target":"blank"],
"href":"https://documentation.brandbox.de/pages/viewpage.action?pageId=25202937"helpLinks": [
} ]{
} ], "systemTables":[ "icon": "fa-database",
"sessionArticle",label": {
"de": "sessionCheckoutImport",
]
} |
- Main Tables entsprechen den ORM-Tabellen, die innerhalb der Karte gelistet werden.
- Context Tables sind ORM-Tabellen, die im Context-Menü (Button unten rechts) gelistet werden.
- Main und Context Links werden ebenso an den jeweiligen Stellen vor den ORM-Tabellen angefügt.
- Die Keys in der dashboard.json der ORM-Tabellen werden zum Sortieren genutzt. Niedriger = weiter oben
- System Tables werden nicht innerhalb der Kacheln gelistet sondern sind nur über die Toolbar unter "Systeminformationen anzeigen" erreichbar. Es sind Tabellen, die ein normaler Nutzer nicht benötigt, wie sessionArticles, sessionCheckout etc.
- Category entspricht dem Produkt, in dem die Informationen der dashboard.json angezeigt werden sollen. Dies wirkt sich auf die Cards, sowie die System Tables aus, es ist jedoch zusätzlich möglich, für jede einzelne Card eine andere Category zu wählen. Wenn die Property fehlt, wird der übergeordnete Werte herangezogen.
Es kann zudem von bestehenden Cards extended werden, dabei wird folgende Syntax verwendet:
<Plugin Name>#<Position der Karte in der dashboard.json>
| Codeblock | ||||||
|---|---|---|---|---|---|---|
| ||||||
{ "category":"product/shop", "cards":[ { "extend":"shop/article#0", "mainTables":{ "en": "Import" }, "attributes": { } } ] } ] } |
Was sind defaultTableLinks?
Die hier notierten Tabellen tauchen direkt im Dashboard auf.
Was sind settingsTableLinks?
Die hier notierten Tabellen tauchen in der Toolbar des Dashboards unter Einstellungen auf.
Was sind maintenanceTableLinks?
Die hier notierten Tabellen tauchen in der Toolbar des Dashboards unter Administration auf. Um diese Tabellen sind nur für Administratoren sichtbar und auch nur dann wenn sie beim Mandanten freigegeben wurden.
Was sind relationTableLinks?
Die hier notierten Tabellen tauchen in der Toolbar des Dashboards unter Verknüpfungen auf.
dashboard-schema.json
Um die Gültigkeit der dashboard.json-Dateien zu bestätigen, werden diese anhand eines Schemas validiert. Dieses Schema ist in der dashboard-schema.json definiert brandbox/base-core/resources/dashboard-schema.json.
dashboard-schema.json
| Codeblock | ||
|---|---|---|
| ||
{ "$schema": "http://json-schema.org/draft-04/schema#", "name": "dashboard", "type": "object", "additionalProperties": false, "required": [ "50cards":"shopGroup" ], }, "properties": { "contextTablescards": {} } ], "systemTablestype": [ "array" ] } |
Um für die jeweiligen Produkte zu bestimmen, welche Karten standardmäßig sichtbar sein sollen, existiert eine dashboard-config.json, in der die einzelnen Cards in der selben Syntax wie beim extenden gelistet werden. Die Initial-Sortierung wird genauso, wie in der dashboard-config.json angegeben, übernommen.
| Codeblock | ||||||
|---|---|---|---|---|---|---|
| ||||||
{, "pluginsdescription":[ "List of dashboard "shop/article#0"cards.", "shop/order#0", "shop/user#0",items": { "shop/voucher#0", "shop/price#0", "type": "shop/variant#0object", "shop/checkout#0", "product/shop#0", "product/shop#1additionalProperties": false, ] } |
dashboard-schema.json
Um die Validität der dashboard.json-Dateien zu bestätigen, werden diese anhand eines Schemas validiert. Dieses Schema ist in der dashboard-schema.json definiert (base/dashboard/dashboard-schema.json).
In diesem Schema sind alle Optionen und deren Erläuterungen aufgeführt.
| Codeblock | ||||||
|---|---|---|---|---|---|---|
| ||||||
{ "$schema": "http://json-schema.org/draft-04/schema#", "name": "dashboard", "type": "object", "additionalProperties": false, "required": [ "category", "cards "properties": { "categories": { "type": "array", "systemTables" ], "properties": { "category": {"description": "Category plugin name"}, "cards": {"description": "List of dashboard cards."}, "systemTables": {"List of orm tables to list as system tables."categories where the card will be shown." }, "alwaysActive "header": {"Ignore if plugin is active or not"} } } |
Der oben stehende Ausschnitt der dashboard-schema.json zeigt, wie eine dashboard.json auf der obersten Ebene aufgebaut sein muss. Jede dashboard.json muss die Eigenschaften "category", "cards" und "systemTables" haben. "alwaysActive" ist hingegen optional. Weitere Eigenschaften sind nicht erlaubt ("additionalProperties" : false) und werfen beim Validieren einen Fehler. Die einzelnen Eigenschaften müssen auch gewisse Strukturen aufweisen, die den entsprechenden Einträgen der diagram-schema.json entnommen werden kann.
Genaueres zum Aufbau und Funktion einer schema.json-Datei kann hier nachgelesen werden: https://json-schema.org/understanding-json-schema.
Events
...
- onPopulateBundlePackages
- Dieses Event bietet Programmierern die Möglichkeit die dashboard-bundle-Gruppen um Karten zu erweitern (oder Karten zu entfernen).
Beispiel:
...
| language | php |
|---|---|
| theme | RDark |
...
"type": [ "object" ], "description": "Dashboard card head", "properties": { "label": { "type": "object", "additionalProperties": true, "required": [ |
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
"de", |
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
"en" |
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
...
], |
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
"properties": { |
...
|
...
|
...
|
...
|
...
|
...
|
...
"de": { |
...
"type": "string", "description": "German head label" } |
...
,
"en": {
"type": "string",
"description": "English head label"
}
}
},
"icon": {
"type": "string",
"description": "Font-Awesome icon for the head section"
},
"accent": {
"type": "string",
"enum": [
"",
"danger",
"danger-dark",
"warning",
"warning-dark",
"success",
"success-dark",
"info",
"info-dark",
"note",
"note-dark"
],
"description": "Head section color accent"
}
}
},
"quickAccess": {
"type": "boolean",
"description": "Is displayed by default in the quick access bar."
},
"isAuthorizedResource": {
"type": "string",
"description": "Checks right"
},
"type": {
"type": "string",
"description": "Card-Type: html, static"
},
"variant": {
"type": "string",
"description": "Frame-Type: full"
},
"feature": {
"type": "string",
"description": "Feature to customize the card body"
},
"configuration": {
"type": "object",
"description": "Configuration for Feature"
},
"defaultTableLinks": {
"type": "array",
"description": "List of table identifiert to display in the card."
},
"settingsTableLinks": {
"type": "array",
"description": "List of table identifier to display when in settings section."
},
"maintenanceTableLinks": {
"type": "array",
"description": "List of table identifier to display when in maintenance mode."
},
"relationTableLinks": {
"type": "array",
"description": "List of table identifier to display when in relation section."
},
"staticLinks": {
"type": [
"array"
],
"description": "List of orm links to list in the card. (maximum of 3 including mainTables)",
"items": {
"type": "object",
"additionalProperties": true,
"properties": {
"label": {
"type": "object",
"additionalProperties": true,
"required": [
"de",
"en"
],
"properties": {
"de": {
"type": "string",
"description": "German label"
},
"en": {
"type": "string",
"description": "English label"
}
}
},
"icon": {
"type": "string",
"description": "Font-Awesome icon"
},
"target": {
"type": "string",
"description": "Ajax target css selector"
},
"href": {
"type": "string"
},
"attributes": {
"type": "object",
"additionalProperties": true,
"properties": {}
}
}
}
},
"helpLinks": {
"type": [
"array"
],
"description": "List of orm links to list in the card. (maximum of 3 including mainTables)",
"items": {
"type": "object",
"additionalProperties": true,
"properties": {
"label": {
"type": "object",
"additionalProperties": true,
"required": [
"de",
"en"
],
"properties": {
"de": {
"type": "string",
"description": "German label"
},
"en": {
"type": "string",
"description": "English label"
}
}
},
"icon": {
"type": "string",
"description": "Font-Awesome icon"
},
"target": {
"type": "string",
"description": "Ajax target css selector"
},
"href": {
"type": "string"
},
"attributes": {
"type": "object",
"additionalProperties": true,
"properties": {}
}
}
}
}
}
}
}
}
} |
Genaueres zum Aufbau und Funktion eines JSON Schema kann hier nachgelesen werden: https://json-schema.org/understanding-json-schema.
Eventübersicht
Klassenname | Beschreibung |
|---|---|
OnCollectWelcomePanels | Steht zur Verfügung, um Inhalte im Willkommen-Dashboard zu ergänzen. |
OnMapPanel | Wird beim genutzt, um das Dashboard selbst mit Inhalten zu füllen. |
OnMapDashboard | Ermöglicht das nachträgliche ändern des fertig aufgebauten Dashboards. |
OnPopulateDashboardTab | Ermöglicht das nachträgliche ändern des fertig aufgebauten Dashboard-Tabs. |
OnMapConfigurationDropdown | Wird beim genutzt, um die Toolbar Einstellungen mit Einträgen zu füllen. |
OnMapDashboardGroups | Wird beim genutzt, um eine dashboard-config.json in einem bestehenden Dashboard zu registrieren und so eine neue Kategorie zu ergänzen. |