Paso 3: integración de la URL de la barra de búsqueda de Q - Amazon QuickSight

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Paso 3: integración de la URL de la barra de búsqueda de Q

nota

La barra de búsqueda QuickSight Q integrada proporciona la clásica experiencia de QuickSight preguntas y respuestas. QuickSight se integra con Amazon Q Business para lanzar una nueva experiencia de preguntas y respuestas generativas. Se recomienda a los desarrolladores que utilicen la nueva experiencia de preguntas y respuestas generativas. Para obtener más información sobre la experiencia de preguntas y respuestas generativas integrada, consulte. Incorpore Amazon Q en la experiencia de QuickSight preguntas y respuestas generativas

En la siguiente sección, puede encontrar cómo integrar la URL de la barra de búsqueda Q del paso 3 en su sitio web o página de la aplicación. Esto se hace con el SDK de QuickSight incrustación de Amazon (JavaScript). Con el SDK, puede hacer lo siguiente:

  • Colocar la barra de búsqueda de Q en una página HTML.

  • Pasar los parámetros a la barra de búsqueda de Q.

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

Llame a la operación de la API GenerateEmbedUrlForAnonymousUser para generar 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 hasta 10 horas. La operación de la API proporciona la URL con un valor auth_code que permite una sesión con inicio único.

El siguiente es un ejemplo de respuesta de generate-embed-url-for-anonymous-user.

//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://quicksightdomain/embedding/12345/q/search...",
     "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
}

Inserta la barra de búsqueda Q en tu página web mediante el SDK de QuickSight incrustación o añadiendo esta URL a un iframe. Si estableces un número fijo de altura y anchura (en píxeles), QuickSight úsalos y no cambiará la imagen a medida que cambie el tamaño de la ventana. Si estableces un porcentaje relativo de altura y anchura, QuickSight proporciona un diseño adaptable que se modifica a medida que cambia el tamaño de la ventana.

Para ello, asegúrate de que el dominio en el que se alojará la barra de búsqueda Q integrada esté en la lista de dominios permitidos, la lista de dominios aprobados para tu QuickSight suscripción. Este requisito protege los datos impidiendo que dominios no aprobados alojen barras de búsqueda de Q integradas. Para obtener más información acerca de añadir dominios a la barra de búsqueda de Q, consulte Administración de dominios e integración.

Cuando utilizas el SDK de QuickSight incrustación, la barra de búsqueda Q de tu página cambia de tamaño de forma dinámica en función del estado. Al usar el SDK de QuickSight incrustación, también puedes controlar los parámetros de la barra de búsqueda Q y recibir llamadas en caso de que la página se complete o se produzcan errores.

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

SDK 2.0
<!DOCTYPE html>
<html>

    <head>
        <title>Q Search Bar Embedding Example</title>
        <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.0.0/dist/quicksight-embedding-js-sdk.min.js"></script>
        <script type="text/javascript">
            const embedQSearchBar = async() => {    
                const {
                    createEmbeddingContext,
                } = QuickSightEmbedding;

                const embeddingContext = await createEmbeddingContext({
                    onChange: (changeEvent, metadata) => {
                        console.log('Context received a change', changeEvent, metadata);
                    },
                });

                const frameOptions = {
                    url: "<YOUR_EMBED_URL>", // replace this value with the url generated via embedding API
                    container: '#experience-container',
                    height: "700px",
                    width: "1000px",
                    onChange: (changeEvent, metadata) => {
                        switch (changeEvent.eventName) {
                            case 'FRAME_MOUNTED': {
                                console.log("Do something when the experience frame is mounted.");
                                break;
                            }
                            case 'FRAME_LOADED': {
                                console.log("Do something when the experience frame is loaded.");
                                break;
                            }
                        }
                    },
                };

                const contentOptions = {
                    hideTopicName: false, 
                    theme: '<YOUR_THEME_ID>',
                    allowTopicSelection: true,
                    onMessage: async (messageEvent, experienceMetadata) => {
                        switch (messageEvent.eventName) {
                            case 'Q_SEARCH_OPENED': {
                                console.log("Do something when Q Search content expanded");
                                break;
                            }
                            case 'Q_SEARCH_CLOSED': {
                                console.log("Do something when Q Search content collapsed");
                                break;
                            }
                            case 'Q_SEARCH_SIZE_CHANGED': {
                                console.log("Do something when Q Search size changed");
                                break;
                            }
                            case 'CONTENT_LOADED': {
                                console.log("Do something when the Q Search is loaded.");
                                break;
                            }
                            case 'ERROR_OCCURRED': {
                                console.log("Do something when the Q Search fails loading.");
                                break;
                            }
                        }
                    }
                };
                const embeddedDashboardExperience = await embeddingContext.embedQSearchBar(frameOptions, contentOptions);
            };
        </script>
    </head>

    <body onload="embedQSearchBar()">
        <div id="experience-container"></div>
    </body>

</html>
SDK 1.0
<!DOCTYPE html>
<html>

    <head>
        <title>QuickSight Q Search Bar Embedding</title>
        <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@1.18.0/dist/quicksight-embedding-js-sdk.min.js"></script>
        <script type="text/javascript">
            var session

            function onError(payload) {
                console.log("Do something when the session fails loading");
            }

            function onOpen() {
                console.log("Do something when the Q search bar opens");
            }

            function onClose() {
                console.log("Do something when the Q search bar closes");
            }

            function embedQSearchBar() {
                var containerDiv = document.getElementById("embeddingContainer");
                var options = {
                    url: "https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/dashboardId?isauthcode=true&identityprovider=quicksight&code=authcode", // replace this dummy url with the one generated via embedding API
                    container: containerDiv,
                    width: "1000px",
                    locale: "en-US",
                    qSearchBarOptions: {
                        expandCallback: onOpen,
                        collapseCallback: onClose,
                        iconDisabled: false,
                        topicNameDisabled: false, 
                        themeId: 'bdb844d0-0fe9-4d9d-b520-0fe602d93639',
                        allowTopicSelection: true
                    }
                };
                session = QuickSightEmbedding.embedQSearchBar(options);
                session.on("error", onError);
            }

            function onCountryChange(obj) {
                session.setParameters({country: obj.value});
            }
        </script>
    </head>

    <body onload="embedQSearchBar()">
        <div id="embeddingContainer"></div>
    </body>

</html>

Para que este ejemplo funcione, asegúrate de usar el Amazon QuickSight Embedding SDK para cargar la barra de búsqueda Q incrustada en tu sitio web utilizando JavaScript. Para obtener su copia, siga uno de estos pasos: