Constructeur de composants

Le Constructeur 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. Canevas (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 canevas.

• Agencer & Imbriquer : Positionnez les composants librement 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 de gauche (Votre boîte à outils)

Ce panneau sur le côté gauche contient plusieurs outils essentiels, 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 (Table de données, Bouton, Graphique, Carte, etc.). Trouvez ce dont vous avez besoin ici et faites-le glisser sur le canevas.

  • 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 qui peuvent 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 lieu 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 sur votre canevas.

• Panneau Style: Gérez des 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 présents sur votre canevas. Ceci 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 canevas.

• Votre centre de contrôle : C'est ici que vous peaufinez tout concernant 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 supérieure (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, le plus important étant de définir le Nom API de l'objet cible.

• Aperçu (Droite) : Voyez 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.