Grundlagen der GUI-Konfiguration

Dreh- und Angelpunkt für die Seiten in der Oberfläche sind immer die Kontexte. Ein Kontext kann z. B. ein Dashboard, eine Detailseite oder ein Dialog sein. Diesem Kontext liegt immer eine Konfiguration zugrunde. Bestandteil dieser Konfiguration sind verschiedene Listen mit Widgets, welche dann in der Oberfläche entsprechend angezeigt werden. Die Listen teilen sich z. B. auf in:

Innerhalb dieser Listen befinden sich die jeweiligen Konfigurationen für die Sidebar, den Explorer, die Lanes, das Dashboard usw. Wenn Sie also ein weiteres Widget in die Sidebar integrieren möchten, so erfolgt das im jeweiligen Kontext (z. B. Ticketdetails) in der Liste sidebars. Möchten Sie eine zusätzliche Tabelle im Ticketdashboard integrieren, so erfolgt das im Kontext "Ticket Dashboard" in der Liste content usw.

Abb.: Konfiguration im Kontext Ticket-Details

In den Listen wird ein Object ConfiguredWidget erwartet. Dieses bildet den Rahmen für das konkrete Widget, welches per configuration gegeben ist.

Ein ConfiguredWidget hat folgende relevante Eigenschaften:

Abb.: Konfiguration eines ConfiguredWidget

Diese configuration widerum erwartet eine sogenannte WidgetConfiguration. Mit dieser Konfiguration wird das Widget in seiner konkreten Ausprägung konfiguriert:

Abb.: WidgetConfiguration

Das Widget besitzt noch einmal eine eigene Konfiguration (subConfigurationDefinition). Darin sind die individuellen Konfiguration en der einzelnen Widgets enthalten. So beinhaltet z. B. das Tabellen-Widget an dieser Stelle die konkrete Tabellenkonfiguration:

- Context (z. B. Sidebar, Lane, Explorer, etc.)
    - Content (Liste der Content Widgets)
        - ConfiguredWidget (Widget-Hülle)
            - table widget (z. B. Ticket-Tabelle, Empfohlene FAQ, etc.)
                - tableConfiguration (konkreter Widget-Inhalt)
                    - Konfiguration der Tabellenspalten
            - object-information-card-widget 
              (z. B. Widget "Kontakt Informationen, 
              Lane "Ticket Informationen", Hilfe-Widget etc.)
                - Konfiguration des Avatars und der Rows
            - object-dialog-form-widget
              (z. B. Dialoge "Neues Ticket", "Ticket bearbeiten", etc.)
                - Formular
                    - Seite
                        - Gruppe
                            - Feld 
                            - Feld
                                - [Feld]...

Abb.: Tabellenkonfiguration

Ein Widget besteht aus dem Widget selbst und dem darin anzuzeigenden Inhalt . Beide besitzen einen eigenen Konfigurationsblock ("configuration":{...} ). Der Konfigurationsblock des Widgets beinhaltet den Konfigurationsblock des Widget-Inhalts.

Abb.: Widget und Widget-Inhalt am Beispiel des objekt-info-widgets Kontakt Informationen

Im Konfigurationsblock des Widgets sind u. a. definiert:

Im Konfigurationsblock des Widget-Inhalts sind u. a. definiert

Das nachfolgende Codebeispiel zeigt die Grundstruktur in einem einfachen Objekt-Info-Widget.

{
    //legt eine Instanz des Widgets an 
    "instanceId": "name-der-widget-instanz"
    //Widgetkonfiguration
    "configuration":{ 
        "id": "id-des-widgets",
        "name": "name des Widgets",
        "type": "Widget | TableWidget",
        "widgetId": "table-widget | object-information-card-widget",
        "title": "Translatable#übersetzbarer Widget-Titel",
        "actions": [],
        "subConfigurationDefinition": null,
        //Konfiguration des Widget-Inhalts
        "configuration": {
            //Konfiguration des Avatars
            "avatar": {string | ObjectIcon},
            //Definiert, welche Inhalte pro Zeile angezeigt werden
            "rows": [
                {... s. Widget-Inhalt...}
            ],
        }
        //Eigenschaften/Verhalten des Widgets
        "minimized": false,
        "minimizable": false,
        //Icon in der Titelzeile
        "icon": "kix-icon-man-house",
        "contextDependent": false
    },
   "permissions": [],
   "size": "large"
},

Widgets können fest oder flexibel implementiert werden.

Diese Widgets sind fest in den entsprechenden Kontext implementiert. Sie besitzen keine zentrale Konfiguration. Ihre Konfiguration ist direkt im Widget angegeben und kann daher in jeder Instanz variieren.

Soll ein generelles Verhalten des Widgets geändert werden, so muss es in allen Instanzen geändert werden. Dadurch ist es aber bspw. auch möglich, in jedem Hilfe-Widget einen anderen Hilfetext anzugeben. Fest implementierte Widgets können jedoch

Ein fest implementiertes Widget ist bspw. das Sidebar-Widget Notizen im Home Dashboard oder das Sidebar-Widget Zeitbuchung.

{
  "instanceId": "ticket-details-simple-time-accounting-widget",
  "configurationId": "ticket-details-simple-time-accounting-widget",
  "configuration": {
    "id": "ticket-details-simple-time-accounting-widget",
    "name": "Simple Time Accounting",
    "type": "Widget",
    "widgetId": "ticket-simple-time-accounting-widget",
    "title": "Translatable#Simple Time Accounting",
    "actions": [],
    "subConfigurationDefinition": null,
    "configuration": null,
    "minimized": false,
    "minimizable": true,
    "icon": "kix-icon-time",
    "contextDependent": false,
    "contextObjectDependent": false,
    "formDependent": false,
    "formDependencyProperties": []
  },
  "permissions": [],
  "size": "large"
},

Flexibel implementierte Widgets besitzen eine zentrale Konfiguration in einem eigenen Konfigurationsschlüssel. Sie werden durch Referenz auf ihren Konfigurationsschlüssel implementiert. Dadurch können sie nicht nur in der Sidebar, sondern in nahezu allen Oberflächen flexibel eingebunden werden.

Da diese Widgets eine zentrale Konfiguration besitzen, werden Änderungen an der Konfiguration für alle Instanzen dieses Widgets übernommen - unabhängig vom Kontext , indem das Widget eingebunden ist. Sie besitzen demnach eine größere Konfigurationsvielfalt als fest implementierte Widgets.

Die im Widget anzuzeigenden Inhalte können durch Verwendung von Platzhaltern, Filtern und Bedingungen dynamisch gestaltet werden. Da die Inhalte auf Suchergebnissen basieren und lediglich die Ergebniswerte angezeigt werden, können nahezu alle Informationsarten - unabhängig vom Objekttyp - integriert werden. Es ist damit bspw. möglich:

Flexible Widgets sind bspw.:

{ ...
   //Sidebar in den Ticketdetails
   "sidebars": [
    {   //Instanz des Widgets Kontakt Informationen
        "instanceId": "ticket-details-contact-card-widget",
        "configurationId": "ticket-details-contact-card-widget",
        "permissions": [],
        "size": "large"
    },
    {   //Instanz des Widgets Empfohlene FAQ
        "instanceId": "ticket-details-suggested-faq-widget",
        "configurationId": "ticket-details-suggested-faq-widget",
        "permissions": [],
        "size": "large"
    },
    {   //Instanz des Widgets Tickets zu Assets
        "instanceId": "ticket-details-affected-asset-tickets",
        "configurationId": "ticket-details-affected-asset-tickets",
        "permissions": [],
        "size": "large"
    },
    {   //Instanz des Widgets Tickets zu Kontakt
        "instanceId": "ticket-details-contact-tickets",
        "configurationId": "ticket-details-contact-tickets",
        "permissions": [],
        "size": "large"
    } 
],

Sie können eine Liste von berechtigten Rollen in Konfigurationen speichern, damit

Wenn Berechtigungsrollen hinterlegt sind, muss der aufrufende Benutzer mindestens einer dieser Rollen zugeordnet sein, damit die Konfiguration verwendet werden kann. Sind keine Berechtigungsrollen angegeben, wird das Standardverhalten für die Anzeige verwendet.

Um Berechtigungsrollen zu definieren, geben Sie innerhalb der entsprechenden Konfiguration die IDs der zugriffsberechtigten Rollen im Parameter roleIds[] an. Im folgenden Beispiel können nur Benutzergruppen mit den Rollen Ticket Reader (ID 4) und Ticket Agent (ID 5) die Informationen sehen

{
  ...
  "roleIDs": [4,5],
  ...
}

Berechtigungsrollen können in den folgenden Konfigurationen gespeichert werden: