Exemples

Utilisez ce widget pour prendre en charge les exigences de conception d’application, telles que les suivantes :

• Vous souhaitez créer une application qui permette aux utilisateurs de sélectionner un enregistrement dans la liste et de l’afficher sur la carte.
• Vous souhaitez afficher les enregistrements d’une source de données dans une vue de liste personnalisée. Les enregistrements à afficher doivent satisfaire certains critères.
• Vous souhaitez fournir aux utilisateurs une liste avec laquelle ils pourront interagir (par exemple, en filtrant la liste, en la triant avec des options prédéfinies et en y sélectionnant des enregistrements).

Remarques sur l'utilisation

Lorsque vous ajoutez un widget List (Liste), commencez par sélectionner une conception de modèle pour les fiches d’élément de la liste, puis cliquez sur Start (Démarrer). Sur la zone d’affichage, le premier élément du widget List (Liste) est activé et vous pouvez modifier la mise en page des widgets qu’il contient ou ajouter des widgets en les faisant glisser du panneau Insert (Insertion) dans la première fiche. Actuellement, le widget List (Liste) ne prend en charge que les widgets Text (Texte), Button (Bouton) et Image (Image).

Le widget List (Liste) requiert une source de données. Vous pouvez utiliser le widget List (Liste) sur une page avec ou sans carte affichée. Si vous incluez un widget Map (Carte) qui utilise la même couche et que vous cliquez sur une entité de la liste, l’entité correspondante est mise en évidence dans la carte. Lorsque vous concevez le contenu des fiches d’élément de la liste, indiquez ce que vous souhaitez afficher en configurant les widgets dans le premier élément, en sélectionnant le contenu dynamique correspondant pour alimenter les enregistrements à partir de la source de données connectée. (Par défaut, les widgets que vous ajoutez à la liste héritent des données de cette dernière.) Vous pouvez également définir des actions pour qu’un widget List (Liste) interagisse avec d’autres widgets de votre application (par exemple, zoomer sur l’entité sélectionnée sur une carte dans un widget Map (Carte) ou afficher les attributs de l’entité sélectionnée dans un widget Feature Info (Informations sur les entités)).

Si vous configurez le widget List (Liste) avec plusieurs états (Default (Par défaut), Hover (Survol) et Selected (Sélectionné)), un bouton Linked to (Lié à) apparaît lorsque vous sélectionnez les widgets imbriqués pour des mises en page personnalisées. Ce bouton indique si les paramètres du widget sont isolés ou synchronisés entre les états.

• Pour les widgets synchronisés, les paramètres de contenu et de style des widgets (arrière-plan, bordure et ombre) sont les mêmes, mais la taille et les positions peuvent différer en fonction des états.
• Pour les widgets isolés, vous pouvez configurer les propriétés sans affecter d’autres widgets dont l’état est différent.
• Pour utiliser le même widget dans un autre état ou synchroniser également la taille et la position du widget, sélectionnez le widget et appliquez-le à l’état cible.
• Lorsque vous supprimez un widget synchronisé, le même widget dans des états différents est également supprimé à moins que vous ne l’isoliez au préalable.

Paramètres

Le widget List (Liste) inclut les paramètres suivants :

• Select a template (Sélectionner un modèle) : sélectionnez un modèle dans les conceptions de liste prédéfinies ou démarrez avec un modèle de liste vierge. (Si vous choisissez un modèle, vous pourrez en personnaliser l’apparence ultérieurement.)
• Data (Données) : spécifiez les données à inclure dans la liste.
  • Select data (Sélectionner des données) : sélectionnez la source de données d’une couche d’entités avec les entités à afficher dans le widget. Vous ne pouvez sélectionner qu’une seule visualisation de données par couche d’entités. Dans les paramètres de visualisation de données, vous pouvez filtrer les données pour restreindre ce qui apparaît dans le widget, trier les données pour afficher les éléments de liste dans un ordre particulier ou définir des limites pour les enregistrements.
  • No data message (Message Pas de données) : déterminez le message à afficher lorsque le widget ne contient aucune donnée, par exemple lorsque l’utilisateur applique un filtre.
  • Last update text (Texte de la dernière mise à jour) : lorsque Auto refresh (Actualisation automatique) est activé pour la source de données, excluez si vous le souhaitez l’étiquette de dernière mise à jour qui indique quand les données ont été actualisées dans l’application.
• Arrangement (Disposition) : définissez le mode d’affichage des éléments dans la liste.
  • Layout (Mise en page) - Affichez les éléments dans une ligne, une colonne ou une liste de grille.
  • Item width or height (Largeur ou hauteur des éléments) - Spécifiez la taille des éléments de liste.
    • Pour une liste de ligne, définissez la largeur des éléments de liste en saisissant un nombre de pixels précis dans ce paramètre ou en faisant glisser la barre de redimensionnement sur la zone d’affichage. La hauteur de l’élément est définie par celle du widget.
    • Pour une liste de colonne, définissez la hauteur des éléments de liste en saisissant un nombre de pixels précis dans ce paramètre ou en faisant glisser la barre de redimensionnement sur la zone d’affichage. La largeur de l’élément est définie par celle du widget.
    • Pour une liste de grilles, définissez la hauteur des éléments de liste en saisissant un nombre de pixels précis dans chaque paramètre ou en faisant glisser la barre de redimensionnement sur la zone d’affichage. Vous pouvez aussi définir la largeur des éléments de liste par pourcentage de la largeur du widget.

    Remarque :

    Lorsque la liste utilise une mise en page personnalisée pour les appareils avec des écrans de taille petite ou moyenne, vous pouvez personnaliser la taille de ses éléments. Les icônes dans ce paramètre indiquent la taille d’écran (grande, moyenne ou petite) à laquelle la configuration s’applique.

  • Lock width/height ratio (Verrouiller le ratio largeur/hauteur) : verrouillez le ratio largeur/hauteur des éléments de liste lorsque le widget est redimensionné.
  • Alignment (Alignement) (disponible pour les listes de grille) - Alignez les éléments de liste à droite, au centre ou à gauche.
  • Horizontal or Vertical spacing (Espacement horizontal ou vertical) : définissez l’espacement entre les éléments de liste en pixels. Pour une liste de grilles, définissez les deux.
  • Paging style (Style de pagination) : définissez le mode de chargement des éléments de liste qui ne tiennent pas sur la première page :
    • Scroll (Faire défiler) : chargez davantage d’éléments lorsque les utilisateurs font défiler la liste vers le bas.
      • Scroll bar (Barre de défilement) : affichez une barre de défilement.
      • Navigator (Navigateur) : incluez des contrôles de navigation vers le haut et vers le bas pour faire défiler la liste. Pour Step (Étape), définissez le nombre d’éléments à faire défiler par clic dans le contrôle du navigateur.
    • Multi-page (Multipages) : divisez une longue liste en plusieurs pages à l’aide de la pagination. Pour Items per page (Éléments par page), définissez le nombre d’éléments à afficher sur une page.
• States (États) : fournissez une représentation visuelle pour communiquer les trois états des éléments de liste : Default (Par défaut) (état par défaut de l’élément sans interaction utilisateur), Hover (Survol) (l’utilisateur initie cet état en pointant sur un élément de liste) et Selected (Sélectionné) (l’utilisateur sélectionne l’élément de liste).

  Conseil :

  Pour modifier les états correspondants des widgets imbriqués, vous pouvez isoler les modifications de sorte qu’elles ne s’appliquent pas à tous les états. Sélectionnez le widget Liste et cliquez sur le bouton de l’état à modifier. Pour le paramètre Layout (Mise en page), sélectionnez Custom (Personnalisée). Cliquez sur un widget imbriqué, cliquez sur le bouton Linked to (Lié à) qui apparaît, sélectionnez Isolate (Isoler), puis configurez les paramètres du widget imbriqué. (Si vous commencez par configurer les paramètres, puis cliquez sur Isolate (Isoler), les modifications auront déjà été appliquées aux autres états.)

  • Background (Arrière-plan) : définissez l’arrière-plan des éléments de liste sur leur état par défaut (aucune interaction utilisateur en cours). Sélectionnez une couleur de remplissage ou une image. Si vous choisissez une image, vous pouvez la positionner entre les bordures de l’élément de liste, à l’aide de l’option Fit (Ajuster), Fill (Remplir), Center (Centrer), Tile (Tuile) ou Stretch (Étirer). Si vous sélectionnez Fit (Ajuster), la couleur de remplissage de l’arrière-plan apparaît autour de l’image.
  • Border (Bordure) : définissez la bordure des éléments de liste sur leur état par défaut en choisissant la couleur, le style (tirets ou pointillés) et la largeur en pixels.
  • Border radius (Rayon de bordure) : modifiez le rayon (en pixels ou pourcentage) pour mettre en forme les coins des éléments de liste dans leur état par défaut. Verrouillez les paramètres pour synchroniser les rayons des quatre coins.
  • Hover (Survol) : indiquez si l’apparence d’un élément de liste change lorsque les utilisateurs finaux le survolent. Si l’état Hover (Survol) est activé, ses paramètres apparaissent dans le panneau de configuration avec des options permettant de modifier l’arrière-plan, la bordure et le rayon de bordure de l’élément de liste survolé.
    • Un onglet Hover (Survol) apparaît en regard du premier élément de liste sur la zone d’affichage ; il est mis à jour pour indiquer comment l’élément apparaîtra lorsque les utilisateurs le survoleront. Vous pouvez également ajouter des widgets ou supprimer, redimensionner et repositionner des widgets existants pour l’état Hover (Survol) uniquement.
  • Selected (Sélectionné) : indiquez si la fiche d’élément dans la liste peut être sélectionnée et précisez la manière dont son apparence change lorsque les utilisateurs finaux cliquent dessus pour la sélectionner. Si l’état Selected (Sélectionné) est activé, ses paramètres apparaissent dans le panneau de configuration avec des options permettant d’autoriser les sélections multiples et de modifier l’arrière-plan, la bordure et le rayon de bordure de l’élément de liste sélectionné. Avec Select mode (Mode Sélectionner), vous pouvez limiter les sélections à un seul élément à la fois (lorsque vous cliquez sur un autre élément, la sélection actuelle est effacée) ou autoriser les utilisateurs finaux à sélectionner plusieurs éléments à la fois (lorsque vous cliquez sur un autre élément, ce dernier est ajouté au jeu de sélection actuel).
    • Un onglet Selected (Sélectionné) apparaît en regard du premier élément de liste sur la zone d’affichage ; il est mis à jour pour indiquer comment l’élément apparaîtra lorsque les utilisateurs le sélectionneront. Vous pouvez également ajouter des widgets ou supprimer, redimensionner et repositionner des widgets existants pour l’état Selected (Sélectionné) uniquement.
• Tools (Outils) : fournissez des outils pour que les utilisateurs interagissent avec la liste.
  • Search (Rechercher) : fournissez une zone de recherche dans la liste.
    • Select searching fields (Sélectionner les champs de recherche) : sélectionnez un ou plusieurs champs à rechercher.
    • Exact match (Correspondance parfaite) : limitez les résultats de recherche aux seuls enregistrements qui correspondent à la phrase de recherche.
    • Hint (Astuce) : indiquez une astuce qui s’affiche sous forme de texte d’espace réservé dans la zone de recherche afin d’aider les utilisateurs à trouver des valeurs pertinentes.
  • Sort (Tri) : fournissez un menu permettant aux utilisateurs finaux de trier la liste en fonction de champs et d’une séquence spécifiques. Saisissez un nom personnalisé pour chaque option de menu.
  • Filter (Filtrer) : ajoutez des filtres pour que les utilisateurs finaux interagissent avec la liste. Lorsque vous définissez des filtres, le widget comprend un bouton de réinitialisation permettant de réinitialiser les filtres à leur état initial.
  • Show selection (Afficher la sélection) : autorisez les utilisateurs finaux à mettre à jour la liste pour n’afficher que les éléments sélectionnés.
  • Clear selection (Effacer la sélection) : autorisez les utilisateurs finaux à désélectionner tous les éléments sélectionnés.

  Remarque :

  Les outils Show selection (Afficher la sélection) et Clear selection (Effacer la sélection) sont visibles uniquement lorsque l’état Selected (Sélectionné) est activé.