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 le tableau de bord URL
| S'applique à : édition Enterprise |
| Public cible : QuickSight développeurs Amazon |
Dans la section suivante, vous découvrirez comment utiliser QuickSight Embedding SDK (JavaScript) pour intégrer le tableau de bord URL de l'étape 2 dans votre site Web ou votre page d'application. Avec leSDK, vous pouvez effectuer les opérations suivantes :
-
Placez le tableau de bord sur une HTML page.
-
Transmettre les paramètres au tableau de bord.
-
Gérer les états d'erreurs avec des messages personnalisés pour votre application.
Appelez l'GenerateEmbedUrlForAnynymousUserAPIopération pour générer le URL fichier que vous pouvez intégrer dans votre application. Ceci URL est valide pendant 5 minutes et la session qui en résulte est valide pendant 10 heures. L'APIopération fournit URL un auth_code qui active une session d'authentification unique.
Voici un exemple de réponse de generate-embed-url-for-anynymous-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/embed/12345/dashboards/67890..",
"RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
}
Intégrez ce tableau de bord dans votre page Web en utilisant l'QuickSight intégration SDK ou en l'ajoutant 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 l' QuickSightintégrationSDK, vous pouvez également contrôler les paramètres du tableau de bord et recevoir des rappels en termes d'achèvement du chargement des pages et d'erreurs.
Le domaine qui hébergera les tableaux de bord intégrés doit figurer sur la liste des domaines autorisés, c'est-à-dire la liste des domaines approuvés pour votre Amazon QuickSight abonnement. 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 aux tableaux de bord intégrés, consultez la rubrique Autoriser la mise en vente de domaines au moment de l'exécution avec le QuickSight API.
L'exemple suivant montre comment utiliser le généréURL. Ce code réside dans votre serveur d'applications.
- SDK 2.0
-
<!DOCTYPE html>
<html>
<head>
<title>Dashboard 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 embedDashboard = 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>',
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 = {
parameters: [
{
Name: 'country',
Values: [
'United States'
],
},
{
Name: 'states',
Values: [
'California',
'Washington'
]
}
],
locale: "en-US",
sheetOptions: {
initialSheetId: '<YOUR_SHEETID>',
singleSheet: false,
emitSizeChangedEventOnSheetChange: false,
},
toolbarOptions: {
export: false,
undoRedo: false,
reset: false
},
attributionOptions: {
overlayContent: false,
},
onMessage: async (messageEvent, experienceMetadata) => {
switch (messageEvent.eventName) {
case 'CONTENT_LOADED': {
console.log("All visuals are loaded. The title of the document:", messageEvent.message.title);
break;
}
case 'ERROR_OCCURRED': {
console.log("Error occurred while rendering the experience. Error code:", messageEvent.message.errorCode);
break;
}
case 'PARAMETERS_CHANGED': {
console.log("Parameters changed. Changed parameters:", messageEvent.message.changedParameters);
break;
}
case 'SELECTED_SHEET_CHANGED': {
console.log("Selected sheet changed. Selected sheet:", messageEvent.message.selectedSheet);
break;
}
case 'SIZE_CHANGED': {
console.log("Size changed. New dimensions:", messageEvent.message);
break;
}
case 'MODAL_OPENED': {
window.scrollTo({
top: 0 // iframe top position
});
break;
}
}
},
};
const embeddedDashboardExperience = await embeddingContext.embedDashboard(frameOptions, contentOptions);
const selectCountryElement = document.getElementById('country');
selectCountryElement.addEventListener('change', (event) => {
embeddedDashboardExperience.setParameters([
{
Name: 'country',
Values: event.target.value
}
]);
});
};
</script>
</head>
<body onload="embedDashboard()">
<span>
<label for="country">Country</label>
<select id="country" name="country">
<option value="United States">United States</option>
<option value="Mexico">Mexico</option>
<option value="Canada">Canada</option>
</select>
</span>
<div id="experience-container"></div>
</body>
</html>
- SDK 1.0
-
<!DOCTYPE html>
<html>
<head>
<title>Basic Embed</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 dashboard
function onDashboardLoad(payload) {
console.log("Do something when the dashboard is fully loaded.");
}
function onError(payload) {
console.log("Do something when the dashboard fails loading");
}
function embedDashboard() {
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",
container: containerDiv,
parameters: {
country: "United States"
},
scrolling: "no",
height: "700px",
width: "1000px",
locale: "en-US",
footerPaddingEnabled: true
};
dashboard = QuickSightEmbedding.embedDashboard(options);
dashboard.on("error", onError);
dashboard.on("load", onDashboardLoad);
}
function onCountryChange(obj) {
dashboard.setParameters({country: obj.value});
}
</script>
</head>
<body onload="embedDashboard()">
<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 l' QuickSight intégration pour charger le tableau de bord intégré sur votre site Web SDK à l'aide JavaScript de. Pour obtenir votre copie, effectuez l'une des actions suivantes :
