Etapa 3: incorporar o URL do painel - Amazon QuickSight

Etapa 3: incorporar o URL do painel

Importante

O Amazon QuickSight tem novas APIs para incorporar analytics: GenerateEmbedUrlForAnonymousUser e GenerateEmbedUrlForRegisteredUser.

Você ainda pode usar as APIs GetDashboardEmbedUrl e GetSessionEmbedUrl para incorporar os painéis e o console do QuickSight, mas elas não contêm as funcionalidades de incorporação mais recentes. Para obter a experiência de incorporação mais recente e atualizada, consulte Incorporação de analytics do QuickSight nas aplicações.

 Aplica-se a: Enterprise Edition 
   Público-alvo: desenvolvedores do Amazon QuickSight 

Na seção apresentada a seguir, você descobrirá como usar o SDK de incorporação do QuickSight (JavaScript) para incorporar o URL do painel da etapa 2 na página do seu site ou da sua aplicação. Com o SDK, você pode fazer o seguinte:

  • Coloque o painel em uma página HTML.

  • Adicione parâmetros ao painel.

  • Corrija os estados de erro com mensagens que são personalizados para seu aplicativo.

Chame a operação de API GetDashboardEmbedUrl para obter o URL que você pode incorporar à aplicação. Este URL é válido por 5 minutos, e a sessão resultante é válida por 10 horas. A operação de API fornece ao URL um auth_code que possibilita uma sessão de logon único.

Veja a seguir uma resposta de exemplo 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"
}

Incorpore este painel em sua página da Web ao usar o SDK de incorporação do QuickSight ou ao adicionar este URL em um iframe. Se você definir um valor fixo para a altura e a largura (em pixels), o QuickSight o utilizará e não alterará seu elemento visual à medida que a janela for redimensionada. Se você definir uma porcentagem relativa para a altura e a largura, o QuickSight fornecerá um layout responsivo que será modificado conforme o tamanho da janela for alterado. Ao usar o SDK de incorporação do QuickSight, você também pode controlar parâmetros no painel e receber retornos de chamada em termos de conclusões e erros de carregamento de páginas.

O exemplo a seguir mostra como usar o URL gerado. Este código reside no seu servidor de aplicações.

<!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 exemplo funcione, certifique-se de usar o SDK de incorporação do Amazon QuickSight para carregar o painel incorporado em seu site usando JavaScript. Para obter sua cópia, siga um destes procedimentos: