Dynamische Felder in Dialogen bereitstellen

Nach dem Anlegen und Konfigurieren eines Dynamischen Feldes können Sie es in den Oberflächen von Dialogen (z. B. Neues Ticket oder Ticket bearbeiten) bereitstellen, damit Agenten Werte darin hinterlegen können.

Der in der Konfiguration des Dynamischen Felds gewählte Objekttyp ist hierbei maßgeblich. Er bestimmt das Objekt (Kontakt, FAQ, Organisation, Ticket, Artikel), in dem das Dynamische Feld eingebunden werden kann.

So können bspw. Dynamische Felder vom Objekttyp "Ticket" ausschließlich in ticketrelevanten Oberflächen eingebunden werden (Dialoge "neues Ticket", "Ticket bearbeiten", Detailansicht etc.), nicht aber in FAQ-Artikeln oder in Organisationen.

Die Integration Dynamischer Felder in die Oberfläche eines Ticket-Dialogs erfolgt im Menü Workflow durch Auswahl des Dynamischen Feldes in der Konfiguration einer Ticketvorlage bzw. Aktion (Seite Eingabefelder). KIX Pro stellt dazu einen Formulardesigner bereit. Basis des Dialogs Neues Ticket ist die Ticketvorlage Default - New Ticket Template. Die Basis für den Dialog Ticket bearbeiten bildet die Ticketaktion Ticket Edit.

Alternativ dazu kann die Integration eines Dynamischen Feldes durch Bearbeiten des entsprechenden Konfigurationsschlüssels im Menü System > GUI Konfiguration > Agentenportal | Self Service Portal (oder System > SysConfig) erfolgen. Beispielsweise, um ein Dynamisches Feld am Kontakt oder Organisation zu etablieren.

Für individuelle Elemente (z. B. Name des Dynamischen Feldes) müssen Sie bei Bedarf die Übersetzung selbst pflegen. Hinterlegen Sie dazu im Menü Internationalisierung > Übersetzungen die entsprechenden Pattern.

Hinweis

Hinweis: Dynamische Felder können nicht an Assets bereitgestellt werden. Sie können jedoch einer Asset- Klassendefinition individuelle Felder hinzufügen (s. Eine Klassendefinition bearbeiten).

Bereitstellung eines Dynamischen Feldes im Dialog "Neues Ticket"

Integration in eine Vorlage

Im folgenden Beispiel wird ein Dynamisches Feld in den Dialog Neues Ticket integriert. Dieser Dialog wird durch die Standard-Vorlage Default - New Ticket Template generiert.

Sie können sich am Beispiel orientieren, wenn Sie Dynamische Felder in anderen Vorlagen bereitstellen möchten.

Voraussetzung: Das Dynamische Feld muss bereits im System angelegt sein (s. Dynamische Felder.)

Navigieren Sie im Admin Modul ins Menü Workflow → Vorlagen.
Öffnen Sie die Vorlage Default - New Ticket Template zur Bearbeitung.
Diese Vorlage generiert die Eingabemaske zum Anlegen eines neuen Tickets.
Alternativ: Öffnen Sie eine andere Vorlage, in welcher das Dynamische Feld bereitgestellt werden soll.
Wechseln Sie zu Schritt 2 - Eingabefelder.
Hier stehen Ihnen ein Formulardesigner und der Expertenmodus zur Verfügung.
Der Formulardesigner ermöglicht Ihnen die visuelle Integration Dynamischer Felder und die Gestaltung bzw. Anpassung des Formularlayouts. Dieser ist dem Expertenmodus zu vorzuziehen!
Der Expertenmodus bildet die vollständige Konfiguration des Formulars als JSON-Struktur ab.
Wichtig
Verwenden Sie den Expertenmodus nur in begründeten Ausnahmefällen und mit ausreichender Fachkenntnis!
Klicken Sie auf Formular-Designer öffnen
Die Struktur des Formulars für den Dialog wird geöffnet.
Klicken Sie im Header der Gruppe auf das Plus-Symbol.
Die Feldeigenschaften werden geöffnet.
Alternativ (wenn Sie eine andere oder eigene Vorlage verwenden): Klicken Sie auf das Plus-Symbol der jeweiligen Gruppe, in die das Dynamische Feld einbinden möchten.
Hinweis
Ein Dynamisches Feld vom Objekttyp Artikel steht nur dann am Artikel zur Verfügung, wenn ein Kanal ausgewählt wurde.
Definieren Sie daher in der Konfiguration der Vorlage ggf. noch zusätzlich das Eingabefeld "Kanal".
Öffnen Sie in den Feldeigenschaften das Auswahlfeld Eigenschaft und wählen Sie das Dynamische Feld aus, welches Sie einbinden möchten.
Optional: Ergänzen Sie in den Feldeigenschaften weitere Parameter wie bspw. Operator, Feldbeschreibung oder Hinweis, um das Verhalten des Dynamischen Feldes im Formular festzulegen.
Klicken Sie auf Übernehmen.
Das Dynamische Feld wird als letztes Feld unten im Formular platziert.
Optional: Bei Bedarf können Sie das Feld mit einem Vorgabewert initialisieren.
Optional: Platzieren Sie das Dynamische Feld an anderer Stelle im Formular.
1. Klicken Sie auf die Bearbeiten-Schaltfläche im Header der Gruppe.
  Die Gruppeneigenschaften werden geöffnet.
