Parcourez les guides pratiques pour construire et adapter des fonctionnalités sur la plateforme DAZZM.
- Travailler avec des fichiers et des images
Stocker une seule image dans un agrégat Quand l’utiliser : Choisissez cette approche lorsque l’agrégat requiert exactement un champ image lié à un objectif métier précis, par exemple : Une photo d’équipement dans un enregistrement d’actif Une photo de profil dans un compte utilisateur
- Créer et utiliser une API externe
Intégrez une API dans une application pour faciliter la communication avec une deuxième application. Dans cet exemple, lorsqu’un nouvel utilisateur est créé dans notre application, un workflow déclenche un appel API externe vers une application externe pour vérifier si l’utilisateur existe déjà. Si l’utilisateur est trouvé, ses informations sont mises à jour en conséquence.
- Flux de travail déclenché par courriel
Un flux de travail déclenché par courriel automatise des actions lorsqu’un courriel est reçu dans une boîte de réception désignée de l’application. Par défaut, l’application peut recevoir des courriels à toute boîte de réception formatée comme inbox@myapp.octopus-esm.com, où « inbox » peut être remplacé par n’importe quel mot. Dans ce cas, l’objectif est d’automatiser la création de billets (Tickets) en fonction de mots-clés spécifiques dans l’objet et le corps des courriels envoyés à support@myapp.octopus-esm.com.
- Intégrer l’API Microsoft Graph pour créer des utilisateurs à partir d’Azure Active Directory
Intégrez une application Dazzm avec l’API Microsoft Graph pour permettre la recherche et la sélection d’utilisateurs directement depuis votre Azure Active Directory. Partie 1 — Configurer la connexion API à Azure AD 1. Enregistrer l’application Azure et ajouter les permissions Graph API
- Barre de messages dans un dialogue
L'ajout d'une « message bar » dans un dialogue permet d'afficher des messages d'alerte ou d'information aux utilisateurs. Cette section de message n'affecte pas les données puisqu’elle ne fait pas partie des paramètres de la commande ou des mutations. Dans cet exemple, nous allons voir comment ajouter une « message bar » dans un dialogue permettant de modifier la langue d'un utilisateur. Nous personnaliserons ensuite son titre, son message principal et son couleur de fond en fonction du type défini dans le code…
- Comment masquer une liste si elle est vide
Dans une interface utilisateur, afficher une liste vide peut être déroutant et peu esthétique. Pour améliorer l'expérience utilisateur, il est essentiel d'adapter l'affichage en fonction des données disponibles. Masquez une liste lorsqu'elle est vide et affichez à la place un message clair indiquant l'absence de données.
- Comment présenter des données en colonnes
Pour organiser vos données efficacement, vous pouvez les présenter en colonnes en utilisant un tableau qui catégorise les informations selon un champ précis. Par exemple, en travaillant avec un agrégat tel que Compte et en utilisant le champ Industrie (ce champ doit se trouver sous le parent “entité ou agrégat”) pour regrouper les données, vous pouvez obtenir un résultat clair et structuré. Le résultat final est un tableau dynamique où chaque colonne représente une industrie, avec la possibilité d’explorer les…
- Création d’un Layout de toute pièce
Le layout est une composante essentielle d’une application, car il détermine les sections fixes qui restent accessibles à l’utilisateur, peu importe la page consultée. Voyons ensemble comment créer un « layout » à partir de rien, en suivant une approche simple et structurée. Que ce soit pour créer une interface complexe avec plusieurs panneaux ou une structure plus minimaliste, tout est possible avec un peu de créativité.
- Comment gérer des fichiers dans un modèle
Gérez des fichiers dans un modèle en apportant des modifications au modèle de données et à l'interface utilisateur. À travers l'exemple de l'ajout de la fonctionnalité de joindre des fichiers, tels que des contrats, à l'entité Compte d'une application CRM, découvrez les étapes pour structurer les données, créer des commandes pour manipuler les fichiers, et intégrer une interface utilisateur permettant leur téléchargement et leur gestion.
- Créer et ajouter un composant ReactJS à la boîte à outils
Dans le développement moderne avec ReactJS, la création de components réutilisables et leur intégration dans un environnement de conception est une étape essentielle pour améliorer la productivité et la cohérence du code. Créez une component ReactJS personnalisée et rendez-la disponible dans le toolbox. Vous découvrirez comment structurer le module, gérer les propriétés, et configurer la component pour qu’elle soit facilement accessible et configurable via l’interface utilisateur de la…
- Menu contextuel
Créez un menu contextuel dans la fiche de coordonnées d’un compte, qui s’adapte en fonction du contexte. Pour cela, il s'appuie sur une commande existante nommée « modifierCoordonnées », contenant des paramètres tels que le site web, le numéro de téléphone, l’adresse, la ville, la province et le code postal.
- Prévenir la création de doublons
Lorsqu’on saisit des données, il arrive parfois qu’un utilisateur ne sache pas qu’un enregistrement portant le même nom existe déjà dans la base de données. Cela peut entraîner la création de doublons, ce qui complique la gestion et la fiabilité des données. Pour remédier à ce problème, nous allons mettre en place une solution simple et efficace : un dialogue d’avertissement qui s’affichera seulement lorsqu’un enregistrement portant le même nom est détecté.
- Personnaliser la route d’une page de détail pour la rendre conviviale
Par défaut, la route de la page de détail affiche l’ID des données. Cependant, il est possible de créer une URL plus conviviale comme https://dazzm-training-gs.octopus-esm.com/profile/Gabrielle-Strauss au lieu de la route par défaut https://dazzm-training-gs.octopus-esm.com/user/2dd26bd3-eb86-46ad-a1c6-d4830271a430.
- Intégrer un SVG pour créer une barre de progression
Apprenez à afficher un fichier SVG comme image statique ainsi qu’à utiliser une façon plus avancée d’intégrer un SVG dynamique, qui réagit selon les données. Dans le premier exemple, l’image SVG remplacera le logo DAZZM, dans le coin supérieur gauche de l’application. Dans le suivant, le composant HTML permettra au code SVG de réagir à la progression de l’utilisateur dans la complétion de ses informations de profil.
- Créer une liste principale et des détails principaux avec Page Frame
Un « page frame » est un composant de la toolbox qui crée une section pour afficher une autre page au sein de la même application. C’est le même concept que l’Iframe en HTML. Gardez à l’esprit que pour modifier la page affichée dans le page frame, vous devez modifier directement la page référencée.
- Intégrer une image utilisateur pour remplacer les avatars
Créez une fonctionnalité permettant aux utilisateurs d’ajouter une photo à leur profil utilisateur. Appliquez une restriction à cette fonctionnalité en veillant à ce que seul l’utilisateur de ce profil puisse ajouter une photo. De plus, la photo de l’utilisateur remplacera l’avatar utilisateur dans le coin supérieur droit de l’application, ainsi que dans le menu drawer.
- Créer une liste de tâches intégrée sans dialogues
L’utilisation de formulaires intégrés permet à l’utilisateur de remplir des champs sans avoir une fenêtre de dialogue ouverte. Dans cet exemple, une liste de tâches sera ajoutée à un nouvel onglet de la page de détail de l’Opportunity. L’option d’ajouter une tâche et de marquer une tâche comme complétée sera réalisée sans l’aide de dialogues.
- Créer un dialogue personnalisé avec un formulaire intégré
Le comportement component dialog permet à un utilisateur d’afficher un composant réutilisable avec un formulaire intégré au lieu d’un dialogue standard. Cela permet d’économiser de l’espace entre les champs et de personnaliser l’apparence du dialogue. 1. Créer le composant réutilisable pour le dialogue
- Afficher ou masquer un élément au survol : bouton Edit
Apprenez à afficher ou masquer un élément lorsque la souris survole une section prédéterminée. Dans cet exemple, une icône « edit » sera affichée lors du survol de la section « coordinates » de la page de détail du compte. 1. Ajouter l’icône Edit au field panel Glissez-déposez une icône, à côté de la boîte contenant le titre du field panel et enveloppez-la dans une boîte. Il est essentiel d’appliquer un wrap à l’icône qui ne sera affichée que lors du survol d’une section spécifique, car seule une boîte donne…
- Créer une section de commentaires et de réponses
Créez une section où les utilisateurs peuvent laisser des commentaires ou des notes et recevoir des réponses. Ceux-ci seront organisés par date de publication et chaque commentaire sera identifié par le nom de connexion de l’utilisateur, son icône utilisateur ainsi que la date et l’heure de publication. Les commentaires et les réponses pourront être modifiés ou supprimés exclusivement par leur auteur. Si l’un est modifié, une étiquette sera affichée, et une infobulle indiquera la date de la dernière modification.
- Créer un composant réutilisable : Account Card
Un composant réutilisable est un ensemble complexe de composants et d’éléments de style, enregistré dans votre toolbox. Il y a deux raisons principales pour lesquelles vous voudriez en créer un : • pour l’utiliser sur plus d’une page • pour simplifier la structure d’une page tout en concevant la section spécifique dans le composant réutilisable
- Utiliser les Candidate Values et On Change
Lors de la création d’une opportunité, permettez à l’utilisateur de choisir une devise associée à plusieurs listes de prix pour leurs produits. Puisque chaque liste de prix contient une collection de produits avec leur propre prix unitaire, lorsqu’une opportunité est assignée à une liste de prix, le coût du produit sera défini automatiquement.
- Commande par lot appliquée aux éléments d’une liste
Créez un dialogue par lot sur plusieurs éléments d’une liste, ce qui vous permet de modifier le gestionnaire de compte sur tous les comptes sélectionnés, en une seule opération. Ce dialogue par lot efficace peut être appliqué à tout type de champ, d’un champ numérique à un champ texte.
- Un repeater avec des informations hétérogènes
Pour cet exemple, utilisez le repeater de l’Aggregate Product, construit à l’aide d’un grid. Pour apprendre comment le construire, consultez le guide « Use Grid to Create a Table ». Ses colonnes représenteront divers champs d’informations hétérogènes communs à tout type de produit.
- API Google Maps dans un composant React personnalisé
Ajoutez un composant React à la page de liste des comptes, spécialement conçu pour afficher une Google Maps où des repères intégrés montrent l’emplacement de chaque Account. 1. Créer un nouveau module pour Google Maps Commencez par créer un nouveau module. Dans cet exemple, il s’appelle « GoogleMaps ». Ensuite, copiez sa valeur de module, car elle sera utilisée à l’étape 3. Cela se fait simplement en cliquant dessus, dans la section supérieure de la page du module.
- OpenWeatherMap dans un composant React personnalisé
Ce composant « OpenWeatherMap » est conçu pour afficher des données météorologiques. Il utilise l’API Google Maps pour geocoder l’adresse en coordonnées. Ensuite, à l’aide de ces coordonnées, il effectue un appel API à OpenWeatherMap pour récupérer les données météorologiques locales actuelles de cette zone. C’est un composant utile pour quiconque souhaite intégrer rapidement et facilement des données météorologiques basées sur une adresse, en utilisant React dans l’application.
- Utiliser Grid pour créer un tableau
Dans cet exemple, le tableau donnera aux utilisateurs le nombre d’articles vendus par produit et calculera le pourcentage des ventes attribué par produit. 1. Créer un champ « Sold » et une commande de mise à jour Avant de créer le tableau, nous devons créer des données. Créez un nouveau champ « sold », de type number et ajoutez-le comme champ obligatoire à une nouvelle commande de mise à jour. Dans cet exemple, le nom de la commande sera « sellProduct » et le type d’événement « PRODUCT_SOLD ».
- Enum liés pour pays et province ou État
Crée une relation entre deux Enum, afin d’afficher uniquement un ensemble spécifique de valeurs de la deuxième Enum, selon la valeur sélectionnée dans la première Enum. Dans cet exemple, nous allons créer un Enum Country et Province/State et les ajouter comme paramètres de la commande « modifyInfo ». Lorsque Canada sera le pays sélectionné, seules les provinces seront disponibles et, bien sûr, seuls les états seront affichés pour USA. L’option « other » sera également disponible pour les deux pays.
- Comment créer des formulaires plein-écran
Actuellement, la création d'une demande de nouvel employé passe par une fenêtre de dialogue qui s’ouvre via le bouton « + » et se ferme une fois le formulaire rempli. Redirigez les utilisateurs vers une page dédiée en plein écran pour une interface plus claire et optimisée. Suivez ces étapes pour mettre en place cette nouvelle approche.
- Comment créer un champ pour sélectionner un contact principal parmi une liste de contacts d’un compte
Dans le CRM, nous avons un agrégat « Compte », qui a une collection d’entités « Contacts ». Ici, on cherche à avoir un champ au niveau du root (Compte) qui va pointer vers un seul élément de la collection d’entité (contacts) pour définir le contact principal du compte. Attention : on ne peut pas créer un champ « contact principal » de type Contact et le configurer pour avoir le choix de la liste des contacts du compte, car ceci irait créer une deuxième entrée de contact dans la base de données avec les…
- Comment créer une icône qui affiche/cache une section quand on clique
Utilisez les fonctionnalités « save page data » et « show/hide component based on a condition » pour créer un mécanisme interactif permettant d'afficher ou de cacher un élément de l'interface utilisateur. Qu’il s’agisse d’une icône, d’une boîte ou même d’un texte, cette méthode est adaptable à de nombreux cas. Pour illustrer, nous allons concevoir un exemple où une section d’information peut être réduite ou ouverte grâce à un clic sur une icône, tout en faisant varier…