Créateur de carte mobile Composants

En savoir plus sur les composants qui font les cartes Mobile

Ajouter et supprimer des composants

Boutons

Les composants de bouton permettent aux utilisateurs d’effectuer une action lorsque le bouton est sélectionné. Utilisez des boutons pour ajouter des actions à vos cartes.

Tableau 1. Propriétés de configuration des boutons

Propriété	Description
ID élément	L’attribut d’ID JSON unique du bouton.
Affichage
Hauteur	Hauteur de votre bouton en pixels
Largeur	Largeur de votre bouton en pixels. Si cette propriété est laissée vide, le bouton remplit l’espace disponible.
Rayon d'angle	Le rayon d’angle de votre bouton. Augmentez cette valeur pour créer des angles arrondis pour votre bouton.
Marge supérieure	La marge supérieure de votre bouton en pixels
Marge inférieure	La marge inférieure de votre bouton en pixels
Marge gauche	La marge gauche de votre bouton en pixels
Marge droite	La marge droite de votre bouton en pixels
Largeur de bordure	Largeur de la bordure de votre bouton en pixels.
Propriétés de bouton
Format	Déterminez si votre bouton s’affichera avec une étiquette de texte, une icône ou les deux. Sélectionnez une option parmi les suivantes : Étiquette Icône Étiquette et icône
Étiquette	Étiquette de texte du bouton. Remarque : Cette option s’affichera uniquement si le format Étiquette ou Étiquette et icône est sélectionné.
Icône	L’icône qui s’affichera sur votre bouton. Choisissez une icône dans la liste déroulante fournie. Remarque : Cette option s’affichera uniquement si le format d’icône ou d’étiquette et d’icône est sélectionné.
Nom accessible	Le texte alternatif qui sera lu à haute voix aux personnes utilisant des appareils fonctionnels afin qu’elles connaissent le but du bouton. Remarque : Cette option n’apparaîtra que si le format d’icône est sélectionné.
Actions
Multiple	Créez un menu de plusieurs actions différentes que les utilisateurs peuvent choisir lorsqu’ils sélectionnent le bouton.
Fonction	Choisissez une fonction prédéfinie ou configurable. Les fonctions configurables sont extraites de la table sys_sg_button. Fonctions prédéfinies disponibles : Annuler Continuer Se déconnecter
Apparence du bouton
Style de texte et d'icône	Style de mise en forme de votre texte, icône ou les deux.
Variable de la couleur d'arrière-plan	Variable de couleur d’arrière-plan du bouton.
Couleur d'arrière-plan	Couleur d’arrière-plan du bouton. La valeur de cette propriété est un code de couleur HTML, par exemple #A0522D pour Terre de Sienne.
Variable de couleur de texte et d'icône	Texte du bouton et variable de couleur de l’icône.
Couleur de texte et d'icône	Texte et couleur variable du bouton. La valeur de cette propriété est un code de couleur HTML, par exemple #A0522D pour Terre de Sienne.
Variable de couleur de bordure	Variable de couleur de la bordure du bouton.
Couleur de la bordure	Couleur de la bordure du bouton. La valeur de cette propriété est un code de couleur HTML, par exemple #A0522D pour Terre de Sienne.

Conteneurs

Les composants des conteneurs contiennent d'autres composants. Un conteneur peut contenir n'importe quel composant de carte, y compris un autre conteneur. Utilisez des conteneurs pour organiser vos composants de carte et déterminer comment les composants du conteneur sont alignés et répartis.

Tableau 2. Propriétés de configuration du conteneur

Propriété	Description
Propriétés
ID élément	L’attribut d’ID JSON unique du conteneur.
Affichage
Hauteur	Hauteur de votre conteneur en pixels
Largeur	Largeur de votre conteneur en pixels. Si cette propriété est laissée vide, le conteneur remplit l'espace disponible.
Marge supérieure	Marge supérieure de votre conteneur en pixels
Marge inférieure	Marge inférieure de votre conteneur en pixels
Marge gauche	Marge gauche de votre conteneur en pixels
Marge droite	Marge droite de votre conteneur en pixels
Rayon d'angle	Rayon d'angle de votre conteneur. Augmentez cette valeur pour créer des angles arrondis pour votre conteneur.
Apparence
Sens du conteneur	Détermine le sens d'orientation des composants dans le conteneur. Sélectionnez parmi ces valeurs : Horizontale Vertical
Alignement	Détermine l'alignement des composants dans le conteneur. Sélectionnez parmi ces valeurs : Étirement Centre Gauche Droite Haut Bas
Distribution	Détermine la répartition des composants dans le conteneur. Sélectionnez parmi ces valeurs : Égal Auto
type d'arrière-plan	Le type d’arrière-plan du conteneur. Sélectionnez parmi ces valeurs : Aucun Couleur Image

Icônes

Les composants d’icône permettent d’afficher une icône sur votre carte. Vous pouvez choisir une icône dans le menu déroulant Icône de l’écran de configuration.

Tableau 3. Propriétés de configuration des icônes

Propriété	Description
Propriétés
ID élément	Attribut d’ID JSON unique de l’icône.
Affichage
Icône	L’icône à afficher.
Marge supérieure	La marge supérieure de votre icône en pixels.
Marge droite	La marge droite de votre icône en pixels.
Marge inférieure	La marge inférieure de votre icône en pixels.
Marge gauche	La marge gauche de votre icône en pixels.
Apparence
Variable de couleur	La variable de couleur de votre icône.
Couleur	Couleur de votre icône. La valeur de cette propriété est un code de couleur HTML, par exemple #A0522D pour Terre de Sienne.

Images

Les composants d'image sont utilisés pour afficher une image. Vous définissez une image à afficher en sélectionnant sur votre enregistrement un champ qui contient une image, le champ Avatar d'un enregistrement Utilisateur, par exemple.

Tableau 4. Propriétés de configuration de l'image

Propriété	Description
Propriétés
ID élément	L’attribut d’ID JSON unique de l’image.
Affichage
Hauteur	Hauteur de votre image en pixels.
Largeur	Largeur de votre image en pixels.
Marge supérieure	La marge supérieure de votre image en pixels.
Marge droite	La marge droite de votre image en pixels.
Marge inférieure	La marge inférieure de votre image en pixels.
Marge gauche	La marge gauche de votre image en pixels.
Rayon d'angle	Rayon d'angle de votre image. Augmentez cette valeur pour créer des angles arrondis pour votre image.
Image
Utiliser le champ mappé	Choisissez si l’image utilisera un champ mappé.
Valeur de champ	La valeur du champ mappé pour votre image. Cette propriété n’est visible que si l’option Utiliser le champ mappé est sélectionnée.
Pièce jointe	Image jointe à utiliser. Cette propriété n’est visible que si l’option Utiliser le champ mappé n’est pas sélectionnée.
Échelle de l'image	Mise à l'échelle de votre image. Sélectionnez parmi ces valeurs : Remplir Ajuster

Texte

Les composants de texte affichent du texte sur votre carte. Il peut s'agir de texte statique ou de texte issu de l'étiquette de valeur d'un champ. Utilisez des composants de texte pour afficher les informations que les utilisateurs doivent voir en premier lorsqu'ils consultent des listes d'enregistrements.

Tableau 5. Propriétés de configuration du texte

Propriété	Description
Propriétés
ID élément	Attribut d’ID JSON unique du texte.
Affichage
Type de champ	Type de champ de texte. Sélectionnez parmi ces valeurs : Valeur de champ Étiquette de champ Texte statique
Valeur de texte	Texte qui apparaît dans le composant de texte. Cette valeur n'est utilisée que lorsque vous avez sélectionné Texte statique dans la propriété Type de champ.
Hauteur	Hauteur de votre composant de texte en pixels.
Largeur	Largeur de votre composant de texte en pixels.
Marge supérieure	La marge supérieure de votre composant de texte en pixels.
Marge droite	La marge droite de votre composant de texte en pixels.
Marge inférieure	La marge inférieure de votre composant de texte en pixels.
Marge gauche	La marge gauche de votre composant de texte en pixels.
Apparence
Style de texte	Style de mise en forme de votre texte.
Alignement du texte	Alignement du texte dans votre composant. Sélectionnez parmi ces valeurs : Gauche Centre Droit
Nombre maximum de lignes	Le nombre maximum de lignes pour le texte dans votre élément.
Variable de couleur de texte	La variable de couleur de votre texte.
Couleur du texte	La couleur de votre texte. La valeur de cette propriété est un code de couleur HTML, par exemple #A0522D pour Terre de Sienne. Remarque : Vous ne pouvez pas modifier la couleur d'arrière-plan d'un composant de texte, mais vous pouvez placer votre composant de texte dans un composant de conteneur et modifier la couleur d'arrière-plan du conteneur.

Vidéos

Les composants vidéo affichent une vidéo incorporée dans votre carte. Les URL des vidéos Youtube et Viemo sont toutes deux prises en charge.

Tableau 6. Propriétés de configuration vidéo

Propriété	Description
Propriétés
ID élément	Attribut d’ID JSON unique de la vidéo.
Affichage
Utiliser le champ mappé	Choisissez si la vidéo utilisera un champ mappé.
Valeur de champ	La valeur du champ mappé pour votre vidéo. Cette propriété n’est visible que si l’option Utiliser le champ mappé est sélectionnée.
URL	L’URL de la vidéo à intégrer. Cette propriété n’est visible que si l’option Utiliser le champ mappé n’est pas sélectionnée.
Mode lecture	Comment la vidéo s’affichera sur un appareil mobile. Sélectionnez parmi ces valeurs : Plein écran En ligne
Largeur	Largeur de votre composant vidéo en pixels.
Hauteur	Hauteur de votre composant vidéo en pixels.
Marge supérieure	La marge supérieure de votre composant vidéo en pixels.
Marge droite	La marge droite de votre composant vidéo en pixels.
Marge inférieure	La marge inférieure de votre composant vidéo en pixels.
Marge gauche	La marge gauche de votre composant vidéo en pixels.