Layout-Kontext

Beim Erstellen von Widget-Layouts im Widget Builder haben Sie über Handlebars-Ausdrücke Zugriff auf verschiedene Datenobjekte und Eigenschaften. Dieser Leitfaden erklärt, welche Daten verfügbar sind und wie Sie diese in Ihrem Layout verwenden können.

Verfügbare Kontext-Objekte

Die folgenden Objekte und Eigenschaften stehen in Ihrem Widget-Layout zur Verfügung:

settings

Enthält die Konfigurationswerte für Ihr Widget, die vom Redakteur beim Hinzufügen des Widgets zu einer Seite festgelegt wurden.

Verwendung:

{{settings.title}}
{{settings.color}}
{{settings.customProperty}}

Beispiel: Wenn Sie ein Textfeld namens "title" in Ihren Widget Settings definieren, ist es als {{settings.title}} zugänglich.

data

Enthält die Antwortdaten Ihrer API-Anfrage (falls konfiguriert). Dies ist die Hauptdatenquelle für die meisten dynamischen Widgets.

Verwendung:

{{#each data}}
  <div>{{this.name}}</div>
{{/each}}

page

Enthält Informationen über die aktuelle Staffbase-Seite und die Umgebung, in der das Widget angezeigt wird. Nur primitive Werte (Strings, Zahlen, Booleans) aus den Staffbase Web Extensions sind enthalten.

Verfügbare Eigenschaften:

Eigenschaft	Typ	Beschreibung	Beispiel
page.appState	string	Aktueller Anwendungsstatus	"active"
page.browser	string	Browser-Engine-Kennung	"moz", "webkit"
page.branchDefaultLanguage	string	Standardsprache des Staffbase-Bereichs	"en_US"
page.branchId	string	Eindeutige ID des aktuellen Staffbase-Bereichs	"abc123def456"
page.compact	boolean	Ob der kompakte Modus aktiv ist	false
page.component	string	Komponententyp	"client"
page.contentLanguage	string	Aktuelle Inhaltssprache	"en_US"
page.loading	boolean	Ob die Seite noch lädt	false
page.mobile	boolean	Ob der Benutzer ein mobiles Gerät verwendet	false
page.native	boolean	Ob der Benutzer die native Staffbase-App verwendet	false
page.os	string	Betriebssystem	"mac", "windows", "android"
page.platform	string	Plattformtyp	"web", "mobile"
page.publicMode	boolean	Ob die Seite im öffentlichen/Gastmodus ist	false
page.spaceId	string	Eindeutige ID des aktuellen Staffbase-Space	"xyz789"
page.touch	boolean	Ob das Gerät Touch-Eingabe unterstützt	false
page.currentURL	string	Aktueller Seiten-URL-Pfad	"/content/page/abc123"

Verwendung:

{{!-- Unterschiedlichen Inhalt für Mobil- vs. Desktop-Ansicht anzeigen --}}
{{#if page.mobile}}
  <div class="mobile-layout">{{settings.title}}</div>
{{else}}
  <div class="desktop-layout">{{settings.title}}</div>
{{/if}}

{{!-- Native App erkennen --}}
{{#if page.native}}
  <p>You are viewing this in the Staffbase app.</p>
{{/if}}

user

Enthält Informationen über den aktuellen Benutzer, der das Widget betrachtet. Diese Daten stammen aus dem Benutzerobjekt des Staffbase SDK.

Häufig verwendete Eigenschaften:

Eigenschaft	Typ	Beschreibung	Beispiel
user.id	string	Eindeutige Benutzer-ID	"user-abc123"
user.firstName	string	Vorname des Benutzers	"Anna"
user.lastName	string	Nachname des Benutzers	"Schmidt"
user.fullName	string	Vollständiger Anzeigename	"Anna Schmidt"
user.email	string	E-Mail-Adresse des Benutzers	"anna@example.com"
user.locale	string	Spracheinstellung des Benutzers	"en_US"
user.role	string	Staffbase-Rolle des Benutzers	"editor", "admin"
user.department	string	Abteilung des Benutzers	"Engineering"
user.position	string	Position des Benutzers	"Frontend Developer"
user.location	string	Standort des Benutzers	"Berlin, Germany"

Weitere Eigenschaften:

Eigenschaft	Typ	Beschreibung
user.branchID	string	Bereichs-ID, zu der der Benutzer gehört
user.branchRole	string	Rolle des Benutzers im Bereich
user.phoneNumber	string	Telefonnummer des Benutzers
user.created	string	Zeitstempel der Kontoerstellung (ISO 8601)
user.updated	string	Zeitstempel der letzten Profilaktualisierung (ISO 8601)
user.enabled	boolean	Ob das Konto aktiviert ist
user.status	string	Kontostatus (z. B. "activated")
user.externalID	string	Externe Kennung (z. B. von SSO)
user.groupIDs	array	IDs der Gruppen, denen der Benutzer angehört
user.profile.avatar.original.url	string	URL zum Profilbild des Benutzers

Verwendung:

{{!-- Personalisierte Begrüßung --}}
<h2>Hello, {{user.firstName}}!</h2>

{{!-- Abteilungsspezifischen Inhalt anzeigen --}}
{{#if (eq user.department "Engineering")}}
  <p>Check out the latest dev updates.</p>
{{/if}}

{{!-- Benutzer-Avatar anzeigen --}}
{{#if user.profile.avatar.original.url}}
  <img src="{{user.profile.avatar.original.url}}" alt="{{user.fullName}}" />
{{/if}}

{{!-- Rollenbasierte Sichtbarkeit --}}
{{#if (eq user.role "admin")}}
  <a href="/admin">Admin Panel</a>
{{/if}}

hinweis

Das user-Objekt kann leer sein, wenn der Benutzer nicht authentifiziert ist (z. B. im öffentlichen Modus). Verwenden Sie immer bedingte Prüfungen wie {{#if user.firstName}}, um dies korrekt zu handhaben.

widget

Enthält Metadaten über das Widget selbst und kontextbezogene Informationen.

Verfügbare Eigenschaften:

Eigenschaft	Typ	Beschreibung
widget.baseId	string	Eindeutige Basiskennung der Widget-Instanz
widget.className	string	Generierter CSS-Klassenname zur Stilisolierung
widget.title	string	Titel des Widgets
widget.updated	string	Zeitstempel der letzten Aktualisierung des Widgets
widget.contentLanguage	string	Inhaltssprache des Widgets (siehe Sprachunterstützung)

Verwendung:

<div id="{{widget.baseId}}" class="{{widget.className}}">
  <h2>{{widget.title}}</h2>
  <p>Language: {{widget.contentLanguage}}</p>
</div>

variables

Enthält benutzerdefinierte Variablen, die Sie im Widget Builder definieren. Diese können verwendet werden, um Zustände oder dynamische Werte zu speichern, die sich während der Benutzerinteraktion ändern.

Verwendung:

{{variables.current_date}}
{{variables.selectedItem}}

Sie können Variablen mithilfe von JavaScript-Funktionen wie setVariable() in Ihrem Template aktualisieren.

defaultLocale

Enthält die Standard-Locale aus der Staffbase contentLanguage-Einstellung (z. B. "en_US", "de_DE").

Verwendung:

<p>Default locale: {{defaultLocale}}</p>

browserLanguage

Enthält die Browsersprache aus navigator.language (z. B. "en", "de").

Verwendung:

<p>Browser language: {{browserLanguage}}</p>

browserTimezone

Enthält die Zeitzone des Browsers, die über die Intl API erkannt wird (z. B. "Europe/Berlin", "America/New_York").

Verwendung:

<p>Your timezone: {{browserTimezone}}</p>

Sprachunterstützung

Der Widget Builder erkennt automatisch die Inhaltssprache und stellt sie über widget.contentLanguage bereit. Dieser Wert folgt einer Prioritätskette:

1. contentLanguage aus dem Staffbase SDK -

Verwendungsbeispiel:

{{#if (eq widget.contentLanguage "de")}}
  <p>Willkommen!</p>
{{else}}
  <p>Welcome!</p>
{{/if}}

Verwendung mit dem datetime Helper:

{{datetime with_locale=widget.contentLanguage output_format="LLLL"}}

Damit werden Datumsangaben entsprechend der Spracheinstellung des Benutzers formatiert.

Zeitzonen-Unterstützung

Der Widget Builder stellt Zeitzoneninformationen über browserTimezone bereit. Die Zeitzone wird automatisch über die Intl API des Browsers erkannt (z. B. "Europe/Berlin", "America/New_York"). Wenn die Erkennung fehlschlägt, wird "Europe/Berlin" als Fallback verwendet.

Verwendungsbeispiel:

<p>Your timezone: {{browserTimezone}}</p>

Verwendung mit dem datetime Helper:

{{datetime with_timezone=browserTimezone output_format="LLLL"}}

Damit werden Uhrzeiten in der lokalen Zeitzone des Benutzers angezeigt.

Sprache und Zeitzone kombinieren

Sie können Sprache und Zeitzone kombinieren, um wirklich lokalisierte Erlebnisse zu schaffen:

<div class="date-display">
  {{datetime
    with_locale=widget.contentLanguage
    with_timezone=browserTimezone
    output_format="LLLL"
  }}
</div>

Damit werden Datum und Uhrzeit in der Sprache und Zeitzone des Benutzers angezeigt.

Beispiel: Lokalisierte Begrüßung

Hier ist ein vollständiges Beispiel, das zeigt, wie Sprache und Zeitzone gemeinsam verwendet werden:

<div class="greeting">
  {{#if (eq widget.contentLanguage "de")}}
    <h2>Guten
      {{#if (gt (datetime output_format="HH") 12)}}Abend{{else}}Tag{{/if}}!</h2>
  {{else if (eq widget.contentLanguage "fr")}}
    <h2>Bon{{#if
        (gt (datetime output_format="HH") 12)
      }}soir{{else}}jour{{/if}}!</h2>
  {{else}}
    <h2>Good
      {{#if
        (gt (datetime output_format="HH") 12)
      }}Evening{{else}}Day{{/if}}!</h2>
  {{/if}}

  <p>
    Current time in your location:
    {{datetime
      with_timezone=browserTimezone
      with_locale=widget.contentLanguage
      output_format="LLL"
    }}
  </p>
</div>

Best Practices

1. Immer Fallbacks bereitstellen: Verwenden Sie bedingte Helper, um Inhalte in mehreren Sprachen oder Standardwerte anzubieten
2. Mit verschiedenen Locales testen: Testen Sie die Vorschau Ihres Widgets mit verschiedenen Sprach- und Zeitzoneneinstellungen
3. Semantische Formatierung verwenden: Nutzen Sie die lokalisierungsfähige Formatierung des datetime Helpers, anstatt Datumsformate fest zu codieren
4. Benutzereinstellungen berücksichtigen: Die automatische Sprach-/Zeitzonenerkennung berücksichtigt Benutzereinstellungen, daher sollten Sie Widgets entwerfen, die sich elegant anpassen

Verwandte Dokumentation

• Handlebars Helpers - Erfahren Sie mehr über alle verfügbaren Helpers
• DateTime Helper - Detaillierte Dokumentation zur Datums-/Zeitformatierung mit Locale- und Zeitzonen-Unterstützung
• Built-in Widget anpassen - Sehen Sie Kontext-Objekte in der Praxis