Repeater Search Bar (Mobile Version)

Introduction

The platform’s lists have a default search function. However, when building a mobile version of a list page, the system uses a repeater layout, to provide users with a better data display. Since repeaters do not have an integrated search feature, here is how add one manually.

Before you start

The Opportunity Aggregate and its fields should already exist :
 

Step-by-step instructions

1. Creating the Mobile List Page and Removing Default Behaviors

Let’s first create a mobile list page. Then, delete the default Set Component Data behavior applied to the repeater. This is necessary in order to configure the repeater to function like a list.

2. Adding the "Save Page Data" Behavior for Search Criteria

1. Inside the main box of the page’ structure, add a « Save Page Data » behavior with this JavaScript code. Notice how this code uses JavaScript to add search criteria. This code could reflet any search criteria according to the data that needs to be displayed.

Event : on load

Key : list (*it will be created at the next step)

Value source : other

Value (Javascriptmode) :

Persist mode : no persitence

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

3. Configuring the Repeater to Display the Data

To configure the repeater to take the data according to the previous step, add a Set Component Data Using Page Data behavior with “list” as value in “key”.

Then, add a Set Component Data behavior with this line of code:

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)

From this point on, the repeater should display data.

4. Adding a Text Input and configuring it to Trigger Search on Change

On ajoute la composante « text input », qui servira à écrire les termes recherchés et servira de placeholder, pour indiquer à l’utilisateur qu’il peut faire une recherche.

Sur notre « text input » on ajoute le « behavior Save Page Data »

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
    }
  };
}

Additional Tips / Notes

C’est ici qu’on définit quels champs sont recherchable. Quand un champ est de type « number », on est obligé de transformer la recherche en chiffre (parseInt).

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.

Et voilà, vous avez une recherche dans votre « repeater ».

Conclusion

This guide demonstrates how to manually add a search bar to a repeater layout in a mobile version. By configuring behaviors and search logic with JavaScript, users can implement a search function to filter displayed data effectively within the repeater component.