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: integración de la URL de la sesión de consola
En la siguiente sección, encontrará información sobre cómo utilizar el Amazon QuickSight Embedding SDK (JavaScript) para incrustar la URL de la sesión de la consola del paso 3 en su sitio web o página de aplicación. Con el SDK, puede hacer lo siguiente:
-
Coloque la sesión de consola en una página HTML.
-
Pase los parámetros a la sesión de consola.
-
Resolver los estados de error con mensajes que se personalizan en su aplicación.
Llamar a la operación de la API GenerateEmbedUrlForRegisteredUser para generar la dirección URL que puede integrar en la aplicación. Esta URL es válida durante 5 minutos, y la sesión resultante es válida hasta 10 horas. La operación de la API proporciona la URL con un auth_code que permite una sesión con inicio único.
El siguiente es un ejemplo de respuesta de 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/embedding/12345/start...",
"RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
}
Inserte esta sesión de consola en su página web mediante el SDK de QuickSight incrustación o añadiendo esta 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 el SDK de Amazon QuickSight Embedding, también puede controlar los parámetros de la sesión de consola y recibir llamadas en función de la finalización de la carga de la página y de los errores.
El dominio que va a alojar paneles integrados deben estar incluido en la lista de permitidos, la lista de dominios aprobados de la suscripción a Amazon QuickSight . Este requisito protege los datos impidiendo que dominios no aprobados alojen paneles integrados. Para obtener más información sobre cómo agregar dominios para una consola integrada, consulte Permite publicar dominios en tiempo de ejecución con la QuickSight API.
En el siguiente ejemplo, se muestra cómo utilizar la URL generada. Este código se genera en el servidor de aplicaciones.
- SDK 2.0
-
<!DOCTYPE html>
<html>
<head>
<title>Console 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 embedSession = 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 = {
onMessage: async (messageEvent, experienceMetadata) => {
switch (messageEvent.eventName) {
case 'ERROR_OCCURRED': {
console.log("Do something when the embedded experience fails loading.");
break;
}
}
}
};
const embeddedConsoleExperience = await embeddingContext.embedConsole(frameOptions, contentOptions);
};
</script>
</head>
<body onload="embedSession()">
<div id="experience-container"></div>
</body>
</html>
- SDK 1.0
-
<!DOCTYPE html>
<html>
<head>
<title>QuickSight Console Embedding</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 session
function onError(payload) {
console.log("Do something when the session fails loading");
}
function embedSession() {
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", // replace this dummy url with the one generated via embedding API
container: containerDiv,
parameters: {
country: "United States"
},
scrolling: "no",
height: "700px",
width: "1000px",
locale: "en-US",
footerPaddingEnabled: true,
defaultEmbeddingVisualType: "TABLE", // this option only applies to QuickSight console embedding and is not used for dashboard embedding
};
session = QuickSightEmbedding.embedSession(options);
session.on("error", onError);
}
function onCountryChange(obj) {
session.setParameters({country: obj.value});
}
</script>
</head>
<body onload="embedSession()">
<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 el SDK de Amazon QuickSight Embedding para cargar la sesión de la consola integrada en su sitio web utilizando JavaScript. Para obtener su copia, siga uno de estos pasos:
