Page de liste

Page de liste

Les pages de liste sont une structure de données composée d’une liste ordonnée d’une ou plusieurs pages, où les données peuvent rapidement être triées ou recherchées à l’aide de mots-clés.

Créer une page de liste automatiquement

Faites un clic droit sur le dossier « Pages » du panneau Project Explorer, sélectionnez « add list page » et complétez les champs. Pour naviguer vers la page de liste nouvellement créée, double-cliquez dessus dans la liste des pages du panneau. La page de liste par défaut aura déjà un titre et un behavior « execute command » pour permettre aux utilisateurs de créer de nouvelles entrées. Dans cet exemple, puisque le « type » account a été sélectionné lors de la création de la page de liste, les utilisateurs ajouteront de nouveaux comptes à la page de liste en créant une nouvelle entrée.

Créer une page de liste manuellement

Approfondissez vos compétences en explorant les coulisses. Au lieu de vous fier aux pages générées automatiquement par la plateforme, explorez comment les construire à partir de zéro. Grâce à ce processus, développez une expertise permettant à quiconque de créer des pages avec un design et des fonctionnalités uniques, allant au-delà des conventions établies.

Commencez par créer une page personnalisée. Pour ce faire, faites un clic droit sur le dossier « pages » et sélectionnez « add custom page ». Ensuite, complétez les champs et cliquez sur « create ». Pour ouvrir la page, double-cliquez dessus dans la liste des pages du panneau Project Explorer.

Option 1 : glisser-déposer un aggregate pour créer une liste

Ouvrez le « page designer » pour appliquer des changements au contenu de la page. Un espace réservé sera présent, qui peut être supprimé en le sélectionnant et en utilisant la touche « delete » du clavier. Ensuite, glissez-déposez un aggregate et sélectionnez le composant « list ».

Ensuite, ajoutez une boîte avec un champ texte pour créer l’en-tête de la page et glissez-déposez la « account creation command » comme toolbar button dans l’en-tête. Pour n’obtenir que l’icône, retirez le « label » sous l’onglet attribute du bouton. Il ne resterait plus qu’à ajouter du padding, des Borders, une couleur de background, etc., pour obtenir une réplique de la page de liste par défaut.

Option 2 : générer une liste à partir des composants de la Toolbox

Ouvrez le « page designer » pour appliquer des changements au contenu de la page et le panneau Toolbox pour un accès facile aux composants.

Glissez un composant « list » de la toolbox vers le contenu de la page. Ensuite, depuis l’onglet behaviour, ajoutez un behavior « set component data » et sélectionnez « account » comme type. Par exemple, un critère pourrait être ajouté pour limiter les données aux comptes VIP uniquement.

Notez que la liste ne peut pas afficher de données tant que les colonnes ne sont pas définies. Jusque-là, lorsqu’un curseur se déplace sur la page, une ombre indique la présence d’une liste mais sans aucune donnée affichée. Pour sélectionner les colonnes à afficher, cliquez sur l’icône d’engrenage.

Ensuite, appliquez une petite bordure de la couleur gray300 au composant list, avec un petit radius.

À partir de ce point, ajoutez une boîte avec un champ texte pour créer l’en-tête de la page. Définissez la couleur de background de la boîte sur « themeLighterAtl », changez la valeur du texte en « Accounts List » et ajoutez un padding de 12px sur tous les côtés de la boîte principale de l’en-tête. Ensuite, changez le Min Height de cette boîte à 44px et centrez son contenu.

Pour ajouter le bouton + à l’en-tête de la page, glissez-déposez la account creation command comme toolbar button dans l’en-tête. Alignez-le à droite. Retirez le « label » de l’onglet attribute du bouton pour n’afficher qu’une icône. Et enfin, sélectionnez le champ texte de l’en-tête et changez l’alignement en centré.

Pour voir le résultat en taille réelle, appuyez sur F2 sur un clavier.

Comment personnaliser les listes selon les besoins de l’utilisateur final

Modifier les colonnes affichées pour un utilisateur spécifique VS pour tous les utilisateurs

Pour ajouter ou retirer des colonnes, allez sous l’icône d’engrenage de la page de liste. Notez que les changements effectués en mode Live ne seront appliqués qu’à l’utilisateur actuellement connecté. Pour appliquer un changement à tous les utilisateurs, laissez le Live Mode désactivé. Dans la démonstration ci-dessous, le champ « industry » a été ajouté alors que le Live Mode était activé, donc la colonne n’est plus visible lorsque le Live Mode est désactivé.

Modifier les champs consultables

Pour appliquer des changements aux champs consultables, allez sous l’icône d’engrenage de la page de liste. Les champs de type « simple text » et les champs « number » sont les seuls à avoir l’option d’être consultables. Un interrupteur à leur droite permet d’activer ou de désactiver l’option.

Dans certains cas, un champ pourrait avoir besoin d’être consultable, mais la colonne de ce champ n’a pas nécessairement besoin d’être affichée dans la liste. Dans l’exemple ci-dessous, le champ « city » est utilisé pour démontrer ce scénario. Comme le montre l’illustration, les résultats de recherche fourniront des comptes avec la ville de la requête même si le champ n’est pas affiché.

Notez que les utilisateurs peuvent voir quel champ est consultable dans la barre de recherche lorsque rien n’a été saisi.

Tout changement effectué aux champs consultables en mode Live ne s’applique qu’à l’utilisateur connecté, pas à tous les utilisateurs.

Modifier l’ordre des colonnes affichées et définir une colonne qui classe les données de la liste

Par défaut, l’ordre des colonnes sera le même que l’ordre dans lequel elles ont été ajoutées. Pour les réorganiser, glissez-déposez le titre de la colonne vers la zone correspondante.

Notez qu’en cliquant sur le titre d’une colonne, la liste trie automatiquement les données par ordre alphabétique. Par exemple, en cliquant sur le titre de la colonne « isVIP », les comptes se trieront selon qu’ils sont VIP ou non.