Sorting and searching in Local Storage

I’ve got a list of Contacts displayed with a repeating List Item on a page. This shows all data. I would like to

  1. sort it in a particular order but I’m not seeing any way to do that and
  2. I have added a search bar which I would like to use to filter the list to matching data only but I’m not seeing a way to filter the Contacts data variable.

How do I achieve these things?

Currently, there’s no way to perform a search during the actual client-side storage fetch, but you can get your entire array of records and use a sort formula on them:


For the search bar similarly, you’d bind the search bar value to e.g. pageVars.searchText, then use a formula (assuming you want to match the name property of your records) to where you’re repeating your list:

SELECT(data.myDataVar, CONTAINS(item.name, pageVars.searchText))

Thanks Harri,

I have changed the Set data variable in the data variable logic
so that the Record Collection is this formula:

ORDER(outputs[“Get record collection”].records, item.Name)

That seems to do the trick for displaying the list in order.

Regarding the searching I have created a Page Variable called
searchText and bound the Search Bar to it. I have set the List’s
Repeat with to this formula:

SELECT(data.Contacts, CONTAINS(item.Name, pageVars.searchText))

but it seems to have a few issues:

  1. the search seems to be case sensitive (if I set the initial
    value of searchText to “Frank” it shows “Frank” in the list, but
    if I set it to “frank” it doesn’t. How do I get it to be case
    insensitive?.

  2. If I leave the initial value as blank I get the full list
    displayed, I type in a name and it displays just that name, but
    when I then delete my search term and start typing another name it
    just shows the previously entered name, not the new search term.
    Any idea what I could be doing wrong?

For the first question you could make the compared strings lowercase via formula LOWERCASE
SELECT(data.Contacts, CONTAINS(LOWERCASE(item.Name), LOWERCASE(pageVars.searchText)))

Thanks! I just found the CAPITALIZE AND LOWERCASE functions.

Not sure what’s wrong with the second question. I made an paragraph that shows names of a contact list filtered by their name like you’re doing.

So I have an array of objects like this
pageVars.contacts = [ { id: 1, name: "Sasu"},{id: 2, name: "Frank"}]

And a paragraph with following formula

MAP(SELECT(pageVars.contacts, CONTAINS(LOWERCASE(item.name), LOWERCASE(pageVars.searchTerm))), item.name)

pageVars.searchTerm is bound to an input field.

So it shows all the contacts names which contains the searchTerm, e.g. "Sasu, Frank" when searchTerm = "" . Maybe I’m missing something from your description?

You have added in a MAP() which I don’t have. When I add the MAP() to my code my list shows up as [object Object]

I’m not sure what you mean by a Paragraph. Is that some sort of control? I am using a List control.

Paragraph is just a basic component that renders text. I use MAP() to turn my array of objects to array of strings. MAP([{ id: 1, name: "Sasu"},{id: 2, name: "Frank"}], item.name) => ["Sasu", "Frank]

If you use a List Item from the components library to render the contacts you can just drop the MAP function, REPEAT with pageVars.contacts, bind the label to currently repeated property value “name” and toggle the list item visibility with formula CONTAINS(LOWERCASE(current.name), LOWERCASE(pageVars.searchTerm)) (under the advanced properties)


and you can get the list items to filter by the search term.

OK, thanks, that has got the list displaying and filtering/searching working.

It has however broken what happens when I click on an item in the list. The Contact Details page shows up with no data. I’ll have to see if something with the page variable that gets passed as the parameter has been reset with all these changes.

Should work. Just make sure to pass data from the current repeated value of the clicked list item :slight_smile:

Yeah, I guess messing with the “repeat With” reset it so that the parameter was no longer being sent.It’s all working now.

Thanks

1 Like

Good conversation here – one thing to note is that there’s a bug where repeating a component with a formula doesn’t always reset the repeated component correctly, which means you can be left with “ghost” components that are not in the data that the formula evaluates to. This will be fixed with our upcoming new runtime, and can be circumvented by storing the result of the formula to a page variable (with onChange listeners to trigger the setting logic flow whenever one of the constituent variables in the formula changes), and binding the repeat to that variable. Since the whole variable gets replaced, the repeated components are re-rendered correctly.

Bug at https://tracker.appgyver.com/bug-reports/p/repeating-components-with-the-repeat-source-bind-to-a-formula-can-cause-ghost-co