Amazon Q Embedding Developer Sèvis entèlijans biznis

Kontni kache
1 Prekondisyon
2 Detèmine Sijè (yo) Pou Montre
3 Allowlisting Domèn
4 Jenere nouvo sesyon an URL
5 Sèvi ak JS SDK pou entegre
6 QuickSight Q Entegrasyon Chanjman
7 QuickSight Q Style Opsyon
8 Examples
9 Eleman Themeable
10 Depanaj
11 SDK Revizyon Chanjman Log
12 Dokiman / Resous
12.1 Referans
13 Post ki gen rapò

Prekondisyon

Detèmine Sijè (yo) Pou Montre

QuickSight Q embedding sipòte de ka itilizasyon diferan konsènan sijè. Premye a se lè yon sèl sijè yo dwe espesifye, epi sèlman sijè sa a ka mande kont atravè ba rechèch la. Dezyèm lan se eksperyans estanda nan aplikasyon QuickSight la, kote yon itilizatè gen yon lis sijè epi li ka itilize yon deroulan nan ba rechèch la pou chwazi sijè li ta renmen fè rechèch sou li. Anvan ou kontinye, asire w ke ou konnen si ka itilize ou a mande pou yon sèl sijè, oswa yon lis sijè nan eksperyans entegre a.

Allowlisting Domèn

Dapre gid pou entegre QuickSight yo, w ap remake ou bezwen mete lis domèn aplikasyon w lan nan paj "Jere QuickSight". Nòmalman, sa a se tout sa ou bezwen fè, men nan ka a nan Q nou pral bezwen tou ajoute domèn nan QuickSight nan lis la. Sa a sanble etranj, men depi anba kapo a Q ap itilize tou yon iframe, nou bezwen, omwen pou kounye a, pèmèt lis "menm" domèn nan. Domèn QuickSight ou bezwen pou pèmèt lis depann de rejyon w ap itilize a. Pou egzanpample, embedding lè l sèvi avèk rejyon an `us-east-1′, nou an URL to allowlist ta dwe:

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

La URL ta menm bagay la tou pou lòt rejyon yo, ak pati rejyonal respektif (us-east-1) chanje.

Jenere nouvo sesyon an URL

Premye pati nan fondasyon an entegre ki jenere sesyon an URL atravè getSessionEmbed laURL API bezwen yon ti kras modifye. Entègrasyon sesyon QuickSight Q sipòte nan yon "pwen antre" diferan pase eksperyans estanda konsole entegre. Dokimantasyon pou API sa a kapab jwenn isit la. Paramèt pwen antre pou apèl API sa a pral bezwen chanje - nouvo pwen antre a depann de ka itilizasyon sijè a. Pou ka a yon sèl sijè:

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

Pou montre tout sijè nan seleksyon an, nou pral omite topicId la:

entry-point = /q/search

Sa a ta dwe jenere yon sèl-fwa otantifye a URL ki pral rann yon paj ak jis ba rechèch QuickSight Q la.

Sèvi ak JS SDK pou entegre

Avèk la URL, nou ka itilize QuickSight Embedding Javascript SDK yo bay la pou entegre ba rechèch Q nan aplikasyon an. Premyèman, asire w ke ou gen yon kopi SDK la soti nan ekip la QuickSight - sonje depi sa a se yon preview karakteristik epi li pa lage ankò, SDK a pral yon vèsyon diferan pase piblik la disponib SDK sou github. Nou pral vle sèvi ak metòd EmbedSession ki soti nan SDK la ak sesyon ki te pwodwi a URL. Opsyon ki enpòtan pou fonksyon embedSession yo (yo jwenn tou nan types.js nan SDK la):

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

De agiman obligatwa yo isit la se url ak veso. Nou pral sèvi ak la URL pwodwi nan getSessionEmbed laURL Rele API, epi pou veso a sa depann de aplikasyon w lan. Ou pral vle omwen yon senp kòm "kontenè" pou iframe entegre a; bay veso sa a yon id epi pase id la nan agiman SDK yo. Sesyon an default entegre callbacks, errorCallback ak loadCallback fè jan non an ta sijere - si ou
bezwen konpòtman koutim lè paj entegre a chaje, oswa rankontre yon erè, presize lojik sa a nan apèl sa yo. Lè w ap itilize mòd Q embedded ak SDK a, iframe a pral yon wotè fiks (wotè ba rechèch la li menm) ak 100% lajè veso HTML paran an. Sa vle di ke ba rechèch la pral sèlman lajè kòm veso a; ou pral vle asire w ke ba rechèch la gen omwen 600px nan lajè (si yo tradui soti nan view-lajè/pousantage oswa dirèkteman asiyen). Pou manier iframe a, yo ka espesifye paramèt className la tou.

ENPÒTAN:
Yon apèl kle isit la se asire w ke la oswa eleman ke w ap pase kòm eleman html veso a gen yon stil nan 'position: absoli'. Sa a se sa ki pèmèt ba rechèch la elaji kòm yon kouvri olye pou yo deplase sa ki nan app ou a desann.

QuickSight Q Entegrasyon Chanjman

Gen kèk diferans kle ant embedding sesyon / tablodbò ak Q search bar embedding (byenke kounye a Q embedding tou senpleman itilize sesyon embedding). Avèk tablodbò ak sesyon entegre, ankadreman an se jeneralman yon gwosè sèl, san okenn redimensionnement ki baze sou gwosè a nan yon tablodbò oswa fèy analiz. Avèk Q, okòmansman ankadreman an entegre sou paj ou a se relativman ti (nou vle sèlman ba rechèch aktyèl la montre). Lè yo itilize ba rechèch la, ankadreman sa a bezwen elaji (pou montre eleman deroulan adisyonèl tankou rezilta vizyèl la, sijesyon, elatriye). Pou elaji ankadreman sa a san yo pa deplase sa ki nan aplikasyon w lan, nou jis mete li kòm yon superposition sou paj ki egziste deja, menm jan ak fason ba rechèch la fonksyone nan aplikasyon an QuickSight jodi a - gade ekran anba a.

Avèk yon ti kras sou fason Q embedding travay nan tèt ou, an n gade nan QuickSight Q paramèt SDK espesifik yo. Premyèman, nou pral bezwen isQEmbedded yo dwe mete kòm vre. maxHeightForQ se yon agiman si ou vle ki presize pi gwo ankadreman Q la ka sou paj ou a; jan mansyone deja, nou pral bezwen iframe a ak veso li a pou elaji sou sa ki nan paj la. Nou ka itilize agiman maxHeightForQ pou asire ankadreman/resipyan an pa redimansyon pase wotè maksimòm paj ou a epi lakòz yon woulo parèt oswa lòt konpòtman endezirab. Si yo pa mete, ankadreman Q a pral redimansyone a 100vh.

De dènye Q paramèt espesifik yo se callbacks ki rive lè ankadreman an entegre redimensionne. Konpòtman an default se kreye yon eleman seri, epi sèvi ak sa a bay aparans nan background ki pi fonse ke nou wè nan Ekran ki anwo yo soti nan aplikasyon an QuickSight. Sa a se fonksyonalite 'out of the box' ke nou vle bay pou fè entegre Q pi fasil ke posib – sepandan, nou konnen sa a pa pral travay pou chak aplikasyon ke Q bezwen entegre nan. Si ou gen yon bezwen pase sou kont konpòtman sa a, tou senpleman ekri lojik la nan onQBarOpenCallback ak onQBarCloseCallback. Sa a pral anpeche seri a default parèt tou.

QuickSight Q Style Opsyon

Gen kèk opsyon manier / kosmetik ke nou ka itilize yo Customize aparans nan ba rechèch la 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

Si ou ta renmen enfim icon "Q" (nan bò gòch ba rechèch la, sèvi ak paramèt qBarIconDisabled la. Menm jan an tou, pou enfim non sijè a, si w ap montre sèlman yon sijè sengilye nan mòd entegre, sèvi ak qBarTopicNameDisabled la. Remake byen ke pèsonalizasyon kosmetik sa yo disponib sèlman pou ka a lè w ap entegre yon sèl sijè.
Si ou vle mete yon tèm nan ba Q entegre pou fè aparans la ki konsistan avèk aplikasyon w lan, ou ka fè sa lè w kreye yon nouvo tèm nan QuickSight epi pase themeId la nan SDK (ansyen.ample anba a).

Examples

Egzanp sa aamples pral sipoze gen yon veso ki prezan nan DOM ak id `q-bar-container' la.

Anrejistre ak konpòtman default Backdrop (ak chemen q/rechèch)

Ann sipoze veso a gen yon maj nan 75px, kidonk nou pral konte pou sa lè l sèvi avèk paramèt maxHeightForQ la, pou iframe a pa elaji pi gwo pase paj la pèmèt, kreye yon ba woulo liv oswa lòt konpòtman vle.
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);
}

Anrejistre ak yon konpòtman ki andikape (ak chemen q/rechèch)

Pou ansyen sa aample nou pral sipoze veso a se nan tèt paj la pou li ka elaji a 100% san pwoblèm; nou p ap bezwen maxHeightForQ la. Nou pral sèvi ak onQBarOpenCallback ak onQBarCloseCallback kòm fonksyon ki pa gen okenn operasyon pou anpeche seri defo a parèt.

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);
}

Anrejistre ak konpòtman seri koutim (ak chemen q/rechèch)

Nou pral sipoze ankò veso a nan tèt paj la pou li ka elaji a 100% san pwoblèm; nou p ap bezwen maxHeightForQ la. Nou pral sèvi ak onQBarOpenCallback ak onQBarCloseCallback kòm apèl ki manipile kèk lòt eleman backdrop (customBackdropComponent) nan aplikasyon nou an ke nou ta renmen itilize nan plas youn nan default. Remake byen ke apèl backdrop ou yo ta ka pi konplèks, ansyen sa aample se jis pou senplisite.

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);
}

Anrejistre ak konpòtman default Backdrop (ak chemen q/search/topicId)

Nou pral ankò sipoze veso a gen yon maj nan tèt 75px, kidonk nou pral kont pou sa lè l sèvi avèk paramèt maxHeightForQ la, pou iframe a pa elaji pi gwo pase paj la pèmèt, kreye yon ba woulo liv oswa lòt konpòtman vle. Piske n ap itilize ba rechèch entegre ak yon sèl sijè, nou ka itilize personnalisation qBarIconDisabled ak qBarTopicNameDisabled. Ansyen sa aample pral ba nou yon ba rechèch ki pa gen okenn icon oswa non sijè, mete yo dwe pare pou rechèch sou kèlkeswa topicId yo pase nan.

fonksyon embedQSession(embedUrl) {
var containerDiv = document.getElementById("q-bar-kontenè");
containerDiv.innerHTML = “”;
var param = {
url: entegreUrl,
veso: containerDiv,
isQEmbedded: vre,
maxHeightForQ: "kalk (100vh - 75px)",
qBarIconDisabled: fo,
qBarTopicNameDisabled: fo,
};
QuickSightEmbedding.embedSession(param);
}

Entègrasyon ak idantite tèm

Kreye yon nouvo tèm andedan QuickSight si ou pa gen youn. Louvri yon analiz, oswa kreye yon nouvo. Chwazi Tèm sou bò gòch.
Apre sa, chwazi youn nan tèm nan starter ou pito epi klike sou "Sove kòm". Si ou deja gen yon tèm, ou ka sote etap kreyasyon tèm.

Li pral mennen ou nan paj editè tèm, ba li yon non, ajiste koulè a ​​jan ou renmen epi sove li sou tèt dwat.

Kounye a ke ou gen yon tèm, ou bezwen jwenn id nan tèm sa a epi pase li nan SDK. Chwazi "Edit" sou tèm ou te kreye a.

Li pral ankò mennen ou nan paj editè tèm, men fwa sa a, ou pral jwenn id tèm gen nan la url ba. Nan ka sa a "d39c0065bf69-4b3d-927b-9dd3a241f094" se id yon tèm mwen te kreye.

Anfen, ou pase id tèm nan kòm yon paramèt nan SDK a, Lè sa a, ou pral jwenn yon ba Q tematik nan ou app.

fonksyon embedQSession(embedUrl) {
var containerDiv = document.getElementById("q-bar-kontenè");
containerDiv.innerHTML = “”;
var param = {
url: entegreUrl,
veso: containerDiv,
isQEmbedded: vre,
maxHeightForQ: "kalk(100vh - 75px)",
qBarIconDisabled: fo,
qBarTopicNameDisabled: fo,
themeId: “d39c0065-bf69-4b3d-927b-9dd3a241f094”
};
QuickSightEmbedding.embedSession(param);
}

Eleman Themeable

Nou vle montre w ki konpozan andedan Q bar yo ka tematik, epi nou pral pran tèm QuickSight Midnight kòm yon ansyen.ample (ou ka jwenn li nan tèm starter)

Depanaj

'Refize ankadre *.quicksight.aws.amazon.com paske yon zansèt vyole..' Erè

Se erè sa a ki te koze pa pèmèt lis domèn ou a nan jere QuickSight paj admin nan aplikasyon an QuickSight. Asire ou ke ou pèmèt lis tou de domèn rejyonal QuickSight (pou us-east-1, sa a se https://us-east-1.quicksight.aws.amazon.com , pou egzanpample), osi byen ke domèn aplikasyon w lan.

Pa ka wè ba rechèch apre w fin entegre

Si ou kapab jenere avèk siksè epi jwenn aksè ak entegre lyen (san otorizasyon oswa lòt erè evidan), men jwenn yon ekran "vid" san okenn ba rechèch parèt, gen kèk bagay yo tcheke. Youn nan se ke dwe gen omwen yon sijè pataje ak itilizatè a w ap entegre ak. Dezyèmman, ou pral vle asire w ke gen omwen yon sijè ki gen siksè kreye ak nan yon eta 'siksè' apre okòmansman bati. Yon fason fasil pou teste sa a se jis itilize sijè a nan Q nan aplikasyon an QuickSight; si li travay nòmalman, li bon pou itilize nan mòd entegre.

Yon lòt rezon ki fè ba rechèch la ka pa parèt se ke veso a iframe embedding nan ka pa bay ase lajè. Jan yo rele nan dokiman an, ou pral vle asire w ke ba rechèch la bay omwen 600px nan lajè pou li fonksyone nòmalman.

Ba rechèch elaji men chanjman kontni desann

Ba rechèch la ak SDK la te fèt pou elaji anlè nenpòt kontni adisyonèl nan paj la. Si sa a se pa ka a, tanpri asire w ke resipyan ba rechèch la se style ak yon `pozisyon: absoli', ki pral pèmèt li pa deplase sa ki nan paj la desann. Pou egzanpample:

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

SDK Revizyon Chanjman Log

  • V1 (5/15/21): Inisyal koutim 'Q-pare' SDK
    • V1.1 (5/25/21)
      • Chanje wotè iframe yo dwe fiks nan wotè ba rechèch la tèt li, itilizatè pa ka presize nan mòd Q
      • Mete lajè iframe a 100% veso paran an pou mòd Q. Remake byen ke lajè ba rechèch la ka toujou limite pa gwosè veso paran an.

Dokiman / Resous

Amazon Q Embedding Developer Sèvis entèlijans biznis [pdfGid Itilizatè
Q entegre sèvis entèlijans Developer Business, sèvis entèlijans Developer Business, sèvis entèlijans

Referans

Post ki gen rapò

Kite yon kòmantè

Adrès imel ou p ap pibliye. Jaden obligatwa yo make *