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
Im folgenden Abschnitt erfahren Sie, wie Sie Amazon QuickSight Embedding SDK (JavaScript) verwenden können, um das Dashboard URL aus Schritt 3 in Ihre Website oder Anwendungsseite einzubetten. 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 GenerateEmbedUrlForRegisteredUser API Vorgang auf, um den zu generierenURL, den Sie in Ihre App einbetten können. Dies URL ist 5 Minuten gültig, und die daraus resultierende Sitzung ist bis zu 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-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/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 du eine feste Zahl für Höhe und Breite (in Pixeln) festlegst, QuickSight verwendet diese und ändert deine visuelle Darstellung nicht, wenn sich die Größe deines 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 von Amazon QuickSight Embedding 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 wird auf Ihrem App-Server generiert.
- 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 Amazon QuickSight Embedding verwenden, SDK um das eingebettete Dashboard auf Ihre Website mit JavaScript zu laden. Führen Sie für den Erhalt dieser Kopie einen der folgenden Schritte aus:
