Fase 3: Incorporamento dell'URL della barra di ricerca Q - Amazon QuickSight

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Fase 3: Incorporamento dell'URL della barra di ricerca Q

Nota

La barra di ricerca QuickSight Q incorporata offre la classica esperienza di QuickSight domande e risposte. QuickSight si integra con Amazon Q Business per lanciare una nuova esperienza di domande e risposte generative. Si consiglia agli sviluppatori di utilizzare la nuova esperienza di domande e risposte generative. Per ulteriori informazioni sull'esperienza di domande e risposte generative integrata, consulta. Incorpora Amazon Q nell'esperienza di domande e QuickSight risposte generative

Nella sezione seguente, puoi scoprire come incorporare l'URL della barra di ricerca Q dalla fase 3 nella pagina del sito Web o dell'applicazione. Puoi farlo con Amazon QuickSight embedding SDK ()JavaScript. Con il kit SDK, puoi procedere come segue:

  • Posiziona la barra di ricerca Q su una pagina HTML.

  • Passa i parametri nella barra di ricerca Q.

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

Chiama l'operazione API GenerateEmbedUrlForRegisteredUser per generare 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 valore auth_code che consente una sessione di single sign-on.

Di seguito viene mostrata una risposta di esempio da generate-embed-url-for-registered-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"
}

Incorpora la barra di ricerca Q nella tua pagina web utilizzando l'SDK di QuickSight incorporamento o aggiungendo questo URL in un iframe. Se imposti un numero fisso di altezza e larghezza (in pixel), lo QuickSight utilizza e non modifica la grafica man mano che la finestra si ridimensiona. Se imposti un'altezza e una larghezza percentuali relative, QuickSight fornisce un layout dinamico che viene modificato al variare delle dimensioni della finestra.

Per fare ciò, assicurati che il dominio su cui ospitare la barra di ricerca Q incorporata sia nell'elenco dei domini consentiti, l'elenco dei domini approvati per il tuo QuickSight abbonamento. Questo requisito protegge i tuoi dati impedendo ai domini non approvati di ospitare pannelli di controllo incorporati. Per ulteriori informazioni sull'aggiunta di domini per una barra di ricerca Q incorporata, consulta Gestione dei domini e incorporamento.

Quando utilizzi l' QuickSight Embedding SDK, la barra di ricerca Q sulla tua pagina viene ridimensionata dinamicamente in base allo stato. Utilizzando l' QuickSight Embedding SDK, puoi anche controllare i parametri all'interno della barra di ricerca Q e ricevere richiami in termini di completamento del caricamento della pagina ed errori.

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

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>

Affinché questo esempio funzioni, assicurati di utilizzare Amazon QuickSight Embedding SDK per caricare la dashboard incorporata sul tuo sito Web utilizzando. JavaScript Per ottenere la tua copia, procedi in uno dei seguenti modi: