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à.
Fase 3: Incorporamento dell'URL del pannello di controllo
Nella sezione seguente, puoi scoprire come utilizzare Amazon QuickSight Embedding SDK (JavaScript) per incorporare l'URL della dashboard dal passaggio 3 nella pagina del tuo sito Web o dell'applicazione. Con il kit SDK, puoi procedere come segue:
-
Posiziona il pannello di controllo in una pagina HTML.
-
Passare i parametri nel pannello di controllo.
-
Gestisci stati di errore con messaggi personalizzati per l'applicazione.
Chiama l'operazione API GenerateEmbedUrlForRegisteredUser per generare l'URL da incorporare nella tua app. Questo URL è valido per 5 minuti, mentre la sessione risultante è valida per 10 ore. L'operazione API fornisce l'URL con un auth_code che consente una sessione di 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/embed/12345/dashboards/67890..",
"RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
}
Incorpora questa dashboard nella tua pagina web utilizzando l'QuickSight Embedding SDK o aggiungendo questo URL in un iframe. Se imposti un numero fisso di altezza e larghezza (in pixel), lo QuickSight utilizza e non modifica la grafica 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 Embedding SDK, puoi anche controllare i parametri all'interno della dashboard e ricevere callback in termini di completamento del caricamento della pagina ed errori.
Il dominio che ospiterà le dashboard integrate deve essere incluso nell'elenco dei domini consentiti, l'elenco dei domini approvati per l'abbonamento. 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 i pannelli di controllo incorporati, consulta Consenti la pubblicazione di domini in fase di esecuzione con l'API QuickSight .
Il seguente esempio illustra come utilizzare l'URL generato. Questo codice viene generato sul server delle applicazioni.
- 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>
Affinché questo esempio funzioni, assicurati di utilizzare Amazon QuickSight Embedding SDK per caricare la dashboard incorporata sul tuo sito Web utilizzando. JavaScript Per ottenere la tua copia, procedi in uno dei seguenti modi:
