Ein Built-In Widget anpassen

Erfahren Sie, wie Sie Built-In Widgets mit dem Widget Builder anpassen und erweitern können, um sie besser an Ihre spezifischen Anforderungen anzupassen.

In den folgenden Abschnitten finden Sie Beispiele, wie Sie die Funktionalität der vom Widget Builder bereitgestellten Widgets anpassen und erweitern können.

Diese Anleitung zeigt, wie Sie das Meal Plan Widget-Template anpassen, indem Sie ein Dropdown zur Auswahl eines Mensa-Standorts und eine Navigation zum Wechseln zwischen Tagen hinzufügen.

Gehen Sie zu den Built-In Widgets des Widget Builders

Wählen Sie das Meal Plan Widget-Template aus.

Widget Builder Built-In Widgets
Erstellen Sie ein Custom Widget

Erstellen Sie ein Custom Widget basierend auf dem Meal Plan Widget-Template.

Built-in "Meal Plan" Widget
Bearbeiten Sie das Custom Widget

Bearbeiten Sie das Custom Widget, das auf Basis des Meal Plan Widget-Templates erstellt wurde.

Custom Widget bearbeiten - Allgemein-Tab
API-Anfrage-Konfiguration

Das Meal Plan Widget verwendet die OpenMensa API, um Speiseplandaten abzurufen. Die API-Anfrage wird mit einer dynamischen Handlebars-Variable konfiguriert, um Daten für den aktuellen Tag abzurufen.
```
https://api.studentenwerk-dresden.de/openmensa/v2/canteens/4/days/{{datetime output_format="yyyy-MM-dd"}}/meals
```
Custom Widget bearbeiten - API-Anfrage-Tab
Layout-Editor

Das Layout des Meal Plan Widgets wird mit HTML, Handlebars und Tailwind CSS erstellt. Der Layout-Editor bietet eine Live-Vorschau des Widgets und der von der API abgerufenen Daten.

Custom Widget bearbeiten - Layout-Tab
Widget umbenennen und speichern

Benennen Sie das Custom Widget in Meal Plan um und speichern Sie es.

Custom Widget bearbeiten - Allgemein-Tab

Schritte zum Hinzufuegen eines benutzerdefinierten Dropdowns

Dropdown fuer den Mensa-Standort hinzufuegen

Fuegen Sie ein Dropdown zur Auswahl eines Mensa-Standorts hinzu, damit Redakteure beim Hinzufuegen des Widgets zu einer Staffbase-Seite einen bestimmten Standort auswaehlen koennen.

Custom Widget bearbeiten - Widget-Einstellungen-Tab
API-Anfrage mit Mensa-Standort aktualisieren

Verwenden Sie das Mensa-Standort Dropdown, um die API-Anfrage zu aktualisieren und Speiseplandaten fuer den ausgewaehlten Standort abzurufen.
```
https://api.studentenwerk-dresden.de/openmensa/v2/canteens/{{substring settings.mensa_location -2}}/days/{{datetime output_format="yyyy-MM-dd"}}/meals
```
Wir verwenden den substring Handlebars Helper, um die ID des Mensa-Standorts aus dem Dropdown-Wert der Widget-Einstellungen zu extrahieren.
```
{{substring settings.mensa_location -2}}
```
Custom Widget bearbeiten - API-Anfrage-Tab
Widget zu einer Staffbase-Seite hinzufuegen

Fuegen Sie das Meal Plan Widget zu einer Staffbase-Seite hinzu, indem Sie es aus dem Widget-Hinzufuegen-Menue auswaehlen.

Staffbase-Seite - Bearbeitungsmodus
Mensa-Standort auswaehlen

Waehlen Sie einen Mensa-Standort aus dem Dropdown, um den Speiseplan fuer den ausgewaehlten Standort anzuzeigen.

Staffbase-Seite - Bearbeitungsmodus
Widget anzeigen

Das Meal Plan Widget zeigt den Speiseplan fuer den ausgewaehlten Standort fuer alle Benutzer an, die die Staffbase-Seite aufrufen.

Staffbase-Seite - Ansichtsmodus

Schritte zum Hinzufuegen einer Datumsnavigation

Datumsnavigation hinzufuegen

Fuegen Sie dem Meal Plan Widget eine Datumsnavigation hinzu, damit Benutzer zwischen Tagen wechseln koennen. Erstellen Sie eine benutzerdefinierte current_date Variable vom Typ Date, um das aktuelle Datum verfuegbar zu machen.

Custom Widget bearbeiten - Benutzerdefinierte Variablen-Tab
API-Anfrage mit Datumsnavigation aktualisieren

Aktualisieren Sie die API-Anfrage, um die Variable current_date zu verwenden.
```
https://api.studentenwerk-dresden.de/openmensa/v2/canteens/{{substring settings.mensa_location -2}}/days/{{datetime from_var=variables.current_date output_format="yyyy-MM-dd"}}/meals
```
Wir aktualisieren den datetime Handlebars Helper, um die Variable current_date als Datumsreferenz zu verwenden.
```
{{datetime from_var=variables.current_date output_format="yyyy-MM-dd"}}
```
Custom Widget bearbeiten - API-Anfrage-Tab

Datumsnavigations-Layout erstellen

Erstellen Sie ein Datumsnavigations-Layout mit HTML, Handlebars und Tailwind CSS, damit Benutzer zwischen Tagen wechseln koennen.

 <div class="flex gap-2 mb-4 sm:max-w-96 center">

 <div>
 <button
     class="block p-0 m-0 w-10 h-10 rounded-full border border-solid border-neutral-200 bg-neutral-100 text-neutral-600 cursor-pointer hover:bg-neutral-200"
     onclick="setVariable('current_date', '{{datetime from_var=variables.current_date sub_days="1" to_iso=true}}', true)"
     title="Previous">
     <span class="inline-block text-2xl font-semibold leading-none h-7">&laquo;</span>
 </button>
 </div>

 <div class="w-full">
 <button
     class="block p-0 m-0 w-full h-10 rounded-xl border border-solid border-neutral-200 bg-neutral-100 text-neutral-600 cursor-pointer hover:bg-neutral-200"
     onclick="setVariable('current_date', '{{datetime to_iso=true}}', true)"
     title="Today">
     <span class="inline-block text-2xl font-semibold leading-none h-7">
     {{#if (eq (datetime output_format="yyyy-MM-dd") (datetime from_var=variables.current_date output_format="yyyy-MM-dd"))}}
         Today
     {{else}}
         {{datetime from_var=variables.current_date output_format="dd MMMM yyyy"}}
     {{/if}}
     </span>
 </button>
 </div>

 <div>
 <button
     class="block p-0 m-0 w-10 h-10 rounded-full border border-solid border-neutral-200 bg-neutral-100 text-neutral-600 cursor-pointer hover:bg-neutral-200"
     onclick="setVariable('current_date', '{{datetime from_var=variables.current_date add_days="1" to_iso=true}}', true)"
     title="Next">
     <span class="inline-block text-2xl font-semibold leading-none h-7">&raquo;</span>
 </button>
 </div>

 </div>

Custom Widget bearbeiten - Layout-Tab

Staffbase-Seite aktualisieren

Das Meal Plan Widget zeigt nun den Speiseplan fuer den ausgewaehlten Standort und das ausgewaehlte Datum an. Aktualisieren Sie die Staffbase-Seite, um die Aenderungen zu sehen -- das Widget muss nicht erneut zur Seite hinzugefuegt werden. Alle Aenderungen werden automatisch auf das Widget angewendet.

Staffbase-Seite - Ansichtsmodus

Ein Built-In Widget anpassen