Barre de recherche dans un «repeater» (Version Mobile)

Introduction

Les listes dans la plateforme ont une fonction de recherche intégrée. Lorsqu’on fait une version mobile d’une page de type liste, le système utilise automatiquement un « repeater », puisque les données sont affichées d’une manière plus agréable. Cependant, les « repeaters » n’ont pas de fonction de recherche intégrée. Nous allons donc voir comment ajouter une barre de recherche.

Prérequis

Tu dois déjà avoir le concept d'opportunité et ses champs :

Étapes à suivre

1. Créer une page mobile de type liste et configurer le repeater

• Créez une page mobile de type liste.

• Supprimez le comportement par défaut du repeater pour le configurer comme une liste.

2. Configurer le «behavior» de sauvegarde des données de la page

• Ajoutez le comportement "Save Page Data" à la box parent avec les critères ici-bas.

  Event : on load

  Key : list

  Value source : other

  Value (Javascriptmode) :

  return {
    "query": {
      "typename": "Opportunité",
      "criteria": {
        "estOuverte": true
      },
      "orderBy": {
        "dateDeFermetureEstimée": "ASC"
      }
    }
  };

  Persist mode : no persitence

3. Configurer les données du repeater

• Ajoutez «Set Component Data Using Page Data» et lui mettre la valeur « list » dans « key ».

• Ajoutez le comportement "Set Component Data" avec ce script JavaScript pour rendre le repeater fonctionnel.

  let query = data.list?.filters?.reduce(
    (d, filter) => d.add(filter.criteria),
    db.createQuery(data.list?.query)
  );
  if (!query) {
    query = data.list?.query;
  }
  return db.search(query)

4. Ajouter une barre de recherche avec un champ de saisie

• Ajoutez la composante « text input ». Elle permettra à l’utilisateur de saisir les termes de recherche et affichera un texte indicatif (placeholder) pour lui signaler qu’une recherche est possible.

• Associez le comportement « Save Page Data » au composant afin de gérer dynamiquement les critères de recherche.

  Event : Onchange

  Key : list

  Value source : Other

  Value (JavaScript) :

  if (_.isNil(event)) {
    return pageState.list
  } else {
    return {
      "query": {
        "typename": "Opportunité",
        "criteria": {
          ...pageState.list.criteria,
          "$or": [
            {
              "titre,description": {
                "containsWords": event
              }
            },
            {
              "numéroOpportunité": parseInt(event)
            }
          ]
        },
        "orderBy": pageState.list.orderBy
      }
    };
  }

Commentaires sur le code :

1. C’est ici qu’on définit quels champs sont recherchable.

2. Quand un champ est de type « number », on est obligé de transformer la recherche en chiffre (parseInt).

3. Le système ne permet pas actuellement de rechercher sur des champs de type agrégat ni des champs calculés qui font référence à des agrégats.

Conclusion

En suivant ces étapes, vous pouvez ajouter une barre de recherche fonctionnelle à un repeater dans une version mobile, permettant aux utilisateurs de rechercher des données dynamiquement en fonction de champs spécifiques.