Créateur de carte mobile Composants

En savoir plus sur les composants qui font les cartes Mobile

Ajout et suppression de 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 coins 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 l’une des options suivantes : Étiquette Icône Étiquette et icône
Étiquette	Étiquette de texte du bouton. Remarque : Cette option s’affiche 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’affiche uniquement si l’icône ou le format 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
Plusieurs	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, de votre icône ou des 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 couleur HTML, par exemple #A0522D pour la 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 couleur HTML, par exemple #A0522D pour la 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 couleur HTML, par exemple #A0522D pour la 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 les composants de votre carte et déterminez comment les composants qu’ils contiennent sont alignés et distribués.

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

Propriété	Description
Propriétés
ID élément	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 de 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 à l’intérieur du conteneur. Sélectionnez l’une de ces valeurs : Horizontal Verticale
Alignement	Détermine l’alignement des composants à l’intérieur du conteneur. Sélectionnez l’une de ces valeurs : Étirement Centre Gauche Droite Haut Bas
Distribution	Détermine la distribution des composants au sein du conteneur. Sélectionnez l’une de ces valeurs : Égal Automatique
type d'arrière-plan	Le type d’arrière-plan du conteneur. Sélectionnez l’une de ces valeurs : Néant 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 de l’icône

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	La couleur de votre icône. La valeur de cette propriété est un code couleur HTML, par exemple #A0522D pour la terre de Sienne.

Images

Les composants d’image permettent d’afficher une image. Vous définissez une image à afficher en sélectionnant un champ dans votre enregistrement qui contient une image, par exemple, le champ Avatar d’un enregistrement Utilisateur .

Tableau 4. Propriétés de configuration des images

Propriété	Description
Propriétés
ID élément	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	Le 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	La mise à l’échelle de votre image. Sélectionnez l’une de 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 provenant de l’étiquette de valeur d’un champ. Utilisez des composants de texte pour obtenir les informations que vos utilisateurs doivent voir en premier lorsqu’ils consultent des listes d’enregistrements.

Tableau 5. Propriétés de configuration de 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 l’une de ces valeurs : Valeur de champ Étiquette de champ Texte statique
Valeur de texte	Le texte qui s’affiche 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 l’une de ces valeurs : Gauche Centre Droit
Nombre maximum de lignes	Le nombre maximal de lignes pour le texte de 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 couleur HTML, par exemple #A0522D pour la 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 de 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 l’une de 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.