Événements JavaScript intégrés

Après avoir créé une intégration (qui peut être publique, privée, avec une intégration signée ou via l'API), vous pouvez interagir avec ces iFrames à l'aide de JavaScript. Vous pouvez rendre votre page plus dynamique en fonction de l'état de l'élément intégré, et même modifier l'élément intégré depuis votre page Web.

Sachez que Looker ne contrôle pas l'ordre dans lequel les navigateurs envoient les événements aux applications Web. Cela signifie que l'ordre des événements n'est pas garanti d'un navigateur ou d'une plate-forme à l'autre. Veillez à écrire votre code JavaScript de manière appropriée pour tenir compte de la gestion des événements par les différents navigateurs.

Vous pouvez utiliser JavaScript de l'une des manières suivantes pour le contenu Looker intégré :

Préparation

Avant de pouvoir interagir avec l'iframe intégrée, procédez comme suit :

Ajouter un ID à l'iframe

Plus tard, lorsque vous récupérerez des données à partir de l'iframe, vous devrez vérifier que les informations que vous utilisez proviennent bien de l'iframe de Looker. Pour ce faire, veillez à ajouter un ID à votre iFrame, si ce n'est pas déjà fait. Dans l'exemple suivant, vous définissez l'ID sur looker en ajoutant id="looker" à l'iframe :

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

Ajouter le domaine d'intégration à l'attribut src de l'iFrame

Dans l'attribut src de l'iFrame, incluez le domaine dans lequel l'iFrame est utilisé. Dans l'exemple suivant, vous pouvez spécifier myownpersonaldomain.com comme domaine en ajoutant ?embed_domain=https://myownpersonaldomain.com" à la fin de l'URL dans l'attribut src :

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

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

Si vous utilisez le SDK d'intégration, ajoutez sdk=3 à la fin de l'URL d'intégration. Le paramètre sdk=3 indique que le SDK est présent et que Looker peut profiter des fonctionnalités supplémentaires qu'il fournit, comme la transmission d'événements JavaScript entre l'iframe Looker et votre domaine. Le SDK ne peut pas ajouter ce paramètre lui-même, car il fait partie de l'URL signée. Exemple :

<iframe
  id="looker"
  src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://myownpersonaldomain.com&sdk=2">
</iframe>

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

Enfin, vous devez ajouter le domaine où l'iFrame est utilisé à la liste d'autorisation sur la page Intégrer du panneau Admin de Looker en procédant comme suit :

  1. Dans le champ Liste d'autorisation des domaines intégrés, saisissez le domaine dans lequel l'iFrame est utilisé, puis appuyez sur la touche Tabulation pour que le domaine apparaisse dans un encadré du champ.

  2. Cliquez sur 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://*.myownpersonaldomain.com autorise à la fois https://analytics.myownpersonaldomain.com et https://data.myownpersonaldomain.com.

Si vous utilisez l'intégration sans cookie avec Looker 23.8 ou version ultérieure, vous pouvez spécifier le domaine d'intégration lors de l'acquisition de la session sans cookie. Cette méthode permet d'éviter d'ajouter le domaine d'intégration à la liste d'autorisation via le panneau Admin > Intégration. Si vous décidez d'utiliser cette fonctionnalité, consultez les bonnes pratiques de sécurité.

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

Après avoir suivi les étapes de préparation, vous pouvez accéder aux événements transmis entre l'iframe Looker et votre domaine en écoutant les événements postMessage.

L'iframe intégrée peut créer quelques types d'événements, comme décrit dans la section Référence des types d'événements de cette page.

Accéder aux événements en JavaScript

Voici un exemple d'écoute de ces événements en JavaScript, puis de consignation des événements 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 de leur enregistrement 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. Sélectionnez un type d'événement pour afficher les détails le concernant.

Type d'événement Cause de l'événement
dashboard:loaded Sur les tableaux de bord où les vignettes ne sont pas configurées pour s'exécuter automatiquement, un tableau de bord et ses éléments sont 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 vignettes ont commencé à se charger et à interroger les données.
dashboard:run:complete Un tableau de bord a fini de s'exécuter, et toutes les tuiles ont fini de se charger et d'interroger.
dashboard:download Le téléchargement d'un tableau de bord au format PDF a commencé.
dashboard:edit:start Ajouté dans la version 22.20 Un tableau de bord est passé en mode Édition. L'événement dashboard:save:complete est déclenché lorsque le tableau de bord est enregistré.
dashboard:edit:cancel Ajouté dans la version 22.20 Un tableau de bord en mode Édition a été quitté sans enregistrement.
dashboard:save:complete Un tableau de bord a été modifié et enregistré.
dashboard:delete:complete Un tableau de bord a été supprimé.
dashboard:tile:start Le chargement ou l'interrogation des données d'une tuile a commencé.
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 d'ici dans une vignette de tableau de bord.
dashboard:tile:merge Ajouté dans la version 25.14 Un utilisateur a cliqué sur le bouton ou l'élément de menu "Modifier la requête fusionnée".
dashboard:tile:view Un utilisateur a cliqué sur l'option Afficher la présentation d'origine dans une vignette de tableau de bord.
dashboard:filters:changed Les filtres d'un tableau de bord ont été appliqués ou modifiés.
look:ready Un Look a commencé à charger les données de la requête, que celle-ci s'exécute ou non.
look:run:start Un Look a commencé à charger les données de la requête, et la requête a commencé à s'exécuter.
look:run:complete Un Look a terminé l'exécution de la requête.
look:edit:start Ajouté dans la version 25.10 Un Look est passé en mode Édition. L'événement look:save:complete sera déclenché lorsque la présentation sera enregistrée.
look:edit:cancel Ajouté dans la version 25.10 Un Look en mode Édition a été quitté sans être enregistré.
look:save:complete Un Look a été modifié et enregistré.
look:delete:complete Un Look a été déplacé dans le dossier Corbeille.
drillmenu:click Un utilisateur a cliqué sur un menu d'exploration dans un tableau de bord créé avec le paramètre LookML link.
drillmodal:download Un utilisateur a ouvert une boîte de dialogue d'exploration à partir d'une vignette de tableau de bord et a cliqué sur l'option Télécharger.
drillmodal:explore Un utilisateur a cliqué sur l'option Explorer à partir d'ici dans une boîte de dialogue d'exploration.
explore:ready Une exploration a commencé à charger les données de la requête, que celle-ci s'exécute ou non.
explore:run:start Une exploration a commencé à charger les données de la requête, et la requête a commencé à s'exécuter.
explore:run:complete Une exploration a terminé l'exécution de la requête.
explore:state:changed L'URL d'une page d'exploration a changé suite aux actions de l'utilisateur.
merge:ready Une requête de fusion a fini de charger les données de la requête initiale.
merge:run:start Une requête de fusion a commencé à s'exécuter.
merge:run:complete L'exécution d'une requête de fusion est terminée.
merge:run:fail Une requête de fusion n'a pas pu s'exécuter et a renvoyé une erreur.
page:changed Un utilisateur a accédé à une nouvelle page dans l'iFrame.
page:properties:changed La hauteur d'un iframe de tableau de bord a changé.
session:tokens Le client Looker a besoin de jetons pour continuer.
session:expired Ajouté le 25/10 La session de l'utilisateur a expiré.
session:status Envoie des informations sur l'état d'une session.
env:client:dialog Une boîte de dialogue s'est ouverte, mais elle est peut-être partiellement masquée (par exemple, une boîte de dialogue d'exploration). Cet événement permet à l'application d'hébergement de faire défiler la boîte de dialogue pour l'afficher.

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

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

dashboard:loaded

Sur les tableaux de bord où les vignettes ne sont pas configurées 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.


type: "dashboard:loaded",
status: "complete",
dashboard: {
  id: 1,
  title: "Business Pulse",
  canEdit: true,
  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 Chaîne Indique si le tableau de bord et ses éléments ont bien été chargés.
dashboard.id Nombre/Chaîne ID du tableau de bord.
dashboard.title Chaîne Titre, tel qu'il apparaît en haut du tableau de bord.
dashboard.canEdit Booléen Ajouté dans la version 22.20 Lorsque la valeur est true, l'utilisateur peut modifier le tableau de bord.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord. Cet objet est au format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl Chaîne URL complète du tableau de bord.
dashboard.url Chaîne URL relative du tableau de bord (chemin d'accès uniquement).
dashboard.options Objet Les propriétés et les valeurs de dashboard layout, dashboard layout component et élément du tableau de bord. Toutes les propriétés renvoyées dans l'objet options peuvent être mises à jour à l'aide de l'événement dashboard:options:set.

dashboard:run:start

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

type: "dashboard:run:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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 Nombre/Chaîne ID du tableau de bord.
dashboard.title Chaîne Titre, tel qu'il apparaît en haut du tableau de bord.
dashboard.canEdit Booléen Ajouté dans la version 22.20 Lorsque la valeur est true, l'utilisateur peut modifier le tableau de bord.
dashboard.url Chaîne URL relative du tableau de bord (chemin d'accès uniquement).
dashboard.absoluteUrl Chaîne URL complète du tableau de bord.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord. Cet objet est au 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 a fini de s'exécuter et que toutes les tuiles ont fini de se charger et d'interroger. Cet événement est créé, que toutes les tuiles se chargent correctement ou non.

type: "dashboard:run:complete",
status: "complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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 Chaîne 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é, soit depuis l'interface utilisateur, soit avec l'action dashboard:stop, status renvoie "stopped".
dashboard.id Nombre/Chaîne ID du tableau de bord.
dashboard.title Chaîne Titre, tel qu'il apparaît en haut du tableau de bord.
dashboard.canEdit Booléen Ajouté dans la version 22.20 Lorsque la valeur est true, l'utilisateur peut modifier le tableau de bord.
dashboard.url Chaîne URL relative du tableau de bord (chemin d'accès uniquement).
dashboard.absoluteUrl Chaîne URL complète du tableau de bord.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord. Cet objet est au format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.options Objet Les propriétés et les valeurs de dashboard layout, dashboard layout component et élément du tableau de bord. Toutes les propriétés renvoyées dans l'objet options peuvent être mises à jour à l'aide de l'action dashboard:options:set.
dashboard.tileStatuses Tableau d'objets Tableau d'objets fournissant l'état des tuiles. Les propriétés de l'objet sont les suivantes :

  • tileId : ID 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 la tuile qui a produit l'erreur.

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",
  canEdit: true,
  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 Nombre/Chaîne ID du tableau de bord.
dashboard.title Chaîne Titre, tel qu'il apparaît en haut du tableau de bord.
dashboard.canEdit Booléen Ajouté dans la version 22.20 Lorsque la valeur est true, l'utilisateur peut modifier le tableau de bord.
dashboard.url Chaîne URL relative du tableau de bord (chemin d'accès uniquement).
dashboard.absoluteUrl Chaîne URL complète du tableau de bord.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord. Cet objet est au format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
fileFormat Chaîne Format du tableau de bord téléchargé (uniquement "pdf" pour le moment).

dashboard:edit:start

Ajouté dans la version 22.20 Cet événement est créé lorsqu'un tableau de bord passe en mode Édition.

type: "dashboard:edit:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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 Nombre/Chaîne ID du tableau de bord.
dashboard.title Chaîne Titre, tel qu'il apparaît en haut du tableau de bord.
dashboard.canEdit Booléen Ajouté dans la version 22.20 Lorsque la valeur est true, l'utilisateur peut modifier le tableau de bord.
dashboard.url Chaîne URL relative du tableau de bord (chemin d'accès uniquement).
dashboard.absoluteUrl Chaîne URL complète du tableau de bord.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord. Cet objet est au format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}.

dashboard:edit:cancel

Ajouté à la version 22.20 Cet événement est créé lorsqu'un tableau de bord en mode Édition quitte ce mode sans enregistrer.

type: "dashboard:edit:cancel",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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 Nombre/Chaîne ID du tableau de bord.
dashboard.title Chaîne Titre, tel qu'il apparaît en haut du tableau de bord.
dashboard.canEdit Booléen Ajouté dans la version 22.20 Lorsque la valeur est true, l'utilisateur peut modifier le tableau de bord.
dashboard.url Chaîne URL relative du tableau de bord (chemin d'accès uniquement).
dashboard.absoluteUrl Chaîne URL complète du tableau de bord.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord. Cet objet est au format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}.

dashboard:save:complete

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

type: "dashboard:save:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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 Nombre/Chaîne ID du tableau de bord.
dashboard.title Chaîne Titre, tel qu'il apparaît en haut du tableau de bord.
dashboard.canEdit Booléen Ajouté dans la version 22.20 Lorsque la valeur est true, l'utilisateur peut modifier le tableau de bord.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord. Cet objet est au format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl Chaîne URL complète du tableau de bord.
dashboard.url Chaîne URL relative du tableau de bord (chemin d'accès uniquement).
dashboard.options Objet Les propriétés et les valeurs de dashboard layout, dashboard layout component et élément du tableau de bord. Toutes les propriétés renvoyées dans l'objet options peuvent être 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é.

type: "dashboard:delete:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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 Nombre/Chaîne ID du tableau de bord.
dashboard.title Chaîne Titre, tel qu'il apparaît en haut du tableau de bord.
dashboard.canEdit Booléen Ajouté dans la version 22.20 Lorsque la valeur est true, l'utilisateur peut modifier le tableau de bord.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord. Cet objet est au format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl Chaîne URL complète du tableau de bord.
dashboard.url Chaîne URL relative du tableau de bord (chemin d'accès uniquement).
dashboard.options Objet Les propriétés et les valeurs de dashboard layout, dashboard layout component et élément du tableau de bord. Toutes les propriétés renvoyées dans l'objet options peuvent être mises à jour à l'aide de l'événement dashboard:options:set.

dashboard:tile:start

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

type: "dashboard:tile:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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 Nombre/Chaîne ID du tableau de bord auquel appartient la vignette.
dashboard.title Chaîne Le titre du tableau de bord, tel qu'il apparaît en haut du tableau de bord auquel appartient la vignette.
dashboard.canEdit Booléen Ajouté dans la version 22.20 Lorsque la valeur est true, l'utilisateur peut modifier le tableau de bord.
dashboard.url Chaîne URL relative du tableau de bord (chemin d'accès uniquement) auquel appartient la vignette.
dashboard.absoluteUrl Chaîne URL complète du tableau de bord auquel appartient la vignette.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord auquel appartient la vignette. Cet objet est au format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id Integer ID de l'événement, et non de la tuile.
tile.title Chaîne Titre de la vignette, tel qu'il apparaît en haut de la vignette.
tile.listen Objet Filtres globaux du tableau de bord auxquels cette vignette est sensible. Cet objet est au format suivant : {"Filter Label": "Filter Field", ...}

dashboard:tile:complete

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

type: "dashboard:tile:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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 Nombre/Chaîne ID du tableau de bord auquel appartient la vignette.
dashboard.title Chaîne Le titre du tableau de bord, tel qu'il apparaît en haut du tableau de bord auquel appartient la vignette.
dashboard.canEdit Booléen Ajouté dans la version 22.20 Lorsque la valeur est true, l'utilisateur peut modifier le tableau de bord.
dashboard.url Chaîne URL relative du tableau de bord (chemin d'accès uniquement) auquel appartient la vignette.
dashboard.absoluteUrl Chaîne URL complète du tableau de bord auquel appartient la vignette.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord auquel appartient la vignette. Cet objet est au format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
status Chaîne Indique si la requête de tuile a abouti. Les valeurs possibles sont "complete" ou "error".
truncated Booléen Indique si les résultats de la requête de la tuile ont été tronqués, car la requête a renvoyé plus de lignes que la limite de lignes de la requête. La limite maximale de lignes peut être spécifiée par l'utilisateur ou correspondre à la limite par défaut de Looker (5 000 lignes).
tile.id Integer ID de l'événement, et non de la tuile.
tile.title Chaîne Titre de la vignette, tel qu'il apparaît en haut de la vignette.
tile.listen Objet Filtres globaux du tableau de bord auxquels cette vignette est sensible. Cet objet est au format suivant : {"Filter Label": "Filter Field", ...}
tile.errors Tableau d'objets 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 la tuile qui a produit l'erreur.

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",
  canEdit: true,
  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 Nombre/Chaîne ID du tableau de bord auquel appartient la vignette.
dashboard.title Chaîne Le titre du tableau de bord, tel qu'il apparaît en haut du tableau de bord auquel appartient la vignette.
dashboard.canEdit Booléen Ajouté dans la version 22.20 Lorsque la valeur est true, l'utilisateur peut modifier le tableau de bord.
dashboard.url Chaîne URL relative du tableau de bord (chemin d'accès uniquement) auquel appartient la vignette.
dashboard.absoluteUrl Chaîne URL complète du tableau de bord auquel appartient la vignette.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord auquel appartient la vignette. Cet objet est au format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id Integer ID de l'événement, et non de la tuile.
tile.title Chaîne Titre de la vignette, tel qu'il apparaît en haut de la vignette.
tile.listen Objet Filtres globaux du tableau de bord auxquels cette vignette est sensible. Cet objet est au format suivant : {"Filter Label": "Filter Field", ...}
fileFormat Chaîne 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 d'ici dans une vignette de tableau de bord.

Cet événement peut être annulé, ce qui signifie que l'application d'intégration peut renvoyer {cancel: true} et que Looker ne poursuivra pas l'événement déclencheur.

type: "dashboard:tile:explore",
label: 'Explore From Here',
url: '/embed/explore/model/view...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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 Chaîne Libellé du bouton.
url Chaîne URL relative (chemin d'accès uniquement) de l'exploration à afficher.
dashboard.id Nombre/Chaîne ID du tableau de bord auquel appartient la vignette.
dashboard.title Chaîne Le titre du tableau de bord, tel qu'il apparaît en haut du tableau de bord auquel appartient la vignette.
dashboard.canEdit Booléen Ajouté dans la version 22.20 Lorsque la valeur est true, l'utilisateur peut modifier le tableau de bord.
dashboard.url Chaîne URL relative du tableau de bord (chemin d'accès uniquement) auquel appartient la vignette.
dashboard.absoluteUrl Chaîne URL complète du tableau de bord auquel appartient la vignette.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord auquel appartient la vignette. Cet objet est au format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id Integer ID de l'événement, et non de la tuile.
tile.title Chaîne Titre de la vignette, tel qu'il apparaît en haut de la vignette.
tile.listen Objet Filtres globaux du tableau de bord auxquels cette vignette est sensible. Cet objet est au format suivant : {"Filter Label": "Filter Field", ...}

dashboard:tile:view

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

Cet événement peut être annulé, ce qui signifie que l'application d'intégration peut renvoyer {cancel: true} et que Looker ne procédera pas à l'événement déclencheur.

type: "dashboard:tile:view",
label: 'View Original Look',
url: '/embed/look/...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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 Chaîne Libellé du bouton.
url Chaîne URL relative (uniquement le chemin d'accès) de la présentation à afficher.
dashboard.id Nombre/Chaîne ID du tableau de bord auquel appartient la vignette.
dashboard.title Chaîne Le titre du tableau de bord, tel qu'il apparaît en haut du tableau de bord auquel appartient la vignette.
dashboard.canEdit Booléen Ajouté dans la version 22.20 Lorsque la valeur est true, l'utilisateur peut modifier le tableau de bord.
dashboard.url Chaîne URL relative du tableau de bord (chemin d'accès uniquement) auquel appartient la vignette.
dashboard.absoluteUrl Chaîne URL complète du tableau de bord auquel appartient la vignette.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord auquel appartient la vignette. Cet objet est au format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id Integer ID de l'événement, et non de la tuile.
tile.title Chaîne Titre de la vignette, tel qu'il apparaît en haut de la vignette.
tile.listen Objet Filtres globaux du tableau de bord auxquels cette vignette est sensible. Cet objet est au format suivant : {"Filter Label": "Filter Field", ...}

dashboard:tile:merge

Ajouté dans la version 25.14 Cet événement est généré lorsque l'utilisateur clique sur le bouton Modifier la requête fusionnée ou sur l'élément de menu Modifier la requête fusionnée. Par défaut, ce bouton ouvre une nouvelle fenêtre de niveau supérieur qui permet de modifier la requête de fusion.

Cet événement peut être annulé, ce qui signifie que l'application d'intégration peut renvoyer {cancel: true} et que Looker ne poursuivra pas l'événement déclencheur. Cet événement permet à l'application d'intégration d'ouvrir l'éditeur de requête de fusion dans un iFrame plutôt que dans une fenêtre de niveau supérieur. L'application d'intégration ne doit pas tenter de charger l'URL dans l'iFrame qui a déclenché l'événement. Vous devez plutôt créer un iFrame.

javascript type: dashboard:tile:merge, label: 'Edit Merged Query', dashboard_id: '13', dashboard_modified: false, tile_id: '218', tile_title: 'Untitled', url: '/embed/merge/edit?did=218&dbnx=1', absoluteUrl: 'https://.../embed/merge/edit?did=218&dbnx=1', target: '_blank',
Attribut Format Description
label string Libellé du bouton.
dashboard_id string ID du tableau de bord auquel appartient la vignette de requête fusionnée.
dashboard_modified booléen Si la valeur est true, cet attribut indique que le tableau de bord a été modifié. Les modifications apportées au tableau de bord peuvent être perdues si la modification de l'éditeur de requête de fusion se poursuit. L'application d'intégration peut annuler la modification de l'éditeur de requête de fusion ou avertir l'utilisateur qu'il risque de perdre des modifications non enregistrées s'il continue.
tile_id string ID de la vignette de requête fusionnée.
tile_title string Titre de la tuile.
url string URL de la requête fusionnée. Cet attribut peut être utilisé avec le SDK d'intégration pour créer un iFrame pour la requête combinée.
absoluteUrl string URL complète de la requête fusionnée. Cet attribut peut être utilisé comme src de l'élément iframe. Des attributs supplémentaires seront requis.
target string ID à utiliser pour le nom de la fenêtre à ouvrir.

dashboard:filters:changed

Cet événement est créé lorsque les filtres d'un tableau de bord ont été appliqués ou modifiés.

type: "dashboard:filters:changed",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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 Nombre/Chaîne ID du tableau de bord.
dashboard.title Chaîne Titre, tel qu'il apparaît en haut du tableau de bord.
dashboard.canEdit Booléen Ajouté dans la version 22.20 Lorsque la valeur est true, l'utilisateur peut modifier le tableau de bord.
dashboard.url Chaîne URL relative du tableau de bord (chemin d'accès uniquement).
dashboard.absoluteUrl Chaîne URL complète du tableau de bord.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord. Cet objet est au format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.options Objet Les propriétés et les valeurs de dashboard layout, dashboard layout component et élément du tableau de bord. Toutes les propriétés renvoyées dans l'objet options peuvent être mises à jour à l'aide de l'événement dashboard:options:set.

look:ready

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

type: "look:ready",
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
Attribut Format Description
look.url Chaîne L'URL relative de la présentation (uniquement le chemin d'accès)
look.absoluteUrl Chaîne L'URL complète du Look

look:run:start

Cet événement est créé lorsqu'un Look commence à charger les données de la 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 Chaîne L'URL relative de la présentation (uniquement le chemin d'accès)
look.absoluteUrl Chaîne L'URL complète du Look

look:run:complete

Cet événement est créé lorsqu'un Look 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 Chaîne L'URL relative de la présentation (uniquement le chemin d'accès)
look.absoluteUrl Chaîne L'URL complète du Look

look:edit:start

Ajouté dans la version 25.10 Cet événement est déclenché lorsqu'un Look passe en mode Édition.

type: "look:edit:start",
look: {
  id: 46,
  title: "My Look",
  url: "/embed/looks/46",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/46",
}
Attribut Format Description
look.id Chaîne ID du Look.
look.title Chaîne Titre de la présentation.
url Chaîne URL relative de la présentation (uniquement le chemin d'accès).
absoluteUrl Chaîne URL complète du Look.

look:edit:cancel

Ajouté dans la version 25.10 Cet événement est déclenché lorsqu'un Look en mode Édition quitte le mode Édition sans être enregistré.

type: "look:edit:cancel",
look: {
  id: 46,
  title: "My Look",
  url: "/embed/looks/46",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/46",
}
Attribut Format Description
look.id Chaîne ID du Look.
look.title Chaîne Titre de la présentation.
url Chaîne URL relative de la présentation (uniquement le chemin d'accès).
absoluteUrl Chaîne URL complète du Look.

look:save:complete

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

Cet événement n'est pas créé si la présentation est enregistrée à l'aide de 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/...",
  folderid: 123
  }
Attribut Format Description
look.url Chaîne L'URL relative de la présentation (uniquement le chemin d'accès)
look.absoluteUrl Chaîne L'URL complète du Look
look.folderid Integer ID du dossier dans lequel le Look est stocké

look:delete:complete

Cet événement est créé lorsqu'une présentation est déplacée 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 Chaîne L'URL relative de la présentation (uniquement le chemin d'accès)
look.absoluteUrl Chaîne L'URL complète du Look

drillmenu:click

Cet événement est créé lorsqu'un utilisateur clique sur un menu d'exploration dans un tableau de bord créé avec le paramètre LookML link. Par exemple, le code LookML suivant crée un menu d'exploration dans lequel un utilisateur peut afficher les données filtrées par 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: ' '

Cet événement peut être annulé, ce qui signifie que l'application d'intégration peut renvoyer {cancel: true} et que Looker ne poursuivra pas l'événement déclencheur.

Attribut Format Description
label Chaîne Libellé du lien tel qu'il apparaît dans le menu d'analyse.
link_type Chaîne Type d'objet à la destination du lien
modal Booléen Indique si la boîte de dialogue d'exploration sera utilisée à la place de la navigation dans le navigateur
target Chaîne _self si la destination du lien remplace l'iFrame actuel, _blank si la destination du lien ouvre une nouvelle fenêtre
url Chaîne URL de la destination du lien
context Chaîne Attribut interne utilisé par certains types de visualisations

Le sandboxing de l'iframe empêchera l'ouverture des clics sur le menu d'exploration dans une nouvelle fenêtre. Utilisez ces valeurs de bac à sable dans la balise 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 à partir d'une vignette de tableau de bord et 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 Nombre/Chaîne ID du tableau de bord auquel appartient la vignette.
dashboard.title Chaîne Le titre du tableau de bord, tel qu'il apparaît en haut du tableau de bord auquel appartient la vignette.
dashboard.url Chaîne URL relative du tableau de bord (chemin d'accès uniquement) auquel appartient la vignette.
dashboard.absoluteUrl Chaîne URL complète du tableau de bord auquel appartient la vignette.
dashboard.dashboard_filters Objet Filtres appliqués au tableau de bord auquel appartient la vignette. Cet objet est au format suivant : {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
drillExploreUrl Chaîne URL relative de l'exploration (chemin d'accès uniquement) à télécharger.
fileFormat Chaîne 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 d'ici dans une boîte de dialogue d'exploration.

Cet événement peut être annulé, ce qui signifie que l'application d'intégration peut renvoyer {cancel: true} et que Looker ne poursuivra pas l'événement déclencheur.

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

explore:ready

Cet événement est créé lorsqu'une exploration commence à charger les données de la requête, que celle-ci 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 Chaîne URL d'exploration relative (chemin d'accès uniquement)
explore.absoluteUrl Chaîne L'URL complète de l'exploration

explore:run:start

Cet événement est créé lorsqu'une exploration commence à charger les données de la requête et que la 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 Chaîne URL d'exploration relative (chemin d'accès uniquement)
explore.absoluteUrl Chaîne L'URL complète de l'exploration

explore:run:complete

Cet événement est créé lorsqu'une exploration a fini 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 Chaîne URL d'exploration relative (chemin d'accès uniquement)
explore.absoluteUrl Chaîne L'URL complète de l'exploration

explore:state:changed

Cet événement est créé lorsque l'URL d'une page d'exploration change à la suite des actions de l'utilisateur.

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

merge:ready

Cet événement est créé lorsqu'une requête de fusion termine le chargement des données de la requête initiale.

{
  type: "merge:ready",
  mergeQuery: {
    id: "123",
    client_id: "abc"
  }
}
Attribut Format Description
mergeQuery.id Chaîne ID de la requête de fusion.
mergeQuery.client_id Chaîne ID client de la requête de fusion.

merge:run:start

Cet événement est créé lorsqu'une requête de fusion commence à s'exécuter.

{
  type: "merge:run:start",
  mergeQuery: {
    id: "123",
    client_id: "abc"
  }
}
Attribut Format Description
mergeQuery.id Chaîne ID de la requête de fusion.
mergeQuery.client_id Chaîne ID client de la requête de fusion.

merge:run:complete

Cet événement est créé lorsqu'une requête de fusion a fini de s'exécuter.

{
  type: "merge:run:complete",
  mergeQuery: {
    id: "123",
    client_id: "abc"
  }
}
Attribut Format Description
mergeQuery.id Chaîne ID de la requête de fusion.
mergeQuery.client_id Chaîne ID client de la requête de fusion.

merge:run:fail

Cet événement est créé lorsqu'une requête de fusion ne s'exécute pas et renvoie une erreur.

{
  type: "merge:run:fail",
  mergeQuery: {
    id: "123",
    client_id: "abc"
  },
  error: "Execution timeout"
}
Attribut Format Description
mergeQuery.id Chaîne ID de la requête de fusion.
mergeQuery.client_id Chaîne ID client de la requête de fusion.
error Chaîne Message d'erreur renvoyé lorsque l'exécution de la requête de fusion échoue.

page:changed

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

type: "page:changed",
page: {
  type: "dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/..."
}
Attribut Format Description
page.type Chaîne Type de page vers laquelle l'utilisateur vient de naviguer, par exemple "dashboard", "look" ou "explore"
page.url Chaîne URL relative (uniquement le chemin d'accès) de la page qui vient d'être consultée
page.absoluteUrl Chaîne URL complète de la page vers laquelle l'utilisateur vient d'être redirigé

page:properties:changed

Cet événement est créé lorsque la hauteur d'un iFrame de tableau de bord change. Elle n'est pas disponible pour les Looks ni 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 de l'iframe du tableau de bord en pixels

session:tokens

Cet événement indique que le client Looker a besoin de jetons pour continuer. Cet événement est créé immédiatement lors de la création de l'iFrame, puis régulièrement pendant toute la durée de la session.

{
  "type": "session:tokens",
  "api_token": "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3NlbGYtc2lnbmVkLmxvb2tlci5jb206OTk5OSIsImV4cCI6MTY3MDYyNjMzMCwic3ViIjoiYVdrNWFGUzM4RnRwNzFFWXhuS3ZaMXdKRmV3ZjB2VzYtTV9zLWtCcHE1dXIiLCJ0b2tlbl90eXBlIjoiYXBpX3Rva2VuIiwicmFuZG9taXplciI6IkxjYnpOeDNTVjNOb3o3UVlqTVJjNmhlMkdodjh1a2UwWUhiZWNRMHVCYm1KIn0.CBv1__QGc_H7bKNe31SHMMQCsc5ya1xOiEv1UDWAyxM",
  "api_token_ttl": 463,
  "navigation_token": "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3NlbGYtc2lnbmVkLmxvb2tlci5jb206OTk5OSIsImV4cCI6MTY3MDYyNjMzMCwic3ViIjoiYVdrNWFGUzM4RnRwNzFFWXhuS3ZaMXdKRmV3ZjB2VzYtTV9zLWtCcHE1dXIiLCJ0b2tlbl90eXBlIjoibmF2aWdhdGlvbl90b2tlbiIsInJhbmRvbWl6ZXIiOiJHVVNlc00tdTRPRDlNdktodFJDU2pEcVFhUkJNeTh5dm42Q1FDUXhuLTNxMiJ9.sWo7LUEI5LeragVmeDamUR7u2myXpFJ0aqK_IIALUqI",
  "navigation_token_ttl": 463,
  "session_reference_token_ttl": 2924
}
Attribut Format Description
authentication_token Chaîne Jeton d'authentification. Inclus lors de la création de l'iFrame. Non inclus dans une réponse à une requête de génération de jetons ou si la session a expiré.
authentication_token_ttl Nombre Durée de vie du jeton d'authentification, en secondes. Inclus lors de la création de l'iFrame. Non inclus dans une réponse à une requête de génération de jetons ou si la session a expiré.
api_token Chaîne Jeton d'API. Non inclus si la session a expiré.
api_token_ttl Nombre Valeur TTL (Time to Live) du jeton d'API en secondes. Non inclus si la session a expiré.
navigation_token Chaîne Jeton de navigation. Non inclus si la session a expiré.
navigation_token_ttl Nombre Durée de vie du jeton de navigation en secondes. Non inclus si la session a expiré.
session_references_token_ttl Nombre Durée de vie de la session en secondes. La valeur est de 0 lorsque la session a expiré. Pour récupérer, l'application d'intégration doit acquérir une nouvelle session.

session:expired

Ajouté dans la version 25.10 Cet événement est déclenché lorsque la session de l'utilisateur intégré expire.

type: "session:expired",

Cet événement n'a pas de charge utile.

session:status

L'événement est généré lorsque l'application Looker intégrée traite les requêtes de jetons de session.

{
  "type": "session:status",
  "session_ttl": 0,
  "expired": true,
  "interrupted": false
}
Attribut Format Description
session_ttl Nombre Durée de vie de la session en secondes.
expired Booléen Lorsque la valeur est true, cela indique que la session a expiré.
interrupted Booléen Lorsque la valeur est true, cela indique qu'une demande de jetons de session n'a pas reçu de réponse. Cela peut indiquer qu'un serveur est temporairement indisponible.
recoverable Booléen Renseigné uniquement lorsque la valeur de "interrupted" est true. Indique si la session peut être récupérée ou non. Une valeur de false signifie probablement qu'il y a un problème avec l'application d'intégration.

env:client:dialog

L'événement est généré lorsqu'une boîte de dialogue est ouverte et qu'elle peut être partiellement hors de vue, comme une boîte de dialogue d'exploration. Cet événement permet à l'application d'hébergement de faire défiler la boîte de dialogue pour l'afficher avec l'action env:host:scroll.

{
  type: "env:client:dialog",
  dialogType: 'drilling',
  placement: 'cover',
  open: true
}
Attribut Format Description
type Chaîne env:client:dialog indique qu'une boîte de dialogue a été ouverte ou fermée. Seule la boîte de dialogue d'exploration est acceptée, mais d'autres boîtes de dialogue pourront être ajoutées à l'avenir. Il est possible que le haut de la boîte de dialogue d'analyse ne soit pas visible, car elle couvre la fenêtre d'affichage de l'iframe. Cet événement permet à l'application hôte de faire défiler le haut de la boîte de dialogue pour l'afficher.
dialogType Chaîne Type de boîte de dialogue. Seule l'ouverture ou la fermeture du type de boîte de dialogue "drilling" déclenche cet événement.
placement Chaîne Emplacement de la boîte de dialogue. Les boîtes de dialogue de type "drilling" utilisent toujours un placement de "cover".
open Booléen Indique si la boîte de dialogue est ouverte ou si l'utilisateur a fait défiler la page.

Modifier l'iFrame

Une fois que vous avez préparé votre iFrame pour la récupération des données, vous pouvez le modifier en procédant comme suit :

  1. Rédigez votre requête au format JSON.
  2. Publiez la requête sur l'élément contentWindow de l'iFrame.

Rédiger votre requête en JSON

Vous pouvez apporter plusieurs modifications à l'iFrame, que vous enverrez au format JSON. Les options disponibles sont décrites dans la section Référence des actions de cette page. N'oubliez pas d'utiliser JSON.stringify pour convertir votre action en JSON, comme ceci :

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

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

Enfin, publiez votre message dans le contentWindow de l'iFrame, comme suit :

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. Sélectionnez une action pour en afficher les détails.

Action Description de l'action
page:load Charge une nouvelle page dans l'iFrame, en remplaçant la page existante.
dashboard:load Charge un nouveau tableau de bord dans l'iFrame, en remplaçant un tableau de bord existant.
dashboard:run Exécute le tableau de bord dans l'iFrame.
dashboard:edit Ajouté dans la version 22.20 Passe le tableau de bord en mode Édition.
dashboard:filters:update Met à jour un filtre de tableau de bord existant dans l'iFrame.
dashboard:options:set Écrit de nouvelles valeurs dans les propriétés de la mise en page et des éléments du tableau de bord.
dashboard:schedule_modal:open Ouvre le planificateur, qui permet aux utilisateurs d'envoyer du contenu Looker vers différentes destinations.
dashboard:stop Arrête un tableau de bord en cours d'exécution ou de rechargement des données.
look:run Exécute le Look dans l'iFrame.
look:filters:update Met à jour un filtre de présentation existant dans l'iFrame.
explore:run Exécute l'exploration dans l'iFrame.
explore:filters:update Met à jour ou supprime un filtre d'exploration existant dans l'iFrame.
merge:run Exécute la requête de fusion dans l'iframe.
session:tokens:request Envoie des jetons en réponse à un événement session:tokens:request.
env:host:scroll Envoie des informations sur la position de défilement actuelle de l'iFrame hôte à l'application Looker intégrée.

Référence de l'action

Voici les actions disponibles que vous pouvez publier dans l'iframe intégrée :

page:load

Utilisez cette action pour accéder à un nouveau contenu dans l'iframe, en remplaçant le contenu existant. Cette action est semblable à l'action dashboard:load, mais elle est plus flexible, car des paramètres supplémentaires peuvent être spécifiés dans l'URL.

Il existe des différences de comportement à prendre en compte avant d'utiliser page:load. dashboard:load empêche la navigation si le tableau de bord actuel est en cours de modification. page:load n'empêche pas la navigation. L'application hôte peut déterminer si un tableau de bord ou un Look est en cours de modification en suivant dashboard:edit:start, look:edit:start et les événements de fin de modification correspondants. C'est pourquoi nous vous recommandons d'utiliser le SDK d'intégration. Le SDK d'intégration suit si un tableau de bord ou une présentation est en cours de modification. La connexion peut donc être interrogée pour voir si le contenu est en cours de modification avant la navigation.

{
    type: 'page:load',
    url: '/embed/dashboard/32?state=california,
    pushHistory: false
}
Attribut Format Description
type Chaîne Le type page:load indique que vous souhaitez charger un nouveau contenu dans l'iFrame.
url Chaîne URL du contenu à charger.
pushHistory Booléen Si la valeur est true, le contenu chargé crée une entrée dans l'historique de navigation du navigateur, et l'utilisateur peut utiliser le bouton "Retour" du navigateur pour revenir au contenu précédent. Si la valeur est false, le contenu actuel est remplacé et la navigation dans le navigateur ne peut pas être utilisée pour y revenir.

dashboard:load

Utilisez cette action pour charger un nouveau tableau de bord dans l'iframe, en remplaçant un tableau de bord existant. Le nouveau tableau de bord commencera à exécuter des requêtes comme si une nouvelle page de tableau de bord avait été ouverte.

{
  type: "dashboard:load",
  id: "101",
  pushHistory: false
}
Attribut Format Description
type Chaîne Le type dashboard:load indique que vous souhaitez charger un nouveau tableau de bord dans l'iFrame.
id Chaîne ID du tableau de bord à charger.
pushHistory Booléen Si la valeur est true, le tableau de bord chargé crée une entrée dans l'historique de navigation du 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. Cette action est identique à celle qui consiste à cliquer sur le bouton Exécuter ou Recharger les données du tableau de bord.

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

dashboard:edit

Ajouté dans la version 22.20 Utilisez cette action pour passer un tableau de bord existant dans l'iFrame en mode Édition. Cette action est identique à la sélection de Modifier le tableau de bord dans le menu du tableau de bord.

{
  type: "dashboard:edit"
}
Attribut Format Description
type Chaîne Le type dashboard:edit indique que vous souhaitez passer le tableau de bord en mode Édition.

dashboard:filters:update

Utilisez cette action pour mettre à jour un filtre de tableau de bord existant dans l'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 Chaîne Le 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 est au 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.

L'intégrateur crée le message et l'envoie à l'iframe, mais le tableau de bord ne répond qu'après l'événement 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 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 définies qui n'ont pas été renvoyées précédemment 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 Chaîne Le type dashboard:options:set indique que vous souhaitez écrire de nouvelles valeurs dans les propriétés de la mise en page et des éléments 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. Ils se présentent sous un format semblable à celui-ci :

  • id: "string",
  • dashboard_id: "string",
  • type: "newspaper",
  • active: boolean,
  • column_width: number,
  • width: number
layouts.dashboard_layout_components Objet Un ou plusieurs objets composant de mise en page du tableau de bord renvoyés par l'attribut options dans l'événement dashboard:run:complete. Ils se présentent sous un format semblable à celui-ci :

  • 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éments du tableau de bord renvoyés par l'attribut options dans l'événement dashboard:run:complete. Ils se présentent sous un format semblable à celui-ci :

id: {

  title: "string",

  title_hidden: boolean,

  vis_config: {

    type: "string", title: "string"

  }

}

dashboard:schedule_modal:open

Utilisez cette action pour ouvrir le planificateur, qui permet aux utilisateurs de diffuser du contenu Looker vers différentes destinations.

{
  type: "dashboard:schedule_modal:open"
}
Attribut Format Description
type Chaîne Le type dashboard:schedule_modal:open indique que vous souhaitez ouvrir la boîte de dialogue Planifier.

dashboard:stop

Utilisez cette action pour arrêter un tableau de bord en cours d'exécution ou de rechargement des données. Cette action équivaut à cliquer sur le bouton Annuler du tableau de bord. Un tableau de bord arrêté à l'aide de dashboard:stop envoie un événement dashboard:run:complete avec status: défini sur "stopped".

{
  type: "dashboard:stop"
}
Attribut Format Description
type Chaîne Le 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 Look est basé dans l'iframe. Cette action est semblable à un clic sur le bouton Exécuter du Look, à la différence que look:run interroge toujours directement la base de données et ne récupère pas les données du cache Looker.

{
  type: "look:run"
}
Attribut Format Description
type Chaîne Le type look:run indique que vous souhaitez exécuter le Look.

look:filters:update

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

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

explore:run

Utilisez cette action pour exécuter l'exploration dans l'iFrame. Cette action est semblable à un clic sur le bouton Exécuter de l'exploration, à la différence que explore:run interroge toujours directement la base de données et ne récupère pas les données du cache Looker.

{
  type: "explore:run"
}
Attribut Format Description
type Chaîne Le type explore:run indique que vous souhaitez exécuter l'exploration.

explore:filters:update

Utilisez cette action pour mettre à jour ou supprimer un filtre d'exploration existant dans l'iframe. Si vous incluez un nouveau filtre qui fait référence à un champ valide, il sera ajouté à l'exploration.

{
  type: "explore:filters:update",
  filters: {
    "orders.created_at": "90 days",
    "orders.status": "complete"
  }
  deleteFilters:  ["products.department"]
}
Attribut Format Description
type Chaîne Le 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'exploration. Si filters inclut un filtre qui n'existe pas dans l'exploration, mais qui fait référence à un champ valide, ce filtre sera ajouté à l'exploration. Cet objet est au format {"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...}.
deleteFilters Tableau Filtres existants que vous souhaitez supprimer de l'exploration. Le tableau est au format suivant : ["view_name.field_name_1", "view_name.field_name_2", ...]

merge:run

Utilisez cette action pour exécuter la requête de fusion dans l'iFrame.

{
  type: "merge:run"
}
Attribut Format Description
type Chaîne L'utilisation du type merge:run indique que vous souhaitez exécuter la requête de fusion.

session:tokens:request

Utilisez cette action pour envoyer des jetons en réponse à une requête session:tokens:request.

{
  type: "session:tokens:request",
}
Attribut Format Description
type Chaîne Le type session:tokens:request indique que vous souhaitez envoyer des jetons en réponse à un événement session:tokens:request.

env:host:scroll

Utilisez cette action pour envoyer des informations sur la position de défilement actuelle de l'iframe hôte à l'application Looker intégrée.

{
  type: "env:host:scroll",
  offsetTop: 10,
  offsetLeft: 10,
  scrollX: 5,
  scrollY: 5
}
Attribut Format Description
type Chaîne Le type env:host:scroll indique que vous souhaitez envoyer des informations sur la position de défilement actuelle de l'iframe hôte à l'application Looker intégrée.
offsetTop Nombre Décalage supérieur de l'iFrame.
offsetLeft Nombre Décalage à gauche de l'iframe.
scrollX Nombre Position scrollX de l'hôte de l'application.
scrollY Nombre Position scrollY de l'hôte de l'application.