Widget de liste

Le widget List (Liste) affiche les enregistrements de données dans une vue de liste personnalisée. Il utilise une conception de fiche comme conteneur pour quelques brèves descriptions des informations associées, avec la possibilité d’inclure un bouton pour afficher des détails supplémentaires. Vous avez le choix entre plusieurs modèles pour créer la mise en page de la fiche. Les modèles incluent des widgets Image (Image), Button (Bouton) et Text (Texte). Vous pouvez également choisir un modèle vierge pour concevoir votre propre mise en page. La source de données de la liste est définie par une couche d’entités. Chaque fiche d’élément de la liste représente un enregistrement et les widgets d’une fiche peuvent être utilisés pour afficher les attributs de cet enregistrement. Pour concevoir la liste, vous pouvez personnaliser les paramètres de style et modifier la mise en page de la première fiche pour mettre à jour toutes les fiches de la liste.

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.

Méthodes de recherche

L’outil de recherche du widget List (Liste) emploie différentes méthodes pour générer les suggestions et les résultats de recherche.

L’outil de recherche du widget utilise la recherche de texte intégral pour générer des suggestions de recherche. La recherche de texte intégral est une méthode de recherche efficace qui utilise des index de champ de texte intégral pour diviser les enregistrements en unités plus petites, telles que des mots individuels. Prenons l’exemple d’une couche des localisations des bureaux de poste aux États-Unis qui comporte un champ contenant les noms de chacune de ces localisations. L’index fractionne le nom Highland Station Baltimore Post Office en cinq mots pouvant faire l’objet d’une recherche individuelle : Highland, Station, Baltimore, Post et Office. Si vous saisissez une expression de recherche combinant ces mots (ou uniquement une partie d’entre eux), comme Baltimore Office, Highland Baltimore ou Stat Balt Office, ce bureau de poste apparaît dans les suggestions de recherche.

Les index de champ de texte intégral sont automatiquement générés pour les couches d’entités hébergées lorsque vous les sélectionnez en tant que champs de recherche pour le widget Search (Rechercher), List (Liste) ou Table si vous possédez la couche d’entités hébergée ou si vous êtes administrateur de l’organisation.Vous pouvez également ajouter manuellement des index aux champs d’attribut sur la page des détails de l’élément de la couche. Dans le cas de couches dépourvues d’index et que vous n’êtes pas autorisé à modifier, le widget List (Liste) trouve les suggestions à l’aide de START WITH abc%, c’est-à-dire qu’il recherche les enregistrements qui commencent par l’expression de recherche. Cette méthode de recherche est moins efficace.

Pour obtenir les résultats de recherche, le widget utilise CONTAIN %abc%, ce qui signifie que l’expression de recherche peut se trouver n’importe où dans l’enregistrement. Vous pouvez ainsi rechercher alt pour obtenir les résultats de recherche Baltimore, Salt Lake City et Alton.

Attention :

La recherche de texte intégral est une nouvelle fonctionnalité de la version d’octobre 2023 de Experience Builder et est une modification importante. Avant cette version, le widget utilisait CONTAIN %abc% pour générer les suggestions et les résultats. À la différence des requêtes CONTAIN %abc%, la recherche de texte intégral ne peut pas trouver les expressions situées au milieu des mots. Dans l’exemple ci-dessus, la recherche de altimor ou de ighlan ne renvoie pas le bureau de poste attendu dans les suggestions de recherche. En savoir plus sur la recherche d’entités dans les cartes et les applications.

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) : vous pouvez intégrer les outils suivants dans le volet du widget au moment de l’exécution :
  • Search (Rechercher) : autorisez les utilisateurs à rechercher des enregistrements 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.
  • Refresh (Actualiser) : autorisez les utilisateurs à actualiser la liste pour afficher les données les plus récentes. Ce paramètre est utile si vous connectez votre liste à une source de données qui est mise à jour régulièrement.
  • Show selection (Afficher la sélection) : autorisez les utilisateurs à mettre à jour la liste pour n’afficher que les éléments sélectionnés.
  • Clear selection (Effacer la sélection) : autorisez les utilisateurs à désélectionner tous les éléments sélectionnés.
  • Show record count (Afficher le nombre d’enregistrements) – Affichez le nombre total d’enregistrements et le nombre d’enregistrements 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é.

Options d’interaction

Ce widget prend en charge les actions, que vous pouvez configurer sur l’onglet Action dans les paramètres du widget.

Vous pouvez configurer les actions Messages pour créer des interactions automatiques entre les widgets. Par exemple, pour faire en sorte qu’un widget Map (Carte) effectue automatiquement un zoom sur une entité lorsque l’utilisateur la sélectionne dans le widget List (Liste), vous pouvez ajouter le déclencheur Record selection changes (Modifications de sélection d’enregistrements), sélectionner un widget Map (Carte) comme cible et ajouter l’action Zoom to (Zoom sur).

Activez les actions Données pour ajouter des boutons à l’interface utilisateur du widget List (Liste) pour effectuer des tâches de traitement de données, comme l’exportation, le zoom et la définition de filtres. Les utilisateurs peuvent exécuter des actions Données pour toutes les données de la liste ou pour certaines entités.

Remarque :

Lorsque les utilisateurs exportent des données à l’aide de l’action Données Export (Exporter), seuls les champs qui sont activement utilisés par le widget List (Liste) sont inclus dans l’exportation. L’exportation inclut des champs utilisés pour le texte dynamique, les images dynamiques, etc.