Designs für eingebettete Dashboards und Explores erstellen und anwenden

Das Anpassen von Designs für eingebettete Dashboards und „Erkunden“ ist eine Funktion, die von Looker aktiviert werden muss. Wenden Sie sich an Ihren Looker-Account Manager, um Ihre Lizenz für diese Funktion zu aktualisieren.

Benutzerdefinierte Designs werden bei eingebetteten Looks nicht unterstützt. Benutzerdefinierte Designs sind nur für eingebettete Dashboards und explorative Datenanalysen verfügbar.

Die Optionen für benutzerdefinierte Designs werden immer erweitert, wenn wir weitere Funktionen hinzufügen. Wenn Sie eine Option für benutzerdefinierte Designs hinzufügen, wird allen vorhandenen Designs der Standardwert für die neue Option zugewiesen. Der Standardwert kann dann mit dem Designeditor geändert werden. Wenn Sie wissen möchten, was es Neues gibt, sehen Sie sich unten den Bereich Einstellungen für benutzerdefinierte Designs an oder sehen Sie auf der Seite API-Design erstellen nach, welche Einstellungen für Designs verfügbar sind.

Übersicht

Sie können Designs für eingebettete Dashboards, explorative Datenanalysen und das Bearbeitungsfenster für Kacheln in einem eingebetteten Dashboard auf der Seite Designs im Bereich Plattform des Steuerfelds Admin definieren:

Mit benutzerdefinierten Designs können Sie das Aussehen Ihrer eingebetteten Looker-Dashboards und -Erkundungen anpassen. Mit Designs können Sie Schriftfamilie, Textfarbe, Hintergrundfarbe, Schaltflächenfarbe, Kachelfarbe und andere visuelle Elemente anpassen.

So können Sie beispielsweise ein dunkles Design erstellen, um das Erscheinungsbild Ihres eingebetteten Dashboards zu ändern:

Auf dieser Seite wird Folgendes beschrieben:

Standarddesign

Das Standarddesign von Looker wird auf Ihrer Instanz automatisch erstellt und kann nicht gelöscht oder bearbeitet werden. Das Design Looker wird als Standarddesign verwendet, sofern ein Looker-Administrator kein anderes Design als Standarddesign angibt.

Im Folgenden finden Sie Beispiele für ein Dashboard, eine Dashboard-Ansicht und ein Design mit dem Design Looker.

Dashboard:

Dashboard-Kachel im Dashboard-Bearbeitungsmodus bearbeiten:

Entdecken:

Die Designeinstellungen für Looker, die Sie durch Klicken auf die Schaltfläche Anzeigen neben dem Design oder durch Erstellen einer Kopie des Designs sehen können:

Thema:

Name der Einstellung Wert Hinweise
Name Looker

Allgemein:

Die Einstellungen in diesem Abschnitt gelten sowohl für eingebettete Dashboards als auch für eingebettete Analysen.

Name der Einstellung Wert Hinweise
Tastenfarbe #1A73E8 In alten Dashboards wird diese Farbe für primäre Schaltflächen verwendet.
Dashboards verwenden diese Farbe für primäre Schaltflächen und Filtersteuerungen.
Entdecken verwenden diese Farbe für primäre Schaltflächen, Banner und Akzente.
Schriftfamilie Roboto Diese Schriftarten werden von der Looker-Anwendung bereitgestellt und empfohlen, da sie sowohl in Browsern als auch beim Rendern von Bildern verfügbar sind. Looker verwendet die erste Schriftart in der Schriftartenfamilienliste, die ein Zeichen unterstützt. Daher sollten die Schriftarten mit höherer Priorität oder spezielle Schriftarten zuerst aufgeführt werden. Looker verwendet die Schriftarten in unterschiedlichen Schriftarten, falls verfügbar, damit Zeichen leicht angepasst werden, damit sie besser in die Grenzen visueller Komponenten passen.
Schriftherkunft –

Dashboard-Seite:

Name der Einstellung Wert Hinweise
Farbkollektion –
Hintergrundfarbe #f6f8fa

Dashboard-Kacheln:

Name der Einstellung Wert Hinweise
Titelfarbe #3a4245
Textfarbe #3a4245
Textkörperfarbe –
Hintergrundfarbe #ffffff
Titelausrichtung Zentriert Nicht verfügbar für alte Dashboards

Farben der Legacy-Dashboard-Schaltflächen:

Einstellungen nur für alte Dashboards:

Name der Einstellung Wert Hinweise
Farbe von Info-Schaltfläche #0087e1
Farbe von Warn-Schaltfläche #980c11

Dashboard-Steuerelemente:

Name der Einstellung Wert Hinweise
Dashboard-Titel anzeigen Ja
Filterleiste anzeigen Ja

Einstellungen für Designs und Einbettungen

Sie können die Darstellung eines eingebetteten Dashboards ändern oder mit dem Standarddesign die Option „Erkunden“ über die Einbettungseinstellungen und benutzerdefinierte Designs ändern. Wenn ein eingebettetes Dashboard oder „Erkunden“ angezeigt wird, wendet Looker die Einstellungen so an:

  1. Beginnt mit den Einstellungen des Standarddesigns
  2. Die Anpassungen werden über die Option Einstellungen zum Einbetten bearbeiten des Zahnradmenüs eines Legacy-Dashboards angewendet, sofern vorhanden.
  3. Wendet Einstellungen aus dem benutzerdefinierten Design an, das gegebenenfalls im Argument theme der URL angegeben ist
  4. Wendet Attribute an, die gegebenenfalls im URL-Argument _theme angegeben sind (nur für Dashboards)

Jedes Element überschreibt die vorherigen Elemente. Das bedeutet, dass die Einbettungseinstellungen und die Standarddesigns durch die Einbettungseinstellungen überschrieben werden.

Beim URL-Argument _theme überschreiben jedoch nur die Elemente, die im Argument _theme angegeben sind, die Elemente aus den anderen Designs oder die Einbettungseinstellungen. Die übrigen benutzerdefinierten Design- und Einbettungseinstellungen werden weiterhin verwendet. Wenn du beispielsweise das Argument _theme={"show_filters_bar":false} in die URL eines eingebetteten Dashboards einfügst, wird die Filterleiste nicht angezeigt, selbst wenn du in den Einbettungseinstellungen oder in einem benutzerdefinierten Design die Option Filter einblenden aktiviert hast. Die anderen Einstellungen aus den benutzerdefinierten Designs oder Einbettungseinstellungen werden aber weiterhin verwendet.

Benutzerdefiniertes Design erstellen

Wenn Sie ein benutzerdefiniertes Design erstellen möchten, klicken Sie auf Design hinzufügen:

Fügen Sie als Nächstes auf der Seite Neues Design die Stil- und Farbspezifikationen für jede gewünschte Einstellung hinzu:

Mit Ausnahme des Titels, der eindeutig sein muss, werden alle Felder automatisch mit den Werten aus dem Standarddesign ausgefüllt. Sie können jede der Einstellungen ändern, die in den folgenden Abschnitten beschrieben werden. Klicken Sie auf Design speichern, um die Änderungen zu übernehmen und das neue Design zu speichern.

Thema

Name: Der Name des Designs muss eindeutig sein und darf nur alphanumerische Zeichen und Unterstriche enthalten. Wenn Sie im Designnamen Leerzeichen eingeben, werden sie beim Speichern des Designs durch Unterstriche ersetzt.

Allgemein

Die Einstellungen in diesem Abschnitt gelten sowohl für eingebettete Dashboards als auch für eingebettete Analysen.

Schlüsselfarbe: Diese Farbe wird in Dashboards für primäre Schaltflächen und Filtersteuerungen verwendet. Die Farbe „Entdecken“ verwendet diese Farbe für Links und Symbole für die Feldauswahl, primäre Schaltflächen, Banner und Akzente. Bei älteren Dashboards wird diese Farbe für primäre Schaltflächen verwendet.

Schriftfamilie: Der Name der Schriftfamilie. Diese Schriftart wird für den gesamten Text auf dem Dashboard verwendet, einschließlich Kacheltiteln, Textkacheln und Legenden. Diese Schriftart wird auch für den gesamten Text der Funktion „Erkunden“ verwendet. Wenn im Namen der Schriftart ein Leerzeichen steht, setzen Sie den Namen in Anführungszeichen, z. B. "Open Sans".

  • Wenn Sie eine gängige websichere Schriftart verwenden, können Sie den Namen einfach in das Feld Schriftfamilie eingeben und das Feld Schriftartenquelle leer lassen. Wenn Sie eine weniger gängige Schriftart verwenden möchten, geben Sie den Namen der Schriftart in das Feld Schriftfamilie ein. Geben Sie dann über das Feld Schriftartenquelle unten eine URL zur Definition der gewünschten Schriftart ein.

Schriftartquelle: Lassen Sie dieses Feld leer, sofern Sie keine benutzerdefinierte Schriftart verwenden möchten. Das ist keine gängige Schriftart. Die Schriftartquelle muss eine vollständige URL sein, die mit https beginnt und auf den Wert url verweist, der im Argument src von @font-face angegeben ist. Wir empfehlen die Verwendung einer Webdatei im Webformat (.woff), da .woff2-Dateien von Internet Explorer 11 nicht unterstützt werden.

  • Für PT Sans Narrow könnten Sie beispielsweise „PT Sans Narrow&“ in das Feld Schriftfamilie eingeben und anschließend https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff in das Feld Schriftartenquelle.

Beispiele ansehen

Die folgenden Beispiele zeigen eingebettete explorative Datenanalysen mit einem benutzerdefinierten Design. Die Schlüsselfarbe ist auf #e82042 und die Schriftfamilie auf Verdana.

Eingebettete Erkundung

Wenn Sie die Funktion „Erkunden“ in einer eingebetteten Einstellung verwenden, wird der Text der Funktion in der angegebenen Schriftart für Schriftfamilie (Verdana) angezeigt. Akzentfarben, Schaltflächen und Links werden in der angegebenen Schlüsselfarbe #e82042 angezeigt:

Nachdem ein Explore ausgeführt wurde, sind die Schaltfläche Run und der Text in der angegebenen Key Color, #e82042, zu sehen:

Bearbeitungsfenster einer Kachel auf einem eingebetteten Dashboard im Bearbeitungsmodus

Wenn Sie eine Dashboard-Kachel bearbeiten, wird zusätzlich zu den oben genannten Elementen in der Schattierung, die in der Einstellung Schlüsselfarbe (#e82042) festgelegt wurde, und bei der in der Einstellung Schriftfamilie (Verdana) angegebenen Schriftart das Banner angezeigt:

Dashboard-Seite

Farbkollektion: Sie können auch eine Farbkollektion auswählen. Dabei handelt es sich um eine Reihe von kolorierenden Farbvorlagen, die gut zusammenpassen. Wenn Sie einem Dashboard eine Farbsammlung zuweisen, werden alle Datenreihen in allen Kacheln des Dashboards entsprechend den Paletten in der Sammlung eingefärbt, damit die Farben der Datenreihen auf dem gesamten Dashboard koordiniert werden.

  • Wenn Sie einem eingebetteten Design eine Farbsammlung zuweisen, wird die Farbsammlung des Designs außer Kraft gesetzt, die zuvor einer Kachel zugewiesen wurde. Allerdings werden die mit einer Datenreihe verknüpften benutzerdefinierten Farben durch die Farbsammlung eines Designs nicht überschrieben und auch nicht die bedingte Formatierung einer Tabellenvisualisierung.

Hintergrundfarbe: der hexadezimale Farbcode für den Hintergrund aller Kacheln außer Textkacheln. Für Textkacheln wird dieselbe Hintergrundfarbe wie für das Dashboard verwendet, die über die Hintergrundfarbe im Bereich Dashboard festgelegt wird.

Dashboard-Tiles

Titelfarbe: Der hexadezimale Farbcode für den Titel des Dashboards und die Titel der Dashboard-Kacheln. (Diese Farbe gilt nicht für die Titel von Textkacheln. Verwenden Sie dafür das Feld Textfarbe.)

Textfarbe: Der hexadezimale Farbcode für den Text im Dashboard, einschließlich Legenden in Visualisierungen, Text in Visualisierungen mit einem Wert und den Titel für Textkacheln.

Textfarbe: Der hexadezimale Farbcode für Text und Untertitel in Textkacheln.

Hintergrundfarbe: der hexadezimale Farbcode für den Hintergrund aller Kacheln außer Textkacheln. Für Textkacheln wird dieselbe Hintergrundfarbe wie für das Dashboard verwendet, die über die Hintergrundfarbe im Bereich Dashboard festgelegt wird.

Titelausrichtung: Die Ausrichtung der Kacheltitel auf links, rechts oder zentriert Diese Option ist für alte Dashboards nicht verfügbar.

Farben der alten Dashboard-Schaltfläche

Diese Einstellungen sind nur für alte Dashboards verfügbar.

Farbe der Infoschaltfläche: Die Einstellung Infoschaltflächenfarbe ist für zukünftige Verbesserungen reserviert.

Farbe der Warnschaltfläche: Der hexadezimale Farbcode für die Farbe der Schaltfläche, der sich im Warnstatus befindet. Wenn ein Dashboard aktualisiert wird, wird für die Schaltfläche beispielsweise dieser Farbcode mit dem Label Beenden verwendet. Die Textfarbe auf der Schaltfläche wird durch die Einstellung Textfarbe oben bestimmt.

Dashboard-Steuerelemente

Dashboard-Titel anzeigen: Klicken Sie das Kästchen an, um den Titel des Dashboards anzuzeigen.

Filterleiste anzeigen: Klicken Sie das Kästchen an, um die Filterleiste oben im Dashboard einzublenden.

Klicken Sie auf Design speichern, um die Designeinstellungen beizubehalten.

Design kopieren

Wenn Sie ein Design kopieren möchten, klicken Sie auf das Menü und wählen Sie Design kopieren aus:

Wenn Sie eine Kopie eines Designs erstellen, wird standardmäßig der Name des kopierten Designs, gefolgt von "(copy)", verwendet. Ändern Sie den Namen unbedingt manuell in einen neuen, eindeutigen Namen, der nur alphanumerische Zeichen und Unterstriche enthält, und entfernen Sie die Klammern.

Die übrigen Einstellungen lassen sich genauso bearbeiten wie beim Erstellen eines neuen Designs. Eine Beschreibung der Einstellungen finden Sie oben in den Designeinstellungen. Klicken Sie auf Speichern, um alle Designeinstellungen beizubehalten.

Designs bearbeiten

Das Design Looker wird auf der Instanz automatisch erstellt und kann nicht bearbeitet werden. Wenn Sie das Design von Looker ändern möchten, können Sie stattdessen eine Kopie des Designs erstellen und dann die Kopie bearbeiten.

Bei allen anderen Designs können Sie auf die zugehörige Schaltfläche Bearbeiten klicken, um die Designeinstellungen zu aktualisieren:

Sie können die Einstellungen genauso bearbeiten wie ein neues Design erstellen. Eine Beschreibung der Einstellungen finden Sie oben in den Designeinstellungen. Klicken Sie auf Speichern, um die Änderungen zu behalten.

Design löschen

Sie können jedes Design mit Ausnahme des Designs Looker oder des derzeit als Standard festgelegten Designs löschen. Wenn Sie ein Design löschen möchten, klicken Sie auf das Menü und wählen Sie Design löschen aus:

Nachdem Sie ein Design gelöscht haben, wird in allen eingebetteten Dashboards, bei denen dieses Design in der URL angegeben ist, das Standarddesign verwendet.

Standarddesign für eingebettete Dashboards und explorative Datenanalysen festlegen

Benutzerdefinierte Designs werden bei eingebetteten Looks nicht unterstützt. Benutzerdefinierte Designs sind nur für eingebettete Dashboards und explorative Datenanalysen verfügbar.

Klicken Sie auf das Menü „Design“ und wählen Sie Als Standard festlegen aus, um das Standarddesign für die eingebetteten Dashboards und „Erkunden“ auf Ihrer Instanz festzulegen:

Das Standarddesign wird für eingebettete Dashboards und explorative Datenanalysen auf Ihrer Looker-Instanz verwendet, sofern Sie keine unterschiedlichen Einstellungen für ein einzelnes Dashboard oder „Entdecken“ festlegen. Im Abschnitt Einstellungen für Designs und Einbettungen auf dieser Seite finden Sie weitere Informationen dazu, wie Designs und Einbettungseinstellungen auf ein eingebettetes Dashboard oder die Funktion „Erkunden“ angewendet werden.

Design auf bestimmte eingebettete Dashboards und Explores anwenden

Benutzerdefinierte Designs werden bei eingebetteten Looks nicht unterstützt. Benutzerdefinierte Designs sind nur für eingebettete Dashboards und explorative Datenanalysen verfügbar.

Wenn Sie für ein Dashboard oder einen Tab „Entdecken“ ein anderes Design als das Standarddesign verwenden möchten, können Sie in der URL des eingebetteten Dashboards oder „Erkunden“ ein anderes Design angeben. Fügen Sie dazu den Parameter theme= mit dem Namen des Designs am Ende der eingebetteten URL ein. Wenn du beispielsweise das Design &rot hast, fügst du theme=Red am Ende deiner Dashboard-URL ein:

https://example.looker.com/embed/dashboards/246?theme=red

Für „Entdecken“ fügen Sie theme=Red am Ende der eingebetteten URL „Entdecken“ hinzu: none https://example.looker.com/embed/explore/model_name/explore_name?theme=red

Beim Designelement in der URL wird die Groß- und Kleinschreibung nicht beachtet. Sie können also entweder theme=Red oder theme=red verwenden.

Mit den benutzerdefinierten Designeinstellungen werden alle Einstellungen für das Einbetten überschrieben, die für ein altes Dashboard angegeben sind. Im Abschnitt Einstellungen für Designs und Einbettungen auf dieser Seite finden Sie weitere Informationen dazu, wie Designs und Einbettungseinstellungen auf ein eingebettetes Dashboard angewendet werden.

_theme-URL-Argument zum Anwenden einzelner Dashboard-Designelemente verwenden

Mit dem URL-Argument _theme können Sie einzelne Designelemente für Ihr eingebettetes Dashboard anpassen, z. B. tile_background_color und show_title.

Die unterstützten Eigenschaften des _theme-Objekts finden Sie in der Liste unter „ThemeSettings“ auf der Dokumentationsseite zum Erstellen von Designs.

Hier ist das Format für das URL-Argument _theme:

_theme={"<property>":value}

Mit _theme={"show_filters_bar":false} können Sie beispielsweise die Filterleiste Ihres eingebetteten Dashboards ausblenden. Die vollständige URL könnte so aussehen:

https://example.looker.com/embed/dashboards/236?_theme={"show_filters_bar":false}

Verwenden Sie ein Komma, um mehrere Designeigenschaften anzugeben:

_theme={"show_title":false,"show_filters_bar":false,"text_tile_text_color":"blue"}

Farbwerte müssen in Anführungszeichen gesetzt werden und können mit dem Farbnamen oder dem hexadezimalen Farbcode ausgedrückt werden. Verwende bei Verwendung eines Hexadezimalcodes unbedingt die URL-codierte Version des #-Zeichens, nämlich %23. Die beiden URL-Argumente geben beispielsweise die Farbe Rot an:

_theme={"title_color":"red","text_tile_text_color":"%23FF0000"}

Beachten Sie Folgendes, wenn Sie das Objekt _theme für ein eingebettetes Dashboard verwenden:

  • Jedes Element, das im URL-Argument _theme angegeben ist, überschreibt die Einstellungen für dieses Element in einem anderen Design oder in den Einbettungseinstellungen für ein Legacy-Dashboard. Dadurch ist das Argument _theme eine praktische Möglichkeit, um Designs zu verfeinern oder Einstellungen einzubetten. Angenommen, Sie haben ein benutzerdefiniertes Design, mit dem die Filterleiste ausgeblendet wird, aber es gibt ein Dashboard, in dem die Filterleiste sinnvoll wäre. Sie können das benutzerdefinierte Design für Ihr Dashboard verwenden und dann das Argument _theme={"show_filters_bar":true} in die URL des eingebetteten Dashboards einfügen, um die Filterleiste auf diesem Dashboard anzuzeigen, aber alle anderen benutzerdefinierten Designeinstellungen beizubehalten. Im Abschnitt Einstellungen für Designs und Einbettungen auf dieser Seite finden Sie weitere Informationen dazu, wie Designs und Einbettungseinstellungen auf ein eingebettetes Dashboard angewendet werden.
  • Bei Programmierskripten müssen Sie das Argument _theme URL-codieren.
  • Das Argument _theme wird nicht angewendet, wenn eingebettete alte Dashboards oder eingebettete Dashboards im PDF-Format bereitgestellt werden.
  • Das Argument _theme wird angewendet, wenn Sie das Dashboard als PDF herunterladen.