Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
Langkah 3: Sematkan URL sesi konsol
Di bagian berikut, Anda dapat mengetahui bagaimana Anda dapat menggunakan Amazon QuickSight Embedding SDK (JavaScript) untuk menyematkan URL sesi konsol dari langkah 3 di situs web atau halaman aplikasi Anda. Dengan SDK, Anda dapat melakukan hal berikut:
-
Tempatkan sesi konsol pada halaman HTML.
-
Masukkan parameter ke sesi konsol.
-
Menangani status kesalahan dengan pesan yang disesuaikan dengan aplikasi Anda.
Panggil operasi GenerateEmbedUrlForRegisteredUser API untuk menghasilkan URL yang dapat disematkan di aplikasi. URL ini berlaku selama 5 menit, dan sesi yang dihasilkan berlaku hingga 10 jam. Operasi API menyediakan URL dengan sebuah auth_code yang memungkinkan sesi masuk tunggal.
Berikut ini menunjukkan contoh respons darigenerate-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"
}
Sematkan sesi konsol ini di halaman web Anda dengan menggunakan QuickSight Embedding SDK atau dengan menambahkan URL ini ke dalam iframe. Jika Anda menetapkan nomor tinggi dan lebar tetap (dalam piksel), QuickSight gunakan itu dan tidak mengubah visual Anda saat jendela Anda mengubah ukuran. Jika Anda menetapkan tinggi dan lebar persen relatif, QuickSight berikan tata letak responsif yang dimodifikasi saat ukuran jendela Anda berubah. Dengan menggunakan Amazon QuickSight Embedding SDK, Anda juga dapat mengontrol parameter dalam sesi konsol dan menerima callback dalam hal penyelesaian dan kesalahan pemuatan halaman.
Domain yang akan menjadi tuan rumah dasbor tertanam harus ada di daftar izinkan, daftar domain yang disetujui untuk langganan Anda Amazon QuickSight . Persyaratan ini melindungi data Anda dengan menjaga domain yang tidak disetujui dari hosting dasbor tertanam. Untuk informasi selengkapnya tentang menambahkan domain untuk konsol yang disematkan, lihatIzinkan daftar domain saat runtime dengan API QuickSight .
Contoh berikut menunjukkan cara menggunakan URL yang dihasilkan. Kode ini dibuat di server aplikasi Anda.
- 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>
Agar contoh ini berfungsi, pastikan untuk menggunakan Amazon QuickSight Embedding SDK untuk memuat sesi konsol yang disematkan di situs web Anda. JavaScript Untuk mendapatkan salinan Anda, lakukan salah satu hal berikut:
