Widget Carte
Le widget Carte (Card) affiche une image, un titre et un texte dans un bloc encadré. Un clic sur la carte peut lancer des actions, ce qui en fait un bon point d'entrée sur un tableau de bord ou une page d'accueil. Vous le trouvez dans le groupe Basic de la palette de widgets.
ConfigurationLien direct vers Configuration
Sélectionnez la carte sur le canevas pour ouvrir son panneau de configuration.
Le canevas n'est qu'un aperçu de la carte : il montre toujours une image factice à la place de l'image, il n'affiche pas le badge, et il affiche les textes factices « Heading » et « Typography » tant que Title et Text sont vides. Un titre ou un texte vide n'affiche rien sur la page publiée. Utilisez View interface dans la barre de droite pour voir la vraie carte.
GlobalLien direct vers Global
| Champ | Description |
|---|---|
| Name | Nom du widget. C'est aussi le texte de l'en-tête quand Header est activé |
| Variable/Model | Identifie le widget. Une carte ne contient aucune valeur |
| On Click | Les actions lancées par un clic sur la carte. Voir Lancer des actions au clic |
ContentLien direct vers Content
| Champ | Description |
|---|---|
| Header | Ajoute un bandeau en haut de la carte, avec le Name du widget |
| Badge | Affiche un petit badge dans le coin supérieur droit de la carte |
| Badge value | Texte du badge. Le champ apparaît quand Badge est activé |
| Image | Adresse de l'image : https://... ou un chemin sur le serveur comme /uploads/.... L'image remplit sa zone et peut donc être recadrée |
| Title | Titre de la carte |
| Text | Texte de la carte |
Ces champs sont des textes fixes : une {{variable}} n'est pas remplacée et le HTML s'affiche tel que vous l'avez saisi. Pour afficher une valeur de la page, utilisez un widget Text ou Html.
L'en-tête, le titre et le texte sont traduits par le dictionnaire de la page. Voir Multilangue.
LayoutLien direct vers Layout
| Champ | Description |
|---|---|
| Layout | template-1 : l'image à gauche, sur un quart de la largeur, puis le titre et le texte. template-2 : l'image en haut, puis le titre, puis le texte. full : un seul élément remplit la carte |
| Use Element | Avec full uniquement : l'élément à afficher, image, title ou text. La section Content masque alors les champs des deux autres |
| Justify | Placement horizontal : Justify Start, Justify End, Justify Center, Justify Space Around ou Justify Space Between |
| Align | Placement vertical : Align Top, Align Middle ou Align Bottom |
| Padding (px) | Espace entre le bord de la carte et son contenu |
| Row (px), Col (px) | Aucun effet sur la page publiée |
| Shadow | always, hover (seulement quand le pointeur survole la carte) ou never |
L'effet de Justify et Align dépend de la mise en page :
full: les deux placent le titre ou le texte dans la carte, Align seulement avec une Height. Une image remplit la carte : ils n'ont donc aucun effet sur elle.template-1: Justify place le titre et le texte dans leur colonne. Avec une Height, un titre et un texte, Align ne déplace que le texte, dans l'espace sous le titre.template-2: sans image et avec une Height, Align déplace le titre, ou le texte s'il n'y a pas de titre. Avec les deux, le texte reste en bas. Justify n'a pas d'effet visible.
ValidationLien direct vers Validation
| Propriété | Description |
|---|---|
| Available | Indique si la carte existe sur cet écran. Ce réglage n'apparaît que dans la vue All Screens |
| Visible | Aucun effet sur une carte (voir ci-dessous) |
| Required, Disable | Aucun effet : une carte ne contient aucune valeur |
L'interrupteur Visible, une condition définie avec Advanced Setting, et les actions show et hide ne changent rien à une carte : elle reste sur la page. Pour afficher ou masquer une carte, placez-la dans une Grille ou une Section et réglez Visible sur ce conteneur. Pour la retirer d'un écran, sélectionnez All Screens en haut du canevas et désactivez Available sur cet écran (voir Règles de Validation).
Sur une page qui tourne encore sur l'ancienne version du moteur (le panneau affiche This interface is running on an old version of Softyflow), Visible masque bien la carte, jusqu'à ce que vous cliquiez sur Upgrade.
StyleLien direct vers Style
| Champ | Description |
|---|---|
| Height | Hauteur du contenu de la carte, en pixels : un nombre sans unité, par exemple 170. L'en-tête s'y ajoute |
| Class | Classes CSS statiques, par exemple kpi-card |
| Dynamic classes (classes dynamiques ; le bouton pinceau à côté de Class) | Un objet JSON dont chaque clé est un nom de classe et chaque valeur une condition avec les variables de l'interface entre {{ }}. La classe est ajoutée à la carte tant que sa condition est vraie, par exemple { "is-late": {{days}} > 10 } |
Avec Height vide, la carte prend la hauteur de son contenu. Seule exception : une carte template-1 placée directement sur la page ou dans un Tabs s'étire jusqu'à la hauteur du contenu de la page. Renseignez Height, ou placez la carte dans une Grille.
Lancer des actions au clicLien direct vers Lancer des actions au clic
- Dans la section Global, cliquez sur Create on click action. La page Code de l'interface s'ouvre dans un nouvel onglet du projet, sur les actions On Click, avec une fonction nommée d'après l'identifiant de la carte (
<id>_action, par exempleannual_leave_1_action) dont le Trigger component est la carte. - Ajoutez vos actions à cette fonction et enregistrez.
- De retour dans le builder, le bouton s'appelle désormais View attached action et vous amène à cette fonction.
Si la page Code n'était pas encore ouverte, elle peut s'ouvrir sur On Mounted, sans créer la fonction : revenez dans le builder et cliquez de nouveau sur le bouton.
À l'exécution :
- Un clic n'importe où sur la carte, sauf sur son badge, lance les actions, y compris un clic sur un widget placé dans l'un de ses emplacements.
- Le pointeur ne change pas au survol de la carte. Pour afficher une main, ajoutez une classe avec
cursor: pointer. SF_inputne contient queSF_currentIndex, l'index de la ligne quand la carte est dans une boucle.
Sur une page ancienne, une carte dont le champ On Click contient déjà le nom d'une fonction garde un champ de texte : un clic appelle la fonction de ce nom.
Emplacements pour d'autres widgetsLien direct vers Emplacements pour d'autres widgets
Une carte a trois emplacements pour d'autres widgets, numérotés de 1 à 3. Depuis la 8.6, les widgets Title, Text et Html placés dans un emplacement apparaissent sur la page publiée, sous le contenu de la carte, emplacement après emplacement (ils étaient ignorés auparavant). Ils suivent leurs propres règles Available et Visible.
Le builder ne peut pas remplir ces emplacements : on ne peut pas déposer un widget sur une carte, et ni le canevas ni le panneau ne montrent le contenu d'un emplacement. C'est Flowy qui les remplit. Ajoutez la carte dans le builder, car Flowy ne crée pas de cartes, puis demandez à Flowy d'y placer un widget (dans ses scripts, ui.putInCard(widget, cardId, slot)). Redemandez à Flowy pour modifier ou retirer ce widget.
Les autres widgets, comme les champs, les boutons, les alertes ou les grilles, n'apparaissent pas sur la page publiée, même dans un emplacement. Pour associer une carte à des champs ou des boutons, placez-les côte à côte dans une Grille.
Dans une carte placée dans une boucle, aucun widget d'un emplacement n'apparaît, pas même Title, Text ou Html.