Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.
Paso 3: incrusta lo visual URL
En la siguiente sección, puede averiguar cómo puede utilizar Amazon QuickSight Embedding SDK (JavaScript) para incrustar la imagen URL del paso 3 en su sitio web o página de aplicación. Con elSDK, puede hacer lo siguiente:
-
Coloque el elemento visual en una HTML página.
-
Pase los parámetros al elemento visual.
-
Resolver los estados de error con mensajes que se personalizan en su aplicación.
Llama a la GenerateEmbedUrlForRegisteredUser API operación para generar lo URL que puedas incrustar en tu aplicación. Esto URL es válido durante 5 minutos y la sesión resultante es válida durante un máximo de 10 horas. La API operación URL proporciona una auth_code que permite una sesión de inicio de sesión único.
El siguiente es un ejemplo de respuesta de generate-embed-url-for-registered-user. El quicksightdomain
//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/sheets/12345/visuals/67890...",
"RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
}
Inserta esta imagen en tu página web mediante la QuickSight incrustación SDK o agregándola URL a un iframe. Si estableces un número fijo de altura y anchura (en píxeles), QuickSight úsalos y no cambiará la imagen a medida que cambie el tamaño de la ventana. Si estableces un porcentaje relativo de altura y anchura, QuickSight proporciona un diseño adaptable que se modifica a medida que cambia el tamaño de la ventana. Con Amazon QuickSight EmbeddingSDK, también puedes controlar los parámetros visuales y recibir llamadas en función de la finalización de la carga de la página y de los errores.
El dominio que alojará las imágenes y los paneles incrustados debe estar en la lista de dominios permitidos, es decir, los dominios aprobados para su suscripción. Amazon QuickSight Este requisito protege los datos impidiendo que dominios no aprobados alojen elementos visuales y paneles integrados. Para obtener más información acerca de añadir dominios a los paneles y elementos visuales integrados, consulte Permita enumerar dominios en tiempo de ejecución con la QuickSight API.
En el siguiente ejemplo, se muestra cómo utilizar los generados. URL Este código se genera en el servidor de aplicaciones.
- SDK 2.0
-
<!DOCTYPE html>
<html>
<head>
<title>Visual 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 embedVisual = 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 = {
parameters: [
{
Name: 'country',
Values: ['United States'],
},
{
Name: 'states',
Values: [
'California',
'Washington'
]
}
],
locale: "en-US",
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 occured while rendering the experience. Error code:", messageEvent.message.errorCode);
break;
}
case 'PARAMETERS_CHANGED': {
console.log("Parameters changed. Changed parameters:", messageEvent.message.changedParameters);
break;
}
case 'SIZE_CHANGED': {
console.log("Size changed. New dimensions:", messageEvent.message);
break;
}
}
},
};
const embeddedVisualExperience = await embeddingContext.embedVisual(frameOptions, contentOptions);
const selectCountryElement = document.getElementById('country');
selectCountryElement.addEventListener('change', (event) => {
embeddedVisualExperience.setParameters([
{
Name: 'country',
Values: event.target.value
}
]);
});
};
</script>
</head>
<body onload="embedVisual()">
<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>Visual Embedding Example</title>
<!-- You can download the latest QuickSight embedding SDK version from https://www.npmjs.com/package/amazon-quicksight-embedding-sdk -->
<!-- Or you can do "npm install amazon-quicksight-embedding-sdk", if you use npm for javascript dependencies -->
<script src="./quicksight-embedding-js-sdk.min.js"></script>
<script type="text/javascript">
let embeddedVisualExperience;
function onVisualLoad(payload) {
console.log("Do something when the visual is fully loaded.");
}
function onError(payload) {
console.log("Do something when the visual fails loading");
}
function embedVisual() {
const containerDiv = document.getElementById("embeddingContainer");
const options = {
url: "<YOUR_EMBED_URL>", // replace this value with the url generated via embedding API
container: containerDiv,
parameters: {
country: "United States"
},
height: "700px",
width: "1000px",
locale: "en-US"
};
embeddedVisualExperience = QuickSightEmbedding.embedVisual(options);
embeddedVisualExperience.on("error", onError);
embeddedVisualExperience.on("load", onVisualLoad);
}
function onCountryChange(obj) {
embeddedVisualExperience.setParameters({country: obj.value});
}
</script>
</head>
<body onload="embedVisual()">
<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>
Para que este ejemplo funcione, asegúrese de utilizar Amazon QuickSight Embedding SDK para cargar la imagen incrustada en su sitio web utilizando JavaScript. Para obtener su copia, siga uno de estos pasos:
