As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.
Etapa 3: incorporar o painel URL
| Aplica-se a: Enterprise Edition |
| Público-alvo: QuickSight desenvolvedores da Amazon |
Na seção a seguir, você pode descobrir como usar o QuickSight Embedding SDK (JavaScript) para incorporar o painel a URL partir da etapa 2 em seu site ou página do aplicativo. Com oSDK, você pode fazer o seguinte:
-
Coloque o painel em uma HTML página.
-
Adicione parâmetros ao painel.
-
Corrija os estados de erro com mensagens que são personalizados para seu aplicativo.
Chame a GenerateEmbedUrlForAnynymousUser API operação para gerar o URL que você pode incorporar ao seu aplicativo. Isso URL é válido por 5 minutos e a sessão resultante é válida por 10 horas. A API operação URL fornece um auth_code que permite uma sessão de login único.
Veja a seguir uma resposta de exemplo de generate-embed-url-for-anynymous-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"
}
Incorpore esse painel em sua página da web usando a QuickSight Incorporação SDK ou adicionando-o a um URL iframe. Se você definir um número fixo de altura e largura (em pixels), use-os QuickSight e não altere seu visual à medida que a janela é redimensionada. Se você definir uma porcentagem relativa de altura e largura, QuickSight fornece um layout responsivo que é modificado à medida que o tamanho da janela muda. Ao usar a QuickSight incorporaçãoSDK, você também pode controlar os parâmetros no painel e receber retornos de chamada em termos de conclusão e erros no carregamento da página.
O domínio que hospedará painéis incorporados deve estar na lista de permissões, a lista de domínios aprovados para sua Amazon QuickSight assinatura. Esse requisito protege seus dados, impedindo que domínios não aprovados hospedem painéis incorporados. Para obter mais informações sobre como adicionar domínios para painéis incorporados, consulte Permitir listar domínios em tempo de execução com o QuickSight API.
O exemplo a seguir mostra como usar o geradoURL. Este código reside no seu servidor de aplicações.
- 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>
Para que este exemplo funcione, certifique-se de usar a QuickSight Incorporação SDK para carregar o painel incorporado em seu site usando JavaScript. Para obter sua cópia, siga um destes procedimentos:
