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
| Se aplica a: Enterprise Edition |
| Público objetivo: QuickSight desarrolladores de Amazon |
En la siguiente sección, puede averiguar cómo puede utilizar QuickSight Embedding SDK (JavaScript) para incrustar la imagen URL del paso 2 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 GenerateEmbedUrlForAnonymousUser 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 10 horas. La API operación proporciona un código URL de autorización (autenticación) que habilita una sesión de inicio de sesión único.
El siguiente es un ejemplo de respuesta de generate-embed-url-for-anonymous-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. Al utilizar la función de QuickSight incrustaciónSDK, también puedes controlar los parámetros de la imagen y recibir llamadas en función de si se ha completado la carga visual y si se han producido errores.
El dominio que alojará el elemento visual incrustado debe estar en la lista de dominios permitidos, la lista de dominios aprobados para tu Amazon QuickSight suscripción. 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 generadosURL. Este código reside 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:
