Freigeben über

Entwerfen Ihrer eigenen Dashboard Karte mit dem Karte Designer

  • Artikel

Verwenden Sie die Karten-Designer, um Karten zu erstellen, die mit anderen Websites verknüpft werden können, Medien zu öffnen, einen Standort anzuzeigen, eine Teams-App zu öffnen und vieles mehr. Der Karten-Designer bietet Benutzern die Möglichkeit, schnell "benutzerdefinierte" Karten zu erstellen, ohne benutzerdefinierten Code zu benötigen, indem eine Vorlage mit der Option zum Erstellen einer sekundären Ansicht, auch als Schnellansicht bezeichnet, verwendet wird.

Die Schnellansicht ist ein leistungsstarkes Tool, mit dem der Karte Designer Karten erstellen kann, die über die herkömmlichen Dashboard Karten hinausgehen, um mithilfe von JSON (JavaScript Object Notation) für adaptive Karten interaktive und informative Elemente zu erstellen. Sie können eine einzelne Schnellansicht "codieren", indem Sie die Leistungsfähigkeit des Markups für adaptive Karten verwenden, um ihre Karten dynamisch zu gestalten. Das Ergebnis kann innerhalb des Karte-Designers in einer Vorschau angezeigt werden, bevor es für andere Benutzer freigegeben wird.

Hinweis

Um Ihre eigenen Karten mithilfe der Schnellansicht zu entwerfen, sollten Sie mit JSON- und adaptiven Kartenvorlagen vertraut sein. Weitere Informationen finden Sie unter Vorlagenerstellung für adaptive Karten.

Screenshot: Beispiel für eine große Karte, die mit dem Karte Designer zum Feiern von Geburtstagen mit einer Schaltfläche zum Gratulieren erstellt wurde

Bearbeiten des Dashboard

Sie benötigen Berechtigungen auf Mitglieds- oder Besitzerebene, um über die Dashboard Karte Toolbox auf den Karte-Designer zugreifen zu können. Informationen zu den ersten Schritten finden Sie im Artikel zum Erstellen eines Viva Connections Dashboard und Hinzufügen von Karten.

Verwenden einer Karte-Vorlage

Der Karte-Designer verfügt über eine Reihe von Karte Ansichtsvorlagen, die zum einfachen Erstellen von Karten mit hilfreichen Informationen, Links und Medien verwendet werden können. Die folgenden Schritte führen Sie durch das Erstellen einer neuen großen Karte mithilfe der Imagevorlage, um einen Link für Benutzer zu erstellen.

  1. Wählen Sie im Modus Bearbeiten die Option + Karte hinzufügen im Dashboard aus.

  2. Wählen Sie Kartendesigner aus.

    Screenshot: Symbol zum Hinzufügen eines Karten-Designers Karte

  3. Nachdem Sie den Karten-Designer Karte ausgewählt haben, wählen Sie das Symbol Bearbeiten aus, um den Eigenschaftenbereich zu öffnen.

  4. Wenn Sie Ihre Karte durch Auswahl von Optionen erstellen, wird links neben den Optionen eine Vorschau des Karte angezeigt.

    Screenshot: Übersicht über den Eigenschaftenbereich des Karte-Designers.

  5. Wählen Sie unter Vorlagentyp eine von drei zu übernehmenden Vorlagen aus:

    • Überschrift: Erstellen Sie eine Karte mit einer einfachen Überschrift.
    • Bild: Erstellen Sie eine Karte mit einer Überschrift und einem Bild.
    • Beschreibung: Erstellen Sie eine Karte mit einer Überschrift und Einer Beschreibung.

    Hinweis

    Schaltflächen sind deaktiviert, wenn Sie die Bildvorlage für eine mittelgroße Karte auswählen, aber eine Karte Aktion kann dennoch zugewiesen werden, um auszulösen, wenn der Benutzer die Karte auswählt.

    Je nach ausgewähltem Vorlagentyp werden Felder, die dem Vorlagentyp entsprechen, im abschnitt Karte Inhalt aufgefüllt. Wenn Sie beispielsweise die Vorlage Bild ausgewählt haben, können Sie Werte für die Eigenschaften Bild und Überschrift in die entsprechenden Textfelder eingeben.

  6. Wählen Sie eine Karte Größe aus:

    • Mittel: Die Standard-Karte Größe und ermöglicht es Ihnen, den Vorlagen Überschrift und Beschreibung eine Schaltfläche hinzuzufügen.
    • Groß: Nimmt den Platz von zwei mittleren Karten zusammen und ermöglicht die Verwendung von zwei Schaltflächen.

    Screenshot: Optionen unter der Kategorie

  7. Wählen Sie unter Kartensymbol eine der folgenden Optionen aus:

    • Benutzerdefiniertes Bild: Wählen Sie benutzerdefiniertes Bild und dann Ändern aus, um Ihr eigenes Bild hochzuladen, oder wählen Sie ein vorhandenes Bild von Ihrer Website oder aus einer Onlinequelle (z. B. Websuche, OneDrive, Website) aus.
    • Bibliothek: Wählen Sie ein Symbol aus einer bereits vorhandenen Liste verfügbarer Symbole aus. Wählen Sie beispielsweise Bibliothek und dann Ändern aus, um ein neues Symbol auszuwählen.

    Hinweis

    Wenn Sie benutzerdefinierte Bilder für Ihre Symbole hochladen, empfehlen wir die Verwendung von PNG-Bildern zwischen 24 x 24 und 32 x 32 Pixeln.

  8. Geben Sie einen Titel ein, der oben im Karte angezeigt werden soll.

  9. Geben Sie eine Überschrift ein.

  10. Geben Sie abhängig vom ausgewählten Vorlagentyp Werte für die Eigenschaften ein, die Ihrer Auswahl unter dem Feld "Überschrift" entsprechen. In diesem Beispiel wird die Bildvorlage angezeigt:

    • Bild: Wählen Sie Ändern aus, um Ihr eigenes Bild hochzuladen, oder wählen Sie ein vorhandenes Bild von Ihrer Website oder aus einer Onlinequelle (z. B. Websuche, OneDrive, Website) aus.

      Screenshot: Optionen unter der Inhaltskategorie Karte im Eigenschaftenbereich.

Hinweis

  • Bildempfehlungen für Karten im Dashboard: Mittlere Karten sollten 300 x 150 bis 400 x 200 mit einem Seitenverhältnis von 2:1 und große Karten von 300 x 300 bis 400x400 mit einem Seitenverhältnis von 1:1 sein, um eine Dehnung in der mobilen App zu verhindern.
  • Bild-URLs in Karte Eigenschaften müssen eine absolute URL sein, damit der Link in der mobilen App funktioniert.
  1. Wählen Sie unter Karte Aktion eine Aktion aus, die ausgeführt werden soll, wenn ein Benutzer die Karte auswählt. Je nach ausgewählter Aktion werden weitere Felder angezeigt, um die Aktion anzupassen.

Hinweis

Die aktion Karte kann nicht deaktiviert werden.

  • Schnellansicht anzeigen: Wählen Sie diese Option aus, um JSON-Code zu verwenden, um eine interaktivere Dashboard Karte zu erstellen. Wenn diese Option ausgewählt ist, ändert sich die Schaltfläche Speichern in Weiter, was zu weiteren Einstellungen zum Anpassen der Schnellansicht Karte führt. Für jede Karte ist eine Schnellansicht verfügbar, die als Karte Aktion oder mithilfe einer Schaltfläche geöffnet werden kann. Schritte zur Verwendung der Schnellansicht finden Sie unter Hinzufügen einer Schnellansicht zu einer Karte.

  • Zu einem Link wechseln: Geben Sie eine URL ein, zu der Benutzer weiterleiten sollen.

  • Zur Teams-App wechseln: Der Benutzer wird über die angegebene URL an die angegebene Teams-App weitergeleitet (Administratoren können die appID auch verwenden, um Benutzer an die entsprechende Teams-App weiterzuleiten). Weitere Informationen finden Sie unter Deep-Link zu einer Anwendung.

    Wenn Sie beispielsweise in der Dropdownliste zu einem Link wechseln auswählen, wird ein Feld zum Eingeben des Links angezeigt.

  1. Geben Sie unter Link die URL ein, an die Benutzer weitergeleitet werden sollen.

  2. Schaltflächen können ein- und ausgeschaltet werden (sofern verfügbar). Wenn diese Option aktiviert ist, können die gleichen Werte unter Karte Aktion für die Schaltflächen Primär und Sekundär ausgewählt werden.

Hinweis

Bei Verwendung eines mittelgroßen Karte kann nur eine Schaltfläche mithilfe der Überschrift oder Beschreibungsvorlage aktiviert werden. Die Bildvorlage deaktiviert die Verwendung von Schaltflächen, wenn mittlere Größe ausgewählt ist.

In diesem Beispiel wird die Primäre Schaltfläche so festgelegt, dass Benutzer auf denselben Link wie die Karte Aktion verweisen. Die Schaltfläche Sekundär ist deaktiviert.

Screenshot: Optionen unter der Kategorie

  1. Geben Sie unter Zielgruppen als Ziel eine oder mehrere Zielgruppen ein, damit nur die angegebenen Zielgruppen die Karte im Dashboard sehen. Weitere Informationen finden Sie unter Zielgruppenadressierung in Viva Connections.

    Screenshot: Optionen unter der Zielgruppenadressierungskategorie im Eigenschaftenbereich

  2. Wählen Sie Speichern aus, um die Updates in Ihrem Karte zu speichern.

Hinzufügen einer Schnellansicht zu einer Karte

Mit der Schnellansicht können Sie adaptiven Karte JSON-Code zu Dashboardkarten hinzufügen, um Benutzern eine umfassendere, interaktivere und ansprechendere Erfahrung zu bieten. Mithilfe statischer oder dynamischer Datenquellen (z. B. sharePoint Representational State Transfer (REST)-API oder Microsoft Graph-API) können Karten erstellt werden, die Informationen innerhalb der Connections Bereitstellen, ohne dass der Benutzer weg navigieren muss.

Führen Sie zunächst die Schritte unter Verwenden einer Karte-Vorlage aus, um eine Kartenaktion auszuwählen.

  1. Wählen Sie unter Karte Aktion die Option Schnellansicht anzeigen aus.

  2. Schließen Sie die Einrichtung Ihrer Karte ab, indem Sie Schaltflächen aktivieren oder deaktivieren und Aktionen für aktive Schaltflächen auswählen.

    Hinweis

    Für jede Karte ist eine Schnellansicht verfügbar, die als Karte Aktion oder mithilfe einer Schaltfläche geöffnet werden kann.

  3. Wählen Sie Weiter aus, um das Schnellansichtslayout anzuzeigen.

  4. Eine Vorschau des Karte auf der Dashboard links neben den Optionen angezeigt.

    Screenshot: Auswählen der Schnellansicht aus einer Dropdownliste mit Optionen unter der Kategorie

    Hinweis

    Das Designertool für adaptive Karten kann verwendet werden, um die JSON-Vorlage und den Datencode für Ihre Karte zu erstellen. Weitere Informationen zur adaptiven Karte-Struktur und zum Erstellen adaptiver Karten finden Sie unter Erste Schritte – Adaptive Karten.

  5. Geben Sie im Feld JSON-Vorlage Ihren JSON-Code ein, der die Struktur Ihrer adaptiven Karte enthält.

    Screenshot: Optionen für die Schnellansicht im Eigenschaftenbereich

  6. Wählen Sie unter Inhaltstyp eine der folgenden Optionen für Ihr Dataset aus:

    • Statisch: Zeigt statische Informationen an und muss manuell aktualisiert werden.
    • Dynamisch: Lässt sich in Datenquellen aus der SharePoint-API oder Microsoft Graph integrieren, um Inhalte automatisch zu aktualisieren.

    Hinweis

    Wenn Sie dynamische Inhalte auswählen, werden zusätzliche Optionen angezeigt, mit denen Sie die Datenquelle und den API-Endpunkt auswählen können.

