기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
3단계: 대시보드 URL 임베드
| 적용 대상: Enterprise Edition |
| 대상 사용자: Amazon QuickSight 개발자 |
다음 섹션에서는 QuickSight Embedding SDK (JavaScript) 를 사용하여 2단계의 대시보드 URL을 웹 사이트 또는 애플리케이션 페이지에 삽입하는 방법을 확인할 수 있습니다. SDK를 사용하여 다음 작업을 수행할 수 있습니다.
GenerateEmbedUrlForAnynymousUser API 작업을 직접 호출하여 앱에 포함할 수 있는 URL을 생성하세요. 이 URL은 5분 동안 유효하며 결과 세션은 10시간 동안 유효합니다. 이 API 작업은 URL에 single-sign on 세션을 허용하는 auth_code을(를) 제공합니다.
다음은 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"
}
QuickSight 임베딩 SDK를 사용하거나 이 URL을 iframe에 추가하여 이 대시보드를 웹 페이지에 내장할 수 있습니다. 고정된 높이와 너비 숫자 (픽셀 단위) 를 설정하는 경우 이 숫자를 QuickSight 사용하며 창 크기가 조정되어도 비주얼이 변경되지 않습니다. 높이와 너비를 상대적인 백분율로 설정하면 창 크기가 변경됨에 따라 수정되는 반응형 레이아웃을 QuickSight 제공합니다. QuickSightEmbedding SDK를 사용하면 대시보드 내에서 매개변수를 제어하고 페이지 로드 완료 및 오류와 관련된 콜백을 수신할 수도 있습니다.
내장된 대시보드를 호스팅할 도메인은 구독이 승인된 도메인 목록인 허용 목록에 있어야 합니다. Amazon QuickSight 이 요건은 임베디드 대시보드에서 미승인 도메인을 제외함으로써 데이터를 보호합니다. 임베디드 대시보드의 도메인 추가에 관한 자세한 내용은 런타임에 다음을 사용하여 도메인을 나열할 수 있습니다. QuickSight API 단원을 참조하세요.
다음 예제는 생성된 URL을 사용하는 방법을 보여 줍니다. 이 코드는 앱 서버에서 실행됩니다.
- 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>
이 예제가 제대로 작동하려면 QuickSight Embedding SDK를 사용하여 웹 사이트에 내장된 대시보드를 로드해야 합니다. JavaScript 이 정보를 얻으려면 다음 중 하나를 수행합니다.
