Schritt 3: Einbetten der Dashboard-URL - Amazon QuickSight

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Schritt 3: Einbetten der Dashboard-URL

Wichtig

Amazon QuickSight verfügt über neue APIs zum Einbetten von Analysen: GenerateEmbedUrlForAnonymousUser und GenerateEmbedUrlForRegisteredUser.

Sie können weiterhin die GetSessionEmbedUrl APIs GetDashboardEmbedUrl und verwenden, um Dashboards und die QuickSight Konsole einzubetten, aber sie enthalten nicht die neuesten Einbettungsfunktionen. Die neueste up-to-date Einbettungserfahrung finden Sie unter Übersicht über das Einbetten.

Im folgenden Abschnitt erfahren Sie, wie Sie das Amazon QuickSight -Einbettungs-SDK (JavaScript) verwenden können, um die Dashboard-URL aus Schritt 3 in Ihre Website oder Anwendungsseite einzubetten. Mit dem SDK können Sie folgende Aktionen ausführen:

  • Platzieren des Dashboards auf einer HTML-Seite.

  • Übergeben von Parameter in das Dashboard.

  • Umgang mit Fehlerstatus mit Meldungen, die an Ihre Anwendung angepasst wurden.

Rufen Sie die GetDashboardEmbedUrl-API-Operation auf, um die URL abzurufen, die Sie in Ihre App einbetten können. Diese URL ist für 5 Minuten gültig, die resultierende Sitzung für 10 Stunden. Die API-Operation stellt die URL mit einem auth_code bereit, der eine Single-Sign-On-Sitzung unterstützt.

Es folgt eine Beispielantwort von 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"
}

Betten Sie dieses Dashboard in Ihre Webseite ein, indem Sie das QuickSight Einbettungs-SDK verwenden oder diese URL zu einem iframe hinzufügen. Wenn Sie eine feste Höhe und Breite (in Pixel) festlegen, verwendet QuickSight diese Werte und ändert die Visualisierung nicht, wenn die Fenstergröße geändert wird. Wenn Sie eine relative prozentuale Höhe und Breite festlegen, stellt ein reaktionsschnelles Layout QuickSight bereit, das geändert wird, wenn sich Ihre Fenstergröße ändert. Mit dem Amazon QuickSight Embedding SDK können Sie auch Parameter im Dashboard steuern und Rückrufe in Bezug auf Abschluss und Fehler beim Laden von Seiten erhalten.

Im folgenden Beispiel wird gezeigt, wie Sie die generierte URL nutzen. Dieser Code wird auf Ihrem App-Server generiert.

<!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>

Damit dieses Beispiel funktioniert, stellen Sie sicher, dass Sie das Amazon QuickSight Embedding SDK verwenden, um das eingebettete Dashboard mit auf Ihre Website zu laden JavaScript. Führen Sie für den Erhalt dieser Kopie einen der folgenden Schritte aus: