Paso 3 integración de la URL del panel - Amazon QuickSight

Paso 3 integración de la URL del panel

importante

Amazon QuickSight tiene nuevas API para integrar análisis: GenerateEmbedUrlForAnonymousUser y GenerateEmbedUrlForRegisteredUser.

Puede seguir utilizando las API de GetDashboardEmbedUrl y GetSessionEmbedUrl para integrar los paneles y la consola de QuickSight, pero no incluyen las funciones de integración más recientes. Para obtener la experiencia de integración más reciente y actualizada, consulte Incrustación de análisis de QuickSight en sus aplicaciones.

 Se aplica a: Enterprise Edition 
   Público al que va dirigido: desarrolladores de Amazon QuickSight 

En la siguiente sección, puede obtener información sobre cómo utilizar el SDK de integración de QuickSight (JavaScript) para integrar la URL del panel del paso 2 en su sitio web o la página de la aplicación. Con el SDK, puede hacer lo siguiente:

  • Coloque el panel en una página HTML.

  • Transferir los parámetros al panel.

  • Resolver los estados de error con mensajes que se personalizan en su aplicación.

Llamar a la operación de la API GetDashboardEmbedUrl para obtener la dirección URL que puede integrar en la aplicación. Esta URL es válida durante 5 minutos, y la sesión resultante es válida durante 10 horas. La operación de la API proporciona la URL con un auth_code que permite una sesión con inicio único.

El siguiente es un ejemplo de respuesta 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"
}

Integre este panel en su página web con el SDK de integración de QuickSight o agregando esta URL a un iframe. Si configura un número fijo para la altura y anchura (en píxeles), QuickSight los usará y el elemento visual no cambiará cuando cambie el tamaño de la ventana. Si configura una altura y anchura relativas en porcentaje, QuickSight ofrece un diseño adaptable que se modifica cuando cambia el tamaño de la ventana. Al usar el SDK de integración de QuickSight también puede controlar los parámetros del panel y recibir devoluciones de llamada en situaciones de finalización de carga de páginas y errores.

En el siguiente ejemplo, se muestra cómo utilizar la URL generada. Este código reside en el servidor de aplicaciones.

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

Para que este ejemplo funcione, asegúrese de utilizar el SDK de integración de Amazon QuickSight para cargar el panel integrado en su sitio web mediante JavaScript. Para obtener su copia, siga uno de estos pasos: