Forum | Appery.io

I intend to add a data-filter to a list only when a rest service returns one or more items. Unfortunately when data-filter is checked in the Appery list component, and no items are returned, the data-filter still shows up.

For my project using old libraries I was executing the following JS on success of the service if one or more items were returned. Everything was working well and data-filter showed up only when one or more items were returned by the service.

if (!Appery("list").attr("data-filter")) {
Appery("list").listview('option', 'filter', true);
Appery("list").attr("data-filter", true);
Appery("list").listview("option", "filterPlaceholder", "Search Properties...");
Appery("list").trigger("listviewcreate");
}

I've just migrated to V2.0 and now the data-filter does not show up at all.

How can I fix this?

Thanks.

Hi Cody,

Please use following solution:

1 Remove or comment code you've done before.

2 Open page in "design" mode and activate your list component.

3 In list "properties" check "Data Filter" checkbox. http://prntscr.com/41htej/direct

4 Now you can use following code to hide this data rilter:

pre

//Note: you should replace "mobilelist_43" with your list component name.
Apperyio("mobilelist_43").prev(".ui-filterable").hide();

/pre

5 And you can use code below to show data filter:

pre

//Note: you should replace "mobilelist_43" with your list component name.
Apperyio("mobilelist_43").prev(".ui-filterable").show();

/pre

Regards.

Hi Yuri,

Many thanks for the feedback. Although this works, there is user experience issue.

In case there are no elements in the list - the data filter first appears for a brief moment (since this option is checked in the component), and then disappears.

What I wanted to achieve was that the data-filter should only appear if and only if there is an element in the list.

Is there a way to achieve that as in my prior implementation?

Regards.

Hi Cody,

Yes, you can do it.

For this goal you need to hide filter on "page show" event.

So please follow the solution below:

1 Open your page.

2 Add JS "page show" event handler.

3 Populate it with following code: http://prntscr.com/42duug/direct

pre

//Note: you need replace "mobilelist_43" with your list component name.
Apperyio("mobilelist_43").prev(".ui-filterable").hide();

/pre

Regards.

Hi Yuri,

This unfortunately has an issue with user experience. When the list has listitems then on page load the data-filter appears then disappears (when your suggested code executes on page load) and then appears again with the listitems. The approach in my very first note in this thread takes care of this issue (no appearance and disappearance) but is not executing well with V2.0 libs.

Will appreciate your help in resolving this?
Thanks.

Try this:

Apperyio("lst").prev(".ui-listview-filter").toggle();

http://stackoverflow.com/questions/13...

This work for me.

Hi Cody,

Please give us your app public link and describe steps to reproduce this problem.

We will take a look.

Regards.

Hi Yurii,

I'll next share details and login information, for test cases with you at support@appery.

Regards.

Hi Cody,

Please use the solution below:

1. Remove "page show" event handler from previous solution.

2. Add JS "Page load" event handler and populate it with following code:

   pre

   //Note you need to replace "mainInputAndDisplayPage" with your page name.
   $(document).on('pagebeforeshow', '[id="mainInputAndDisplayPage"]', function (e, ui) {
   Appery("listProperties").prev(".ui-filterable").hide();
   });

   /pre

   That's all.

   Regards.

Excellent! Thank you.