Fase 3: Incorporamento dell'URL del pannello di controllo - Amazon QuickSight

Fase 3: Incorporamento dell'URL del pannello di controllo

Importante

Amazon QuickSight dispone di nuove operazioni API per l'incorporamento dell'analisi: GenerateEmbedUrlForAnonymousUser e GenerateEmbedUrlForRegisteredUser.

Puoi comunque utilizzare le operazioni API GetDashboardEmbedUrl e GetSessionEmbedUrl per incorporare i pannelli di controllo e la console QuickSight, ma questi non conterranno le funzionalità di incorporamento più recenti. Per l'esperienza di incorporamento più recente e aggiornata, consulta Incorporamento dell'analisi QuickSight nelle applicazioni

Nella sezione seguente, sono riportate le informazioni su come è possibile utilizzare l'SDK di incorporamento Amazon QuickSight (JavaScript) per incorporare l'URL del pannello di controllo dalla fase 3 nel sito Web o nella pagina dell'applicazione. Con il kit SDK, puoi procedere come segue:

  • Posiziona il pannello di controllo in una pagina HTML.

  • Passare i parametri nel pannello di controllo.

  • Gestisci stati di errore con messaggi personalizzati per l'applicazione.

Chiama l'operazione API GetDashboardEmbedUrl per ottenere l'URL da incorporare nell'applicazione. Questo URL è valido per 5 minuti, mentre la sessione risultante è valida per 10 ore. L'operazione API fornisce l'URL con un auth_code che consente una sessione di single sign-on.

Di seguito viene mostrata una risposta di esempio da 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"
}

Incorpora questo pannello di controllo nella pagina Web utilizzando l'SDK di incorporamento QuickSight o aggiungendo questo URL in un iframe. Se imposti un'altezza e una larghezza fisse (in pixel), QuickSight utilizza questi valori e non modifica l'elemento visivo mentre la finestra si ridimensiona. Se imposti un'altezza e una larghezza relative in percentuale, QuickSight fornisce un layout reattivo che si modifica quando la finestra si ridimensiona. L'utilizzo dell'SDK di incorporamento Amazon QuickSight consente anche di controllare i parametri all'interno del pannello di controllo e ricevere callback in termini di caricamento delle pagine ed errori.

Il seguente esempio illustra come utilizzare l'URL generato. Questo codice viene generato sul server delle applicazioni.

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

Affinché questo esempio funzioni, assicurati di utilizzare l'SDK di incorporamento Amazon QuickSight per caricare il pannello di controllo incorporato sul tuo sito Web utilizzando JavaScript. Per ottenere la tua copia, procedi in uno dei seguenti modi: