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à.
Passaggio 3: incorporare la sessione della console URL
Nella sezione seguente, puoi scoprire come utilizzare Amazon QuickSight Embedding SDK (JavaScript) per incorporare la sessione della console URL dalla fase 3 nella pagina del tuo sito Web o dell'applicazione. ConSDK, puoi fare quanto segue:
-
Posiziona la sessione della console su una HTML pagina.
-
Invia i parametri nella sessione della console.
-
Gestisci stati di errore con messaggi personalizzati per l'applicazione.
Chiama l'GenerateEmbedUrlForRegisteredUserAPIoperazione per generare il URL file che puoi incorporare nella tua app. URLÈ valido per 5 minuti e la sessione risultante è valida per un massimo di 10 ore. L'APIoperazione fornisce una sessione auth_code che URL abilita una sessione 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/start...",
"RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
}
Incorpora questa sessione di console nella tua pagina web utilizzando l' QuickSight incorporamento SDK o aggiungendola in un iframe. URL Se imposti un numero fisso di altezza e larghezza (in pixel), li QuickSight utilizza e non modifica la visualizzazione 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. Utilizzando Amazon QuickSight EmbeddingSDK, puoi anche controllare i parametri all'interno della sessione della console e ricevere callback in termini di completamento del caricamento della pagina ed errori.
Il dominio che ospiterà i pannelli di controllo integrati deve essere presente nell'allowlist, l'elenco dei domini approvati per la tua sottoscrizione Amazon QuickSight . 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 console incorporata, consulta Consenti l'inserimento di domini in fase di esecuzione con QuickSight API.
L'esempio seguente mostra come utilizzare il generato. URL Questo codice viene generato sul server delle applicazioni.
- SDK 2.0
-
<!DOCTYPE html>
<html>
<head>
<title>Console 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 embedSession = 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 = {
onMessage: async (messageEvent, experienceMetadata) => {
switch (messageEvent.eventName) {
case 'ERROR_OCCURRED': {
console.log("Do something when the embedded experience fails loading.");
break;
}
}
}
};
const embeddedConsoleExperience = await embeddingContext.embedConsole(frameOptions, contentOptions);
};
</script>
</head>
<body onload="embedSession()">
<div id="experience-container"></div>
</body>
</html>
- SDK 1.0
-
<!DOCTYPE html>
<html>
<head>
<title>QuickSight Console Embedding</title>
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk@1.0.15/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 embedSession() {
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", // replace this dummy url with the one generated via embedding API
container: containerDiv,
parameters: {
country: "United States"
},
scrolling: "no",
height: "700px",
width: "1000px",
locale: "en-US",
footerPaddingEnabled: true,
defaultEmbeddingVisualType: "TABLE", // this option only applies to QuickSight console embedding and is not used for dashboard embedding
};
session = QuickSightEmbedding.embedSession(options);
session.on("error", onError);
}
function onCountryChange(obj) {
session.setParameters({country: obj.value});
}
</script>
</head>
<body onload="embedSession()">
<span>
<label for="country">Country</label>
<select id="country" name="country" onchange="onCountryChange(this)">
<option value="United States">United States</option>
<option value="Mexico">Mexico</option>
<option value="Canada">Canada</option>
</select>
</span>
<div id="embeddingContainer"></div>
</body>
</html>
Affinché questo esempio funzioni, assicurati di utilizzare Amazon QuickSight Embedding SDK per caricare la sessione della console incorporata sul tuo sito Web utilizzando JavaScript. Per ottenere la tua copia, procedi in uno dei seguenti modi:
