App Builder
Sujets dans ce document :
Pour accéder à cette section dans EV Charge, à partir du Menu, sélectionnez Configuration du système, puis cliquez sur Constructeur d’applications.
Bibliothèque
Pour accéder à cette section, cliquez sur Constructeur d’applications. Une liste de tous les modèles d’application créés s’affiche dans un tableau, montrant leur Name, leur Status (par exemple, Published ou Draft) et leur date de création.
Figure 1 : App Builder template library
Vous pouvez utiliser la barre de recherche en haut pour filtrer les modèles par nom. Pour chaque modèle, vous pouvez visualiser ou modifier sa configuration spécifique en cliquant sur l’icône Afficher/Modifier.
Pour créer un nouveau modèle d’application, cliquez sur + Template. Cela ouvrira une fenêtre modale dans laquelle vous devrez saisir le nom du modèle. Après l’avoir créé, vous pourrez commencer à configurer sa mise en page.
Figure 2 : Add template modal
Tableau de bord
Après avoir sélectionné un modèle via l’icône Afficher/Modifier, vous accéderez à l’interface de construction.
Le centre de l’écran présente un Phone Emulator visuel. Cette zone représente dynamiquement l’interface utilisateur de l’application, affichant une approximation de la façon dont les widgets et les pieds de page configurés apparaîtront sur un appareil mobile.
L’écran de l’émulateur est divisé en trois zones où les widgets peuvent être placés :
- Top – Une zone supplémentaire affichée au-dessus du contenu principal, généralement utilisée pour les barres de recherche, les filtres ou les bannières HTML (HyperText Markup Language) personnalisées.
- Center – La zone de contenu principal. Il s’agit de la vue principale que les utilisateurs voient lorsqu’ils ouvrent un écran dans l’application en direct (par exemple, la liste des stations, la carte ou l’aperçu du compte). Les widgets placés ici forment le cœur de la fonctionnalité de l’écran.
- Bottom – Une zone supplémentaire située sous le contenu principal, utilisée pour des commandes supplémentaires ou des éléments personnalisés.
Figure 3 : Phone emulator interface
Interface de construction
La barre latérale droite contient les principaux outils de configuration organisés en deux onglets : Widgets et Menu settings.
Widgets
L’onglet Widgets vous permet de personnaliser le contenu des écrans individuels de l’application.
Figure 4 : Widgets tab configuration
- Select screen to build : Utilisez le menu déroulant pour choisir l’écran spécifique de l’application à configurer (par exemple, Stations > Map, Stations > List, Account, Sessions).
- Drag and drop widgets : Sous la sélection de l’écran se trouve une bibliothèque de widgets disponibles pour l’écran sélectionné. Faites-les glisser et déposez-les dans les zones correspondantes (Top, Center, Bottom) sur le Phone Emulator.
- Les exemples pour Stations List incluent : Search and filter, Station list, Camera button, Custom HTML.
- Les exemples pour Account incluent : Car list, Card list, Paramètres, Delete account.
Une fois qu’un widget est ajouté à l’émulateur de téléphone, vous pouvez configurer son emplacement et son comportement en cliquant sur l’icône Paramètres directement sur le widget.
Figure 5 : Widget settings configuration
La barre latérale droite affichera des champs de configuration spécifiques pour ce type de widget :
- Position : Définissez le positionnement horizontal et vertical relatif (gauche, droite, haut, bas en pourcentages).
- Padding and Margin : Ajustez l’espacement intérieur et extérieur du widget en pixels.
- Label : Pour certains widgets, vous pouvez ajuster le texte de l’étiquette affichée.
Pour supprimer un widget, cliquez sur l’icône Supprimer sur le widget dans l’émulateur.
Menu
L’onglet Menu est utilisé pour configurer le pied de page de navigation au bas de l’application.
Figure 6 : Menu settings tab configuration
- Active Menu Tabs : Vous pouvez réorganiser et gérer les onglets qui sont actuellement visibles par les utilisateurs dans le pied de page de l’application (limité à un maximum de 5 onglets actifs).
- Unused Menu Tabs : Affiche les fonctionnalités et les écrans disponibles qui ne sont pas actuellement inclus dans la navigation du bas. Faites glisser les éléments ici pour les masquer du pied de page.
Vous pouvez également configurer les paramètres des zones structurelles dans l’émulateur. Dans l’émulateur, cliquez sur l’icône Paramètres près des étiquettes “Top area” ou “Bottom area” pour ajuster des propriétés telles que rendre la zone “Always visible”.
Figure 7 : Menu settings configuration
Après avoir effectué toutes les modifications nécessaires, cliquez sur le bouton Enregistrer pour appliquer les modifications au modèle d’application.
Figure 8 : App builder save configuration
