Layanan intelijen Bisnis Pangembang Amazon Q Embedding

Prasyarat

• Akun AWS kanthi QuickSight Q diaktifake
• Paling ora siji Topik sing disetel karo QuickSight Q (lan id topik topik kasebut)
• Persiyapan kerangka kerja semat sesi QuickSight nganggo akun AWS
  • Workshop kanggo iki: https://learnquicksight.workshop.aws/en/session-embedding.html
  • Priksa manawa sampeyan ngidini dhaptar domain sampeyan ing kaca Ngatur QuickSight

Nemtokake Topik Kanggo Dituduhake

QuickSight Q embedding ndhukung rong kasus panggunaan sing beda babagan topik. Kapisan yaiku nalika topik siji bakal ditemtokake, lan mung topik kasebut sing bisa ditakoni liwat bar telusuran. Kapindho yaiku pengalaman standar ing aplikasi QuickSight, ing ngendi pangguna duwe dhaptar topik lan bisa nggunakake dropdown ing garis telusuran kanggo milih topik sing pengin ditakoni. Sadurunge nerusake, priksa manawa sampeyan ngerti apa kasus panggunaan sampeyan mbutuhake siji topik, utawa dhaptar topik ing pengalaman sing dipasang.

Domain Allowlisting

Miturut pandhuan semat QuickSight, sampeyan bakal weruh sampeyan kudu ngidini dhaptar domain aplikasi sampeyan ing kaca `Atur QuickSight'. Biasane, iki kabeh sing kudu ditindakake, nanging ing kasus Q, kita uga kudu nambah domain QuickSight menyang dhaptar sing diidini. Iki misale jek aneh, nanging amarga ing hood Q uga nggunakake iframe, kita kudu, paling saiki, kanggo allowlist domain `padha'. Domain QuickSight sing kudu sampeyan ijinake gumantung ing wilayah sing sampeyan gunakake. Kanggo example, embedding nggunakake wilayah `us-east-1′, kita URL kanggo allowlist bakal dadi:

https://us-east-1.quicksight.aws.amazon.com

Ing URL bakal padha kanggo wilayah liyane, karo bagean regional pamilike (us-wétan-1) diganti.

Nggawe sesi anyar URL

Pisanan bagean saka framework embedding sing ngasilake sesi URL liwat getSessionEmbedURL API kudu rada diowahi. Penyematan sesi QuickSight Q didhukung ing `titik entri' sing beda tinimbang pengalaman sing dipasang ing konsol standar. Dokumentasi kanggo API iki bisa ketemu kene. Parameter titik entri kanggo telpon API iki kudu diganti - titik entri anyar gumantung ing kasus panggunaan topik. Kanggo kasus topik tunggal:

entry-point = /q/search/<topicId>

Kanggo nuduhake kabeh topik ing pamilih, kita bakal ngilangi topicId:

entry-point = /q/search

Iki kudu ngasilake siji-wektu bukti asli URL sing bakal nggawe kaca kanthi mung garis telusuran QuickSight Q.

Nggunakake JS SDK kanggo Embed

karo URL, kita bisa nggunakake QuickSight Embedding Javascript SDK sing kasedhiya kanggo nampilake garis telusuran Q ing aplikasi kasebut. Pisanan, priksa manawa sampeyan duwe a salinan SDK saka tim QuickSight - cathetan wiwit iki praview lan durung dirilis, SDK bakal dadi versi sing beda tinimbang sing kasedhiya kanggo umum SDK ing github. Kita bakal pengin nggunakake cara EmbedSession saka SDK karo sesi kui URL. Opsi sing cocog kanggo fungsi embedSession yaiku (uga ditemokake ing types.js ing SDK):

url: url of the session or dashboard to embed container: parent html element or query selector string errorCallback: callback when error occurs loadCallback: callback when visualization data load complete className: optional className to be given to iframe element isQEmbedded: embeddable object is Q search bar flag maxHeightForQ: height for Q to resize to when it expands onQBarOpenCallback: optional callback for Q search bar open onQBarCloseCallback: optional callback for Q search bar close

Loro argumen sing dibutuhake ing kene yaiku url lan wadhah. Kita bakal nggunakake URL digawe saka getSessionEmbedURL Telpon API, lan kanggo wadhah iki gumantung ing aplikasi sampeyan. Sampeyan bakal pengin paling prasaja minangka `wadhah' kanggo iframe sing dipasang; menehi wadhah iki id lan pass ing id ing bantahan SDK. Sesi gawan embedding callbacks, errorCallback lan loadCallback nindakake minangka jeneng bisa suggest - yen sampeyan
mbutuhake prilaku khusus nalika kaca sing ditempelake dimuat, utawa nemoni kesalahan, nemtokake logika kasebut ing callback kasebut. Nalika nggunakake mode Q embedded karo SDK, iframe bakal dhuwur tetep (dhuwur saka search bar dhewe) lan 100% jembaré wadhah HTML induk. Iki tegese bar telusuran mung bakal ambane kaya wadhah; sampeyan pengin nggawe manawa bar telusuran nduweni paling sethithik 600px jembaré (apa diterjemahake saka view- jembaré / persentage utawa langsung diutus). Kanggo nggawe gaya iframe, parameter className uga bisa ditemtokake kanthi opsional.

PENTING:
A callout tombol kene kanggo mesthekake yen ing utawa komponen sing sampeyan lewati minangka unsur html wadhah nduweni gaya `posisi: absolut'. Iki sing ngidini bar telusuran kanggo nggedhekake minangka overlay tinimbang mindhah isi app mudhun.

QuickSight Q Embedding Owah-owahan

Ana sawetara prabédan utama ing antarane sesi / dashboard embedding lan Q search bar embedding (sanajan saiki Q embedding mung nggunakake sesi embedding). Kanthi dashboard lan sesi embedding, pigura umume ukuran siji, ngalangi sawetara ngowahi ukuran adhedhasar ukuran dashboard utawa analisis sheet. Kanthi Q, wiwitane pigura sing ditempelake ing kaca sampeyan relatif cilik (kita mung pengin bar telusuran nyata ditampilake). Nalika garis telusuran digunakake, pigura iki kudu digedhekake (kanggo nuduhake unsur gulung mudhun tambahan kaya asil visual, saran, lsp). Kanggo nggedhekake pigura iki tanpa ngowahi isi aplikasi sampeyan, kita mung nyetel minangka overlay ing kaca sing wis ana, padha karo fungsi bar telusuran ing aplikasi QuickSight saiki - deleng gambar ing ngisor iki.

Kanthi sethitik babagan carane Q embedding dianggo, ayo kang katon ing QuickSight Q paramèter SDK tartamtu. Pisanan, kita kudu isQEmbedded kanggo disetel minangka bener. maxHeightForQ minangka argumen opsional sing nemtokake paling gedhe yen pigura Q bisa ana ing kaca sampeyan; kaya kasebut sadurunge, kita kudu iframe lan iku wadhah kanggo nggedhekake isi kaca. Kita bisa nggunakake argumentasi maxHeightForQ kanggo mesthekake pigura/wadhah ora ngowahi ukurane ngluwihi dhuwur maksimal kaca lan nyebabake gulung katon utawa prilaku sing ora dikarepake. Yen ora disetel, pigura Q bakal ngowahi ukurane dadi 100vh.

Rong parameter spesifik Q pungkasan yaiku callback sing kedadeyan nalika pigura sing dipasang diowahi ukurane. Prilaku standar yaiku nggawe unsur latar mburi, lan gunakake iki kanggo menehi tampilan latar mburi sing luwih peteng sing katon ing gambar ing ndhuwur saka aplikasi QuickSight. Iki minangka fungsi `metu saka kothak' sing pengin diwenehake kanggo nggawe semat Q kanthi gampang - nanging, kita ngerti iki ora bakal bisa digunakake kanggo saben aplikasi sing kudu dilebokake Q. Yen sampeyan perlu override prilaku iki, mung nulis logika menyang onQBarOpenCallback lan onQBarCloseCallback. Iki bakal nyegah latar mburi gawan saka nuduhake munggah uga.

QuickSight Q Pilihan Styling

Ana sawetara opsi gaya/kosmetik sing bisa digunakake kanggo ngatur tampilan garis telusuran Q.

qBarIconDisabled: option to hide the Q search bar
qBarTopicNameDisabled: option to hide the Q search bar topic name
themeId: option to apply Quicksight theme to Q search bar

Yen sampeyan pengin mateni lambang `Q' (ing sisih kiwa garis telusuran, gunakake parameter qBarIconDisabled. Kajaba iku, kanggo mateni jeneng topik, yen sampeyan mung nampilake topik tunggal ing mode embedded, gunakake qBarTopicNameDisabled. Parameter. Elinga yen kustomisasi kosmetik iki mung kasedhiya kanggo kasus nalika sampeyan masang topik siji.
Yen sampeyan pengin tema garis Q sing ditempelake supaya katon konsisten karo aplikasi sampeyan, sampeyan bisa nindakake kanthi nggawe tema anyar ing QuickSight lan pass themeId menyang SDK (mis.amping ngisor).

Examples

Ex ing ngisor ikiamples bakal nganggep ana wadhah sing ana ing DOM kanthi id `q-bar-container'.

Semat Kanthi Prilaku Latar Latar Default (karo jalur q/telusuran)

Ayo dadi nganggep wadhah wis wates ndhuwur 75px, supaya kita bakal akun sing nggunakake parameter maxHeightForQ, supaya iframe ora nggedhekake luwih gedhe tinimbang kaca ngidini, nggawe gulung bar utawa prilaku bayangan liyane.
function embedQSession(embedUrl) {
var containerDiv = document.getElementById("q-bar-container");
containerDiv.innerHTML = "";
var params = {
url: embedUrl, container: containerDiv,
isQEmbedded: true,
maxHeightForQ: "calc(100vh - 75px)",
};
QuickSightEmbedding.embedSession(params);
}

Nambahake Kanthi Prilaku Latar Latar sing Cacat (kanthi jalur q/telusuran)

Kanggo mantan ikiample kita bakal nganggep wadhah ing ndhuwur kaca supaya bisa nggedhekake kanggo 100% tanpa masalah; kita ora butuh maxHeightForQ. Kita bakal nggunakake onQBarOpenCallback lan onQBarCloseCallback minangka fungsi no-op kanggo nyegah latar mburi standar katon.

function embedQSession(embedUrl) { var containerDiv = document.getElementById("q-bar-container"); containerDiv.innerHTML = "";
var params = {
url: embedUrl, container: containerDiv,
isQEmbedded: true,
onQBarOpenCallback: () => {},
onQBarCloseCallback: () => {},
};
QuickSightEmbedding.embedSession(params);
}

Semat Kanthi Prilaku Latar Latar Kustom (karo jalur q/telusuran)

Kita bakal maneh nganggep wadhah kasebut ana ing sisih ndhuwur kaca supaya bisa nggedhekake 100% tanpa masalah; kita ora butuh maxHeightForQ. Kita bakal nggunakake onQBarOpenCallback lan onQBarCloseCallback minangka callbacks kang ngapusi sawetara komponèn latar mburi liyane (customBackdropComponent) ing aplikasi kita sing arep digunakake ing panggonan standar. Elinga callback latar mburi sampeyan bisa uga luwih rumit, mantan ikiample mung kanggo gamblang.

function onQBarOpen() {
customBackdropComponent.style.height = "100%";
}
function onQBarClose() {
customBackdropComponent.style.height = 0;
}
function embedQSession(embedUrl) {
var containerDiv = document.getElementById("q-bar-container");
containerDiv.innerHTML = "";
var params = {
url: embedUrl,
container: containerDiv,
isQEmbedded: true,
onQBarOpenCallback: () => {},
onQBarCloseCallback: () => {},
};
QuickSightEmbedding.embedSession(params);
}

Semat Kanthi Prilaku Latar Default (karo path q/search/topicId)

Kita bakal maneh nganggep wadhah wis ndhuwur wates 75px, supaya kita bakal akun sing nggunakake parameter maxHeightForQ, supaya iframe ora nggedhekake luwih gedhe saka kaca ngidini, nggawe gulung bar utawa prilaku bayangan liyane. Amarga kita nggunakake bar telusuran sing ditempelake kanthi topik siji, kita bisa nggunakake kustomisasi qBarIconDisabled lan qBarTopicNameDisabled. Mantan ikiample bakal menehi kita bar telusuran tanpa lambang utawa jeneng topik, disetel kanggo siap kanggo pitakonan ing endi wae topicId liwati.

fungsi embedQSession(embedUrl) {
var containerDiv = document.getElementById("wadah q-bar");
containerDiv.innerHTML = "";
var params = {
url: nglebokakeUrl,
wadah: containerDiv,
isQEmbedded: bener,
maxHeightForQ: "calc(100vh - 75px)",
qBarIconDisabled: palsu,
qBarTopicNameDisabled: palsu,
};
QuickSightEmbedding.embedSession(params);
}

Semat Kanthi Id Tema

Gawe tema anyar ing QuickSight yen sampeyan ora duwe. Bukak analisis, utawa gawe analisis anyar. Pilih Tema ing sisih kiwa.
Banjur pilih salah sawijining tema wiwitan sing disenengi banjur klik "Simpen minangka". Yen sampeyan wis duwe tema, sampeyan bisa ngliwati langkah nggawe tema.

Sampeyan bakal nggawa sampeyan menyang kaca editor tema, menehi jeneng, atur warna sing dikarepake banjur simpen ing sisih tengen ndhuwur.

Saiki sampeyan duwe tema, sampeyan kudu nemokake id tema kasebut lan ngirim menyang SDK. Pilih "Sunting" ing tema sing digawe.

Sampeyan bakal nggawa maneh menyang kaca editor tema, nanging wektu iki, sampeyan bakal nemokake id tema ana ing url bar. Ing kasus iki "d39c0065bf69-4b3d-927b-9dd3a241f094" minangka id saka tema sing digawe.

Pungkasan, sampeyan ngirim id tema minangka parameter menyang SDK, banjur sampeyan bakal entuk bar Q tema ing aplikasi sampeyan.

fungsi embedQSession(embedUrl) {
var containerDiv = document.getElementById("wadah q-bar");
containerDiv.innerHTML = "";
var params = {
url: nglebokakeUrl,
wadah: containerDiv,
isQEmbedded: bener,
maxHeightForQ: "calc(100vh - 75px)“,
qBarIconDisabled: palsu,
qBarTopicNameDisabled: palsu,
themeID: “d39c0065-bf69-4b3d-927b-9dd3a241f094”
};
QuickSightEmbedding.embedSession(params);
}

Komponen Tema

Kita pengin nuduhake sampeyan komponen endi ing garis Q sing bisa dadi tema, lan kita bakal njupuk tema QuickSight Midnight minangka mantan.ample (sampeyan bisa nemokake ing tema wiwitan)

Ngatasi masalah

'Nolak kanggo pigura *.quicksight.aws.amazon.com amarga leluhur nerak..' Kesalahan

Kesalahan iki disebabake amarga ora ngidini dhaptar domain sampeyan ing ngatur kaca admin QuickSight ing aplikasi QuickSight. Priksa manawa sampeyan ngidini dhaptar domain QuickSight regional (kanggo us-east-1, iki https://us-east-1.quicksight.aws.amazon.com , kanggo example), uga domain aplikasi sampeyan.

Ora Bisa Deleng Panelusuran Sawise Kasil Semat

Yen sampeyan bisa ngasilake lan ngakses lan nglebokake link (tanpa ijin utawa kesalahan liyane sing jelas), nanging entuk layar `kosong' tanpa garis telusuran, ana sawetara sing kudu dipriksa. Salah sijine yaiku paling ora ana siji topik sing dienggo bareng karo pangguna sing sampeyan semat. Kapindho, sampeyan pengin nggawe manawa paling ora ana siji topik sing kasil digawe lan ing negara `sukses' sawise wiwitan dibangun. Cara sing gampang kanggo nyoba iki yaiku mung nggunakake topik ing Q ing aplikasi QuickSight; yen dianggo biasane, iku apik kanggo nggunakake ing mode ditempelake.

Alasan liyane bar telusuran bisa uga ora katon amarga wadah sing ana ing iframe bisa uga ora menehi ambane cukup. Kaya sing kasebut ing dokumentasi, sampeyan pengin nggawe manawa bar telusuran diwenehi paling sethithik 600px kanthi ambane supaya bisa digunakake kanthi normal.

Panelusuran Bar Ngembangake Nanging Ngalih Konten Mudhun

Bar telusuran nganggo SDK dirancang kanggo nggedhekake isi tambahan ing kaca kasebut. Yen ora, priksa manawa wadhah bar telusuran ditata nganggo `posisi: absolut', sing ngidini ora ngowahi isi kaca mudhun. Kanggo example:

<div id="q-search-container" style="position: absolute; width: 100%"></div>

Log Pangowahan Revisi SDK

• V1(5/15/21): SDK `Q-siap' khusus
  • V1.1 (5/25/21)
    • Ngganti dhuwur iframe kanggo didandani menyang dhuwur bar telusuran dhewe, pangguna ora bisa nemtokake ing mode Q
    • Setel ambane iframe kanggo 100% saka wadhah induk kanggo mode Q. Elinga yen ambane garis telusuran isih bisa diwatesi kanthi ukuran wadah induk.

Dokumen / Sumber Daya

Layanan intelijen Bisnis Pangembang Amazon Q Embedding [pdf] Pandhuan pangguna Q Embedding Layanan intelijen Bisnis Pangembang, Layanan intelijen Bisnis Pengembang, layanan intelijen

Referensi

• Manual pangguna