Point - Générateur d'interface utilisateur (l'outil de skinning Point)

Introduction

UI builder est une application d’assistance qui permet de styliser Point pour correspondre à votre marque. En bref, c’est une application qui nous permet de réécrire le CSS de Point.

À noter

UI builder est une application avancée, ce qui signifie qu’il est rare que les propriétaires du système y aient accès pour éditer. L’UI builder est un outil technique auquel seuls les utilisateurs avancés (par exception) ont accès.

Cela signifie que vous pouvez casser certains éléments de style dans votre portail. Si un designer Papirfly ou un spécialiste Solution le configure pour vous lors de l’intégration ou sur demande, nous pouvons garantir que tout fonctionne comme prévu, mais si vous, en tant que propriétaire du système, commencez à travailler dans cet outil, nous ne pourrons plus vous assister directement sur l’UI builder.

Ce que ce guide couvre

• Comment fonctionne l’UI Builder : Comprendre les fonctions et fonctionnalités de base.
• Étapes pour la sauvegarde : Comment sauvegarder vos paramètres actuels.
• Revenir en arrière : Comment annuler les modifications que vous faites.
• Terminologies clés : Termes et concepts essentiels pour vous aider à naviguer et utiliser efficacement l’UI Builder.
• Sujets de dépannage : Comment résoudre les problèmes les plus courants.

Note : Ce guide ne couvrira pas toutes les options disponibles dans l’UI Builder en raison du grand nombre de fonctionnalités.

Prérequis

Pour utiliser efficacement l’UI Builder, vous devez avoir des connaissances sur les points suivants :

• Administration des pages : Connaissance de base de la gestion des pages.
• Édition des pages : Capacité à éditer et gérer le contenu des pages.
• Création de modèles de pages : Familiarité avec la construction et l’utilisation des modèles de pages.
• Notions de base en CSS : Compréhension du CSS ou au moins familiarité avec les valeurs et le style CSS.
• Terminologie web et design : Connaissance des termes courants comme les couleurs hexadécimales, pixels (px), unités em, etc.

Comment accéder à l’UI builder

Selon votre configuration, il y a deux façons d’accéder à l’UI builder

1. Lien direct

Puisque l’outil n’est pas initialement prévu pour les propriétaires de système, il n’est pas configuré dans l’interface utilisateur normale. Certains ont reçu un lien direct auquel ils peuvent accéder OU un lien placé dans la navigation Point, accessible uniquement aux administrateurs.

2. Via le menu flottant admin

Cliquez sur le symbole "superadmin" pour ouvrir l’application "super admin".

Utilisez la roue dentée sur la droite liée au portail que vous souhaitez mettre à jour.

En haut à droite, vous trouverez le bouton pour l’UI builder.

Enfin, vous devez sélectionner la skin que vous souhaitez modifier. Si votre portail en possède plusieurs, assurez-vous de choisir la bonne. En cas d’incertitude, contactez votre CSM, spécialiste solution ou support pour assistance.

La skin "default" n’est pas utilisée.

Celle-ci est uniquement utilisée lors de nouvelles installations et ne doit pas être utilisée autrement.

C’est celle que nous utiliserons dans notre exemple. Cliquez dessus pour accéder à la skin.

Note : Ne pas utiliser la corbeille (supprimer) car cela pourrait casser le style et potentiellement rendre votre portail inutilisable.

L’UI builder :

Il y a beaucoup à comprendre lors de la première ouverture de l’UI builder. Vous trouverez ci-dessous une décomposition de plusieurs sujets. Assurez-vous de comprendre chaque section avant de commencer à modifier.

Chaque champ de saisie correspond à une valeur CSS individuelle. Les valeurs supportées dépendent du champ sur lequel vous travaillez. Si vous souhaitez vérifier les valeurs supportées, vous trouverez de bonnes références ici : https://www.w3schools.com/

La plupart des champs supportent l’utilisation de "références". Si vous souhaitez utiliser la couleur principale sur plusieurs zones, copiez la "clé" de la couleur principale et collez-la où c’est nécessaire.

Ceci n’est qu’une partie du style utilisé dans Point. Si vous avez des questions concernant d’autres options de style, contactez votre CSM, spécialiste solution ou support pour obtenir de l’aide. Notez que toutes les options de style ne seront pas disponibles. Plusieurs options sont interdites car elles risquent fortement de casser quelque chose.

Avant de commencer

Il n’y a pas de zone de prévisualisation pour vos modifications et il n’est pas possible de "revenir en arrière" sur les derniers changements, ce qui signifie qu’il est important d’adopter une approche prudente lorsque vous travaillez dans le constructeur d’interface.

Pensez toujours à créer une sauvegarde. Pour une sauvegarde complète, vous pouvez télécharger un fichier "json" à partir de deux endroits différents.

1. Cliquez sur paramètres généraux, puis allez sur les 3 points et sélectionnez "exporter les variables".

2. Cliquez sur composants du brandbook, puis allez sur les 3 points et sélectionnez "exporter les variables"

Si vous faites une erreur ou souhaitez revenir en arrière, allez dans chacun de ces deux espaces et "importez" les variables puis enregistrez (voir la partie sauvegarde ci-dessous).

Paramètres généraux :

Cette section sert de zone de "référence". L’idée est que vous fassiez un changement ici et qu’il soit automatiquement mis à jour à plusieurs autres endroits.

Exemple : Couleurs (cet exemple est donné à titre illustratif uniquement car votre solution peut utiliser ces valeurs et références différemment)

Nous définissons la couleur principale dans les "paramètres généraux". Celle-ci est ensuite automatiquement utilisée dans le composant "footer" (dans les composants du brandbook) via la valeur "$primary-color".

C’est pourquoi vous voyez des termes plus larges comme "mise en page", "couleurs", "typographie", etc., car ces sections regroupent tous les comportements dans une seule section puis les distribuent dans les différents composants.

Les paramètres généraux sont divisés en catégories suivantes :

Mise en page : Boîtes et formes. Comment les éléments s’empilent sur les téléphones, etc.

Couleurs : Structure pour stocker et utiliser les couleurs dans toute l’application. Les couleurs stockées ici sont également accessibles dans la palette de couleurs lors de l’édition des pages dans Point.

Ombres : Regroupement des réglages des ombres sur différents éléments de l’application.

Typographie : Configuration du texte (polices utilisées, tailles, graisses, espacements, etc.) pour tous les styles de texte dans l’application.

Éléments UI : Configuration des boutons, champs de saisie et autres éléments d’interaction.

Polices : Polices supplémentaires ajoutées au système. L’ajout de polices doit être très précis. Contactez votre CSM, spécialiste solution ou support en cas de questions sur l’ajout de polices.

Icônes : Fonction avancée pour gérer les icônes dans toute l’application. Contactez votre CSM, spécialiste solution ou support pour toute question à ce sujet.

Google Maps : Fonction avancée pour styliser la vue du filtre des localisations géographiques. 

Enregistrer les modifications : (en deux étapes) Cliquez d’abord sur "enregistrer & mettre à jour le skin" en haut.

Puis allez dans "composants du brandbook" et cliquez sur "enregistrer & mettre à jour tous les composants".

Une fenêtre pop-up apparaîtra montrant la progression de l’enregistrement. Attendez que toutes les applications soient entièrement enregistrées avant de continuer. Cela permet de mettre à jour toutes les références $value. Si vous ne faites pas cette étape, les modifications ne s’appliqueront pas à certains composants.

Composants du Brandbook

Ici, vous pouvez détailler le style pour chaque composant.

Tous ces composants correspondent à des composants individuels que vous pouvez gérer dans le constructeur de "modèle de page". Les modifications faites ici seront personnalisées pour ce composant spécifique.

Enregistrer les modifications : Cliquez sur le bouton bleu "mettre à jour" pour le composant que vous êtes en train de modifier.

Confirmez vos modifications

Une fois que vous avez correctement enregistré, ouvrez une page Point et confirmez vos modifications. Il est recommandé de le faire dans une fenêtre séparée pour pouvoir basculer rapidement d’un onglet à l’autre et ajuster.

Guide de dépannage :

J’ai fait une erreur et quelque chose s’affiche mal / est cassé. Je dois revenir en arrière.

Si vous devez revenir en arrière, vous avez deux options :

1. Modifier les valeurs individuelles :
   • Retournez dans le constructeur d’interface et modifiez la valeur individuelle pour la remettre à son état précédent.
2. Charger une sauvegarde :
   • Chargez la sauvegarde (reportez-vous à la section sauvegarde pour les instructions de création d’une sauvegarde).
   • Vous n’avez besoin de revenir en arrière que sur la section sur laquelle vous avez travaillé. Par exemple, si vous n’avez fait des modifications que dans les "paramètres généraux", vous n’avez qu’à recharger les variables UI de cette section. N’oubliez pas d’enregistrer dans les deux zones pour voir l’effet.

Il n’existe pas d’autre moyen de revenir en arrière.

Le bouton de réversion

Le bouton de réversion ne remet pas la valeur à votre valeur personnalisée précédente. Il revient à la valeur "par défaut", ce qui signifie que vos valeurs personnalisées précédentes peuvent être perdues.

Désactivation des couleurs

Désactiver des couleurs peut causer des problèmes. La plupart des options de couleurs supportent la désactivation dans la "palette de couleurs", mais pas toutes. Désactiver une couleur non supportée empêchera l’enregistrement de votre skin (ce qui provoquera une grande fenêtre d’erreur rouge). Si cela arrive, retournez activer la couleur puis enregistrez.

J’obtiens une grosse erreur rouge effrayante lors de l’enregistrement

Cela arrive généralement quand une valeur non supportée est ajoutée. Vérifiez vos changements récents et testez différentes entrées. Notez que la prise en charge des entrées est limitée, donc toutes les valeurs que vous attendez ne sont pas forcément autorisées.

Ma palette de couleurs (éditeur) ne se met pas à jour dans Point

La palette de couleurs (utilisée pour le marquage du texte, les couleurs de fond, etc.) peut être lente à se mettre à jour à cause du cache. Pour voir les changements, déconnectez-vous de l’application, fermez complètement votre navigateur puis rouvrez-le. Les modifications sont bien prises en compte, mais votre navigateur peut mettre du temps à actualiser son cache.

Mes modifications ne s’affichent pas

Si vous avez fait des modifications dans l’onglet "paramètres généraux", pensez aussi à "enregistrer et mettre à jour tous les composants" dans l’onglet "composants du brandbook". Cette action met à jour toutes les références $value avec les nouvelles valeurs.

Si les modifications ne s’affichent toujours pas, vérifiez que vous avez bien fait les changements au bon endroit.

Si vous avez modifié les "paramètres généraux" et souhaitez que cela s’affiche sur un composant, assurez-vous que les réglages du composant utilisent la référence $value. Évitez autant que possible de mettre des valeurs directement sur les composants, car cela nécessite des mises à jour manuelles pour les changements futurs.