Auswählen von Statisch als Inhaltstyp

  1. Geben Sie im Feld Daten-JSON Ihren JSON-Code ein, der die Daten enthält, die auf Ihrer adaptiven Karte angezeigt werden sollen.

  2. Geben Sie im Feld Zielgruppen, die als Ziel verwendet werden sollen, alle Zielgruppen ein, auf die Sie die Karte.

  3. Wählen Sie In Updates speichern aus.

    Screenshot: Ausgewählter statischer Inhalt mit im Eigenschaftenbereich angezeigtem Daten-JSON-Feld und einer Vorschau des fertig gestellten Karte.

Auswählen von "Dynamisch" als Inhaltstyp mit SharePoint als Datenquelle

  1. Wählen Sie in der Dropdownliste Datenquelle die Option SharePoint-API aus.

  2. Geben Sie im API-Endpunkt den REST-URL-Endpunkt ein, den Sie verwenden möchten.

    Wenn Sie beispielsweise den Titel einer SharePoint-Website abrufen möchten, würden Sie in das Feld API-Endpunkt eingeben title (da web/ bereits Teil des Standardpräfixes ist). Weitere Beispiele für SharePoint-REST-Endpunkte finden Sie in diesem Artikel.

  3. Die Vorschau der Daten-JSON-Antwort wird geöffnet und zeigt den verwendeten Code an. Eine Vorschau des Karte auf der Dashboard links neben dem Eigenschaftenbereich angezeigt wird.

  4. Geben Sie im Feld Zielzielgruppen alle Zielgruppen ein, auf die Sie die Karte ausrichten möchten.

    Screenshot: Ausgewählter dynamischer Inhalt mit SharePoint-API als Endpunkt und im Eigenschaftenbereich angezeigtes Daten-JSON-Feld

  5. Wählen Sie Speichern aus, um Ihre Updates in Ihrem benutzerdefinierten Karte zu speichern.

Auswählen von Dynamisch als Inhaltstyp mit Microsoft Graph als Datenquelle

  1. Wählen Sie in der Dropdownliste Datenquelledie Option Microsoft Graph aus.

  2. Wählen Sie in der Dropdownliste die Graphversion aus (wobei Version die Zielversion des Diensts ist, in der Regel 1.0).

  3. Geben Sie im API-Endpunkt den REST-URL-Endpunkt ein, den Sie verwenden möchten.

    Wenn Sie beispielsweise das Profil und das Foto eines bestimmten Benutzers abrufen möchten, geben Sie die Microsoft Graph-REST-URL me/photo/$value in das Feld API-Endpunkt ein. Weitere gängige Anwendungsfälle in Version 1.0 für die Microsoft Graph-REST-API finden Sie hier.

  4. Die Daten-JSON-Antwortvorschau wird geöffnet und zeigt den verwendeten Code sowie eine Vorschau des Karte im Dashboard links neben dem Eigenschaftenbereich angezeigt wird.

  5. Geben Sie im Feld Zielgruppen, die als Ziel verwendet werden sollen, alle Zielgruppen ein, auf die Sie die Karte.

    Screenshot: Ausgewählter dynamischer Inhalt mit Microsoft Graph-API als Endpunkt und dem Im Eigenschaftenbereich angezeigten Daten-JSON-Feld.

  6. Wählen Sie Speichern aus, um Updates in Ihrem benutzerdefinierten Karte zu speichern.

Weitere Ressourcen

Erstellen eines Viva Connections Dashboard und Hinzufügen von Karten

Verfügbare Dashboard Karten