ആമസോൺ ക്യൂ എംബഡിംഗ് ഡെവലപ്പർ ബിസിനസ് ഇന്റലിജൻസ് സേവന ഉപയോക്തൃ ഗൈഡ്

QuickSight Q ഉപയോഗിച്ച് കുറഞ്ഞത് ഒരു വിഷയമെങ്കിലും സജ്ജീകരിച്ചു (ആ വിഷയത്തിന്റെ വിഷയ ഐഡി)
AWS അക്കൗണ്ടിനൊപ്പം QuickSight സെഷൻ ഉൾച്ചേർക്കൽ ഫ്രെയിംവർക്ക് സജ്ജീകരണം
- ഇതിനായുള്ള ശിൽപശാല: https://learnquicksight.workshop.aws/en/session-embedding.html
- ക്വിക്ക്‌സൈറ്റ് നിയന്ത്രിക്കുക പേജിൽ നിങ്ങളുടെ ഡൊമെയ്ൻ ലിസ്റ്റ് അനുവദിക്കുന്നത് ഉറപ്പാക്കുക

കാണിക്കേണ്ട വിഷയം(കൾ) നിർണ്ണയിക്കുന്നു

QuickSight Q ഉൾച്ചേർക്കൽ വിഷയങ്ങളുമായി ബന്ധപ്പെട്ട് രണ്ട് വ്യത്യസ്ത ഉപയോഗ കേസുകളെ പിന്തുണയ്ക്കുന്നു. ആദ്യത്തേത്, ഒരൊറ്റ വിഷയം എപ്പോഴാണ് വ്യക്തമാക്കേണ്ടത്, ആ വിഷയം മാത്രമേ തിരയൽ ബാർ വഴി അന്വേഷിക്കാൻ കഴിയൂ. രണ്ടാമത്തേത് QuickSight ആപ്ലിക്കേഷനിലെ സ്റ്റാൻഡേർഡ് അനുഭവമാണ്, അവിടെ ഒരു ഉപയോക്താവിന് വിഷയങ്ങളുടെ ഒരു ലിസ്റ്റ് ഉണ്ട് കൂടാതെ അവർ അന്വേഷിക്കാൻ ആഗ്രഹിക്കുന്ന വിഷയം തിരഞ്ഞെടുക്കുന്നതിന് തിരയൽ ബാറിലെ ഒരു ഡ്രോപ്പ്ഡൗൺ ഉപയോഗിക്കാം. തുടരുന്നതിന് മുമ്പ്, നിങ്ങളുടെ ഉപയോഗ കേസിന് ഒരു വിഷയം ആവശ്യമാണോ അതോ ഉൾച്ചേർത്ത അനുഭവത്തിലെ വിഷയങ്ങളുടെ ലിസ്റ്റ് ആവശ്യമാണോ എന്ന് നിങ്ങൾക്ക് അറിയാമെന്ന് ഉറപ്പാക്കുക.

ഡൊമെയ്ൻ അനുവദിക്കൽ

QuickSight ഉൾച്ചേർക്കൽ ഗൈഡുകൾ പ്രകാരം, `ക്വിക്ക്‌സൈറ്റ് നിയന്ത്രിക്കുക' പേജിൽ നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ ഡൊമെയ്‌ൻ അനുവദിക്കേണ്ടതുണ്ടെന്ന് നിങ്ങൾ ശ്രദ്ധിക്കും. സാധാരണഗതിയിൽ, നിങ്ങൾ ചെയ്യേണ്ടത് ഇത്രമാത്രമാണ്, എന്നാൽ Q-യുടെ കാര്യത്തിൽ, അനുവദനീയമായ ലിസ്റ്റിലേക്ക് ഞങ്ങൾ QuickSight ഡൊമെയ്‌നും ചേർക്കേണ്ടതുണ്ട്. ഇത് വിചിത്രമായി തോന്നുന്നു, എന്നാൽ ഹൂഡിന് കീഴിൽ Q ഒരു iframe ഉപയോഗിക്കുന്നതിനാൽ, ഞങ്ങൾക്ക് ഇപ്പോഴെങ്കിലും `അതേ' ഡൊമെയ്‌ൻ അനുവദിക്കേണ്ടതുണ്ട്. നിങ്ങൾക്ക് അനുവദിക്കേണ്ട QuickSight ഡൊമെയ്‌ൻ നിങ്ങൾ ഉപയോഗിക്കുന്ന പ്രദേശത്തെ ആശ്രയിച്ചിരിക്കുന്നു. ഉദാample, `us-east-1′ മേഖല ഉപയോഗിച്ച് ഉൾച്ചേർക്കൽ, ഞങ്ങളുടെ URL അനുവദനീയമായ ലിസ്റ്റ് ഇതായിരിക്കും:

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

ദി URL അതാത് മേഖലാ ഭാഗം (us-east-1) മാറ്റി മറ്റ് പ്രദേശങ്ങൾക്കും സമാനമായിരിക്കും.

പുതിയ സെഷൻ സൃഷ്ടിക്കുന്നു URL

സെഷൻ സൃഷ്ടിക്കുന്ന എംബെഡിംഗ് ചട്ടക്കൂടിന്റെ ഭാഗം ആദ്യം URL getSessionEmbed വഴിURL API ചെറുതായി പരിഷ്‌ക്കരിക്കേണ്ടതുണ്ട്. QuickSight Q സെഷൻ ഉൾച്ചേർക്കൽ സാധാരണ കൺസോൾ ഉൾച്ചേർത്ത അനുഭവത്തേക്കാൾ വ്യത്യസ്തമായ ഒരു `എൻട്രി പോയിന്റിൽ' പിന്തുണയ്ക്കുന്നു. ഈ API-യുടെ ഡോക്യുമെന്റേഷൻ ആകാം ഇവിടെ കണ്ടെത്തി. ഈ API കോളിനുള്ള എൻട്രി-പോയിന്റ് പാരാമീറ്റർ മാറ്റേണ്ടതുണ്ട് - പുതിയ എൻട്രി പോയിന്റ് വിഷയം(ങ്ങളുടെ) ഉപയോഗ കേസിനെ ആശ്രയിച്ചിരിക്കുന്നു. ഒരൊറ്റ വിഷയ കേസിന്:

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

സെലക്ടറിൽ എല്ലാ വിഷയങ്ങളും കാണിക്കാൻ, ഞങ്ങൾ topicId ഒഴിവാക്കും:

entry-point = /q/search

ഇത് ഒറ്റത്തവണ ആധികാരികത ജനറേറ്റ് ചെയ്യണം URL അത് QuickSight Q തിരയൽ ബാർ ഉപയോഗിച്ച് ഒരു പേജ് റെൻഡർ ചെയ്യും.

എംബഡ് ചെയ്യാൻ JS SDK ഉപയോഗിക്കുന്നു

കൂടെ URL, ആപ്ലിക്കേഷനിൽ Q തിരയൽ ബാർ ഉൾച്ചേർക്കുന്നതിന്, നൽകിയിരിക്കുന്ന QuickSight എംബഡിംഗ് Javascript SDK ഉപയോഗിക്കാം. ആദ്യം, നിങ്ങൾക്ക് ഒരു ഉണ്ടെന്ന് ഉറപ്പാക്കുക SDK യുടെ പകർപ്പ് QuickSight ടീമിൽ നിന്ന് - ഇത് ഒരു മുൻകൂർ ആയതിനാൽ ശ്രദ്ധിക്കുകview ഫീച്ചർ ഇതുവരെ പുറത്തിറക്കിയിട്ടില്ല, പൊതുവിൽ ലഭ്യമായതിൽ നിന്ന് വ്യത്യസ്തമായ പതിപ്പായിരിക്കും SDK ഗിത്തബിൽ SDK. ജനറേറ്റ് ചെയ്‌ത സെഷനിൽ SDK-യിൽ നിന്നുള്ള എംബെഡ്‌സെഷൻ രീതി ഉപയോഗിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു URL. embedSession ഫംഗ്‌ഷന്റെ പ്രസക്തമായ ഓപ്‌ഷനുകൾ ഇവയാണ് (SDK-യിലെ type.js-ലും കാണപ്പെടുന്നു):

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

ഇവിടെ ആവശ്യമായ രണ്ട് വാദങ്ങൾ url കണ്ടെയ്നറും. ഞങ്ങൾ ഉപയോഗിക്കും URL getSessionEmbed-ൽ നിന്ന് സൃഷ്ടിച്ചത്URL API കോൾ, കണ്ടെയ്നറിന് ഇത് നിങ്ങളുടെ അപേക്ഷയെ ആശ്രയിച്ചിരിക്കുന്നു. നിങ്ങൾ ഏറ്റവും കുറഞ്ഞത് ഒരു ലളിതമായ ആഗ്രഹിക്കുന്നു ഉൾച്ചേർത്ത iframe-ന്റെ `കണ്ടെയ്നർ' ആയി; ഈ കണ്ടെയ്‌നറിന് ഒരു ഐഡി നൽകുകയും SDK ആർഗ്യുമെന്റുകളിൽ ഐഡി നൽകുകയും ചെയ്യുക. ഡിഫോൾട്ട് സെഷൻ ഉൾച്ചേർക്കുന്ന കോൾബാക്ക്, എറർകോൾബാക്ക്, ലോഡ്കോൾബാക്ക് എന്നിവ പേര് സൂചിപ്പിക്കുന്നത് പോലെ ചെയ്യുന്നു - നിങ്ങളാണെങ്കിൽ
ഉൾച്ചേർത്ത പേജ് ലോഡുചെയ്യുമ്പോഴോ ഒരു പിശക് നേരിടുമ്പോഴോ ഇഷ്‌ടാനുസൃത പെരുമാറ്റം ആവശ്യമാണ്, ഈ കോൾബാക്കുകളിൽ ആ ലോജിക് വ്യക്തമാക്കുക. SDK-യ്‌ക്കൊപ്പം Q ഉൾച്ചേർത്ത മോഡ് ഉപയോഗിക്കുമ്പോൾ, iframe ഒരു നിശ്ചിത ഉയരവും (തിരയൽ ബാറിന്റെ തന്നെ ഉയരം) പാരന്റ് HTML കണ്ടെയ്‌നറിന്റെ 100% വീതിയുമായിരിക്കും. ഇതിനർത്ഥം സെർച്ച് ബാർ കണ്ടെയ്നർ പോലെ വീതിയുള്ളതായിരിക്കും; സെർച്ച് ബാറിന് കുറഞ്ഞത് 600px വീതിയുണ്ടെന്ന് ഉറപ്പാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു (ഇതിൽ നിന്ന് വിവർത്തനം ചെയ്താലും view-വീതി/ശതമാനംtagഇ അല്ലെങ്കിൽ നേരിട്ട് അസൈൻ ചെയ്‌തത്). iframe സ്‌റ്റൈൽ ചെയ്യുന്നതിന്, className പാരാമീറ്റർ ഓപ്‌ഷണലായി വ്യക്തമാക്കാവുന്നതാണ്.

പ്രധാനപ്പെട്ടത്:
ഇവിടെ ഒരു പ്രധാന കോൾഔട്ട് ഉറപ്പാക്കുക എന്നതാണ് അല്ലെങ്കിൽ കണ്ടെയ്‌നറായി നിങ്ങൾ കടന്നുപോകുന്ന ഘടകത്തിന് html ഘടകത്തിന് `സ്ഥാനം: സമ്പൂർണ്ണ' എന്ന ഒരു സ്റ്റൈലിംഗ് ഉണ്ട്. ഇതാണ് നിങ്ങളുടെ ആപ്പിലെ ഉള്ളടക്കങ്ങൾ താഴേക്ക് മാറ്റുന്നതിന് പകരം ഒരു ഓവർലേ ആയി വികസിപ്പിക്കാൻ തിരയൽ ബാറിനെ അനുവദിക്കുന്നത്.

QuickSight Q ഉൾച്ചേർക്കൽ മാറ്റങ്ങൾ

സെഷൻ/ഡാഷ്‌ബോർഡ് ഉൾച്ചേർക്കലും Q സെർച്ച് ബാർ ഉൾച്ചേർക്കലും തമ്മിൽ ചില പ്രധാന വ്യത്യാസങ്ങളുണ്ട് (നിലവിൽ Q ഉൾച്ചേർക്കൽ സെഷൻ ഉൾച്ചേർക്കൽ ഉപയോഗപ്പെടുത്തുന്നുണ്ടെങ്കിലും). ഡാഷ്‌ബോർഡും സെഷൻ ഉൾച്ചേർക്കലും ഉപയോഗിച്ച്, ഒരു ഡാഷ്‌ബോർഡിന്റെയോ വിശകലന ഷീറ്റിന്റെയോ വലുപ്പത്തെ അടിസ്ഥാനമാക്കിയുള്ള ചില വലുപ്പം മാറ്റുന്നത് ഒഴിവാക്കി, ഫ്രെയിം സാധാരണയായി ഒരൊറ്റ വലുപ്പമാണ്. Q ഉപയോഗിച്ച്, തുടക്കത്തിൽ നിങ്ങളുടെ പേജിലെ ഉൾച്ചേർത്ത ഫ്രെയിം താരതമ്യേന ചെറുതാണ് (യഥാർത്ഥ തിരയൽ ബാർ കാണിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു). തിരയൽ ബാർ ഉപയോഗിക്കുമ്പോൾ, ഈ ഫ്രെയിം വികസിപ്പിക്കേണ്ടതുണ്ട് (വിഷ്വൽ ഫലം, നിർദ്ദേശങ്ങൾ മുതലായവ പോലുള്ള അധിക ഡ്രോപ്പ്ഡൗൺ ഘടകങ്ങൾ കാണിക്കുന്നതിന്). നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ ഉള്ളടക്കം മാറ്റാതെ തന്നെ ഈ ഫ്രെയിം വിപുലീകരിക്കാൻ, ക്വിക്‌സൈറ്റ് ആപ്ലിക്കേഷനിൽ സെർച്ച് ബാർ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിന് സമാനമായി നിലവിലുള്ള പേജിന് മുകളിൽ ഒരു ഓവർലേ ആയി ഞങ്ങൾ ഇത് സജ്ജീകരിച്ചിരിക്കുന്നു - ചുവടെയുള്ള സ്ക്രീൻഷോട്ടുകൾ കാണുക.

ക്യു എംബെഡിംഗ് എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിനെ കുറിച്ച് അൽപ്പം കൂടി മനസ്സിൽ വെച്ച്, QuickSight Q നിർദ്ദിഷ്ട SDK പാരാമീറ്ററുകൾ നോക്കാം. ആദ്യം, True ആയി സജ്ജീകരിക്കാൻ isQEmbedded ആവശ്യമാണ്. maxHeightForQ എന്നത് ഒരു ഓപ്‌ഷണൽ ആർഗ്യുമെന്റാണ്, അത് Q ഫ്രെയിം നിങ്ങളുടെ പേജിലുണ്ടാകാവുന്ന ഏറ്റവും വലിയത് വ്യക്തമാക്കുന്നു; മുമ്പ് സൂചിപ്പിച്ചതുപോലെ, പേജിന്റെ ഉള്ളടക്കം വിപുലീകരിക്കാൻ ഞങ്ങൾക്ക് iframe ആവശ്യമുണ്ട്. നിങ്ങളുടെ പേജിന്റെ പരമാവധി ഉയരം മറികടന്ന് ഫ്രെയിം/കണ്ടെയ്‌നർ വലുപ്പം മാറ്റുന്നില്ലെന്നും ഒരു സ്ക്രോൾ ദൃശ്യമാകുന്നതിനോ മറ്റ് അനാവശ്യമായ പെരുമാറ്റത്തിനോ കാരണമാകുന്നില്ലെന്ന് ഉറപ്പാക്കാൻ ഞങ്ങൾക്ക് maxHeightForQ ആർഗ്യുമെന്റ് ഉപയോഗിക്കാം. സജ്ജീകരിച്ചില്ലെങ്കിൽ, Q ഫ്രെയിം 100vh ആയി വലുപ്പം മാറ്റും.

എംബഡഡ് ഫ്രെയിമിന്റെ വലുപ്പം മാറ്റുമ്പോൾ സംഭവിക്കുന്ന കോൾബാക്കുകളാണ് അവസാന രണ്ട് Q നിർദ്ദിഷ്ട പാരാമീറ്ററുകൾ. ഒരു ബാക്ക്‌ഡ്രോപ്പ് ഘടകം സൃഷ്‌ടിക്കുക എന്നതാണ് സ്ഥിരസ്ഥിതി സ്വഭാവം, ക്വിക്ക്‌സൈറ്റ് അപ്ലിക്കേഷനിൽ നിന്നുള്ള മുകളിലെ സ്‌ക്രീൻഷോട്ടുകളിൽ നമ്മൾ കാണുന്ന ഇരുണ്ട പശ്ചാത്തല രൂപം നൽകാൻ ഇത് ഉപയോഗിക്കുക. Q ഉൾച്ചേർക്കൽ കഴിയുന്നത്ര എളുപ്പമാക്കുന്നതിന് ഞങ്ങൾ നൽകാൻ ആഗ്രഹിക്കുന്ന `ഔട്ട് ഓഫ് ദി ബോക്സ്' പ്രവർത്തനമാണിത് - എന്നിരുന്നാലും, Q ഉൾച്ചേർക്കേണ്ട എല്ലാ ആപ്ലിക്കേഷനുകൾക്കും ഇത് പ്രവർത്തിക്കില്ലെന്ന് ഞങ്ങൾക്കറിയാം. നിങ്ങൾക്ക് ആവശ്യമുണ്ടെങ്കിൽ ഈ സ്വഭാവം അസാധുവാക്കുക, onQBarOpenCallback, onQBarCloseCallback എന്നിവയിലേക്ക് യുക്തി എഴുതുക. ഇത് ഡിഫോൾട്ട് ബാക്ക്‌ഡ്രോപ്പ് കാണിക്കുന്നതിൽ നിന്നും തടയും.

