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

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

Dans la section suivante, vous découvrirez comment utiliser le kit SDK Amazon QuickSight d'intégration (JavaScript) pour intégrer l'URL du tableau de bord de l'étape 3 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 sur le tableau de bord.

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

Appelez l'opération GetDashboardEmbedUrl d'API 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 active une session d'authentification 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 dans votre page web à l'aide du kit 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 pour la hauteur et la largeur, QuickSight génère une présentation réactive, qui change en fonction du redimensionnement de votre fenêtre. En utilisant le kit SDK Amazon QuickSight d'intégration , vous pouvez également contrôler les paramètres dans le tableau de bord et recevoir des rappels en termes de chargement de page et d'erreurs.

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

<!DOCTYPE html> <html> <head> <title>Basic Embed</title> <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 kit SDK Amazon QuickSight d'intégration 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 :

  • Téléchargez le kit SDK Amazon QuickSight d'intégration à partir de GitHub. Ce référentiel est géré par un groupe de QuickSight développeurs.

  • Téléchargez la dernière version du kit SDK d'intégration à partir de https://www.npmjs.com/package/amazon-quicksight-embedding-sdk.

  • Si vous utilisez npm pour les JavaScript dépendances, téléchargez-le et installez-le en exécutant la commande suivante.

    npm install amazon-quicksight-embedding-sdk