2. Wechseln Sie in den Gruppeneigenschaften zum Register Layout.
3. Konfigurieren Sie das Layout der Gruppe und platzieren Sie das Dynamische Feld an gewünschter Stelle.
  Weiterführende Informationen siehe: Formulardesigner oder Eingabefelder.
4. Klicken Sie auf Übernehmen.
Klicken Sie auf Übernehmen.
Klicken Sie unter Eingabefelder auf Speichern, um die Änderungen am Formular zu übernehmen.

Danach ist das Dynamische Feld im Dialog Neues Ticket enthalten und kann von den Agenten verwendet werden,.

Bereitstellung eines Dynamischen Feldes im Dialog "Ticket bearbeiten"

Integration in eine Aktion

Im folgenden Beispiel wird ein Dynamisches Feld in den Dialog Ticket bearbeiten integriert. Dieser Dialog wird durch die initiale Aktion Ticket Edit generiert.

Sie können sich am Beispiel orientieren, wenn Sie Dynamische Felder in anderen Aktionen bereitstellen möchten.

Voraussetzung: Das Dynamische Feld muss bereits im System angelegt sein (s. Dynamische Felder.)

Navigieren Sie im Admin Modul ins Menü Workflow > Aktionen.
Öffnen Sie die Aktion Ticket Edit zur Bearbeitung.
Diese Aktion generiert das Formular zum Bearbeiten eines Tickets.
Wechseln Sie zu Schritt 4 - Eingabefelder.
Hier stehen Ihnen ein Formulardesigner und der Expertenmodus zur Verfügung.
Der Formulardesigner ermöglicht Ihnen die visuelle Integration Dynamischer Felder und die Gestaltung bzw. Anpassung des Formularlayouts. Dieser ist dem Expertenmodus zu vorzuziehen!
Der Expertenmodus bildet die vollständige Konfiguration des Formulars als JSON-Struktur ab.
Wichtig
Verwenden Sie den Expertenmodus nur in begründeten Ausnahmefällen und mit ausreichender Fachkenntnis!
Klicken Sie auf Formular-Designer öffnen
Die Struktur des Formulars für den Dialog wird geöffnet.
Klicken Sie im Header der Gruppe auf das Plus-Symbol.
Die Feldeigenschaften werden geöffnet.
Alternativ (wenn Sie eine andere oder eigene Aktion verwenden): Klicken Sie auf das Plus-Symbol der jeweiligen Gruppe, in die das Dynamische Feld einbinden möchten.
Öffnen Sie in den Feldeigenschaften das Auswahlfeld Eigenschaft und wählen Sie das Dynamische Feld aus, welches Sie einbinden möchten.
Optional: Ergänzen Sie in den Feldeigenschaften weitere Parameter wie bspw. Operator, Feldbeschreibung oder Hinweis, um das Verhalten des Dynamischen Feldes im Formular festzulegen.
Klicken Sie auf Übernehmen.
Das Dynamische Feld wird als letztes Feld unten im Formular platziert.
Optional: Bei Bedarf können Sie das Feld mit einem Vorgabewert initialisieren.
Optional: Platzieren Sie das Dynamische Feld an anderer Stelle im Formular.
1. Klicken Sie auf die Bearbeiten-Schaltfläche im Header der Gruppe.
  Die Gruppeneigenschaften werden geöffnet.
2. Wechseln Sie in den Gruppeneigenschaften zum Register Layout.
3. Konfigurieren Sie das Layout der Gruppe und platzieren Sie das Dynamische Feld an gewünschter Stelle.
  Weiterführende Informationen siehe: Formulardesigner oder Eingabefelder.
4. Klicken Sie auf Übernehmen.
Klicken Sie auf Übernehmen.
Klicken Sie unter Eingabefelder auf Speichern, um die Änderungen am Formular zu übernehmen.

Danach ist das Dynamische Feld im Dialog enthalten und kann von den Agenten verwendet werden.

Bereitstellung eines Dynamischen Feldes im Dialog "Neuer Kontakt"

Konfigurationsschlüssel

contact-new-form (New Contact)

Als Beispiel wird ein Dynamisches Feld ShortName in den Dialog Neuer Kontakt integriert. In diesem Feld sollen Agenten eine Kurzbezeichnung des Kontakts hinterlegen können.

Voraussetzung für das Beispiel ist, dass im Menü System > Dynamische Felder ein gleichnamiges Dynamisches Feld vom Typ Text und mit Objekttyp Kontakt angelegt wurde.

Die Integration in andere Dialoge erfolgt auf gleiche Weise in den jeweiligen SysConfig-Schlüsseln. Sie können sich an diesem Beispiel orientieren (s. auch: SysConfig-Schlüssel für die GUI Konfiguration).

Hinweis

Dynamische Felder können nur in System-Konfigurationen des Typs Form integriert werden, da nur diese den Parameter formFields enthalten. Infos dazu liefern in der SysConfig die Spalte Metadaten und/oder die Suche nach dem Suchparameter: *form*.

Gehen Sie wie folgt vor:

Navigieren Sie im Explorer zu System → GUI Konfiguration → Agentenportal.
Suchen und öffnen Sie den SysConfig-Schlüssel contact-new-form (Suche nach new contact).
In diesem Schlüssel ist die Konfiguration des Formulars Neuer Kontakt hinterlegt.
Alternativ Dialog Kontakt bearbeiten: contact-edit-form (Suche nach edit contact)

Fügen Sie den nachfolgenden Codeblock (ohne Kommentare!) in den Codeblock unter formFields:[...] ein.

{
   "id": "contact-new-form-field-dfshortname",  // eindeutige ID des DFs im Schlüssel
   "label": null,
   "property": "DynamicFields.DFShortName",
   "inputComponent": null,
   "required": false,   // Pflichtfeld ja/nein?
   "hint": "Translatable#Kurzbezeichnung des Kontakts",  //Übersetzbarer Hinweistext
   "options": [
      {
         "option": "FIELD_NAME",
         "value": "DFShortName"   // Name des DFs, wie im System angelegt
      }
   ],
   "defaultValue": {
      "value": null,
      "valid": true,
      "errorMessages": []
   },
   "fieldConfigurationIds": [],
   "children": [],
   "parentInstanceId": null,
   "countDefault": null,
   "countMax": null,
   "countMin": null,
   "maxLength": null,
   "regEx": null,
   "regExErrorMessage": null,
   "empty": false,
   "asStructure": false,
   "readonly": false,
   "placeholder": null,
   "existingFieldId": null,
   "showLabel": true,
   "name": null,
   "draggableFields": false,
   "defaultHint": "Translatable#optionaler_ Hilfetext",
   "type": "FormField",
   "visible": true,
   "translateLabel": true,
   "instanceId": null
}

Optional: Fügen Sie den Codeblock ggf. mehrfach ein, wenn weitere Dynamische Felder im Dialog integriert werden sollen.
Trennen Sie die Codeblöcke durch Kommas, da je zwei aufeinanderfolgende Codeabschnitte durch Kommas voneinander getrennt werden.
Jeder Codeabschnitt beginnt und endet stets mit einer geschweiften Klammer ({..} ).
Entfernen Sie die Kommentare im Codeblock, sofern noch nicht geschehen.
Ersetzen Sie die im Beispiel genannte ID contact-new-form-field-dfshortname durch eine eigene, aussagekräftige ID.
Sie können die ID frei benennen, sie darf jedoch nur einmal im gesamten Formular enthalten sein und darf nicht identisch mit dem unter value gesetzten Wert sein. Daher empfiehlt sich eine "sprechende“ ID.
Ersetzen Sie unter value den Beispielwert DFShortName durch den Namen des einzubindenden Dynamischen Feldes.
Es ist der in der Konfiguration des Dynamischen Feldes definierte Name anzugeben.
Klicken Sie abschließend auf Speichern.
Klicken Sie im Header der SysConfig auf Lade Frontend-Konfigurationen neu, um die Ansicht im Frontend zu aktualisieren.

Das Dynamische Feld ist nun im Dialog eingebunden und kann von den Agenten genutzt werden.

Bereitstellung eines Dynamischen Feldes im Dialog "Organisation bearbeiten"

Konfigurationsschlüssel

Abhängig von der Platzierung im Dialog:

Abschnitt Organisations-Informationen:
organisation-edit-form-group-information
Abschnitt Adresse:
organisation-edit-form-group-address
Abschnitt E-Mail-Adressen-Domain:
organisation-edit-form-group-domain
Abschnitt andere:
organisation-edit-form-group-other

Als Beispiel wird das Dynamische Feld ShortName in den Dialog Organisation bearbeiten integriert. In diesem Feld sollen Agenten eine Kurzbezeichnung der Organisation hinterlegen können. Das Dynamische Feld wird dabei in den Dialog-Abschnitt Organisations-Informationen integriert. Soll das Dynamische Feld an anderer Stelle im Dialog eingebunden werden, nehmen Sie die Änderungen bitte am entsprechenden Konfigurationsschlüssel vor (s. Tabelle oben).

Abb.: Das Dynamische Feld im Dialog "Organisation bearbeiten"

Voraussetzung für das Beispiel ist, dass im Menü System > Dynamische Felder ein gleichnamiges Dynamisches Feld vom Typ Text und mit Objekttyp Organisation angelegt wurde.

Hinweis

Gehen Sie wie folgt vor:

Navigieren Sie im Explorer zu System → GUI Konfiguration → Agentenportal.
Suchen und öffnen Sie den Konfigurationseintrag: Organisation bearbeiten und klicken Sie auf Organisations-Informationen, um die Konfiguration für den Abschnitt Organisations-Informationen zu öffnen.

Bearbeiten Sie den Wert des Schlüssels wie folgt:

Fügen Sie im Codeblock "fieldConfigurationIds":[...] eine eindeutige ID für das Dynamische Feld ein (z. B.: organisation-edit-form-field-Shortname).
Die ID (Bezeichnung) kann frei gewählt werden, darf aber nur einmal in der Konfiguration enthalten sein.

Fügen Sie folgenden Code in den Abschnitt "formFields":[ ]. Platzieren Sie den Code zwischen die eckigen Klammern.

Der Abschnitt ist initial leer, da der Dialog fest im Backend verankert ist. Sie müssen daher das komplette Set an Formularfeldern integrieren - auch die initial existierenden Formularfelder.

Sollten Sie einen anderen Abschnitt im Dialog gewählt haben, müssen Sie die Formularfelder des Codebeispiels an die initial existierenden Formularfelder des gewählten Abschnitts anpassen.

// Integration des Dynamischen Feldes ShortName
{
  "id": "organisation-edit-form-field-Shortname",  
  "property": "DynamicFields",
  "required": false,
  "options": [
    {
      "option": "FIELD_NAME",
      "value": "ShortName"  //Name des Dynamischen Feldes
    }
  ],
  "showLabel": true,
  "type": "FormField",
  "visible": true,
  "translateLabel": true,
  "instanceId": null
}, //Ende Dynamisches Feld

// Nachfolgend alle weiteren Formularfelder analog initialer Konfiguration
{
  "id": "organisation-new-form-field-MailDomain",
  "property": "DynamicFields",
  "required": false,
  "options": [
    {
      "option": "FIELD_NAME",
      "value": "MailDomain"
    }
  ],
  "showLabel": true,
  "type": "FormField",
  "visible": true,
  "translateLabel": true,
  "instanceId": null
},
{
  "id": "organisation-new-form-field-IfsVersion",
  "property": "DynamicFields",
  "required": false,
  "options": [
    {
      "option": "FIELD_NAME",
      "value": "IfsVersion"
    }
  ],
  "showLabel": true,
  "type": "FormField",
  "visible": true,
  "translateLabel": true,
  "instanceId": null
 },
 }
  "id": "organisation-new-form-field-IfsCloudYN",
  "property": "DynamicFields",
  "required": false,
  "options": [
    {
      "option": "FIELD_NAME",
      "value": "IfsCloudYN"
    }
  ],
  "showLabel": true,
  "type": "FormField",
  "visible": true,
  "translateLabel": true,
  "instanceId": null
},
{
  "id": "organisation-new-form-field-KeyAccountEmail",
  "property": "DynamicFields",
  "required": false,
  "options": [
    {
      "option": "FIELD_NAME",
      "value": "KeyAccountEmail"
    }
   ],
  "showLabel": true,
  "type": "FormField",
  "visible": true,
  "translateLabel": true,
  "instanceId": null
},
{
  "id": "organisation-new-form-field-ProjectManagerEmail",
  "property": "DynamicFields",
  "required": false,
  "options": [
   {
     "option": "FIELD_NAME",
     "value": "ProjectManagerEmail"
    }
  ],
  "showLabel": true,
  "type": "FormField",
  "visible": true,
  "translateLabel": true,
  "instanceId": null
},
{
  "id": "organisation-new-form-field-CustomerContactEmail",
  "property": "DynamicFields",
  "required": false,
  "options": [
    {
      "option": "FIELD_NAME",
      "value": "CustomerContactEmail"
    }
  ],
  "showLabel": true,
  "type": "FormField",
  "visible": true,
  "translateLabel": true,
  "instanceId": null
},
{
  "id": "organisation-new-form-field-CustomerContactPhone",
  "property": "DynamicFields",
  "required": false,
  "options": [
    {
      "option": "FIELD_NAME",
      "value": "CustomerContactPhone"
    }
  ],
  "showLabel": true,
  "type": "FormField",
  "visible": true,
  "translateLabel": true,
  "instanceId": null
 }
],

Abb.: Die geänderte Konfiguration

Entfernen Sie die Kommentare im Code (// Kommentartext).
Nehmen Sie bei Bedarf weitere Änderungen am Code vor, z. B. Änderung der Bezeichnungen oder Ergänzung weiterer Dynamischer Felder.
Info: Die Reihenfolge der fieldConfigurationIDs bestimmt die Reihenfolge der Formularfelder im Dialog.

Fügen Sie den Quellcode aus der Zwischenablage zurück nach KIX ins Feld Wert
Speichern Sie Ihre Änderungen mit Klick auf Speichern.
Klicken Sie im Header der SysConfig auf Lade Frontend-Konfigurationen neu, um die Ansicht im Frontend zu aktualisieren.

Danach ist das Dynamische Feld im Dialog Organisation bearbeiten enthalten. Ggf. müssen die Agenten einen Browser-Refresh durchführen.

Tipp

Um die am Feld gespeicherten Werte (hier die vom Agent eingetragene Kurzbezeichnung) in der Detailansicht der Organisation anzuzeigen, verfahren Sie wie unter Anzeige in Objekt-Info-Widgets beschrieben. Bearbeiten Sie dazu den SysConfig-Schlüssel organisation-details-info-widget.

In diesem Abschnitt:

Dynamische Felder in Dialogen bereitstellen

Hinweis

Bereitstellung eines Dynamischen Feldes im Dialog "Neues Ticket"

Integration in eine Vorlage

Wichtig

Hinweis

Bereitstellung eines Dynamischen Feldes im Dialog "Ticket bearbeiten"

Integration in eine Aktion

Wichtig

Bereitstellung eines Dynamischen Feldes im Dialog "Neuer Kontakt"

Hinweis

Bereitstellung eines Dynamischen Feldes im Dialog "Organisation bearbeiten"

Hinweis

Tipp

Suchresultat