기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
3단계: Q 검색 창 URL 포함
내장된 QuickSight Q 검색창은 클래식한 QuickSight Q&A 경험을 제공합니다. QuickSight Amazon Q Business와 통합하여 새로운 제너레이티브 Q&A 환경을 시작합니다. 개발자는 새로운 제너레이티브 Q&A 환경을 사용하는 것이 좋습니다. 내장된 제너레이티브 Q&A 환경에 대한 자세한 내용은 을 참조하십시오. Amazon Q를 QuickSight 제너레이티브 Q&A 경험에 포함시키세요
다음 섹션에서는 3단계의 Q 검색 창 URL을 웹사이트 또는 애플리케이션 페이지에 포함하는 방법을 알아볼 수 있습니다. Amazon QuickSight 임베딩 SDK () JavaScript 를 사용하여 이 작업을 수행할 수 있습니다. SDK를 사용하여 다음 작업을 수행할 수 있습니다.
앱에 포함할 수 있는 URL을 생성하러면, GenerateEmbedUrlForRegisteredUser API 작업을 직접 호출하세요. 이 URL은 5분 동안 유효하며, 결과 세션은 10시간까지 유효합니다. 이 API 작업은 URL에 single-sign on 세션을 허용하는 auth_code 값을 제공합니다.
다음은 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/q/search...",
"RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
}
QuickSight임베딩 SDK를 사용하거나 이 URL을 iframe에 추가하여 Q 검색 창을 웹페이지에 삽입하십시오. 고정된 높이와 너비 숫자 (픽셀 단위) 를 설정하면 이 숫자를 QuickSight 사용하며 창 크기가 조정되어도 시각적 효과가 변경되지 않습니다. 높이와 너비를 상대적인 백분율로 설정하면 창 크기가 변경됨에 따라 수정되는 반응형 레이아웃을 QuickSight 제공합니다.
이렇게 하려면 내장된 Q 검색 창을 호스팅할 도메인이 QuickSight 구독이 승인된 도메인 목록인 허용 목록에 있는지 확인하세요. 이 요건은 임베디드 대시보드에서 미승인 도메인을 제외함으로써 데이터를 보호합니다. 임베디드 Q 검색 창의 도메인 추가에 대한 자세한 내용은 도메인 및 임베딩 관리 단원을 참조하세요.
QuickSight Embedding SDK를 사용하면 페이지에 있는 Q 검색 막대의 크기가 상태에 따라 동적으로 조정됩니다. QuickSight Embedding SDK를 사용하면 Q 검색창 내의 매개변수를 제어하고 페이지 로드 완료 및 오류와 관련된 콜백을 받을 수도 있습니다.
다음 예제는 생성된 URL을 사용하는 방법을 보여 줍니다. 이 코드는 앱 서버에서 생성됩니다.
- SDK 2.0
-
<!DOCTYPE html>
<html>
<head>
<title>Q Search Bar 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 embedQSearchBar = 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 = {
hideTopicName: false,
theme: '<YOUR_THEME_ID>',
allowTopicSelection: true,
onMessage: async (messageEvent, experienceMetadata) => {
switch (messageEvent.eventName) {
case 'Q_SEARCH_OPENED': {
console.log("Do something when Q Search content expanded");
break;
}
case 'Q_SEARCH_CLOSED': {
console.log("Do something when Q Search content collapsed");
break;
}
case 'Q_SEARCH_SIZE_CHANGED': {
console.log("Do something when Q Search size changed");
break;
}
case 'CONTENT_LOADED': {
console.log("Do something when the Q Search is loaded.");
break;
}
case 'ERROR_OCCURRED': {
console.log("Do something when the Q Search fails loading.");
break;
}
}
}
};
const embeddedDashboardExperience = await embeddingContext.embedQSearchBar(frameOptions, contentOptions);
};
</script>
</head>
<body onload="embedQSearchBar()">
<div id="experience-container"></div>
</body>
</html>
- SDK 1.0
-
<!DOCTYPE html>
<html>
<head>
<title>QuickSight Q Search Bar Embedding</title>
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk@1.18.0/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 onOpen() {
console.log("Do something when the Q search bar opens");
}
function onClose() {
console.log("Do something when the Q search bar closes");
}
function embedQSearchBar() {
var containerDiv = document.getElementById("embeddingContainer");
var options = {
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,
width: "1000px",
locale: "en-US",
qSearchBarOptions: {
expandCallback: onOpen,
collapseCallback: onClose,
iconDisabled: false,
topicNameDisabled: false,
themeId: 'bdb844d0-0fe9-4d9d-b520-0fe602d93639',
allowTopicSelection: true
}
};
session = QuickSightEmbedding.embedQSearchBar(options);
session.on("error", onError);
}
function onCountryChange(obj) {
session.setParameters({country: obj.value});
}
</script>
</head>
<body onload="embedQSearchBar()">
<div id="embeddingContainer"></div>
</body>
</html>
이 예제가 제대로 작동하려면 Amazon QuickSight Embedding SDK를 사용하여 웹 사이트에 내장된 대시보드를 로드해야 합니다. JavaScript 이 정보를 얻으려면 다음 중 하나를 수행합니다.
