Ajouter une zone de liste, une liste déroulante, une zone de liste modifiable ou des cases d’option à une application canevas

Affichez une seule colonne de données (d’une table multi-colonnes, par exemple) dans une application canevas pour que les utilisateurs puissent sélectionner un ou plusieurs éléments dans une liste.

  • Ajoutez une zone de liste pour permettre aux utilisateurs de sélectionner plusieurs options.
  • Ajoutez une liste déroulante ou une zone de liste déroulante pour occuper moins d’espace à l’écran.
  • Ajoutez un ensemble de cases d’option pour obtenir un effet design spécial.

Cette rubrique se concentre sur les zones de listes et les cases d’option, mais les mêmes principes s’appliquent aux listes déroulantes.

Conditions préalables

  1. Créez une application canevas vide.
  2. Découvrez comment ajouter et configurer des contrôles.

Créer une liste simple

  1. Ajoutez un contrôle List box nommé MyListBox et définissez sa propriété Items dans cette expression :

    ["circle","triangle","rectangle"]

    Votre concepteur doit être semblable à ceci :

    Écran avec contrôle de zone de liste

  2. Sous l’onglet Insertion, sélectionnez Icônes, puis sélectionnez le cercle et placez-le sous MyListBox :

    Icône Ajouter

  3. Ajoutez un triangle et un rectangle, puis organisez les formes dans une ligne sous MyListBox :

    Ajouter des formes

  4. Définissez la propriété Visible des formes suivantes sur les fonctions suivantes :

    Forme Définissez la fonction Visible sur
    cercle If("circle" in MyListBox.SelectedItems.Value, true)
    triangle If("triangle" in MyListBox.SelectedItems.Value, true)
    rectangle If("rectangle" in MyListBox.SelectedItems.Value, true)
  5. Tout en maintenant la touche Alt enfoncée, sélectionnez une ou plusieurs formes dans MyListBox.

    Seules la ou les formes que vous sélectionnez s’affichent.

Dans ces étapes, vous avez utilisé une expression pour créer une liste d’éléments. Vous pouvez appliquer ceci à d’autres éléments de votre activité. Par exemple, vous pouvez utiliser un contrôle Drop down pour afficher des images de produit, des descriptions de produit, etc.

Ajouter des cases d’option

  1. Sous l’onglet Accueil, sélectionnez Nouvel écran, puis Écran vierge.

  2. Dans l’onglet Insertion, sélectionnez Contrôles, puis Radio.

    Ajouter une case d’option

  3. Attribuez au contrôle Radio le nom Choices et définissez sa propriété Items sur la formule suivante :
    ["red","green","blue"]

    Renommer le contrôle

    Si nécessaire, redimensionnez le contrôle pour afficher toutes les options.

  4. Dans l’onglet Insertion, sélectionnez Icônes, puis sélectionnez le cercle.

  5. Définissez la propriété Fill du cercle sur la fonction suivante :
    If(Choices.Selected.Value = "red", Red, Choices.Selected.Value = "green", Green, Choices.Selected.Value = "blue", Blue)

    Dans cette formule, le cercle change de couleur en fonction de la case d’option que vous choisissez.

  6. Déplacez le cercle sous le contrôle Radio, comme dans cet exemple :

    Déplacer le cercle sous le contrôle Radio

  7. Tout en maintenant la touche Alt enfoncée, sélectionnez une autre case d’option pour changer la couleur du cercle.

Ajouter un élément à une liste existante

  1. Ajoutez un contrôle Button et nommez-le « btnReset ».

    Vous ne savez pas comment ajouter, nommer et configurer un contrôle ?

  2. Définissez la propriété OnSelect de btnReset sur cette formule :

    ClearCollect(MyItems, {value: "circle"},{value: "triangle"},{value: "rectangle"})
    
  3. Définissez la propriété Text de btnReset sur "Reset".

  4. Ajoutez un contrôle List box nommé lbItems et définissez sa propriété Items sur MyItems.

  5. Tout en maintenant la touche Alt enfoncée, appuyez sur le bouton Réinitialiser.

    Notes

    La zone de liste doit être remplie avec les éléments de la collection « MyItems ».

  6. Disposez la zone de liste et le bouton de façon à ce qu’ils soient alignés verticalement.

    Bouton de zone de liste.

  7. Ajoutez un contrôle Text Input et nommez-le « txtAdd ».

  8. Définissez la propriété Text de txtAdd sur "".

  9. Ajoutez un contrôle Button et nommez-le « btnAdd ».

  10. Définissez la propriété Text de btnAdd sur "Add".

  11. Définissez la propriété OnSelect de btnAdd sur la formule suivante :

    Collect(MyItems,{value: txtAdd.Text}); Reset(txtAdd)
    

    Notes

    • La fonction collect ajoutera le texte de la saisie de texte en tant qu’élément de la collection.
    • La fonction de réinitialisation réinitialisera la saisie de texte à son état par défaut.
  12. Organisez txtAdd et btnAdd de façon à ce qu’ils soient alignés verticalement sous lbItems et btnReset.

    Tous les contrôles - avant d’ajouter.

  13. Prévisualisez l’application en appuyant sur F5.

  14. Ajouter une valeur de texte au contrôle d’entrée de texte txtAdd.

  1. Appuyez sur le bouton Ajouter.

    Notes

    La zone de liste doit être remplie avec les éléments de la collection MyItems.

(Facultatif) Supprimer un élément d’une liste existante

  1. Ajoutez un contrôle Button et nommez-le « btnDelete ».

  2. Définissez la propriété Text de btnDelete sur "Delete".

  3. Définissez la propriété OnSelect de btnDelete sur la formule suivante :

    Remove(MyItems, lbItems.Selected)
    
  4. Organisez btnDelete de façon à l’aligner verticalement sous btnReset

    Tous les contrôles avec bouton de suppression.

  5. Prévisualisez l’application en appuyant sur F5.

  6. Appuyez sur le bouton Réinitialiser pour réinitialiser la zone de liste.

  7. Appuyez sur un élément de la zone de liste pour le sélectionner.

  1. Appuyez sur le bouton Supprimer pour supprimer l’élément.

Notes

Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)

Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).