Événements JavaScript intégrés

Une fois que vous avez créé une intégration (que ce soit publiquement, en privé, avec l'authentification unique ou via l'API), vous pouvez interagir avec ces iFrames via JavaScript. Vous pouvez rendre votre page plus dynamique en fonction de l'état de l'élément intégré ou même le modifier à partir de votre page Web.

Notez que Looker ne contrôle pas l'ordre dans lequel les navigateurs envoient des événements aux applications Web. Par conséquent, l'ordre des événements n'est pas garanti dans tous les navigateurs ni sur toutes les plates-formes. Veillez à rédiger votre code JavaScript de façon appropriée afin de prendre en compte la gestion des différents navigateurs.

Vous pouvez exploiter JavaScript de deux manières pour le contenu intégré Looker:

  • Utilisation du kit de développement logiciel (SDK) intégré de Looker, décrit sur la page de documentation du SDK Embed
  • Utiliser des événements JavaScript, comme décrit dans la section Accéder aux événements en JavaScript de cette page

Preparation

Pour pouvoir interagir avec l'iFrame intégré, vous devez effectuer les actions suivantes:

Ajouter un ID à l'iFrame

L'une des actions que vous devrez effectuer ultérieurement consiste à vérifier que les informations avec lesquelles vous travaillez proviennent bien de l'iFrame de Looker. Pour faciliter le processus, veillez à ajouter un ID à l'iFrame, si ce n'est pas déjà fait. Dans l'exemple suivant, nous avons ajouté id="looker":

<iframe id="looker" src="https://instance_name.looker.com/embed/dashboards/1"></iframe>

Ajouter le domaine intégré à l'attribut iFrame src

Dans le src de l'iFrame, ajoutez le domaine où l'iFrame est utilisé. Dans l'exemple suivant, nous avons ajouté ?embed_domain=https://mywebsite.com":

<iframe
  id="looker"
  src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://mywebsite.com">
</iframe>

Si vous utilisez l'intégration SSO, veillez à ajouter embed_domain à l'URL d'intégration.

N'incluez pas de barre oblique finale (/) dans embed_domain.

Ajouter le domaine intégré à la liste d'autorisation

Enfin, vous devez ajouter le domaine dans lequel l'iFrame est utilisé à la liste d'autorisation sur la page Intégrer du panneau Admin de Looker:

  1. Saisissez le domaine dans lequel l'iFrame est utilisé. Après l'avoir saisi, n'oubliez pas d'appuyer sur la touche Tabulation pour que le domaine apparaisse dans un champ. N'incluez pas de barre oblique finale (/) dans l'URL du domaine.
  2. Cliquez sur le bouton Mettre à jour.

Vous pouvez utiliser le caractère générique * dans la liste d'autorisation pour créer un modèle de domaine. Par exemple, https://*.mycompany.com autorise https://analytics.mycompany.com et https://data.mycompany.com.

Récupérer des données à partir de l'iFrame

Une fois la procédure de préparation terminée, vous pouvez accéder aux événements transmis entre l'iFrame Looker et votre domaine en écoutant les événements postMessage.

Assurez-vous que les événements proviennent bien de l'iFrame et du domaine Lookers pour éviter les messages malveillants.

L'iFrame intégré peut créer plusieurs types d'événements, comme décrit dans la section Référence du type d'événement de cette page.

Accéder aux événements en JavaScript

Voici un exemple d'écoute de ces événements en JavaScript natif, puis de journalisation dans la console:

window.addEventListener("message", function(event) {
  if (event.source === document.getElementById("looker").contentWindow) {
    if (event.origin === "https://instance_name.looker.com") {
      console.log(JSON.parse(event.data));
    }
  }
});

Voici un exemple d'écoute de ces événements dans jQuery, puis leur journalisation dans la console:

$(window).on("message", function(event) {
  if (event.originalEvent.source === $("#looker")[0].contentWindow) {
    if (event.origin === "https://instance_name.looker.com") {
      console.log(JSON.parse(event.data));
    }
  }
});

Tableau récapitulatif des types d'événements

Le tableau suivant récapitule les types d'événements. Cliquez sur un type d'événement pour en afficher les détails.

Event Type Cause de l'événement
dashboard:loaded Sur les tableaux de bord où les tuiles ne sont pas définies pour s'exécuter automatiquement, un tableau de bord et ses éléments ont été chargés, mais les requêtes ne sont pas encore en cours d'exécution.
dashboard:run:start Un tableau de bord a commencé à se charger, et ses tuiles ont commencé à se charger et à interroger des données.
dashboard:run:complete L'exécution du tableau de bord est terminée, et le chargement et l'interrogation de toutes les tuiles sont terminés.
dashboard:download Le téléchargement du tableau de bord au format PDF a commencé.
dashboard:save:complete ADDED 21.6 Un tableau de bord a été modifié et enregistré.
dashboard:delete:complete ADDED 21.6 Un tableau de bord a été supprimé.
dashboard:tile:start Une tuile a commencé à charger ou à interroger des données.
dashboard:tile:complete Une tuile a terminé l'exécution de la requête.
dashboard:tile:download Le téléchargement des données d'une tuile a commencé.
dashboard:tile:explore Un utilisateur a cliqué sur l'option Explorer à partir de cet endroit dans une vignette du tableau de bord.
dashboard:tile:view Un utilisateur a cliqué sur l'option Afficher l'aspect d'origine dans une vignette du tableau de bord.
dashboard:filters:changed Un filtre a été appliqué ou modifié dans un tableau de bord.
look:ready Un aperçu a commencé à charger les données de requête, qu'elles soient exécutées ou non.
look:run:start Un aperçu a commencé à charger des données de requête et à s'exécuter.
look:run:complete La requête a été exécutée.
look:save:complete ADDED 21.6 Un style a été modifié et enregistré.
look:delete:complete ADDED 21.6 Un aperçu a été déplacé dans le dossier Corbeille.
drillmenu:click Un utilisateur a cliqué sur un menu d'exercices dans un tableau de bord créé avec le linkparamètre LookML.
drillmodal:download Un utilisateur a ouvert une boîte de dialogue d'analyse transversale à partir d'une vignette du tableau de bord et a cliqué sur l'option Télécharger.
drillmodal:explore Un utilisateur a cliqué sur l'option Explorer à partir de ce lieu dans une boîte de dialogue d'exploration.
explore:ready Une exploration a commencé à charger des données de requête, que la requête s'exécute ou non.
explore:run:start Une exploration a commencé à charger des données de requête, et l'exécution de la requête a commencé.
explore:run:complete Une exploration a terminé l'exécution de la requête.
explore:state:changed L'URL d'une page Explorer a changé à la suite des actions de l'utilisateur.
page:changed Un utilisateur a accédé à une nouvelle page dans le cadre iFrame.
page:properties:changed La hauteur d'un iFrame du tableau de bord a changé.

Référence du type d'événement

L'iFrame intégré peut créer de nombreux types d'événements différents:

dashboard:loaded

Dans les tableaux de bord où les tuiles ne sont pas définies pour s'exécuter automatiquement, cet événement est créé après le chargement d'un tableau de bord et de ses éléments, mais avant l'exécution des requêtes.

L'attribut options n'est pas disponible sur les anciens tableaux de bord.


type: "dashboard:loaded",
status: "complete",
dashboard: {
  id: 1,
  title: "Business Pulse",
  dashboard_filters: {
    "date": "Last 6 Years",
    "state": ""
  },
  absoluteUrl: "https://self-signed.looker.com:9999/embed/dashboards/1?embed_domain=https%3A%2F%2Fself-signed.looker.com%3A9999&date=Last+6+Years&state=",
  url: "/embed/dashboards/1?embed_domain=https%3A%2F%2Fself-signed.looker.com%3A9999&date=Last+6+Years&state=",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
Attribut Format Description
status String Indique si le tableau de bord et ses éléments ont bien été chargés.
dashboard.id Number Identifiant du tableau de bord.
dashboard.title String Titre, comme indiqué en haut du tableau de bord.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord. Cet objet a le format suivant: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl String URL complète du tableau de bord.
dashboard.url String URL du tableau de bord relatif (uniquement le chemin d'accès).
dashboard.options Objet Propriétés et valeurs des mises en page de tableau de bord, des composants de mise en page des tableaux de bord et des éléments de tableau de bord Toutes les propriétés renvoyées dans l'objet options peuvent recevoir des valeurs mises à jour à l'aide de l'événement dashboard:options:set. Cette option n'est pas disponible dans les anciens tableaux de bord.

dashboard:run:start

Cet événement est créé lorsqu'un tableau de bord commence à se charger, lorsque ses tuiles commencent à se charger et à interroger des données.

type: "dashboard:run:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
Attribut Format Description
dashboard.id Number Identifiant du tableau de bord.
dashboard.url String URL du tableau de bord relatif (uniquement le chemin d'accès).
dashboard.absoluteUrl String URL complète du tableau de bord.
dashboard.title String Titre, comme indiqué en haut du tableau de bord.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord. Cet objet a le format suivant: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}

dashboard:run:complete

Cet événement est créé lorsqu'un tableau de bord est terminé, et que le chargement et l'interrogation de toutes les tuiles sont terminés. Cet événement est créé, que toutes les tuiles se chargent ou non.

Les attributs options et tileStatuses ne sont pas disponibles sur les anciens tableaux de bord.

type: "dashboard:run:complete",
status: "complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://my.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
Attribut Format Description
status String Indique si le tableau de bord et ses éléments ont bien été exécutés. Si le tableau de bord et ses éléments ont bien été exécutés, status renvoie "complete". Sinon, status renvoie "error". Si le tableau de bord en cours d'exécution a été arrêté, à partir de l'interface utilisateur ou de l'action dashboard:stop, status renvoie "stopped".
dashboard.id Number Identifiant du tableau de bord.
dashboard.url String URL du tableau de bord relatif (uniquement le chemin d'accès).
dashboard.absoluteUrl String URL complète du tableau de bord.
dashboard.title String Titre, comme indiqué en haut du tableau de bord.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord. Cet objet a le format suivant: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.options Objet Propriétés et valeurs des mises en page de tableau de bord, des composants de mise en page des tableaux de bord et des éléments de tableau de bord Toutes les propriétés renvoyées dans l'objet options peuvent recevoir des valeurs mises à jour à l'aide de l'action dashboard:options:set. Cette option n'est pas disponible dans les anciens tableaux de bord.
dashboard.tileStatuses Tableau d'objets Tableau d'objets indiquant l'état des tuiles. Les propriétés de l'objet sont les suivantes:
  • tileId : numéro d'identifiant de la tuile.
  • status : si la requête de tuile a bien été exécutée, status renvoie "complete". Sinon, status renvoie "error".
  • errors : renseigné lorsque la propriété status est "error". Tableau d'objets fournissant des détails sur l'erreur, y compris le texte du message d'erreur, une description plus détaillée de l'erreur et la requête SQL de l'emplacement qui a produit l'erreur.
Cette option n'est pas disponible dans les anciens tableaux de bord.

dashboard:download

Cet événement est créé lorsqu'un PDF d'un tableau de bord a commencé à être téléchargé.

type: "dashboard:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
fileFormat: "pdf"
Attribut Format Description
dashboard.id Number Identifiant du tableau de bord.
dashboard.url String URL du tableau de bord relatif (uniquement le chemin d'accès).
dashboard.absoluteUrl String URL complète du tableau de bord.
dashboard.title String Titre du tableau de bord, comme indiqué en haut du tableau de bord.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord. Cet objet a le format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
fileFormat String Format du tableau de bord téléchargé (actuellement, il ne contient que "pdf").

dashboard:save:complete

Cet événement est créé lorsqu'un tableau de bord est modifié, puis enregistré.

Cet événement n'est pas disponible sur les anciens tableaux de bord.

type: "dashboard:save:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  url: "/embed/dashboards/...",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
Attribut Format Description
dashboard.id Number Identifiant du tableau de bord.
dashboard.title String Titre, comme indiqué en haut du tableau de bord.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord. Cet objet a le format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl String URL complète du tableau de bord.
dashboard.url String URL du tableau de bord relatif (uniquement le chemin d'accès).
dashboard.options Objet Propriétés et valeurs des mises en page de tableau de bord, des composants de mise en page des tableaux de bord et des éléments de tableau de bord Toutes les propriétés renvoyées dans l'objet options peuvent recevoir des valeurs mises à jour à l'aide de l'événement dashboard:options:set.

dashboard:delete:complete

Cet événement est créé lorsqu'un tableau de bord est supprimé.

Cet événement n'est pas disponible sur les anciens tableaux de bord.

type: "dashboard:delete:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  url: "/embed/dashboards/...",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
Attribut Format Description
dashboard.id Number Identifiant du tableau de bord.
dashboard.title String Titre, comme indiqué en haut du tableau de bord.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord. Cet objet a le format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl String URL complète du tableau de bord.
dashboard.url String URL du tableau de bord relatif (uniquement le chemin d'accès).
dashboard.options Objet Propriétés et valeurs des mises en page de tableau de bord, des composants de mise en page des tableaux de bord et des éléments de tableau de bord Toutes les propriétés renvoyées dans l'objet options peuvent recevoir des valeurs mises à jour à l'aide de l'événement dashboard:options:set.

dashboard:tile:start

Cet événement est créé lorsqu'une tuile commence à se charger ou à interroger des données.

type: "dashboard:tile:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
Attribut Format Description
dashboard.id Number Numéro du tableau de bord auquel appartient la vignette.
dashboard.url String URL du tableau de bord relatif (uniquement le chemin d'accès) à laquelle la tuile appartient.
dashboard.absoluteUrl String URL complète du tableau de bord auquel appartient la tuile.
dashboard.title String Titre du tableau de bord, tel qu'il apparaît en haut du tableau de bord auquel appartient la tuile.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord auquel la tuile appartient. Cet objet a le format suivant: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id Integer Numéro de l'événement, pas de la tuile.
tile.title String Titre de la tuile, comme indiqué en haut de la tuile.
tile.listen Objet Le tableau de bord général filtre cette vignette. Cet objet a le format suivant: {"Filter Label": "Filter Field", ...}

dashboard:tile:complete

Cet événement est créé lorsqu'une tuile a terminé l'exécution de la requête.

L'attribut errors n'est pas disponible sur les anciens tableaux de bord.

type: "dashboard:tile:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
status: "complete",
truncated: false,
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
Attribut Format Description
dashboard.id Number Numéro du tableau de bord auquel appartient la vignette.
dashboard.url String URL du tableau de bord relatif (uniquement le chemin d'accès) à laquelle la tuile appartient.
dashboard.absoluteUrl String URL complète du tableau de bord auquel appartient la tuile.
dashboard.title String Titre du tableau de bord, tel qu'il apparaît en haut du tableau de bord auquel appartient la tuile.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord auquel la tuile appartient. Cet objet a le format suivant: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
status String Indique si la requête en mosaïque a abouti. Les valeurs possibles sont "complete" ou "error".
truncated Booléen Indique si les résultats des requêtes de tuiles ont été tronqués en raison du nombre de lignes renvoyées par la requête. Il peut s'agir d'une limite de lignes spécifiée par l'utilisateur ou de 5 000 par défaut pour Looker.
tile.id Integer Numéro de l'événement, pas de la tuile.
tile.title String Titre de la tuile, comme indiqué en haut de la tuile.
tile.listen Objet Le tableau de bord général filtre cette vignette. Cet objet a le format suivant : {"Filter Label": "Filter Field", ...}
tile.errors Tableau d'objets Valeur insérée lorsque la propriété status est "error". Tableau d'objets fournissant des détails sur l'erreur, y compris le texte du message d'erreur, une description plus détaillée de l'erreur et la requête SQL de l'emplacement qui a produit l'erreur. Cette option n'est pas disponible dans les anciens tableaux de bord.

dashboard:tile:download

Cet événement est créé lorsque le téléchargement des données d'une tuile a commencé.

type: "dashboard:tile:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales"
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
fileFormat: "pdf"
Attribut Format Description
dashboard.id Number Numéro du tableau de bord auquel appartient la vignette.
dashboard.url String URL du tableau de bord relatif (uniquement le chemin d'accès) à laquelle la tuile appartient.
dashboard.absoluteUrl String URL complète du tableau de bord auquel appartient la tuile.
dashboard.title String Titre du tableau de bord, tel qu'il apparaît en haut du tableau de bord auquel appartient la tuile.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord auquel la tuile appartient. Cet objet a le format suivant: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id Integer Numéro de l'événement, pas de la tuile.
tile.title String Titre de la tuile, comme indiqué en haut de la tuile.
tile.listen Objet Le tableau de bord général filtre cette vignette. Cet objet a le format suivant: {"Filter Label": "Filter Field", ...}
fileFormat String Format de la tuile téléchargée (uniquement "pdf" pour le moment).

dashboard:tile:explore

Cet événement est créé lorsqu'un utilisateur clique sur l'option Explorer à partir de cet emplacement dans une vignette du tableau de bord.

type: "dashboard:tile:explore",
label: 'Explore From Here',
url: '/embed/explore/model/view...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
Attribut Format Description
label String Libellé du bouton.
url String URL relative (uniquement le chemin) de l'exploration à afficher.
dashboard.id Number Numéro du tableau de bord auquel appartient la vignette.
dashboard.url String URL du tableau de bord relatif (uniquement le chemin d'accès) à laquelle la tuile appartient.
dashboard.absoluteUrl String URL complète du tableau de bord auquel appartient la tuile.
dashboard.title String Titre du tableau de bord, tel qu'il apparaît en haut du tableau de bord auquel appartient la tuile.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord auquel la tuile appartient. Cet objet a le format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id Integer Numéro de l'événement, pas de la tuile.
tile.title String Titre de la tuile, comme indiqué en haut de la tuile.
tile.listen Objet Le tableau de bord général filtre cette vignette. Cet objet a le format suivant : {"Filter Label": "Filter Field", ...}

dashboard:tile:view

Cet événement est créé lorsqu'un utilisateur clique sur l'option Afficher l'aspect d'origine dans une vignette du tableau de bord.

type: "dashboard:tile:view",
label: 'View Original Look',
url: '/embed/look/...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
Attribut Format Description
label String Libellé du bouton.
url String URL relative (uniquement le chemin) du style à afficher.
dashboard.id Number Numéro du tableau de bord auquel appartient la vignette.
dashboard.url String URL du tableau de bord relatif (uniquement le chemin d'accès) à laquelle la tuile appartient.
dashboard.absoluteUrl String URL complète du tableau de bord auquel appartient la tuile.
dashboard.title String Titre du tableau de bord, tel qu'il apparaît en haut du tableau de bord auquel appartient la tuile.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord auquel la tuile appartient. Cet objet a le format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id Integer Numéro de l'événement, pas de la tuile.
tile.title String Titre de la tuile, comme indiqué en haut de la tuile.
tile.listen Objet Le tableau de bord général filtre cette vignette. Cet objet a le format suivant : {"Filter Label": "Filter Field", ...}

dashboard:filters:changed

Cet événement est créé lorsqu'un filtre a été appliqué ou modifié dans un tableau de bord.

L'attribut options n'est pas disponible sur les anciens tableaux de bord.

type: "dashboard:filters:changed",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
Attribut Format Description
dashboard.id Number Identifiant du tableau de bord.
dashboard.url String URL du tableau de bord relatif (uniquement le chemin d'accès).
dashboard.absoluteUrl String URL complète du tableau de bord.
dashboard.title String Titre, comme indiqué en haut du tableau de bord.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord. Cet objet a le format suivant: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.options Objet Propriétés et valeurs des mises en page de tableau de bord, des composants de mise en page des tableaux de bord et des éléments de tableau de bord Toutes les propriétés renvoyées dans l'objet options peuvent recevoir des valeurs mises à jour à l'aide de l'événement dashboard:options:set. Cette option n'est pas disponible dans les anciens tableaux de bord.

look:ready

Cet événement est créé lorsqu'un style commence à charger des données de requête, que la requête soit exécutée ou non.

type: "look:ready",
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}
Attribut Format Description
look.url String URL de style relatif (uniquement le chemin d'accès)
look.absoluteUrl String URL complète

look:run:start

Cet événement est créé lorsqu'un style commence à charger des données de requête et que la requête commence à s'exécuter.

type: "look:run:start",
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}
Attribut Format Description
look.url String URL de style relatif (uniquement le chemin d'accès)
look.absoluteUrl String URL complète

look:run:complete

Cet événement est créé lorsqu'un aperçu a terminé d'exécuter la requête.

type: look:run:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}
Attribut Format Description
look.url String URL de style relatif (uniquement le chemin d'accès)
look.absoluteUrl String URL complète

look:save:complete

Cet événement est créé lorsqu'un style est modifié et enregistré. Cet événement est créé lorsqu'un utilisateur effectue l'une des tâches suivantes:

Cet événement n'est pas créé si le style est enregistré avec l'option de menu Enregistrer > Dans un tableau de bord existant ou Modifier les paramètres.

type: look:save:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  spaceId: 123
  }
}
Attribut Format Description
look.url String URL de style relatif (uniquement le chemin d'accès)
look.absoluteUrl String URL complète
look.spaceID Integer ID du dossier où est stocké le style

look:delete:complete

Cet événement est créé lorsqu'un style est déplacé vers le dossier Corbeille.

type: look:delete:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}
Attribut Format Description
look.url String URL de style relatif (uniquement le chemin d'accès)
look.absoluteUrl String URL complète

drillmenu:click

Cet événement est créé lorsqu'un utilisateur clique sur un menu d'analyse dans un tableau de bord créé avec le linkparamètre LookML. Par exemple, le LookML suivant crée un menu d'affichage dans lequel l'utilisateur peut afficher les données filtrées selon la dimension state:


dimension: state {
  type: string
  sql: ${TABLE}.state ;;
  link: {
    label: "Filter by {{ state | encode_uri }}"
    url: "filter::q={{ state | encode_uri }}"
    icon_url: "https://google.com/favicon.ico"
  }
}

Lorsque le filtre state est défini sur Illinois, l'événement drillmenu:click renvoie les éléments suivants à l'hôte de l'iFrame:

type: "drillmenu:click",
label: "Filter by Illinois",
link_type: "url",
modal: false,
target: '_self',
url: "#filter::state=Illinois"
context: ' '
Attribut Format Description
label String Libellé du lien, tel qu'il apparaît dans le menu déroulant
link_type String Type d'objet de la destination du lien
modal Booléen Utiliser ou non la boîte de dialogue d'affichage de la vue détaillée dans le navigateur
target String _self si la destination du lien remplacera l'iFrame actuel, _blank si la destination du lien ouvre une nouvelle fenêtre.
url String URL de la destination du lien
context String Attribut interne utilisé par certains types de visualisations

En bac à sable, l'iFrame empêche les clics sur le menu d'analyse détaillée de s'ouvrir dans une nouvelle fenêtre. Utilisez ces valeurs de bac à sable dans le tag iFrame:

sandbox = "allow-same-origin allow-scripts"

drillmodal:download

Cet événement est créé lorsqu'un utilisateur ouvre une boîte de dialogue d'exploration depuis une vignette du tableau de bord, puis clique sur l'option Télécharger.

{
type: "drillmodal:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/…",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/…",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
drillExploreUrl: "/embed...",
fileFormat: "pdf"
}
Attribut Format Description
dashboard.id Number Numéro du tableau de bord auquel appartient la vignette.
dashboard.title String Titre du tableau de bord, tel qu'il apparaît en haut du tableau de bord auquel appartient la tuile.
dashboard.url String URL du tableau de bord relatif (uniquement le chemin d'accès) à laquelle la tuile appartient.
dashboard.absoluteUrl String URL complète du tableau de bord auquel appartient la tuile.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord auquel la tuile appartient. Cet objet a le format suivant: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
drillExploreUrl String URL à explorer relative (uniquement le chemin d'accès) à télécharger.
fileFormat String Format de fichier du téléchargement de données.

drillmodal:explore

Cet événement est créé lorsqu'un utilisateur clique sur l'option Explorer à partir de cet emplacement dans la boîte de dialogue d'affichage détaillé.

type: "drillmodal:explore",
label: "Explore From Here",
url: "/embed/explore/model/view..."
Attribut Format Description
label String Libellé du bouton tel qu'il apparaît dans le menu
url String L'URL d'exploration relative (uniquement le chemin) à afficher

explore:ready

Cet événement est créé lorsqu'une exploration commence à charger des données de requête, que la requête s'exécute ou non.

type: "explore:ready",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}
Attribut Format Description
explore.url String L'URL d'exploration relative (uniquement le chemin d'accès)
explore.absoluteUrl String URL Explorer complète

explore:run:start

Cet événement est créé lorsqu'une exploration commence à charger des données de requête et que cette requête commence à s'exécuter.

type: "explore:run:start",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}
Attribut Format Description
explore.url String L'URL d'exploration relative (uniquement le chemin d'accès)
explore.absoluteUrl String URL Explorer complète

explore:run:complete

Cet événement est créé lorsqu'une exploration a terminé d'exécuter la requête.

type: "explore:run:complete",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}
Attribut Format Description
explore.url String L'URL d'exploration relative (uniquement le chemin d'accès)
explore.absoluteUrl String URL Explorer complète

explore:state:changed

Cet événement est créé lorsqu'une URL de page Explorer est modifiée à la suite d'une action de l'utilisateur.

type: "explore:state:changed",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/..."
}
Attribut Format Description
explore.url String L'URL d'exploration relative (uniquement le chemin d'accès)
explore.absoluteUrl String URL Explorer complète

page:changed

Cet événement est créé lorsqu'un utilisateur accède à une nouvelle page dans le cadre iFrame.

type: "page:changed",
page: {
  type: "dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/..."
}
Attribut Format Description
page.type String Type de page auquel l'utilisateur vient d'accéder, par exemple "dashboard", "look" ou "explore"
page.url String URL relative (uniquement le chemin) de la page à laquelle l'utilisateur vient d'accéder
page.absoluteUrl String URL complète de la page à laquelle l'utilisateur vient d'accéder

page:properties:changed

Cet événement est créé lorsque la hauteur d'un iFrame du tableau de bord change. Elle n'est pas disponible pour les looks ou les explorations, car ces éléments ajustent automatiquement leur hauteur à la taille de l'iFrame.

type: "page:properties:changed",
height: 1000
Attribut Format Description
height Integer Hauteur en pixels du cadre iFrame du tableau de bord.

Modifier l'iFrame

Après avoir préparé votre iFrame pour la récupération de données, vous pouvez apporter des modifications à l'iFrame en procédant comme suit:

  1. Rédigez votre requête au format JSON.
  2. Publiez la requête dans le cadre iFrame contentWindow.

Écrire votre requête au format JSON

Vous pouvez apporter plusieurs modifications à l'iFrame, que vous allez envoyer au format JSON. Les options disponibles sont décrites dans la section Documentation de référence concernant les actions sur cette page. N'oubliez pas d'utiliser JSON.stringify pour convertir votre action au format JSON, comme suit:

var my_request = JSON.stringify(
  {
    type: "dashboard:run"
  }
);

Publication de la requête dans la propriété contentWindow de l'iFrame

Enfin, publiez votre message sur le contentWindow de l'iFrame, comme ceci:

var my_iframe = document.getElementById("my_iframe_id");

my_iframe.contentWindow.postMessage(my_request, 'https://instance_name.looker.com');

Tableau récapitulatif des actions

Le tableau suivant récapitule les actions. Cliquez sur une action pour en afficher les détails.

Action Description de l'action
dashboard:load Charge un nouveau tableau de bord dans le cadre iFrame pour remplacer un tableau de bord existant.
dashboard:run Exécute le tableau de bord dans l'iFrame.
dashboard:filters:update Met à jour un filtre de tableau de bord existant dans le cadre iFrame.
dashboard:options:set Écrit de nouvelles valeurs dans les propriétés de mise en page et d'élément du tableau de bord.
dashboard:schedule_modal:open Ouvre le programmeur, qui permet aux utilisateurs de fournir du contenu Looker vers différentes destinations.
dashboard:stop Arrête un tableau de bord qui exécute ou recharge des données.
look:run Exécute le composant Look dans l'iFrame.
look:filters:update Met à jour un filtre Look dans l'iFrame.
explore:run Exécute la fonction Explorer dans l'iFrame.
explore:filters:update Met à jour ou supprime un filtre Explorer existant dans le cadre iFrame.

Référence de l'action

Voici les actions que vous pouvez publier dans l'iFrame intégré:

dashboard:load

Cette action n'est pas disponible sur les anciens tableaux de bord.

Utilisez cette action pour charger un nouveau tableau de bord dans le cadre iFrame, en remplacement d'un tableau de bord existant. Le nouveau tableau de bord commencera à exécuter les requêtes comme si une nouvelle page du tableau de bord avait été ouverte.

{
  type: "dashboard:load",
  id: "101",
  pushHistory: false
}
Attribut Format Description
type String L'utilisation du type dashboard:load indique que vous souhaitez charger un nouveau tableau de bord dans l'iFrame.
id String ID du tableau de bord à charger.
pushHistory Booléen Si la valeur est true, le tableau de bord chargé crée une nouvelle entrée d'historique de navigateur, et l'utilisateur peut utiliser le bouton Retour du navigateur pour revenir au tableau de bord précédent. Si la valeur est false, le tableau de bord actuel est remplacé et la navigation dans le navigateur ne peut pas être utilisée pour y revenir.

dashboard:run

Utilisez cette action pour exécuter le tableau de bord dans l'iFrame. Cela revient à cliquer sur le bouton Exécuter ou Actualiser les données du tableau de bord.

{
  type: "dashboard:run"
}
Attribut Format Description
type String L'utilisation du type dashboard:run indique que vous souhaitez exécuter le tableau de bord.

dashboard:filters:update

Utilisez cette action pour mettre à jour un filtre de tableau de bord existant dans le cadre iFrame. Vous ne pouvez pas ajouter de filtre au tableau de bord à l'aide de cette méthode.

{
  type: "dashboard:filters:update",
  filters: {
    "Sale date": "Last 28 days",
    "Sale amount": "Greater than 100"
  }
}
Attribut Format Description
type String L'utilisation du type dashboard:filters:update indique que vous souhaitez mettre à jour les filtres utilisés par le tableau de bord.
filters Objet Nouveaux filtres que vous souhaitez appliquer au tableau de bord. Cet objet a le format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}

dashboard:options:set

Cette action est disponible après l'événement dashboard:run:complete et n'est pas disponible dans les anciens tableaux de bord.

L'outil d'intégration crée le message et l'envoie à l'iFrame, mais le tableau de bord ne répond qu'après le déclenchement de dashboard:run:complete. L'action dashboard:options:set écrit de nouvelles valeurs dans les propriétés de mise en page et d'élément du tableau de bord. Seules les propriétés qui ont été renvoyées dans l'attribut options de l'événement dashboard:run:complete peuvent être mises à jour à l'aide de dashboard:options:set. Toutes les propriétés qui n'ont pas été précédemment renvoyées par l'attribut options de l'événement dashboard:run:complete sont ignorées.

{
  type: "dashboard:options:set",
  layouts: [
    {
      id: 1,
      dashboard_id: 1,
      type: "newspaper",
      active: true,
      column_width: null,
      width: null,
      deleted: false,
      dashboard_layout_components: [
        {
          id: 1,
          dashboard_layout_id: 1,
          dashboard_element_id: 1,
          row: 0,
          column: 0,
          width: 8,
          height: 4,
          deleted: false
        },
        {
          id: 2,
          dashboard_layout_id: 1,
          dashboard_element_id: 2,
          row: 0,
          column: 8,
          width: 8,
          height: 4,
          deleted: false
        }
      ]
    }
  ],
  elements: {
    1: {
      title: "Total Orders",
      title_hidden: false,
      vis_config: {
        type: "single_value",
        font_size: "medium",
        title: "Total Orders"
      }
    },
    2: {
      title: "Average Order Profit",
      title_hidden: false,
      vis_config: {
        type: "single_value",
        title: "Average Order Profit"
      }
    }
  }
}
Attribut Format Description
type String L'utilisation du type dashboard:options:set indique que vous souhaitez écrire de nouvelles valeurs dans les propriétés de mise en page et d'élément du tableau de bord.
layouts Objet Propriétés de la mise en page du tableau de bord renvoyées par l'attribut options dans l'événement dashboard:run:complete. Ces fichiers seront au format suivant:

id: "string",
dashboard_id: "string",
type: "newspaper",
active: boolean,
column_width: number,
width: number
layouts.dashboard_layout_components Objet Un ou plusieurs objets de composant de mise en page de tableau de bord renvoyés par l'attribut options dans l'événement dashboard:run:complete Ces données seront au format suivant :

id: "string",
dashboard_layout_id: "string",
dashboard_element_id: "string",
row: number,
column: number,
width: number,
height: number,
deleted: boolean,
elements Objet Un ou plusieurs objets élément de tableau de bord renvoyés par l'attribut options dans l'événement dashboard:run:complete Ces données seront au format suivant :

id: {
  title: "string"

dashboard:schedule_modal:open

Cette action permet d'ouvrir le planificateur, qui permet aux utilisateurs de diffuser du contenu Looker vers différentes destinations.

Cet événement n'est pas disponible sur les anciens tableaux de bord.

{
  type: "dashboard:schedule_modal:open"
}
Attribut Format Description
type String L'utilisation du type dashboard:schedule_modal:open indique que vous souhaitez ouvrir la boîte de dialogue Programmer.

dashboard:stop

Utilisez cette action pour arrêter un tableau de bord qui exécute ou recharge des données. Cela revient à cliquer sur le bouton Annuler du tableau de bord. Un tableau de bord qui cesse d'utiliser dashboard:stop envoie un événement dashboard:run:complete avec status: défini sur "stopped".

Cette action n'est pas disponible sur les anciens tableaux de bord.

{
  type: "dashboard:stop"
}
Attribut Format Description
type String L'utilisation du type dashboard:stop indique que vous souhaitez arrêter le tableau de bord en cours d'exécution.

look:run

Utilisez cette action pour exécuter la requête sur laquelle le style est basé dans le cadre iFrame. Cette méthode revient à cliquer sur le bouton Run (Exécuter) de la page Look, à la différence que look:run interroge toujours la base de données directement et ne récupère pas les données du cache Looker.

{
  type: "look:run"
}
Attribut Format Description
type String L'utilisation du type look:run indique que vous souhaitez exécuter le style.

look:filters:update

Utilisez cette action pour mettre à jour un filtre de style existant dans l'iFrame. Vous ne pouvez pas ajouter de nouveau filtre à l'affichage à l'aide de cette méthode.

{
  type: "look:filters:update",
  filters: {
    "orders.created_at": "90 days",
    "products.department": "sweaters"
  }
}
Attribut Format Description
type String L'utilisation du type look:filters:update indique que vous souhaitez mettre à jour les filtres utilisés par le style.
filters Objet Les nouveaux filtres que vous souhaitez appliquer au style Cet objet a le format suivant: {"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...}

explore:run

Utilisez cette action pour lancer l'exploration dans le cadre iFrame. Cela revient à cliquer sur le bouton Exécuter de l'exploration, à la différence que explore:run interroge toujours la base de données directement et ne récupère pas les données du cache Looker.

{
  type: "explore:run"
}
Attribut Format Description
type String L'utilisation du type explore:run indique que vous souhaitez exécuter l'exploration.

explore:filters:update

Utilisez cette action pour mettre à jour ou supprimer un filtre "Explorer" existant dans le cadre iFrame. Si vous incluez un nouveau filtre faisant référence à un champ valide, celui-ci sera ajouté à l'exploration.

{
  type: "explore:filters:update",
  filters: {
    "orders.created_at": "90 days",
    "orders.status": "complete"
  }
  deleteFilters:  ["products.department"]
}
Attribut Format Description
type String L'utilisation du type explore:filters:update indique que vous souhaitez mettre à jour les filtres utilisés par l'exploration.
filters Objet Nouveaux filtres que vous souhaitez appliquer à l'onglet "Explorer". Si filters inclut un filtre qui n'existe pas actuellement dans l'exploration, mais qui fait référence à un champ valide, ce filtre sera ajouté à l'exploration. Cet objet a le format suivant : {"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...}
deleteFilters Array Filtres existants que vous souhaitez supprimer de l'onglet "Explorer". Le tableau a le format suivant: ["view_name.field_name_1", "view_name.field_name_2", ...]