Constructeur de composants

Le Générateur de Composants est votre environnement de conception visuelle où vous donnez vie à vos Composants Dynamiques personnalisés. Il est conçu pour être intuitif, vous permettant de créer facilement des interfaces sophistiquées en utilisant le glisser-déposer.

Faisons un tour des zones principales :

a. Canvas (Centre)

• Votre Espace de Travail Principal : C'est la scène principale où vous assemblez visuellement votre composant.

• Glisser & Déposer : Vous ferez glisser des composants depuis la Bibliothèque de Composants (à gauche) et les déposerez sur le canvas.

• Agencer & Imbriquer : Positionnez librement les composants et placez-les à l'intérieur de composants de mise en page (comme Cartes, Colonnes, Conteneurs et Conteneurs à Onglets) pour créer des interfaces utilisateur structurées et complexes.

b. Panneau Gauche (Votre Boîte à Outils)

Ce panneau sur le côté gauche contient plusieurs outils cruciaux, généralement accessibles via des icônes ou des onglets :

• Bibliothèque de Composants :

  • Onglet Composants: Votre palette de tous les composants Avonni disponibles (Tableau de Données, Bouton, Graphique, Carte, etc.). Trouvez ce dont vous avez besoin ici et faites-le glisser sur le canvas.

  • Onglet Champs: Après avoir défini le Nom de la Page Cible (dans Paramètres), cet onglet se remplit avec les champs de cet objet Salesforce. Faites glisser ces champs directement sur les composants pour les lier rapidement aux données.

• Panneau Ressources: La salle des machines pour les données et la logique de votre composant. Ici, vous créez et gérez :

  • Variables: Pour stocker des valeurs dynamiques susceptibles de changer.

  • Constantes: Pour stocker des valeurs fixes.

  • Formules: Pour effectuer des calculs.

  • Requêtes/Requêtes Imbriquées: Pour définir comment les données sont récupérées depuis Salesforce.

• Panneau Interactions: Un endroit central pour voir et gérer toutes les interactions (comme les actions « Au clic » ou « Au chargement ») que vous avez configurées pour les composants de votre canvas.

• Panneau de style: Gérer les styles personnalisés. Créez des styles nommés ici et appliquez-les à plusieurs composants pour une apparence cohérente.

• Panneau Structure du Composant : Fournit une vue hiérarchique en « arbre » de tous les composants actuellement présents sur votre canvas. C'est extrêmement utile pour comprendre la structure d'imbrication et sélectionner des composants spécifiques, surtout dans des mises en page complexes.

c. Panneau Propriétés (Droite)

• Paramètres Sensibles au Contexte : Ce panneau est dynamique. Il affiche les options de configuration spécifiques pour le composant sélectionné actuellement sur le canvas.

• Votre Centre de Contrôle : C'est ici que vous affinez tout ce qui concerne le composant sélectionné : son apparence (étiquettes, couleurs, tailles), son comportement, sa connexion aux données (source de données, mappage) et ses interactions spécifiques.

d. Barre du Haut (Commandes Essentielles)

• Annuler/Rétablir (Gauche) : Reculez ou avancez d'une étape dans vos modifications récentes.

• Paramètres (Gauche - Icône Engrenage ⚙️) : Accédez aux paramètres cruciaux pour le composant dynamique dans son ensemble, en particulier pour définir le Nom API de l'Objet Cible.

• Aperçu (Droite) : Voir instantanément un aperçu en direct de l'apparence et du comportement de votre composant pour les utilisateurs finaux.

• Enregistrer (Droite) : Enregistrez votre progression sur le Composant Dynamique.