Personnalisation de la page Détail de l'enregistrement à l'aide du concepteur Canvas

Personnalisation de la page Détail de l'enregistrement à l'aide du concepteur Canvas

L'affichage Liste permet de personnaliser l'affichage des enregistrements dans la liste des modules. Vous pouvez ajouter des images, utiliser des boutons personnalisés pour représenter des champs, utiliser un style ou une taille de police spécifique pour les étiquettes de champs, modifier l'alignement des types de champs et plus encore. Ces personnalisations étaient limitées uniquement à l'affichage Liste.
Le concepteur de Canvas pour la page Détails vous permet de personnaliser la page Détail de l'enregistrement selon vos préférences, en vous permettant d'ajouter une couleur d'arrière-plan à chaque champ, de les organiser dans un ordre différent, d'utiliser des boutons personnalisés au lieu de noms de champs, d'utiliser différents styles de police et bien plus encore. Cet affichage est disponible dans tous les modules, y compris les modules personnalisés.

Disponibilité
Autorisation requise
Les utilisateurs disposant de l'autorisation de gérer la personnalisation peuvent personnaliser la page Détail de l'enregistrement

Composants du concepteur de Canvas pour la page Détails

Comme dans la liste des modules, vous pouvez personnaliser la page Détail de l'enregistrement à l'aide de Canvas. Ce concepteur de page Détails comporte les composants suivants:
  1. Éléments : se compose des différents composants présents dans une mise en page : Section, Onglet, Tableau, Texte, Icône et Courbes.
  2. Données : comprend la liste des composants qui seront affichés dans une mise en page : Champs, Listes associées, Liens et Actions (boutons comme Modifier, Soumettre, Suivant, etc.).
  3. Style: la fonction Style vous permet de modifier la police, la taille de la police, la couleur d'arrière-plan, les bordures, les ombres, le rayon, la marge intérieure, la marge extérieure et d'insérer une image d'arrière-plan. Ces modifications peuvent être appliquées en sélectionnant un élément souhaité dans le concepteur de Canvas. Les options varient selon l'élément sélectionné.

Comprendre les composants

Éléments
Dans Éléments, vous trouverez les composants suivants:
  1. Section : une section est un espace ou bloc vide qui apparaîtra dans la page Détails.
    1. Vous pouvez insérer des champs de mise en page dans une section, des images de lieux ou des emplacements, ou l'utiliser comme bannière pour afficher un message, etc.
    2. Faites glisser les bordures pour redimensionner la zone de section.
    3. Cliquez sur    l'icône pour cloner la section.
    4. Vous pouvez cliquer avec le bouton droit de la souris sur la section puis sur Insérer pour ajouter des champs, rendre le composant fixe ou fluide, copier, coller le style ou supprimer.
    5. Ajoutez les éléments de style. (En savoir plus sur les styles.)

  2. Onglets :  les onglets vous permettent d'organiser les champs et listes associées dans différents écrans. Il s'agit du meilleur moyen de faciliter la navigation et d'organiser l'affichage pour les utilisateurs. Par exemple, dans l'image ci-dessous, l'onglet Informations est placé dans le module Produits, qui comporte trois onglets : Remarques, Pièces jointes et Activités en cours, le tout dans une seule section. En cliquant sur l'icône +, vous pouvez ajouter d'autres champs ou listes associées sous forme d'onglets.
      
    1. Dans le panneau de gauche, vous pouvez saisir le nom de l'onglet puis cliquer sur l'icône + pour ajouter d'autres onglets.
    2. Passez la souris sur les onglets et cliquez sur l'icône de fermeture pour supprimer un onglet.
    3. Passez la souris sur un onglet, et lorsque vous obtenez l'icône de double flèche, faites glisser l'onglet puis relâchez le bouton de la souris pour modifier sa position.
    4. Cliquez à l'aide du bouton droit de la souris dans l'onglet pour modifier la liste associée, rendre un composant fluide ou fixe, copier ou coller une liste associée et supprimer.
    5. Vous pouvez insérer des éléments de style comme l'image, la couleur d'arrière-plan et bien plus encore. (En savoir plus sur les styles.)
        
  3. Tableau :  le tableau peut être utilisé pour afficher les enregistrements sous forme de tableau. Par exemple, dans l'image ci-dessous, le nom du produit, la description, le stockage principal sont les champs présents dans la mise en page et sont affichés sous forme de lignes et de colonnes. Le format de tableau vous permet de gagner de l'espace dans la page Détails.
    1. Passez la souris sur les lignes et colonnes, puis cliquez sur les icônes + ou - pour ajouter ou supprimer une ligne ou colonne.
        
    2. Cliquez avec le bouton droit de la souris sur une ligne pour modifier les champs, rendre un composant fluide ou fixe, copier ou coller le style ou supprimer le champ.
        
    3. Faites glisser les bordures pour redimensionner le tableau.
  4. Texte : ajoutez une zone de texte pour saisir du contenu dans la page Détails. Par exemple, utilisez-la comme en-tête avant de commencer une section ou pour ajouter une remarque, un avertissement, etc.
    1. Faites glisser les bordures pour redimensionner la zone de texte.
    2. Cliquez avec le bouton droit de la souris pour cloner, rendre un composant fixe ou fluide ou supprimer la zone de texte.
        
  5. Icône : utilisez une icône pour représenter un champ au lieu d'une étiquette de texte conventionnelle. Par exemple, dans l'image ci-dessous, le nom et le prix du produit sont affichés à l'aide d'icônes au lieu de texte.
      
    1. Faites défiler la barre d'icônes pour vous déplacer vers le haut ou le bas, et choisissez parmi de nombreuses icônes.
    2. Cliquez sur l'icône pour cloner, supprimer ou modifier.
    3. Faites glisser les bordures pour augmenter ou diminuer la taille.

Composant fixe et fluide

Chaque élément (section, onglet, texte, tableau) dispose d'une option pour le définir comme composant fixe ou fluide. En sélectionnant Composant fixe, vous pouvez empêcher toute modification de la taille d'un élément en fonction de l'écran de l'utilisateur. En revanche, sélectionner Composant fluide permet à l'élément de se redimensionner en fonction de la taille de l'écran de l'utilisateur.
Par exemple, si vous pensez que l'image d'arrière-plan insérée pour une section peut dépasser de l'écran au-delà d'une certaine taille, il est préférable de la définir comme un composant fluide, afin qu'elle s'ajuste en fonction de l'écran de l'utilisateur.

Personnaliser la page Détails de I'enregistrement

Pour personnaliser la page Détails de I'enregistrement
  1. Rendez-vous dans Setup Customization Canvas Builder. (Configurer > Personnalisation > Concepteur de Canvas).
  2. Cliquez sur +Create Record Detail page. (Créer une page Détail de l'enregistrement).
  3. Sur la page Create a Custom Record (Créer un enregistrement personnalisé), sélectionnez le Module et la mise en page Layout dans la liste déroulante.
    Vous pouvez créer un maximum de 5 affichages/mises en page de Canvas.
  4. Cliquez sur Create (Créer).
      
  5. Dans Canvas Builder (Concepteur de Canvas), cliquez sur Elements dans le panneau de gauche.
  6. Faites glisser et déposez les Sections, les Onglets, le Tableau, le Texte ou les Icônes dans l'espace vide.
  7. Ajoutez des Styles si nécessaire.
    Reportez-vous aux informations sur l'application d'un style aux éléments.
  8. Dans la barre de menu supérieure, vous pouvez effectuer les opérations suivantes:
    1. Annuler ou rétablir les modifications.
    2. Afficher un aperçu du Canvas avant de l'enregistrer.
    3. Affichez le Canvas en plein écran.
    4. Nommez le Canvas.
        

Application d'un style aux éléments

Des options de style comme la couleur d'arrière-plan, la marge intérieure, l'alignement des étiquettes de champs, les bordures, la marge extérieure, etc. peuvent être appliquées à tous les éléments. Vous pouvez également personnaliser l'arrière-plan de la page à l'aide des options de style. Certaines options sont spécifiques à un élément.

Options de style pour une page
La personnalisation de la page comprend les éléments suivants :
  1. Arrière-plan
  2. Marge intérieure
  3. Hauteur
  4. Largeur
  5. Ajuster à la taille de l'écran
      
Arrière-plan  
  1. Sélectionnez une couleur d'arrière-plan dans la palette ou le sélecteur de couleurs. Vous pouvez également indiquer le code HEX de la couleur.
  2. Cochez la case Image et saisissez l'URL de l'image pour l'utiliser comme arrière-plan.
    1. Taille de l'image : la taille peut être définie à l'aide de trois options.
      1. Contenir : cette option ajuste la taille d'une image pour qu'elle s'adapte à une page, tout en conservant un rapport hauteur/largeur intact.
      2. Original : cette image sera conservée dans sa taille d'origine.
      3. Couverture : cette option permet d'étirer l'image pour remplir la longueur et la largeur de la page, quel que soit le rapport hauteur/largeur.
    2. Répétition de l'image : si la taille de l'image d'arrière-plan est trop petite pour couvrir toute la page, vous pouvez utiliser l'option de répétition de l'image. Cela vous permettra de répéter l'image plusieurs fois et de remplir complètement l'arrière-plan. Les types de répétition suivants peuvent être sélectionnés :
      1. X : l'image se répète selon un axe horizontal.
      2. Y : l'image se répète selon un axe vertical.
      3. Les deux : l'image se répète selon un axe horizontal et vertical.
      4. Pas de répétition : empêche la répétition de l'image.
  3. Cochez la case Dégradé pour créer une transition douce entre plusieurs couleurs en arrière-plan. Si vous choisissez plusieurs couleurs en ligne droite, la position peut être ajustée pour offrir un mélange parfait de toutes les couleurs.
Marge intérieure
La marge intérieure détermine l'espace autour du contenu à l'intérieur d'une marge/bordure. Pour la modifier, sélectionnez l'élément et cochez la case Marge intérieure.
  1. Augmenter la marge intérieure : la marge intérieure peut être augmentée en faisant glisser le curseur vers la droite. Vous pouvez également spécifier la marge intérieure en pixels.
  2. Marge intérieure identique de tous les côtés : la case Marge intérieure identique de tous les côtés applique la marge intérieure que vous avez configurée sur les quatre côtés de l'élément. Vous pouvez désélectionner cette case à cocher et définir des marges intérieures différentes pour les quatre côtés de l'élément.
Hauteur et largeur
Réglez la hauteur et la largeur de la page en saisissant les valeurs en pixels, ou cochez l'option automatique pour que l'écran s'ajuste en conséquence.

Ajuster à la taille de l'écran
La page se développe et s'ajuste en fonction de la longueur et de la largeur de l'écran de l'utilisateur.

Options de style pour les sections

La section peut être personnalisée à l'aide des options suivantes:
  1. Arrière-plan : les options sont les mêmes que celles disponibles pour la page.
  2. Bordure
  3. Ombre
  4. Rayon
  5. Marge intérieure : les options sont les mêmes que celles disponibles pour la page.
  6. Hauteur et largeur : les options sont les mêmes que celles disponibles pour la page.
  7. Profondeur
      
Bordure 
Cochez la case Bordure et procédez comme suit :
  1. Ajuster l'épaisseur : faites glisser le curseur pour augmenter la taille de la bordure. Vous pouvez également saisir la valeur de la bordure en pixels.
  2. Style : sélectionnez un style de bordure dans la liste déroulante. Couleur : choisissez une couleur pour la bordure dans la palette ou saisissez le code HEX d'une couleur.
  3. Bordure identique de tous les côtés : cochez cette option pour appliquer les paramètres de bordure aux quatre côtés de la section. Vous pouvez décocher cette case et définir des largeurs, styles et couleurs différents pour chaque côté.
Ombre
Cochez la case Ombre et procédez comme suit:
  1. X : en fonction de la valeur, l'ombre se déplace horizontalement (vers la gauche ou la droite). Une valeur X positive place l'ombre sur le côté droit de l'élément. Une valeur négative pousse l'ombre vers la gauche.
  2. Y : en fonction de la valeur, l'ombre se déplace verticalement (vers le haut ou le bas). Une valeur Y positive place l'ombre sur le haut, et une valeur Y négative la pousse vers le bas.
  3. Flou : définit la netteté de l'ombre. Si la valeur du champ Flou est égale à 0, l'ombre sera nette. Plus la valeur est élevée, plus la netteté est faible.
  4. Propagation : ajustez la taille de l'ombre, une valeur de propagation positive augmente l'ombre et une valeur de propagation négative la diminue.
  5. Couleur : la couleur de bordure peut être choisie dans le sélecteur.
Rayon
Créez des coins arrondis en définissant le rayon. Cochez la case Rayon et procédez comme suit :
  1. Augmenter le rayon : faites glisser le curseur pour augmenter le rayon ou saisissez une valeur dans la case.
  2. Rayon identique de tous les côtés : activez l'option pour conserver la même taille de rayon pour les quatre côtés. Vous pouvez désélectionner l'option et définir différentes tailles de rayon pour chaque côté.
Marge
Définissez la position de l'élément dans la page Détails. Pour ajouter une marge intérieure, sélectionnez l'élément et cochez la case Marge intérieure.
  1. Augmenter la marge : la marge peut être augmentée en faisant glisser le curseur vers la droite. Vous pouvez également spécifier la marge en pixels.
  2. Marge identique de tous les côtés : la case Marge identique de tous les côtés applique la marge que vous avez configurée sur les quatre côtés de l'élément. Vous pouvez désélectionner cette case à cocher et définir des marges différentes pour les quatre côtés de l'élément.

Options de style pour un onglet

L'onglet peut être personnalisé à l'aide des options suivantes : (l'arrière-plan, la bordure, le rayon, la marge intérieure et la marge sont les mêmes que les options mentionnées ci-dessus).
  1. Statuts
  2. Arrière-plan
  3. Bordure
  4. Rayon
  5. Marge intérieure
  6. Marge
  7. Icônes

Statuts
Personnalisez l'onglet pour le rendre unique en fonction du statut. Par exemple, la couleur d'arrière-plan, les marges ou l'image d'arrière-plan peuvent être différentes lorsque l'onglet est à l'état Actif. De même, lorsque l'onglet est au statut Survoler, les bordures peuvent être définies en bleu pour marquer la distinction. Que signifie chaque statut ?
  1. Actif : lorsque l'onglet est sélectionné.
  2. Survoler : lorsque vous passez la souris sur le nom de l'onglet.
  3. Normal : lorsque l'onglet n'est pas actif et que vous ne passez pas la souris dessus.
Vous pouvez également modifier la police, la taille de la police, la couleur ou la casse, barrer le texte ou définir l'alignement du texte à gauche, au centre ou à droite pour chacun des Statuts ci-dessus.
Nommez l'onglet en cliquant sur l'onglet dans le concepteur et en saisissant le nom de l'onglet dans la barre de texte sous le statut Actif. 

Remarque
  1. Les listes associées ajoutées à l'élément Onglet ne peuvent pas être renommées.
  2. Cliquez sur l'icône + pour ajouter plus d'onglets.
  3. Cliquez avec le bouton droit de la souris dans l'onglet pour insérer d'autres champs, rendre un composant fixe ou fluide ou supprimer l'onglet. Vous pouvez également cliquer sur l'icône de fermeture pour supprimer un onglet.
  4. Passez la souris sur les trois barres à côté du nom de l'onglet (  ), et lorsque vous voyez la double flèche, faites glisser et déposez l'onglet à la position souhaitée.
Icônes
Les onglets peuvent être représentés à l'aide d'icônes. Cliquez avec le bouton droit de la souris sur le nom de l'onglet, puis cliquez sur Afficher l'icône pour afficher et sélectionner les icônes.

Une fois l'icône ajoutée, cliquez avec le bouton droit de la souris pour masquer ou modifier l'icône et masquer le nom de l'onglet.

Options de style pour un tableau, un texte, une icône et des courbes

Pour le tableau, le texte, l'icône et les courbes, les options de style les plus courantes sont les suivantes
  1. Bordure
  2. Ombre
  3. Rayon
  4. Marge intérieure
  5. Profondeur
En outre, vous pouvez effectuer les personnalisations suivantes pour le texte, l'icône et les courbes :
Texte: vous pouvez également modifier la police, la taille de la police, la couleur ou la casse, barrer le texte ou définir l'alignement du texte à gauche, au centre ou à droite.
Icône: la couleur de l'icône, la couleur d'arrière-plan, l'image d'arrière-plan, les bordures, l'ombre, le rayon, la marge intérieure et la profondeur peuvent être personnalisés.

Courbes : vous pouvez définir la ligne à l'horizontale ou à la verticale, régler l'épaisseur, le style et la couleur.

Options de style pour l'étiquette de champ

L'étiquette de champ peut être personnalisée à l'aide des options de style et en choisissant des options dans l'onglet.
  1. Modifiez la police, la taille de la police, la couleur ou la casse, barrez le texte ou définissez l'alignement du texte à gauche, au centre ou à droite.
  2. Alignez l'étiquette sur la gauche, le haut, la droite, le bas.
  3. Modifiez la couleur d'arrière-plan, le rayon, la marge intérieure et la marge extérieure.
  4. Cliquez avec le bouton droit de la souris sur l'étiquette pour modifier le champ, masquer l'étiquette, déplacer l'étiquette vers la gauche ou le haut, rendre le composant fixe ou fluide, copier le style et supprimer le champ.
  








Définition de la page Détails du Canvas comme page par défaut

Vous pouvez définir l'autorisation dans Attribution du Canvas pour les profils devant afficher la page Détails du Canvas par défaut. Les utilisateurs des profils sélectionnés n'auront toujours accès qu'à la page Détails du Canvas. 

Pour définir la page Détails du Canvas par défaut
  1. Rendez-vous dans Setup Customization Canvas Builder (Configurer > Personnalisation > Concepteur Canvas). 
  2. Cliquez sur l'onglet Canvas tab Canvas Assignment (Canvas > Attribution Canvas).
  3. Sur la page Canvas Assignment (Attribution Canvas), sélectionnez un module et une mise en page dans la liste déroulante.
  4. Sélectionnez Canvas à côté du profil correspondant.
  5. Cliquez sur Save (Enregistrer).
  
Remarque
Dans l'affichage Liste de l'attribution Canvas, passez la souris sur Canvas et cliquez sur l'icône Plus pour modifier Canvas, cloner, renommer, prévisualiser ou supprimer.

    • Related Articles

    • Personnalisation de la vue du module à l'aide de la toute nouvelle suite de conception Canvas

      Les entreprises et les données sont des entités cohésives qui existent et se développent ensemble. Plus vous rencontrez de gens et effectuez de transactions, plus vous accumulez d'informations dans votre base de données. Il est donc important de ...
    • Personnalisation de la page de détails d'un enregistrement

      La personnalisation des pages se rapporte à la personnalisation de la page de détails de l'enregistrement et aux dispositions associées. Cela comprend l'organisation d'autres éléments associés sur une page, la personnalisation des listes associées, ...
    • Personnalisation de la page de configuration

      Zoho CRM offre une expérience utilisateur améliorée en permettant à ses utilisateurs de personnaliser la page de configuration de CRM. Dans la section ci-dessous, nous avons énuméré quelques avantages de la personnalisation de la page de ...
    • Personnalisation de l'onglet d'accueil

      L'onglet d'accueil de Zoho CRM donne une indication rapide de la progression de toutes vos activités CRM. Il contient des composants de différents modules, tels que Tâches, Potentiels, Tableaux de bord, etc. En jetant un coup d'œil rapide aux ...
    • FAQ : Canvas

      1. Qu'est-ce que Zoho CRM Canvas et pourquoi en ai-je besoin ? Zoho CRM est un système puissant qui regroupe toutes vos données commerciales clés, y compris les informations sur les clients, les informations sur les employés, les contrats ...