Exempeltyper för ContextHub-gränssnittsmodul

Senast uppdaterad: 4 maj 2023

Skapat för:

  • Developer
CAUTION
AEM 6.4 har nått slutet på den utökade supporten och denna dokumentation är inte längre uppdaterad. Mer information finns i teknisk supportperiod. Hitta de versioner som stöds här.

ContextHub innehåller flera exempelmoduler för användargränssnitt som du kan använda i dina lösningar. Följande information tillhandahålls:

  • Huvudfunktionerna i gränssnittsmodulen.
  • Var du hittar källkoden så att du kan öppna den i utbildningssyfte.
  • Konfigurera gränssnittsmodulen.

Mer information om hur du lägger till gränssnittsmoduler i ContextHub finns i Lägga till en gränssnittsmodul. Mer information om hur du utvecklar gränssnittsmoduler finns i Skapar gränssnittsmodultyper för ContextHub.

contexthub.base UI-modultyp

Modultypen context.base är bastypen för alla andra gränssnittsmodultyper. Det innehåller därför generiska funktioner för återgivning av butiksdata.

Följande funktioner är tillgängliga:

  • Titel och ikon: Ange en rubrik för användargränssnittsmodulen och en ikon. Ikonen kan refereras via en URL eller från ikonbiblioteket för Coral UI.
  • Lagra data: Identifiera ett eller flera arkiv som data ska hämtas från.
  • Innehåll: Ange innehållet som visas i gränssnittsmodulen så som det visas i ContextHub-verktygsfältet.
  • Leveransinnehåll: Ange innehållet som visas i en pekare när användaren klickar eller trycker på gränssnittsmodulen.
  • Helskärmsläge: Kontrollera om helskärmsläge tillåts.

Källkoden finns på /libs/granite/contexthub/code/ui/container/js/ContextHub.UI.BaseModuleRenderer.js.

Konfiguration

Konfigurera gränssnittsmodulen contexthub.base med hjälp av ett JavaScript-objekt i JSON-format. Inkludera någon av följande egenskaper för att konfigurera gränssnittsmodulens funktioner:

  • bild: En URL till en bild som ska visas som ikon.

  • ikon: Namnet på en Coral UI: ikon klassen. Om du anger ett värde för både ikonen och bildegenskaperna används bilden.

  • titel: En rubrik för gränssnittsmodulen. Titeln visas när pekaren pausas över ikonen för modulen Gränssnitt.

  • helskärm: Ett booleskt värde som anger om gränssnittsmodulen stöder helskärmsläge. Använd true för helskärmsläge och false för att förhindra helskärmsläge.

  • mall: A Handtag mall som anger det innehåll som ska återges i ContextHub-verktygsfältet. Använd högst två <p> -taggar.

  • storeMapping: En nyckel/arkivmappning. Använd nyckeln i Handlebar-mallar för att komma åt associerade ContextHub-lagringsdata.

  • lista: En array med objekt som ska visas som en lista i en portfölj när användaren klickar på gränssnittsmodulen. Om du tar med det här objektet ska du inte ta med poverTemplate. Värdet är en array med objekt med följande tangenter:

    • titel: Den text som ska visas för det här objektet
    • bild: (Valfritt) En URL till en bild som ska visas till vänster
    • ikon: (Valfritt) En CUI-ikonklass som ska visas till vänster. ignoreras om en bild anges
    • markerat: (Valfritt) Ett booleskt värde som anger om det här objektet ska visas som markerat (true=selected). Som standard visas markerade objekt med ett fetstil. Använd en listType -egenskap för att konfigurera andra utseenden (se nedan).

  • listType: Det format som ska användas för att överföra listobjekt. Använd något av följande värden:

    • bock
    • kryssruta
    • radio

  • popoverTemplate: En mall för hanteringsfält som anger innehållet som ska återges i pekaren när användaren klickar på gränssnittsmodulen. Om du tar med det här objektet ska du inte ta med list objekt.

Exempel

I följande exempel konfigureras användargränssnittsmodulen contexthub.base så att information från en contexthub.emulators butik. The template -objektet visar hur du hämtar data från arkivet med hjälp av nyckeln som storeMapping artikel upprättas.

{
   "icon": "coral-Icon--move",
    "title": "Screen Resolution",
    "storeMapping": {
      "emulator": "emulators"
    },
    "template": "<p>{{{ i18n \"Resolution\"}}}</p><p>{{{emulator.currentDevice.width}}} x {{{emulator.currentDevice.height}}}</p>"
}

chlimage_1-76

contexthub.browserinfo UI Module Type

Gränssnittsmodulen contexthub.browserinfo visar information om klientens webbläsare och operativsystem. Information hämtas från surferinfo-butiken baserat på contexthub.surferinfo lagringskandidat.

chlimage_1-77

Källkoden för användargränssnittsmodulen finns i /libs/granite/contexthub/components/modules/browserinfo. Även om contextHub.browserinfo utökar gränssnittsmodulen contexthub.base åsidosätts inte eller innehåller inga ytterligare funktioner. Implementeringen innehåller en standardkonfiguration för återgivning av webbläsarinformation.

Konfiguration

Instanser av gränssnittsmodulen contexthub.browserinfo kräver inget värde för Detaljkonfiguration. Följande JSON-text representerar modulens standardkonfiguration.

{
   "icon":"coral-Icon--globe",
   "title":"Browser/OS Information",
   "storeMapping":{"surferinfo":"surferinfo"},
   "template":"<p>{{surferinfo.browser.family}} {{surferinfo.browser.version}}</p><p>{{surferinfo.os.name}} {{surferinfo.os.version}}</p>"
}

kontexthub.datetime, gränssnittsmodultyp

Användargränssnittsmodulen contexthub.datetime visar det datum och den tid som lagras i en butik med namnet datetime som baseras på contexthub.datetime lagringskandidat.

chlimage_1-78

Modulen innehåller ett leveransformulär där du kan ändra datum och tid i butiken.

Källan till gränssnittsmodulen contexthub.datetime finns på /libs/granite/contexthub/components/modules/datetime.

Konfiguration

Instanser av gränssnittsmodulen contexthub.datetime kräver inget värde för Detaljkonfiguration. Följande JSON-text representerar modulens standardkonfiguration.

{
   "icon":"coral-Icon--clock",
   "title":"DATE&TIME",
   "clickable":true,
   "storeMapping":{"d":"datetime"},
   "template":"<p class=\"contexthub-module-line1\">{{i18n \"Date&Time\"}}</p><p class=\"contexthub-module-line2\">{{d.formatted.locale.date}} {{d.formatted.locale.time}}</p>",
   "popoverTemplate":"<div class=\"datetime center\"><div class=\"coral-DatePicker-calendar\" data-init=\"datepicker\"><input class=\"coral-Textfield\" type=\"datetime\" value=\"{{d.formatted.iso}}\"><button class=\"coral-Button coral-Button--secondary coral-Button--square\" title=\"{{i18n \"Datetime picker\"}}\"><i class=\"coral-Icon coral-Icon--calendar coral-Icon--sizeS\"></i></button></div></div>"
}

kontexthub.location, gränssnittsmodultyp

Gränssnittsmodulen contexthub.location visar klientens longitud och latitud. Modulen innehåller en portfölj som visar en Google-karta som du kan klicka på för att ändra den aktuella platsen. Modulen hämtar information från ett ContextHub-arkiv med namnet geolocation som baseras på contexthub.geolocation lagringskandidat.

chlimage_1-80

Källan till användargränssnittsmodulen finns i /etc/cloudsettings/default/contexthub/geolocation.

Konfiguration

Instanser av gränssnittsmodulen contexthub.location kräver inget värde för detaljkonfigurationen. Följande JSON-text representerar modulens standardkonfiguration.

{
 "icon":"coral-Icon--compass",
 "title":"Location",
 "clickable":true,
 "editable":{"key":"/geolocation","disabled":[],"hidden":["/geolocation/generatedThumbnail","/geolocation/city","/geolocation/country"]},
 "fullscreen":true,
 "storeMapping":{"g":"geolocation"},
 "template":"<p>{{i18n \"Location\"}}</p><p>{{g.address.postalCode}} {{g.address.city}}{{#if g.address.city}}{{#if g.address.region}},{{/if}}{{/if}} {{g.address.region}}</p>",
 "list":[
  {"title":"Basel, Switzerland",
  "data":{"longitude":7.58929,"latitude":47.554746,"city":"Basel","country":"Switzerland"}},
  {"title":"Melbourne, Australia",
  "data":{"longitude":144.96328,"latitude":-37.814107,"city":"Melbourne","country":"Australia"}},
  {"title":"Beijing, China",
  "data":{"longitude":116.407526,"latitude":39.90403,"city":"Beijing","country":"China"}},
  {"title":"New York, NY, USA",
  "data":{"longitude":-74.005973,"latitude":40.714353,"city":"New York","country":"United States"}},
  {"title":"Paris, France",
  "data":{"longitude":2.352222,"latitude":48.856614,"city":"Paris","country":"France"}},
  {"title":"Rio de Janeiro, Brazil",
  "data":{"longitude":-43.20071,"latitude":-22.913395,"city":"Rio","country":"Brazil"}},
  {"title":"San Jose, CA, USA",
  "data":{"longitude":-121.894955,"latitude":37.339386,"city":"San Jose","country":"United States"}},
  {"title":"Tokyo, Japan",
  "data":{"longitude":139.691706,"latitude":35.689487,"city":"Shinjuku","country":"Japan"}}
 ],
 "listType":"checkmark"
}

contexthub.screen-orientation UI Module Type

Gränssnittsmodulen context.screen-orientation visar klientens aktuella skärmorientering. Modulen är inaktiverad som standard, men den innehåller en funktion som gör att du kan välja en orientering. Modulen hämtar information från ett ContextHub-lager med namnet emulators som är baserat på granite.emulators lagringskandidat.

chlimage_1-81

Källan till användargränssnittsmodulen finns i /libs/granite/contexthub/components/modules/screen-orientation.

Konfiguration

Instanser av gränssnittsmodulen contexthub.screen-orientation kräver inget värde för Detaljkonfiguration. Följande JSON-text representerar modulens standardkonfiguration. Observera att clickable egenskapen är false som standard. Om du åsidosätter standardkonfigurationen som ska anges clickable till trueOm du klickar på modulen visas ett popup-fönster där du kan välja orientering.

{
   "icon":"coral-Icon--rotateRight",
   "title":"Screen Orientation",
   "clickable":false,
   "storeMapping":{"emulator":"emulators"},
   "template":"<p>{{{ i18n \"Screen Orientation\" }}}</p><p>{{{ emulator.currentDevice.orientation }}}",
   "listReference":"/emulators/orientations",
   "listType":"checkmark"
}

contexthub.tagcloud-modultyp

Användargränssnittsmodulen contexthub.tagcloud visar information om taggar. I verktygsfältet visar gränssnittsmodulen antalet taggar. Popup-fönstret visar ett tagcloud och en textruta för att lägga till nya taggar. Användargränssnittsmodulen hämtar information från ett ContextHub-arkiv med namnet tagcloud som är baserat på contexthub.tagcloud lagringskandidat.

chlimage_1-82

Källan till användargränssnittsmodulen finns på /libs/granite/contexthub/components/modules/tagcloud.

Konfiguration

Instanser av gränssnittsmodulen contexthub.tagcloud kräver inget värde för Detaljkonfiguration. Följande JSON-text representerar modulens standardkonfiguration.

{
   "icon":"coral-Icon--tag",
   "title":"TagCloud",
   "clickable":true,
   "storeMapping":{"t":"tagcloud"},
   "maxTags":20,
   "template":"<p class=\"contexthub-module-line1\">{{i18n \"TagCloud\"}}</p><p class=\"contexthub-module-line2\">{{stats.total}} {{i18n \"Tags\"}}</p>",
   "popoverTemplate":"<div class=\"contexthub-popover-content center\"><p class=\"stats\">{{stats.total}} {{i18n \"Tags\"}} | {{stats.hits}} {{i18n \"Hits\"}} | {{i18n \"Last tag\"}}: {{#if stats.recent}}{{stats.recent}}{{else}}{{i18n \"Unknown\"}}{{/if}}</p><p class=\"tagcloud\">{{#each tags}}<span class=\"tag{{this.weight}}\">{{this.name}}</span> {{/each}}</p><div class=\"coral-InputGroup\"><input type=\"text\" class=\"coral-InputGroup-input coral-Textfield tag-name\" placeholder=\"{{i18n \"Add a namespace:my/tag\"}}\" pattern=\"^[A-Za-z0-9_\\-]+(:[A-Za-z0-9_\\-\\/]+)?$\" title=\"{{i18n \"namespace:my/tag\"}}\"><span class=\"coral-InputGroup-button\"><button class=\"coral-Button coral-Button--secondary coral-Button--square contexthub-new-tag\" type=\"button\" title=\"{{i18n \"increment\"}}\"><i class=\"coral-Icon coral-Icon--sizeS coral-Icon--add\"></i></button></span></div></div>"
}

granite.profile UI Module Type

Användargränssnittsmodulen granite.profile ContextHub visar visningsnamnet för den aktuella användaren. Popup-fönstret visar användarens inloggningsnamn och gör att du kan ändra värdet för visningsnamnet. Användargränssnittsmodulen hämtar information från ett ContextHub-arkiv med namnet profile som är baserad på granite.profile lagringskandidat.

chlimage_1-83

Källan till användargränssnittsmodulen är /libs/granite/contexthub/components/modules/profile.

Konfiguration

Instanser av gränssnittsmodulen grantie.profile kräver inget värde för Detaljkonfiguration. Följande JSON-text representerar modulens standardkonfiguration.

{
   "icon":"coral-Icon--user",
   "title":"Profile",
   "clickable":true,
   "editable":{
      "key":"/profile",
      "disabled":["/profile/authorizableId"],
      "hidden":["/profile/avatar","/profile/path"]},
   "storeMapping":{"p":"profile"},
   "template":"<p class=\"contexthub-module-line1\">{{i18n \"Persona\"}}</p><p class=\"contexthub-module-line2\">{{p.displayName}}</p>",
   "listType":"checkmark"
}
Föregående sida
Nästa sida

Experience Manager