Étape 3 : Intégrer l'URL de la barre de recherche Q - Amazon QuickSight

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Étape 3 : Intégrer l'URL de la barre de recherche Q

Note

La barre de recherche QuickSight Q intégrée offre une expérience de QuickSight questions-réponses classique. QuickSight s'intègre à Amazon Q Business pour lancer une nouvelle expérience générative de questions-réponses. Il est recommandé aux développeurs d'utiliser la nouvelle expérience de questions-réponses génératives. Pour plus d'informations sur l'expérience de questions-réponses générative intégrée, consultezIntégrez Amazon Q à une expérience de QuickSight questions-réponses générative.

Dans la section suivante, vous découvrirez comment intégrer l'URL de la barre de recherche Q de l'étape 3 sur votre site web ou sur votre page d'application. Pour ce faire, utilisez le SDK QuickSight d'intégration Amazon ()JavaScript. Le kit SDK vous permet d'effectuer les opérations suivantes :

  • Placer la barre de recherche Q sur une page HTML.

  • Transmettre les paramètres à la barre de recherche Q.

  • Gérer les états d'erreurs avec des messages personnalisés pour votre application.

Pour générer l'URL que vous pouvez intégrer dans votre application, appelez l'opération d'API GenerateEmbedUrlForAnonymousUser. Cette URL est valable pendant 5 minutes et la session qui en résulte est valide jusqu'à 10 heures. L'opération d'API fournit l'URL avec une valeur auth_code qui permet une session à connexion unique.

Voici un exemple de réponse 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"
}

Intégrez la barre de recherche Q à votre page Web à l'aide du SDK QuickSight d'intégration ou en ajoutant cette URL dans un iframe. Si vous définissez une hauteur et une largeur fixes (en pixels), QuickSight utilisez-les et ne modifiez pas votre visuel lors du redimensionnement de la fenêtre. Si vous définissez un pourcentage relatif de hauteur et de largeur, QuickSight fournit une mise en page réactive qui est modifiée en fonction de l'évolution de la taille de votre fenêtre.

Pour ce faire, assurez-vous que le domaine devant héberger la barre de recherche Q intégrée figure dans la liste des domaines autorisés, c'est-à-dire la liste des domaines approuvés pour votre QuickSight abonnement. Cette exigence protège vos données en empêchant les domaines non approuvés d'héberger la barre de recherche Q intégrée. Pour plus d'informations sur l'ajout de domaines pour une barre de recherche Q intégrée, consultez la rubrique Gestion des domaines et des intégrations.

Lorsque vous utilisez le SDK QuickSight d'intégration, la barre de recherche Q de votre page est redimensionnée dynamiquement en fonction de l'état. En utilisant le SDK QuickSight d'intégration, vous pouvez également contrôler les paramètres de la barre de recherche Q et recevoir des rappels en termes de fin de chargement de page et d'erreurs.

L'exemple suivant montre comment utiliser l'URL générée. Ce code est généré sur votre serveur d'applications.

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>

Pour que cet exemple fonctionne, assurez-vous d'utiliser le SDK Amazon QuickSight Embedding pour charger la barre de recherche Q intégrée sur votre site Web à l'aide de. JavaScript Pour obtenir votre copie, effectuez l'une des actions suivantes :