Étape 3 : Intégrer l'URL du tableau de bord - Amazon QuickSight

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Étape 3 : Intégrer l'URL du tableau de bord

Important

Amazon QuickSight dispose de nouvelles API pour intégrer des analyses : GenerateEmbedUrlForAnonymousUser etGenerateEmbedUrlForRegisteredUser.

Vous pouvez toujours utiliser les GetSessionEmbedUrl API GetDashboardEmbedUrl and pour intégrer les tableaux de bord et la QuickSight console, mais elles ne contiennent pas les dernières fonctionnalités d'intégration. Pour connaître la dernière expérience up-to-date d'intégration, consultezIntégrer des QuickSight outils d'analyse dans vos applications.

 S'applique à : édition Enterprise 
   Public cible : QuickSight développeurs Amazon 

Dans la section suivante, vous découvrirez comment utiliser le SDK d'intégration (JavaScript) pour QuickSight intégrer l'URL du tableau de bord de l'étape 2 dans votre site Web ou votre page d'application. Le kit SDK vous permet d'effectuer les opérations suivantes :

  • Insérer le tableau de bord sur une page HTML.

  • Transmettre les paramètres au tableau de bord.

  • Gérer les états d'erreurs avec des messages personnalisés pour votre application.

Appelez l'opération d'API GetDashboardEmbedUrl pour obtenir l'URL que vous pouvez intégrer dans votre application. Cette URL est valable pendant 5 minutes et la session qui en résulte est valide pendant 10 heures. L'opération d'API fournit l'URL avec un auth_code qui permet une session à connexion unique.

Voici un exemple de réponse de get-dashboard-embed-url.

//The URL returned is over 900 characters. For this example, we've shortened the string for
//readability and added ellipsis to indicate that it's incomplete.
{
     "Status": "200",
     "EmbedUrl": "https: //dashboards.example.com/embed/620bef10822743fab329fb3751187d2d...",
     "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
}

Intégrez ce tableau de bord à votre page Web à l'aide du SDK QuickSight d'intégration ou en ajoutant cette URL dans un iframe. Si vous définissez une hauteur et une largeur fixes (en pixels), QuickSight utilise ces valeurs et ne change pas votre représentation visuelle pendant le redimensionnement de votre fenêtre. Si vous définissez un pourcentage relatif de hauteur et de largeur, QuickSight fournit une mise en page réactive qui est modifiée en fonction de l'évolution de la taille de votre fenêtre. En utilisant le SDK QuickSight d'intégration, vous pouvez également contrôler les paramètres du tableau de bord et recevoir des rappels en termes d'achèvement du chargement des pages et d'erreurs.

L'exemple suivant montre comment utiliser l'URL générée. Ce code réside dans votre serveur d'applications.

<!DOCTYPE html>
<html>

<head>
    <title>Basic Embed</title>
    <!-- You can download the latest QuickSight embedding SDK version from https://www.npmjs.com/package/amazon-quicksight-embedding-sdk -->
    <!-- Or you can do "npm install amazon-quicksight-embedding-sdk", if you use npm for javascript dependencies -->
    <script src="./quicksight-embedding-js-sdk.min.js"></script>
    <script type="text/javascript">
        var dashboard;

        function embedDashboard() {
            var containerDiv = document.getElementById("embeddingContainer");
            var options = {
                // replace this dummy url with the one generated via embedding API
                url: "https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/dashboardId?isauthcode=true&identityprovider=quicksight&code=authcode",  
                container: containerDiv,
                scrolling: "no",
                height: "700px",
                width: "1000px",
                footerPaddingEnabled: true
            };
            dashboard = QuickSightEmbedding.embedDashboard(options);
        }
    </script>
</head>

<body onload="embedDashboard()">
    <div id="embeddingContainer"></div>
</body>

</html>

Pour que cet exemple fonctionne, assurez-vous d'utiliser le SDK Amazon QuickSight Embedding pour charger le tableau de bord intégré sur votre site Web à l'aide de. JavaScript Pour obtenir votre copie, effectuez l'une des actions suivantes :