Docs: App Builder

Mon, 01 Jan 0001 00:00:00 +0000

Themen in diesem Dokument:

Bibliothek
Builder-Schnittstelle
Konfiguration
- Widgets
- Menü

Um auf diesen Abschnitt in EV Charge zuzugreifen, wählen Sie im Menü die Option Systemkonfiguration und klicken Sie auf App-Builder.

Bibliothek

Um auf diesen Abschnitt zuzugreifen, klicken Sie auf App-Builder. Eine Liste aller erstellten Anwendungsvorlagen wird in einer Tabelle angezeigt, die deren Name, Status (z. B. Published oder Draft) und das Erstellungsdatum enthält.

Abbildung 1: App Builder template library

Sie können die Suchleiste oben verwenden, um die Vorlagen nach Namen zu filtern. Für jede Vorlage können Sie deren spezifische Konfiguration anzeigen oder ändern, indem Sie auf das Symbol Anzeigen/Bearbeiten klicken.

Um eine neue App-Vorlage zu erstellen, klicken Sie auf + Template. Dies öffnet ein Modal, in dem Sie den Vorlagennamen eingeben müssen. Nach der Erstellung können Sie mit der Konfiguration des Layouts beginnen.

Abbildung 2: Add template modal

Builder Schnittstelle

Nachdem Sie eine Vorlage über das Anzeigen/Bearbeiten-Symbol ausgewählt haben, gelangen Sie in die Builder-Schnittstelle.

In der Mitte des Bildschirms befindet sich ein visueller Phone Emulator. Dieser Bereich stellt die Benutzeroberfläche der Anwendung dynamisch dar und zeigt eine Annäherung daran, wie die konfigurierten Widgets und Fußzeilen auf einem mobilen Gerät erscheinen werden.

Der Emulator-Bildschirm ist in drei Bereiche unterteilt, in denen Widgets platziert werden können:

Top – Ein zusätzlicher Bereich, der über dem Hauptinhalt angezeigt wird und normalerweise für Suchleisten, Filter oder benutzerdefinierte HTML (HyperText Markup Language)-Banner verwendet wird.
Center – Der Hauptinhaltsbereich. Dies ist die Hauptansicht, die Benutzer sehen, wenn sie einen Bildschirm in der Live-App öffnen (z. B. die Stationsliste, die Karte oder die Kontovorschau). Widgets, die hier platziert werden, bilden den Kern der Funktionalität des Bildschirms.
Bottom – Ein zusätzlicher Bereich unter dem Hauptinhalt, der für zusätzliche Steuerelemente oder benutzerdefinierte Elemente verwendet wird.

Abbildung 3: Phone emulator interface

Builder-Schnittstelle

Die rechte Seitenleiste enthält die primären Konfigurationswerkzeuge, die in zwei Registerkarten organisiert sind: Widgets und Menu settings.

Widgets

Die Registerkarte Widgets ermöglicht es Ihnen, den Inhalt einzelner Bildschirme in der App anzupassen.

Abbildung 4: Widgets tab configuration

Select screen to build: Verwenden Sie das Dropdown-Menü, um auszuwählen, welcher spezifische App-Bildschirm konfiguriert werden soll (z. B. Stations > Map, Stations > List, Account, Sessions).
Drag and drop widgets: Unter der Bildschirmauswahl befindet sich eine Bibliothek mit verfügbaren Widgets für den ausgewählten Bildschirm. Ziehen Sie diese per Drag-and-Drop in die entsprechenden Bereiche (Top, Center, Bottom) auf dem Phone Emulator.
- Beispiele für Stations List sind: Search and filter, Station list, Camera button, Custom HTML.
- Beispiele für Account sind: Car list, Card list, Einstellungen, Delete account.

Sobald ein Widget zum Phone Emulator hinzugefügt wurde, können Sie dessen Platzierung und Verhalten konfigurieren, indem Sie auf das Symbol Einstellungen direkt auf dem Widget klicken.

Abbildung 5: Widget settings configuration

Die rechte Seitenleiste zeigt spezifische Konfigurationsfelder für diesen Widget-Typ an:

Position: Legen Sie die relative horizontale und vertikale Positionierung fest (links, rechts, oben, unten in Prozent).
Padding and Margin: Passen Sie den inneren und äußeren Abstand des Widgets in Pixeln an.
Label: Bei bestimmten Widgets können Sie den angezeigten Beschriftungstext anpassen.

Um ein Widget zu löschen, klicken Sie auf das Symbol Löschen auf dem Widget im Emulator.

Menü

Die Registerkarte Menü wird verwendet, um die untere Navigationsfußzeile der App zu konfigurieren.

Abbildung 6: Menu settings tab configuration

Active Menu Tabs: Sie können die Registerkarten neu ordnen und verwalten, die derzeit für Benutzer in der Fußzeile der App sichtbar sind (begrenzt auf maximal 5 aktive Registerkarten).
Unused Menu Tabs: Zeigt verfügbare Funktionen und Bildschirme an, die derzeit nicht in der unteren Navigation enthalten sind. Ziehen Sie Elemente hierher, um sie aus der Fußzeile auszublenden.

Sie können auch die Einstellungen für die strukturellen Bereiche im Emulator konfigurieren. Klicken Sie im Emulator auf das Einstellungen-Symbol neben den Beschriftungen “Top area” oder “Bottom area”, um Eigenschaften anzupassen, wie z. B. den Bereich “Always visible” zu machen.

Abbildung 7: Menu settings configuration

Nachdem Sie alle erforderlichen Änderungen vorgenommen haben, klicken Sie auf die Schaltfläche Speichern, um die Modifikationen auf die App-Vorlage anzuwenden.