QuickSight 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

നിങ്ങൾക്ക് `Q' ഐക്കൺ പ്രവർത്തനരഹിതമാക്കാൻ താൽപ്പര്യമുണ്ടെങ്കിൽ (തിരയൽ ബാറിന്റെ ഇടതുവശത്ത്, qBarIconDisabled പാരാമീറ്റർ ഉപയോഗിക്കുക. അതുപോലെ, വിഷയത്തിന്റെ പേര് പ്രവർത്തനരഹിതമാക്കാൻ, നിങ്ങൾ ഒരു ഏകവചന വിഷയമാണ് എംബഡഡ് മോഡിൽ പ്രദർശിപ്പിക്കുന്നതെങ്കിൽ, qBarTopicNameDisabled ഉപയോഗിക്കുക പാരാമീറ്റർ. നിങ്ങൾ ഒരു വിഷയം ഉൾച്ചേർക്കുമ്പോൾ മാത്രമേ ഈ കോസ്മെറ്റിക് ഇഷ്‌ടാനുസൃതമാക്കലുകൾ ലഭ്യമാകൂ എന്നത് ശ്രദ്ധിക്കുക.
നിങ്ങളുടെ ആപ്ലിക്കേഷനുമായി യോജിച്ച രൂപഭാവം ഉണ്ടാക്കാൻ ഉൾച്ചേർത്ത Q ബാർ തീം ചെയ്യണമെങ്കിൽ, QuickSight-ൽ ഒരു പുതിയ തീം സൃഷ്‌ടിച്ച് നിങ്ങൾക്ക് തീം ഐഡി SDK-ലേക്ക് കൈമാറുക (ഉദാ.ampതാഴെ).

Exampലെസ്

ഇനിപ്പറയുന്ന മുൻampDOM-ൽ `q-bar-container' എന്ന ഐഡി ഉള്ള ഒരു കണ്ടെയ്‌നർ ഉണ്ടെന്ന് ലെസ് അനുമാനിക്കും.

ഡിഫോൾട്ട് ബാക്ക്‌ഡ്രോപ്പ് ബിഹേവിയർ ഉപയോഗിച്ച് എംബഡിംഗ് (ക്യു/സെർച്ച് പാത്ത് ഉപയോഗിച്ച്)

കണ്ടെയ്‌നറിന് 75px-ന്റെ മാർജിൻ ടോപ്പ് ഉണ്ടെന്ന് നമുക്ക് അനുമാനിക്കാം, അതിനാൽ maxHeightForQ പാരാമീറ്റർ ഉപയോഗിച്ച് ഞങ്ങൾ അത് കണക്കാക്കും, അതുവഴി പേജ് അനുവദിക്കുന്നതിനേക്കാൾ വലുതായി iframe വികസിക്കില്ല, ഒരു സ്ക്രോൾ ബാറോ മറ്റ് അനാവശ്യ സ്വഭാവമോ സൃഷ്ടിക്കുന്നു.
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);
}

അപ്രാപ്തമാക്കിയ ബാക്ക്‌ഡ്രോപ്പ് ബിഹേവിയർ (ക്യു/സെർച്ച് പാത്ത് ഉപയോഗിച്ച്) ഉൾച്ചേർക്കൽ

ഇതിനായി മുൻampകണ്ടെയ്നർ പേജിന്റെ മുകളിലാണെന്ന് ഞങ്ങൾ അനുമാനിക്കാം, അതിനാൽ ഇത് പ്രശ്നമില്ലാതെ 100% വരെ വികസിപ്പിക്കാൻ കഴിയും; ഞങ്ങൾക്ക് maxHeightForQ ആവശ്യമില്ല. ഡിഫോൾട്ട് ബാക്ക്‌ഡ്രോപ്പ് ദൃശ്യമാകുന്നത് തടയാൻ ഞങ്ങൾ onQBarOpenCallback, onQBarCloseCallback എന്നിവ നോ-ഓപ് ഫംഗ്‌ഷനുകളായി ഉപയോഗിക്കും.

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

ഇഷ്‌ടാനുസൃത ബാക്ക്‌ഡ്രോപ്പ് പെരുമാറ്റം (ക്യു/സെർച്ച് പാത്ത് ഉപയോഗിച്ച്) ഉൾച്ചേർക്കുന്നു

കണ്ടെയ്‌നർ പേജിന്റെ മുകളിലാണെന്ന് ഞങ്ങൾ വീണ്ടും അനുമാനിക്കും, അതിനാൽ ഇത് പ്രശ്‌നമില്ലാതെ 100% വരെ വികസിപ്പിക്കാൻ കഴിയും; ഞങ്ങൾക്ക് maxHeightForQ ആവശ്യമില്ല. ഡിഫോൾട്ടിന്റെ സ്ഥാനത്ത് ഉപയോഗിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്ന, ഞങ്ങളുടെ ആപ്ലിക്കേഷനിൽ മറ്റ് ചില ബാക്ക്‌ഡ്രോപ്പ് ഘടകം (customBackdropComponent) കൈകാര്യം ചെയ്യുന്ന കോൾബാക്കുകളായി ഞങ്ങൾ onQBarOpenCallback, onQBarCloseCallback എന്നിവ ഉപയോഗിക്കും. നിങ്ങളുടെ ബാക്ക്‌ഡ്രോപ്പ് കോൾബാക്കുകൾ കൂടുതൽ സങ്കീർണ്ണമായേക്കാം, ഇത് മുൻample എന്നത് ലാളിത്യത്തിന് വേണ്ടിയുള്ളതാണ്.

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

ഡിഫോൾട്ട് ബാക്ക്‌ഡ്രോപ്പ് ബിഹേവിയർ (q/search/topicId പാത്ത് ഉപയോഗിച്ച്) ഉൾച്ചേർക്കൽ

കണ്ടെയ്‌നറിന് 75px-ന്റെ മാർജിൻ ടോപ്പ് ഉണ്ടെന്ന് ഞങ്ങൾ വീണ്ടും അനുമാനിക്കും, അതിനാൽ maxHeightForQ പാരാമീറ്റർ ഉപയോഗിച്ച് ഞങ്ങൾ അത് കണക്കാക്കും, അതുവഴി iframe പേജ് അനുവദിക്കുന്നതിനേക്കാൾ വലുതായി വികസിക്കില്ല, ഒരു സ്ക്രോൾ ബാറോ മറ്റ് അനാവശ്യ സ്വഭാവമോ സൃഷ്ടിക്കുന്നു. ഞങ്ങൾ ഒരു വിഷയത്തിൽ ഉൾച്ചേർത്ത തിരയൽ ബാർ ഉപയോഗിക്കുന്നതിനാൽ, ഞങ്ങൾക്ക് qBarIconDisabled, qBarTopicNameDisabled കസ്റ്റമൈസേഷനുകൾ ഉപയോഗിക്കാം. ഈ മുൻampഐക്കണോ വിഷയത്തിന്റെ പേരോ ഇല്ലാത്ത ഒരു സെർച്ച് ബാർ le ഞങ്ങൾക്ക് നൽകും, ഏത് വിഷയ ഐഡിയിൽ കടന്നാലും അത് അന്വേഷിക്കാൻ തയ്യാറാണ്.

ഫംഗ്ഷൻ embedQSession(ഉൾച്ചേർക്കുകUrl) {
var containerDiv = document.getElementById("ക്യു-ബാർ കണ്ടെയ്നർ");
containerDiv.innerHTML = "";
var params = {
url: ഉൾച്ചേർക്കുകUrl,
കണ്ടെയ്നർ: കണ്ടെയ്നർDiv,
isQEmbedded: true,
maxHeightForQ: "calc (100vh - 75px)”,
qBarIcon പ്രവർത്തനരഹിതമാക്കി: തെറ്റ്,
qBarTopicNameDisabled: തെറ്റ്,
};
QuickSightEmbedding.embedSession(പാരാമുകൾ);
}

തീം ഐഡി ഉപയോഗിച്ച് ഉൾച്ചേർക്കുന്നു

നിങ്ങൾക്ക് ഒരു തീം ഇല്ലെങ്കിൽ QuickSight-നുള്ളിൽ ഒരു പുതിയ തീം സൃഷ്‌ടിക്കുക. ഒരു വിശകലനം തുറക്കുക അല്ലെങ്കിൽ പുതിയൊരെണ്ണം സൃഷ്ടിക്കുക. ഇടതുവശത്തുള്ള തീമുകൾ തിരഞ്ഞെടുക്കുക.
തുടർന്ന് നിങ്ങൾ ഇഷ്ടപ്പെടുന്ന സ്റ്റാർട്ടർ തീമിൽ ഒന്ന് തിരഞ്ഞെടുത്ത് "ഇതായി സംരക്ഷിക്കുക" ക്ലിക്ക് ചെയ്യുക. നിങ്ങൾക്ക് ഇതിനകം ഒരു തീം ഉണ്ടെങ്കിൽ, നിങ്ങൾക്ക് തീം സൃഷ്ടിക്കൽ ഘട്ടം ഒഴിവാക്കാം.

ഇത് നിങ്ങളെ തീം എഡിറ്റർ പേജിലേക്ക് കൊണ്ടുപോകും, അതിന് ഒരു പേര് നൽകുക, നിങ്ങൾക്ക് ഇഷ്ടമുള്ളത് പോലെ നിറം ക്രമീകരിക്കുക, തുടർന്ന് മുകളിൽ വലതുവശത്ത് സംരക്ഷിക്കുക.

ഇപ്പോൾ നിങ്ങൾക്ക് ഒരു തീം ഉണ്ട്, നിങ്ങൾ ആ തീമിന്റെ ഐഡി കണ്ടെത്തി അത് SDK-ലേക്ക് കൈമാറേണ്ടതുണ്ട്. നിങ്ങൾ സൃഷ്ടിച്ച തീമിൽ "എഡിറ്റ്" തിരഞ്ഞെടുക്കുക.

ഇത് നിങ്ങളെ വീണ്ടും തീം എഡിറ്റർ പേജിലേക്ക് കൊണ്ടുപോകും, എന്നാൽ ഇത്തവണ നിങ്ങൾ തീം ഐഡി അവിടെ കണ്ടെത്തും url ബാർ. ഈ സാഹചര്യത്തിൽ "d39c0065bf69-4b3d-927b-9dd3a241f094" എന്നത് ഞാൻ സൃഷ്ടിച്ച ഒരു തീമിന്റെ ഐഡിയാണ്.

അവസാനമായി, നിങ്ങൾ തീം ഐഡി ഒരു പാരാമീറ്ററായി SDK-യിലേക്ക് കൈമാറുന്നു, തുടർന്ന് നിങ്ങളുടെ ആപ്പിൽ നിങ്ങൾക്ക് ഒരു തീം Q ബാർ ലഭിക്കും.

ഫംഗ്ഷൻ embedQSession(ഉൾച്ചേർക്കുകUrl) {
var containerDiv = document.getElementById("ക്യു-ബാർ കണ്ടെയ്നർ");
containerDiv.innerHTML = "";
var params = {
url: ഉൾച്ചേർക്കുകUrl,
കണ്ടെയ്നർ: കണ്ടെയ്നർDiv,
isQEmbedded: true,
maxHeightForQ: "calc(100vh - 75px)",
qBarIcon പ്രവർത്തനരഹിതമാക്കി: തെറ്റ്,
qBarTopicNameDisabled: തെറ്റ്,
തീംഐഡി: “d39c0065-bf69-4b3d-927b-9dd3a241f094”
};
QuickSightEmbedding.embedSession(പാരാമുകൾ);
}

തീം ചെയ്യാവുന്ന ഘടകം

ക്യു ബാറിനുള്ളിലെ ഏതൊക്കെ ഘടകങ്ങളെ തീം ആക്കാമെന്ന് നിങ്ങളെ കാണിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു, കൂടാതെ ഞങ്ങൾ ക്വിക്ക്‌സൈറ്റ് മിഡ്‌നൈറ്റ് തീം ഒരു മുൻ എന്ന നിലയിൽ എടുക്കും.ample (നിങ്ങൾക്ക് ഇത് സ്റ്റാർട്ടർ തീമുകളിൽ കണ്ടെത്താം)

ട്രബിൾഷൂട്ടിംഗ്

'ഫ്രെയിം ചെയ്യാൻ വിസമ്മതിച്ചു *.quicksight.aws.amazon.com കാരണം ഒരു പൂർവ്വികൻ ലംഘിക്കുന്നു..' പിശക്

QuickSight അപ്ലിക്കേഷനിലെ മാനേജ് ക്വിക്ക്‌സൈറ്റ് അഡ്‌മിൻ പേജിൽ നിങ്ങളുടെ ഡൊമെയ്‌ൻ ലിസ്റ്റുചെയ്യാൻ അനുവദിക്കാത്തതാണ് ഈ പിശകിന് കാരണം. പ്രാദേശിക ക്വിക്ക്‌സൈറ്റ് ഡൊമെയ്‌നുകളുടെ ലിസ്റ്റ് അനുവദിക്കുന്നത് ഉറപ്പാക്കുക (ഞങ്ങൾക്ക്-കിഴക്ക്-1, ഇതാണ് https://us-east-1.quicksight.aws.amazon.com , ഉദാample), നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ ഡൊമെയ്‌നും.

എംബഡ് ചെയ്‌ത ശേഷം തിരയൽ ബാർ കാണാൻ കഴിയില്ല

നിങ്ങൾക്ക് വിജയകരമായി ലിങ്ക് സൃഷ്ടിക്കാനും ആക്‌സസ് ചെയ്യാനും ഉൾച്ചേർക്കാനും കഴിയുമെങ്കിൽ (അനുമതികളോ മറ്റ് വ്യക്തമായ പിശകുകളോ ഇല്ലാതെ), എന്നാൽ തിരയൽ ബാർ ദൃശ്യമാകാത്ത ഒരു 'ശൂന്യ' സ്‌ക്രീൻ ലഭിക്കുകയാണെങ്കിൽ, പരിശോധിക്കേണ്ട ചില കാര്യങ്ങളുണ്ട്. ഒന്ന്, നിങ്ങൾ ഉൾച്ചേർക്കുന്ന ഉപയോക്താവുമായി കുറഞ്ഞത് ഒരു വിഷയമെങ്കിലും പങ്കുവെച്ചിരിക്കണം. രണ്ടാമതായി, ഒരു വിഷയമെങ്കിലും വിജയകരമായി സൃഷ്‌ടിച്ചിട്ടുണ്ടെന്നും തുടക്കത്തിൽ നിർമ്മിച്ചതിന് ശേഷം 'വിജയകരമായ' അവസ്ഥയിലാണെന്നും ഉറപ്പാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു. ഇത് പരീക്ഷിക്കുന്നതിനുള്ള ഒരു എളുപ്പമാർഗ്ഗം QuickSight ആപ്ലിക്കേഷനിൽ Q-ലെ വിഷയം ഉപയോഗിക്കുക എന്നതാണ്; ഇത് സാധാരണ രീതിയിൽ പ്രവർത്തിക്കുന്നുണ്ടെങ്കിൽ, എംബഡഡ് മോഡിൽ ഉപയോഗിക്കുന്നത് നല്ലതാണ്.

സെർച്ച് ബാർ ദൃശ്യമാകാതിരിക്കാനുള്ള മറ്റൊരു കാരണം, എംബെഡിംഗ് iframe ഉള്ള കണ്ടെയ്‌നറിന് മതിയായ വീതി നൽകില്ല എന്നതാണ്. ഡോക്യുമെന്റേഷനിൽ വിളിച്ചിരിക്കുന്നതുപോലെ, സെർച്ച് ബാറിന് സാധാരണയായി പ്രവർത്തിക്കുന്നതിന് കുറഞ്ഞത് 600px വീതിയെങ്കിലും നൽകിയിട്ടുണ്ടെന്ന് ഉറപ്പാക്കേണ്ടതുണ്ട്.

തിരയൽ ബാർ വികസിക്കുന്നു, പക്ഷേ ഉള്ളടക്കം താഴേക്ക് മാറ്റുന്നു

SDK ഉള്ള തിരയൽ ബാർ പേജിലെ ഏതെങ്കിലും അധിക ഉള്ളടക്കത്തിന് മുകളിൽ വിപുലീകരിക്കാൻ രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നു. ഇത് അങ്ങനെയല്ലെങ്കിൽ, തിരയൽ ബാർ കണ്ടെയ്നർ ഉറപ്പാക്കുക പേജിന്റെ ഉള്ളടക്കം താഴേക്ക് മാറ്റാതിരിക്കാൻ ഇത് അനുവദിക്കുന്ന ഒരു `സ്ഥാനം: സമ്പൂർണ്ണ' എന്ന ശൈലിയിലാണ്. ഉദാampLe:

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

SDK റിവിഷൻ മാറ്റം ലോഗ്

V1(5/15/21): പ്രാരംഭ ഇഷ്‌ടാനുസൃത `Q-റെഡി' SDK
- V1.1 (5/25/21)
  - ഐഫ്രെയിം ഉയരം സെർച്ച് ബാറിന്റെ ഉയരത്തിലേക്ക് മാറ്റുക, ഉപയോക്താവിന് Q മോഡിൽ വ്യക്തമാക്കാൻ കഴിയില്ല
  - Q മോഡിനായി iframe വീതി പാരന്റ് കണ്ടെയ്‌നറിന്റെ 100% ആയി സജ്ജീകരിക്കുക. പാരന്റ് കണ്ടെയ്‌നറിന്റെ വലുപ്പം അനുസരിച്ച് തിരയൽ ബാറിന്റെ വീതി ഇപ്പോഴും പരിമിതപ്പെടുത്താൻ കഴിയുമെന്നത് ശ്രദ്ധിക്കുക.

പ്രമാണങ്ങൾ / വിഭവങ്ങൾ

ആമസോൺ ക്യൂ എംബഡിംഗ് ഡെവലപ്പർ ബിസിനസ് ഇന്റലിജൻസ് സേവനം [pdf] ഉപയോക്തൃ ഗൈഡ്
Q എംബഡിംഗ് ഡെവലപ്പർ ബിസിനസ് ഇന്റലിജൻസ് സേവനം, ഡെവലപ്പർ ബിസിനസ് ഇന്റലിജൻസ് സേവനം, രഹസ്യാന്വേഷണ സേവനം

റഫറൻസുകൾ

ഉപയോക്തൃ മാനുവൽ

മുൻവ്യവസ്ഥകൾ