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 session de console
Dans la section suivante, vous découvrirez comment utiliser le SDK Amazon QuickSight Embedding (JavaScript) pour intégrer l'URL de session de console de l'étape 3 à votre site Web ou à la page de votre application. Le kit SDK vous permet d'effectuer les opérations suivantes :
-
Placer la session de console sur une page HTML.
-
Transmettre les paramètres à la session de console.
-
Gérer les états d'erreurs avec des messages personnalisés pour votre application.
Appelez l'opération d'API GenerateEmbedUrlForRegisteredUser pour générer l'URL que vous pouvez intégrer dans votre application. 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 un auth_code qui permet une session à connexion unique.
Voici un exemple de réponse de 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"
}
Intégrez cette session de console à 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. En utilisant le SDK Amazon QuickSight Embedding, vous pouvez également contrôler les paramètres de la session de console et recevoir des rappels en termes de fin de chargement de page et d'erreurs.
Le domaine qui hébergera les tableaux de bord intégrés doit figurer sur la liste d'autorisation, la liste des domaines approuvés pour votre abonnement Amazon QuickSight . Cette exigence protège vos données en empêchant les domaines non approuvés d'héberger des tableaux de bord intégrés. Pour plus d'informations sur l'ajout de domaines pour une console intégrée, consultez Autoriser l'affichage des domaines au moment de l'exécution avec l' QuickSight API.
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>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>
Pour que cet exemple fonctionne, assurez-vous d'utiliser le SDK Amazon QuickSight Embedding pour charger la session de console intégrée sur votre site Web à l'aide de. JavaScript Pour obtenir votre copie, effectuez l'une des actions suivantes :
