Cloner une page de détail d'enregistrement mobile

1. Accédez à Configuration > Personnalisation > Canvas.
   
2. Cliquez sur l'onglet Vue détail et sélectionnez Mobile.
   
3. Survolez une page de détail d'enregistrement mobile, cliquez sur l'icône (...) et sélectionnez Cloner.
   
4. Sélectionnez le module et Mise en page.
   
5. Cliquez sur Cloner.
   
6. Une fois les modifications terminées, donnez un nom et cliquez sur Enregistrer.
   

Pour modifier une page de détail d'enregistrement mobile

1. Accédez à Setup > Customization > Canvas.
   
2. Cliquez sur l'onglet Detail View et sélectionnez Mobile.
   
3. Survolez une page de détail d'enregistrement mobile, cliquez sur (...) et sélectionnez Modifier.
   

Pour supprimer une vue Canvas mobile

1. Accédez à Setup > Customization > Canvas.
   
2. Cliquez sur l'onglet Detail View et sélectionnez Mobile.
   
3. Survolez une page de détail d'enregistrement mobile, cliquez sur (...) et sélectionnez Supprimer.
   
4. Dans la fenêtre Êtes-vous sûr de vouloir supprimer cette vue ?, cliquez sur Oui, supprimer.
   

Remarque : avant de supprimer une vue Canvas actuellement définie par défaut pour un profil, vous devez d'abord choisir une autre vue par défaut pour ce profil.

Pour définir une page de détail Canvas mobile par défaut

1. Accédez à Setup > Customization > Canvas.
   
2. Cliquez sur l'onglet Mobile.
   
3. Cliquez sur Mobile Canvas Assignment.
   
4. Dans la fenêtre Mobile Canvas Assignment, sélectionnez le Module et la Layout dans la liste déroulante.
   
   
5. Sélectionnez le canvas pour le profil respectif.
   
6. Cliquez sur Enregistrer.
   

Naviguer dans le Canvas builder

Vous concevrez votre page d'enregistrement mobile dans le Canvas builder. Explorez rapidement cette interface sans code, glisser-déposer, et découvrez les différentes options disponibles.

L'interface du Canvas builder comprend trois parties :

1. Le canvas : c'est ici que vous organisez les différents composants de votre page de détail d'enregistrement mobile.
   
2. Barre latérale gauche : elle contient les différents composants, actions liées au canvas et ressources disponibles pour vous aider à créer votre page Canvas. Ce sont les outils que vous pouvez utiliser pour construire votre page Canvas.
3. Barre de menu supérieure : elle contient des options telles que Annuler, Rétablir, Zoom, Alertes, Aperçu, Afficher Canvas en plein écran, Saisissez le nom de Canvas, et Enregistrer.
   

Composants

Les différents composants de la barre latérale gauche du générateur Canvas sont :

1. Données : Contient les différentes entités liées aux données, comme Champs, Listes associées, et Actions (comme Modifier, Cloner, Supprimer, etc.) et Boutons personnalisés disponibles dans cette disposition particulière.
   
2. Éléments : Inclut les différentes entités visuelles présentes dans une disposition, comme Section, Onglet, Tableau, Texte, Image, Icône, et Ligne.
   
3. Style : Permet de définir les différentes propriétés liées au style pour un composant (une entité de données, un élément, un en-tête mobile, un corps mobile ou un pied de page mobile). Les propriétés varient selon le composant sélectionné.
4. Composants réutilisables : Un ensemble de composants incluant les éléments, le style et les données peut être enregistré en tant que composant réutilisable unique. Celui-ci peut être réutilisé dans d'autres dispositions et modules.
   

Données

1. Champs : Inclut les champs pris en charge dans l'application mobile (Android ou iOS). Ces champs seront regroupés selon les sections de la disposition.
   
2. Liste associée : Les listes associées prises en charge par mobile associées au module sont énumérées ici.
   
3. Actions : Il s'agit des différents boutons spécifiques à mobile (comme Modifier, Cloner, Supprimer, etc.) disponibles dans votre disposition.
   
4. Boutons : Incluent les boutons personnalisés créés par vous ou disponibles dans le cadre d'une intégration.
   

Éléments

1. Section : Une section est un bloc qui s'affichera sur la page de détails mobile. Avec une section, vous pouvez :
   
   
   
   
1. Ajouter des composants de données et d'autres éléments
   
2. Personnaliser le style de la section
   
3. Faites glisser les bordures pour redimensionner la boîte de section.
   
4. Cliquez avec le bouton droit sur la section et effectuez une action comme Insérer un composant de données, rendre le composant fixe ou fluide, Copier ou Coller le style, Ajouter un style conditionnel (Canvas Rule), Verrouiller, Ajouter aux composants réutilisables, Ajouter aux présets, ou Supprimer
   
2. Onglets : les onglets vous permettent d'organiser les champs et les listes associées sur différents écrans. Seul l'écran de l'onglet sélectionné est visible, tandis que les autres restent masqués. Cela vous permet de concentrer un grand volume de données dans un petit espace tout en facilitant l'accès à ces données pour les utilisateurs. Avec un onglet, vous pouvez :
   
   
   
   
1. Appliquer un style selon vos préférences à l'aide du panneau de gauche
   
2. Cliquez sur l'icône + pour créer un onglet personnalisé ou ajouter des listes associées comme onglets
   
3. Survolez le bord gauche d'un onglet, cliquez sur l'icône de flèche bidirectionnelle, puis faites glisser l'onglet pour le réorganiser
   
4. Survolez un onglet et cliquez sur l'icône x pour supprimer un onglet
   
5. Renommez un onglet personnalisé en cliquant dessus et en utilisant le panneau de style sur la gauche
   
6. Faites un clic droit sur l'onglet pour afficher l'icône. Si une icône est déjà ajoutée, vous aurez la possibilité de masquer/modifier l'icône, masquer le texte, Icône en haut, et Icône à gauche
   
7. Faites un clic droit dans l'onglet pour effectuer des actions telles que insérer un champ, rendre le composant fixe ou fluide, copier/coller le style, Style conditionnel, Verrouiller, Ajouter aux composants réutilisables, Ajouter aux présets, et Supprimer. Les options disponibles dépendront de l'endroit où vous cliquez dans l'onglet
   
8. Les listes associées ajoutées à l'élément onglet ne peuvent pas être renommées.
   
3. Tableau : les tableaux vous permettent d'afficher les informations en lignes et en colonnes. Cela offre une interface familière pour la plupart des utilisateurs et aide à économiser de l'espace sur la page. Avec un tableau, vous pouvez :
   
   
1. Survolez une ligne et cliquez sur l'icône + pour ajouter une ligne. Par défaut, il y aura deux colonnes. Vous ne pouvez pas ajouter de colonnes supplémentaires au tableau. Survolez le tableau et cliquez sur l'icône - pour supprimer le tableau.
   
2. Faites un clic droit pour insérer/modifier un champ, Rendre le composant fixe ou fluide, Copier/coller le style, Style conditionnel, Verrouiller, Ajouter aux composants réutilisables, Ajouter aux présets, ou Supprimer
   
3. Faites glisser les bordures pour redimensionner le tableau
   
4. Texte : cela vous permet d'ajouter une zone de texte dans la page de détail. Par exemple, elle peut être utilisée pour créer des en-têtes, des instructions, des avertissements, etc. Avec un composant texte, vous pouvez :
   
   
1. Faites glisser les bordures pour redimensionner la zone de texte
   
2. Cliquez avec le bouton droit pour Dupliquer, Rendre le composant Fixe/Fluide, Ajouter aux présets, et Supprimer
   
5. Images : L'élément Image vous permet d'ajouter une image à une page de détail d'enregistrement mobile. Avec un élément image, vous pouvez :
   
   
1. Cliquez sur l'élément image, puis cliquez sur Charger une image dans le panneau de gauche pour ajouter l'image. Vous pouvez ajouter une image en utilisant son URL.
   
2. Après avoir ajouté l'image, vous pouvez la redimensionner et ajuster d'autres styles comme la bordure, l'ombre, le rayon, l'espacement, etc.
   
3. Cliquez avec le bouton droit sur l'image pour définir Rayon, et Supprimer.
   
6. Icônes : Les icônes peuvent être utilisées en plusieurs endroits comme un repère visuel facile. Par exemple, elles peuvent remplacer les étiquettes de champ en de nombreux endroits. Avec une icône, vous pouvez :
   
   
1. Choisir parmi une large gamme d'icônes pour indiquer différentes entités
   
2. Cliquez avec le bouton droit sur l'icône pour Dupliquer, Modifier l'icône, et Supprimer
   
7. Ligne : Les lignes peuvent être utilisées partout où vous souhaitez séparer et organiser le contenu, aligner les éléments, etc.
   
   

Remarque

1. Chaque composant de la page de détail d'enregistrement peut être défini comme fixe ou fluide.
   
2. La taille d'un composant fixe restera inchangée quelle que soit la taille de l'écran de l'utilisateur.
   
3. La taille d'un composant fluide changera en fonction de la taille de l'écran de l'utilisateur.
   

Style

1. Arrière-plan : Sélectionnez une couleur d'arrière-plan en entrant le code HEX, en choisissant dans la palette ou en utilisant le sélecteur de couleur.
   
   
2. Image : Cochez la case Image et procédez comme suit :
   
1. Ajouter une image : Cliquez sur Charger une image.
   
2. Entrez l'URL de l'image et cliquez sur Insérer.
   
   
3. Définir la taille de l'image : Vous pouvez choisir Ajuster (Ajuster à la taille du composant tout en conservant le rapport d'aspect), Original (taille originale de l'image), ou Couvrir (Étirer pour remplir complètement le composant sans tenir compte du rapport d'aspect).
   
   
4. Définir la répétition de l'image : Si l'image est petite et ne remplit pas le composant, vous pouvez choisir de répéter l'image selon l'axe X, l'axe Y, ou les deux axes. Vous pouvez également choisir Pas de répétition pour empêcher la répétition de l'image.
   
   
3. Dégradé : Créez une transition en douceur entre plusieurs couleurs en arrière-plan. Cliquez sur la ligne pour ajouter diverses couleurs et faites tourner le cadran pour définir l'angle du dégradé.
   
   
   
   
4. Espacement : Définissez l'espace autour du contenu dans une bordure. Vous pouvez :
   
   
1. Sélectionnez Espacement identique de tous les côtés et déplacez le curseur pour définir l'espacement.
   
2. Décochez Espacement identique de tous les côtés et définissez l'espacement pour la gauche, la droite, le haut et le bas en pixels.
   
   
5. Hauteur et Largeur : définissez la hauteur et la largeur du composant. Pour certains composants, vous avez également la possibilité de définir la largeur sur Automatique pour redimensionner en fonction de l'écran de l'utilisateur.
   
   
   Remarque : vous disposez également de l'option Contraindre les proportions pour garantir que les proportions du composant sont conservées.
   
6. Bordure : configurez la bordure du composant. Vous pouvez choisir la couleur (code hexadécimal ou sélecteur de couleur), le style de la bordure et sa taille (en utilisant le curseur ou en entrant la taille en pixels).
   
   
7. Ombre : créez une ombre pour le composant en choisissant son :
   
   
1. Position (X et Y) : une valeur positive de X déplace l'ombre vers la droite du composant. Une valeur négative de X la déplace vers la gauche. Pour Y, une valeur positive la déplace vers le haut tandis qu'une valeur négative la déplace vers le bas.
   
2. Flou : plus la valeur est élevée, moins l'ombre sera nette.
   
3. Couleur : choisissez la couleur de l'ombre.
   
   
8. Rayon : utilisez ceci pour arrondir les coins de votre composant. Déplacez le curseur pour définir l'ampleur de l'arrondi pour tous les coins.
   
   
   
   
9. Marge : définissez la quantité d'espace blanc autour d'un composant. Vous pouvez :
   
   
1. Sélectionnez Marge identique de tous les côtés et déplacez le curseur pour définir l'espacement.
   
2. Décochez Marge identique de tous les côtés et définissez l'espacement pour la gauche, la droite, le haut et le bas en pixels.
   
   
10. Visibilité : affichez ou masquez le composant.
    
    
11. Profondeur : placez le composant au-dessus ou déplacez-le sous d'autres éléments.
    
    
12. Texte : vous pouvez définir la taille du texte, l'épaisseur, la casse, l'alignement et d'autres options liées au texte.
    
    
13. Ligne : vous pouvez définir la ligne comme horizontale ou verticale, ajuster l'épaisseur, le style et la couleur.
    
    

1. États : définissez un style différent pour le même élément en fonction de son état.
   
   Par exemple, lorsque certains champs sont vides, les actions qui leur sont associées seront visibles mais désactivées. Le style de l'état désactivé est pris en charge pour des actions spécifiques telles que Appel, Envoyer un e-mail, Envoyer un message, et Localisation cartographique(disponible sous Données > Actions). Pour indiquer qu'une action importante comme l'envoi d'e-mails est désactivée (parce qu'il n'y a pas de valeur dans le champ e-mail), vous pouvez ajouter une bordure rouge au bouton Envoyer un e-mail. Cela rappellera à l'utilisateur de remplir le champ e-mail.
   
   
2. Onglet Style conditionnel : définissez des styles différents pour le composant en fonction des données de l'enregistrement. Le critère est défini dans une Règle Canvas et un onglet de style conditionnel est créé pour chaque règle Canvas.
   

Réutilisation des styles

Vous pouvez réutiliser les styles en les ajoutant aux présets. Pour ce faire :

1. Sélectionnez l'élément dans le canvas et cliquez dessus avec le bouton droit.
   
2. Sélectionnez Ajouter aux présets.
   

Pour réutiliser le style pour un autre élément,

1. Sélectionnez l'élément sur le canevas.
   
2. Dans le volet de gauche, cliquez sur Préconfigurations.
   
3. Sélectionnez une préconfiguration que vous avez ajoutée sous Personnalisé ou choisissez une préconfiguration dans la Galerie.
   
   

1. Texte, Libellé et Valeur
   
2. Champ
   
3. Section
   
4. Onglet
   
5. Tableau
   
6. Boutons
   

Remarque

1. Vous pouvez ajouter jusqu'à 25 styles aux préconfigurations.
   
2. Le style de police semi-gras n'est pas pris en charge dans les composants texte, champ et bouton.
   

Composants réutilisables

Vous pouvez choisir les composants préexistants dans la galerie et les ajouter au canevas.

Remarque

1. Vous pouvez enregistrer jusqu'à 25 composants réutilisables.
   
2. Un composant peut être réutilisé dans des canevas créés pour divers modules CRM. Les champs créés pour un module seront automatiquement mappés et affichés avec les champs de l'autre.
3. Si les champs ne pouvaient pas être mis en correspondance, un type de champ similaire disponible dans le module choisi sera affiché et si le type de champ n'est pas disponible dans le module de destination, il sera noté N/A. Dans l'un ou l'autre cas, vous pouvez modifier le type de champ en cliquant avec le bouton droit sur le composant.
   

Exporter un canevas

Une fois que vous avez créé un canevas, vous pouvez le partager avec les utilisateurs de votre organisation ou avec les utilisateurs d'une autre organisation CRM en utilisant une clé unique. Vous pouvez lancer l'export soit à partir de la page d'accueil du canevas, soit dans le créateur de canevas.

1. Accédez à Setup > Customization > Canvas.
   
2. Cliquez sur l'onglet Detail View et sélectionnez Mobile.
   
3. Survolez une page de détail d'enregistrement mobile, cliquez sur l'icône (...) et sélectionnez Exporter le canevas.
   
   (ou)
   
   Cliquez sur l'icône (...) et sélectionnez Modifier. Dans le créateur de canevas, cliquez sur l'icône (...) et sélectionnez Exporter le canevas.
   
   
4. Dans la fenêtre Canvas Export, cliquez sur Exporter pour générer la clé unique de ce canevas.
5. Cliquez sur Copier pour copier la clé. Cette clé est un code alphanumérique qui peut transmettre l'interface utilisateur de votre canevas.
   
   
   
   

Remarque :

Pour gérer vos clés de canevas

1. Accédez à Configuration > Personnalisation > Canvas.
   
2. Cliquez sur l'onglet Détail et sélectionnez Mobile.
   
3. Vous disposez de trois façons d'importer un Canvas :
   
1. Cliquez sur le menu déroulant en regard du bouton Créer une page de détail d'enregistrement et cliquez sur Importer un Canvas.
   
   
2. Dans la fenêtre contextuelle Sélectionner un Canvas dans la galerie, cliquez sur le menu déroulant en regard du bouton Créer un Canvas vierge et cliquez sur Importer un Canvas.
   
   
   
   
3. Dans le Canvas Builder, cliquez sur le bouton (...) et sélectionnez Importer un Canvas. Veuillez noter que cette option est disponible uniquement lors de la création d'une nouvelle page Canvas et non lors de la modification d'une page existante.
   
   
   
   
4. Dans la fenêtre contextuelle qui s'affiche, sélectionnez le module et la mise en page.
   
5. Entrez la clé Canvas (copiée lors de l'export d'un Canvas) et cliquez sur Importer.
   

Accéder aux pages Canvas dans l'application mobile CRM

Android

1. Dans l'application Zoho CRM, accédez au module (par exemple Leads, Contacts, etc.).
   
2. Appuyez sur l'enregistrement.
   
3. Appuyez sur l'icône .
   
   
4. Dans le menu qui s'affiche, appuyez sur Changer de vue.
   
   
5. Vos pages Canvas mobiles s'affichent dans une liste pour que vous puissiez les choisir. Appuyez sur la page Canvas mobile que vous souhaitez consulter.
   
   
   
   

iOS

1. Dans l'application Zoho CRM, accédez au module (par exemple Leads, Contacts, etc.).
   
2. Appuyez sur l'enregistrement.
   
3. Appuyez sur l'icône Plus ().
   
   
4. Appuyez sur « Changer de vue.
   
   
5. Vos pages Canvas mobiles s'affichent dans une liste pour que vous puissiez les choisir. Appuyez sur la page Canvas mobile auquel vous souhaitez accéder.