Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.
Schritt 3: Betten Sie das Dashboard ein URL
| Gilt für: Enterprise Edition |
| Zielgruppe: QuickSight Amazon-Entwickler |
Im folgenden Abschnitt erfahren Sie, wie Sie mithilfe von QuickSight Embedding SDK (JavaScript) das Dashboard URL aus Schritt 2 in Ihre Website oder Anwendungsseite einbetten können. Mit dem SDK können Sie Folgendes tun:
-
Platzieren Sie das Dashboard auf einer HTML Seite.
-
Übergeben von Parameter in das Dashboard.
-
Umgang mit Fehlerstatus mit Meldungen, die an Ihre Anwendung angepasst wurden.
Rufen Sie den GenerateEmbedUrlForAnynymousUser API Vorgang auf, um den zu generierenURL, den Sie in Ihre App einbetten können. Dies URL ist 5 Minuten gültig, und die resultierende Sitzung ist 10 Stunden gültig. Der API Vorgang stellt eine URL Verbindung bereitauth_code, die eine Single-Sign-On-Sitzung ermöglicht.
Es folgt eine Beispielantwort von 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"
}
Betten Sie dieses Dashboard mithilfe der QuickSight Einbettung in Ihre Webseite ein SDK oder URL fügen Sie es einem Iframe hinzu. Wenn Sie eine feste Zahl für Höhe und Breite (in Pixeln) festlegen, werden diese QuickSight verwendet und Ihre visuelle Darstellung nicht geändert, wenn sich die Größe Ihres Fensters ändert. Wenn Sie Höhe und Breite in Prozent angeben, QuickSight erhalten Sie ein responsives Layout, das sich an die Fenstergröße anpasst. Mithilfe der QuickSight Einbettung SDK können Sie auch die Parameter im Dashboard steuern und Rückrufe in Bezug auf den Abschluss des Seitenladevorgangs und Fehler erhalten.
Die Domain, die eingebettete Dashboards hosten soll, muss auf der Zulassungsliste stehen, der Liste der zugelassenen Domains für Ihr Abonnement. Amazon QuickSight Diese Voraussetzung schützt die Daten, indem unzulässige Domains daran gehindert werden, eingebettete Dashboards zu hosten. Weitere Informationen zum Hinzufügen von Domains für eingebetteten Dashboards finden Sie unter Erlauben Sie das Auflisten von Domains zur Laufzeit mit dem QuickSight API.
Das folgende Beispiel zeigt, wie Sie die URL generierten verwenden. Dieser Code befindet sich auf Ihrem App-Server.
- 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>
Damit dieses Beispiel funktioniert, stellen Sie sicher, dass Sie das eingebettete Dashboard mithilfe JavaScript von QuickSight Embedding SDK auf Ihre Website laden. Führen Sie für den Erhalt dieser Kopie einen der folgenden Schritte aus:
