Dashboards erstellen

In diesem Kapitel erfahren Sie, wie Sie ein Standard Dashboard oder ein Individuelles Dashboard erstellen.

Standard Dashboards erstellen

Zum Erstellen eines Dashboards klicken Sie im Hauptmenü auf Erstellen > neues Dashboard und vergeben Sie anschließend einen Namen. Der Name muss eindeutig sein und darf keine Leer- oder Sonderzeichen enthalten. Optional können Sie über die Beschreibung-Schaltfläche das Beschreibungsfeld einblenden und eine Beschreibung hinzufügen, die Sie bei der künftigen Bearbeitung des Dashboards unterstützt.

Datenquelle(n) auswählen

Damit für einen Kontakt ein Dashboard ausgespielt werden kann, werden Informationen zu diesem Kontakt benötigt. Um diese bereitzustellen, kann das System eine oder mehrere Datenquellen nach dem Kontakt durchsuchen. Im Reiter Datenquellen können Sie festlegen, ob das Dashboard

• für eine einzelne Datenquelle

• für mehrere Datenquellen oder

• für beliebige Datenquellen

angezeigt werden soll.

Das Dashboard wird auf Basis der Datenquelle angezeigt, in der der Kontakt zuerst gefunden wird. Wenn Sie hier mehrere oder beliebige Datenquellen auswählen, entscheidet die Datenquellen-Priorität über die Reihenfolge, in der die Datenquellen durchsucht werden:

• Die Priorität der Datenquellen wird im XPhone Connect Directory gepflegt.

• Die aufgeführten Datenquellen sind ihrer Priorität nach absteigend sortiert.

• Wenn Sie mit dem Mauszeiger über die Datenquellen fahren, sehen Sie im Tooltip die Datenquellen-Priorität: Je höher der Wert, desto höher die Priorität.

• Haben mehrere Datenquellen die gleiche Priorität, werden sie parallel durchsucht.

Bedingungen definieren

Im Reiter Bedingungen können Bedingungen für die Anzeige von Dashboards definieren, indem Sie folgende Fragen beantworten:

• Wo soll das Dashboard angezeigt werden?

• Für welche Client-Sprachversion soll das Dashboard angezeigt werden?

• Welche weiteren Bedingungen müssen erfüllt sein, damit das Dashboard angezeigt wird?

Wo soll das Dashboard angezeigt werden?

Dashboards können wahlweise im Client oder im Anrufer-Popup angezeigt werden.

• Client

  Dashboards, die für den XPhone Client angelegt sind, können während einer Konversation über das i-Icon ein- bzw. ausgeblendet werden. Zusätzlich lassen sich die Dashboards in der Kontaktkarte und im Journal über den Reiter “Dashboard” öffnen.

• Anrufer-Popup

  Diese Dashboards werden bei einem Anruf im Popup angezeigt und sind somit zu sehen, bevor das Gespräch entgegengenommen wird. Dashboards für das Anrufer-Popup sollten maximal 294 x 90 Pixel groß sein.

Hinweis

Damit ein Dashboard im Client oder im Popup ausgespielt werden kann, müssen die entsprechenden Dashboard-Einstellungen in der XPhone Server Administration vorgenommen werden. Dies geschieht für die jeweilige Benutzergruppe unter Benutzerverwaltung > Standort > Client > Dashboard.

Für welche Client-Sprachversion soll das Dashboard angezeigt werden?

Wenn Sie die Option alle Client-Sprachen wählen, hat die Client-Sprache keine Auswirkung auf die Anzeige des Dashboards. Definieren Sie hingegen, dass das Dashboard nur für eine bestimmte Sprachversion angezeigt werden soll, so wird das Dashboard nur dann angezeigt, wenn die XPhone Client-Sprache des jeweiligen Benutzers mit der hier definierten Client-Sprachversion übereinstimmt. Dies ist dann von Relevanz, wenn Sie Dashboards lokalisieren möchten. Um für ein Dashboard weitere Sprachversionen anzulegen, duplizieren Sie dieses und passen Sie die enthaltenen Elemente an. Sollten Actions oder Widgets im Dashboard enthalten sein, kann es von Vorteil sein, für diese separate Sprachversionen zu erstellen.

Weitere Bedingungen für die Anzeige von Dashboards

Hier können Sie Bedingungen definieren, die erfüllt sein müssen, damit ein Dashboard ausgespielt wird. Die Bedingungen können sich auf den Kontakt (Contact-Variablen), den Dashboard-Benutzer (User-Variablen) und/oder den Anrufzustand (Call-Variablen) beziehen.

Beispiel

Das Dashboard soll nur Mitarbeitern der Vertriebsabteilung angezeigt werden. Hierzu wählen Sie User.DEPARTMENT equal Sales bzw. anstelle Sales geben Sie den passenden String für Ihre Vertriebsabteilung ein.

• Die Operandenprüfung arbeitet nicht case-sensitiv.

• Werden komplexere Filter benötigt, lassen sich über die Schaltflächen Add group und Add rule auch weitere Bedingungen hinzufügen, die nach den Regeln der bool’schen Algebra und- bzw. oder- verknüpft werden können.

• Die Auflistung der zur Auswahl stehenden Kontextvariablen finden Sie unter Variablenbezeichnungen der Datenfelder.

Persönliches Dashboard

Die Bedingeungen können auch so konfiguriert werden, dass dem XPhone Benutzer ein eigenes Dashboard zur Verfügung steht. Hierzu wählen Sie User.EMAIL1 equal {Contact.EMAIL1}.

Die eigene Kontaktkarte ist hierfür mittels Doppelklick auf das eigene Bild im XPhone Client erreichbar.

Diese Dashboards könnten z.B. dazu verwendet werden, die Zeiterfassung einzubinden und diese zu starten/stoppen, einen Arbeitsplatz zu buchen (z.B. via Desk.ly) oder eine Linksammlung der wichtigsten Unternehmens-Tools anzuzeigen.

Dashboard designen

Wechseln Sie in den Reiter Design, um zum visuellen Editor zu gelangen. Das Grund-Layout eines Dashboards besteht aus einer HTML-Tabelle mit einer variablen Anzahl von Zeilen. In jeder Zeile ist eine beliebige Anzahl von horizontal angeordneten Zellen möglich. Reicht die Breite einer Zeile nicht aus, werden die Zellen umgebrochen. Der Layout-Editor ermöglicht das Anlegen, Einfügen und Löschen von Feldern (Zellen). Je nach Einfügeposition werden dabei neue Zeilen erzeugt oder Zellen in bestehende Zeilen eingefügt. Zeilen besitzen einen blauen Rahmen, Zellen einen orangen Rahmen. Das Einfügen von Elementen geschieht per Drag & Drop über die Elemente-Leiste links vom Designbereich. Die Einfügeposition wird bei Mouse over im Designbereich durch ein farbiges Feld gekennzeichnet. Um die Struktur dauerhaft anzuzeigen, können Sie diese über den Schalter Struktur anzeigen aktivieren.

Die Elemente-Leiste enthält folgende Elemente:

Inhaltselemente

• HTML/JS:

  Frei veränderbares HTML-Element, siehe HTML und JavaScript

• IFrame

  HTML-iFrame mit dem eine externe Webseite eingebettet werden kann, siehe iFrames

• Separator

  Horizontale Linie, um die Ansicht besser zu gliedern

• Text

  Text-Feld, das z.B. ein Datenfeld bezeichnen kann

Variablen

• Data Field: Call

  Datenfelder mit Informationen zu einem Anruf, siehe Call

• Data Field: Contact

  Datenfelder mit Informationen zu einem Kontakt, siehe Contact

• Data Field: User

  Datenfelder mit Informationen zum Angemeldeten User, siehe User

Actions Enthält alle über die Komponentenliste konfigurierten Actions

Widgets Enthält alle über die Komponentenliste konfigurierten Widgets

Dashboard mit Elementen befüllen

Elemente lassen sich via Drag und Drop aus der Elemente-Leiste auf den Dashboard Canvas ziehen. Ist ein Element selektiert, so können dessen Eigenschaften und dessen Style in der Bearbeitungs-Leiste rechts vom Designbereich angepasst werden. Es können individuelle Elemente, Zellen, Zeilen oder der gesamte Dashboard-Canvas ausgewählt werden. Abhängig vom ausgewählten Element, können unterschiedliche Eigenschaften angepasst werden.

Elemente aus Dashboard löschen

Um Elemente aus dem Dashboard zu entfernen, selektieren Sie dieses und klicken Sie auf die Löschen-Schaltfläche im oberen rechten Eck oder drücken Sie die Entfernen-Taste auf Ihrer Tastatur. Bestätigen Sie anschließend den Vorgang.

Ausblenden von Elementen und zusätzliche Bedingungen

Elemente, die während der Laufzeit mit Daten befüllt werden (z.B. Variablen) können über die Option Ausblenden wenn Datenfeld leer automatisch ausgeblendet werden, wenn für dieses Datenfeld keine Daten vorhanden sind.

Um ein Datenfeld auszublenden, wenn ein anderes Datenfeld leer ist (z.B. Contact.NAME ist befüllt, Contact.FIRSTNAME jedoch nicht), können benutzerdefinierte Bedingungen erstellt werden:

Ein weiterer Anwendungsfall für benutzerdefinierte Bedingungen ist bspw. die Anzeige eines Text-Labels. Die Anzeige eines Texts (z.B. Name:) ist in vielen Fällen nur sinnvoll, wenn die darauffolgende Variable(n) auch mit Daten befüllt werden:

Hinweis

• Validierungen (benutzerdefinierte Bedingungen), die in Widgets oder Actions definiert wurden, werden in der Eigenschaften-Leiste eines Dashboards nicht erneut angezeigt.

• Beachten Sie, dass Actions während des Designs nicht ausgeführt werden können.

Styling von Inhalten

Die Formatierung eines ausgewählten Elements kann in der Bearbeitungs-Leiste im Abschnitt Styling vorgenommen werden. Über das Dropdown Formatvorlagen, kann das selektierte Element mit einem vordefinierten Style formatiert werden. Die HTML-Attribute, die durch die gewählte Formatvorlage gesetzt werden, werden anschließend darunter aufgeführt.

Um Styles anzupassen, können Sie die gesetzten Attribute editieren oder über das Eingabefeld Zusätzliche Styles weitere Style-Attribute definieren. Dadurch entsteht pro Style eine zusätzliche Zeile. Die Styles werden unmittelbar nach dem Verlassen des Eingabefelds wirksam, das Ergebnis kann in der Designansicht sofort begutachtet werden. Sie löschen einen Style, indem sie den Inhalt des Felds löschen und das Eingabefeld danach verlassen.

Die Bedeutung und Syntax von Styles können Sie den gängigen Informationsquellen im Internet entnehmen, z.B. unter W3Schools - Styles.

Stlyes können auch ohne die Verwendung von Formatvorlagen direkt über das Eingabefeld zusätzliche Styles manuell definiert werden.

Breite von Felder, Ränder und Abstände

Die Breite und Höhe von selektierten Elementen kann mit dem Mauszeiger durch Klicken und ziehen des Doppelpfeils erfolgen oder über die Style-Attribute Width und Height in der Bearbeitungs-Leiste unter Style definiert werden.

Neben der absoluten Einstellung in Pixel (px) kann die Einheit Millimeter (mm) oder Prozent (%) gewählt werden. Die Prozentangabe ist nur dann sinnvoll, wenn es mehr als ein Feld pro Zeile gibt. Die Zahl gibt an, in welchem Verhältnis sich die Felder eine Zeile teilen. Beachten Sie, dass die Summe der Prozentzahlen nicht 100 betragen soll, sondern ein paar Punkte weniger. Über den margin oder padding Style lassen sich Einrückungen und Abstände der Felder definieren, so dass sich ein harmonisches Layout ergibt (siehe z.B. W3Schools - Margin und W3Schools - Padding).

Vorschau

Navigieren Sie zum Reiter Vorschau, um die Anzeige des Dashboards im Pseudo-Client (vereinfachte Darstellung des XPhone Client oder des Anrufer-Toast) zu simulieren. In der Vorschau wird das Dashboard mit Daten befüllt, die Sie in Vorschaudaten-Sets hinterlegen und editieren können. So kann simuliert werden, wie sich die Darstellung eines Dashboards verhält, wenn das Dashboard mit entsprechenden Daten befüllt wird oder nicht. Darüber hinaus, kann die Vorschau im Pseudo-Client genutzt werden, um zu testen, wie ein Dashboard auf Größenveränderungen des Clients reagiert. Hierzu kann die Größe des Pseudo-Clients analog zum echten XPhone Client im unteren rechten Eck angepasst werden.

Hinweis

Ob das Dashboard im XPhone Client oder im Anrufer-Toast simuliert wird, ist abhängig von der gewählten Anzeige-Option unter Bedingungen Wo soll das Dashboard angezeigt werden?. Eine manuelle Größenänderung des Anrufer-Toasts ist nicht möglich.

• Zum Erstellen eines neuen Datensets klicken Sie auf die Schaltfläche Neue Vorschau erstellen.

• Vergeben Sie einen sprechenden Namen in der Bearbeitungsleiste auf der rechten Seite.

• Befüllen Sie Call-, User- oder Contact-Datenfelder mit den gewünschten Vorschaudaten.

• Unter Contact können Sie eine XPhone Connect Directory Suche ausführen und die Contact Variablen für einen Kontakt aus der entsprechenden Datenquelle automatisch befüllen.

• Speichern Sie anschließend die Vorschau.

Vorschauset auswählen

Bestehende Vorschaudaten-Sets werden in der linken Leiste aufgeführt. Um das Dashboard im Pseudo-Client mit einem bestimmten Datenset zu befüllen, klicken Sie dies an. Das Dashboard wird daraufhin mit den Daten aus diesem Datenset befüllt. Sofern gewünscht, kann das selektierte Datenset anschließend über die Bearbeitungs-Leiste auf der rechten Seite editiert werden.

Vorschauset löschen

Um ein Datenset zu löschen, klicken Sie auf das -Menü neben dem Namensfeld und klicken Sie auf Vorschauset löschen.

Vorschauset kopieren

Um ein Datenset zu kopieren, klicken Sie auf das -Menü neben dem Namensfeld und klicken Sie auf Vorschauset duplizieren.

Dashboard aktivieren & veröffentlichen

Damit das Dashboard im Livebetrieb angezeigt wird, muss es aktiviert werden.

Änderungen an Dashboards greifen zudem erst, wenn diese veröffentlicht wurden.

Individuelle Dashboards und Komponenten erstellen

Action erstellen

Das Dashboard soll eine Google-Suche anhand einer Information aus der Kontaktkate durchführen.

• Erstellen Sie eine neue Action.

  • Klicken Sie im Menü auf Erstellen > Neue Action

  • Es öffnet ich das Dialogfenster Neue Action erstellen.

    • Geben Sie einen Namen ein

      • z.B. MyGoogleSearch

    • Wählen die Application-ID aus.

      • Bei der Application ID handelt es sich um den Ordner in dem diese Action angelegt werden soll.

    • klicken sie auf die Schaltfläche Action erstellen.

• Die Action wird direkt angezeigt und Sie könne die Action konfigurieren.

  • Die Action erscheint nun im Verzeichnis unter Actions > Browser.

  • Die Action soll eine Google-Suche anhand einer Information aus der Kontaktkate durchführen.

    • Die Google Suche benötigt diese URL:

      https://www.google.de/search?q=blabla
      

  • Kopieren Sie die URL in das Feld Link-URL und klicken auf das Symbol daneben .

    • Die korrekte Syntax ist abhängig von der Auswahl unter Run with.

    • Da Sie dort Web-Browser ausgewählt haben, entspricht die Syntax der HTML-Syntax für einen Hyperlink im <a href>-Element.

    • In dem neuen Dialogfenster können Sie die URL anpassen und mit den Drop-down Feldern Variablen aus folgenden Kontexten auswählen:

      • Call State

      • User

      • Contact

    • Die URL soll wie folgt angepasst werden:

      https://www.google.de/search?q={Contact.FIRSTNAME}+{Contact.NAME}
      

  • Erstellen Sie einen Link-Text und öffnen den Editor mit Klick auf .

    • Der Link-Text ist eine Pflichtfeld. Er wird dem Benutzer im Dashboard angezeigt und sollte die Action so kurz und präzise wie möglich beschreiben.

    • Der Link Text kann mit Variablen angereichert werden. Diese können Sie im Editor über die entsprechenden Schaltflächen hinzufügen.

    • Passen Sie den Link-Text wie fogt an:

      Google nach {Contact.FIRSTNAME} {Contact.NAME}
      

  • Der Tooltip Text wird dem Benutzer angezeigt, wenn dieser mit dem Mauszeiger über den Link Text fährt. Er soll dem Benutzer zusätzliche Informationen zur Action anzeigen.

    • Der Tooltip-Text ist optional. Wenn dieses Feld leer ist, wird kein Tooltip angezeigt.

  • Actions können nur funktionieren, wenn die benötigten Parameter aus einem Kontaktdatensatz vorhanden sind. Mit der Validierung können Bedingungen für eine korrekte Funktion der Action abgeprüft werden. Sind die Bedingungen nicht erfüllt, wird die Action nicht angezeigt.

    • Folgende Bedingenen können ausgewählt werden:

      • is empty

      • is not empty

    • Beispiel:

      Contact.ACCOUNTCODE is not empty
      

• Eine Action kann optional durch ein Icon visuell ergänzt werden. Das Icon sollte so gewählt sein, dass der Anwender dem Link Text schneller erfassen kann.

  • Empfehlung für eine optimale Darstellung:

    • Größe: min. 14 x 14 px / max. 18 x 18 px

    • Format: SVG, PNG oder JPEG

Widgets erstellen

• Erstellen Sie ein neues Widget.

  • Klicken Sie im Menü auf Erstellen > Neues Widget

  • Es öffnet ich das Dialogfenster Neues Widget erstellen.

  • Geben Sie einen Namen ein

    • z.B. MyGoogleSearchWidget

• Das Widget wird direkt angezeigt und Sie könne das Widget konfigurieren.

  • Ziehen Sie per Drag&Drop die Action > BROWSER MyGoogleSearch in den Konfigurationsbereich.

    • Sie können noch weitere Elemente in dieses Widget ziehen.

  • Ganz rechts finden Sie die Eigenschaften der Action. sie können:

    • Zusätzliche Bedingungen definieren und

    • das Aussehen mittels Styles verändern.

    • Wenn sei zufrieden sind, klicken sie auf Veröffentlichen.

Dashboards erstellen

• Erstellen Sie ein neues Dashboard.

  • Klicken Sie im Menü auf Erstellen > Neues Dashboard

  • Es öffnet ich das Dialogfenster Neues Dashboard erstellen.

  • Geben Sie einen Namen ein

    • z.B. MyGoogleSearchDashboard

• Definieren sie im Tab Datenquellen für welche Datenquelle dieses Dashboard angezeigt werden soll:

  • Beliebige Datenquelle

  • Ausgewählte Datenquelle(n)

    • Hier erscheinen die im XPhone Connect Directory angelegten Datenquellen.

• Wechseln Sie in den Reiter Bedingungen und beantworten Sie die Fragen:

  • Wo soll das Dashboard angezeigt werden?

  • Für welche Client-Sprachversion soll das Dashboard angezeigt werden?

  • Welche weiteren Bedingungen müssen erfüllt sein, damit das Dashboard angezeigt wird?

• Wechseln Sie in den Reiter Design:

  • Ziehen mit Drag&Drop Elemente in den Design-Bereich.

    • Z.B. Ihre selbsterstellte Action Actions > BROWSER > MyGoogleSearch.

    • oder Ihr Widget Widgets > MyGoogleWidget.

    • Sie können noch weitere Elemente in dieses Widget ziehen.

  • Ganz rechts finden Sie die Eigenschaften der Actions und Widgets. Sie können:

    • Zusätzliche Bedingungen definieren und

    • das Aussehen mittels Styles verändern.

  • Wenn sei zufrieden sind, klicken Sie auf Veröffentlichen.

• Wechseln Sie in den Reiter Vorschau:

  • Hier können Sie prüfen wie das Dashboard im Pseudoclient aussieht.

  Tipp

  Beachten Sie auch das Kapitel: Entwicklung, Test und Fehlersuche

Haben Sie einen Fehler auf dieser Seite gefunden?

Oder ist etwas nicht gut oder zu ungenau formuliert? Dann freuen wir uns über eine E-Mail, am besten mit einem Verbesserungsvorschlag, an doku@c4b.de. Vielen Dank!