Filter listitems with button

Tue Aug 05, 2014 12:32 am

Hello,

I want to be able to filter list item with a button.
Here is an example:

As you can see: three buttons outside of the list. The first button shows ALL the messages, the second one only the messages that have been read by the user and the third the messages that have not been read by the user.

The data wether a user has read a message or not gets populated by a RESTservice. The value (1 for read and 0 for NOTread) is in every list item like so:

code
var dateFormat = $.datepicker.formatDate('dd-mm-yy', new Date(value.date));

element.children().remove();
if (value.read == 1)
{

element.append('<p class="ui-li-heading" value="1"</p>');

}else{

element.append('<img src="files/views/assets/image/new_msg.png" class="ui-li-thumb ui-corner-top">');

element.append('<p class="ui-li-heading" value="0"></p>');

}
/code

As you can see: in the P tag I have added a value attribute with value 1 or 0. How can I filter the items based on that value with the buttons above?

I've tried various ways with the filter method but without success.

Please advise!

Tue Aug 05, 2014 3:39 am

Hi Dirk,

Here is a brief plan for this goal:

1 Use "query" service to populate your list.

2 When user click on some button you need to set some LSV with certain value and then run "query" service.

3 In query service datasource mapping you need to link LSV from 2nd step to "where" request parameter. And populate it with code like this:

pre

var read = localStorage.getItem("lsvRead");

//Note you need set this object in accordance to your logic and local storage variables.
var whereObject = {"read": read};

return JSON.stringify(whereObject);

/pre

See details how to work with search here: http://devcenter.appery.io/tutorials/...

Regards.

Wed Aug 06, 2014 12:39 am

Hello Yurii, what you showed me isn't exactly what I'm looking for. Maybe I wasn't clear enough, my apologies: what I want is for users to be able to click on a button and then my mobilelist gets updated. First all list items are shown and when a user clicks a button, some items are hidden and then shown again when clicking another button.

Wed Aug 06, 2014 3:24 am

Hi Dirk,

Unfortunatly currently it's not clear for us.

Please make screen shots and describe them with app logic you want to implement.

Regards.

Thu Aug 07, 2014 1:03 am

Hello Yurii,

I'm being very unclear, my apologies.

Let me give a concrete example:

I have a list, this list has items. Let's say it has two items: One called Fruit and one called Vegetables. Both items have an attribute called "value" which has a value of "read" or "noread".

Now, above my list I have two buttons: Read and NoRead. When I click on the button Read I want the list item that has the value noread to hide and only show the item that has the value read.

Is this better?

Thu Aug 07, 2014 5:20 am

Hi Dirk,

Currently it's clear, thanks.

Please follow this solution.

1 Open your list datasource mapping.

2 Find link from $[] to your component and click "add js"/"edit js" and add following code:

pre

element.setAttr("data-isread", value.read)

/pre

3 Add JS event handler on "read" button with following code:

pre

//Note you should replace "mobilelist_41" with your list component name.
Apperyio("mobilelist_41").find('[data-isread]').closest("li").show();
Apperyio("mobilelist_41").find('[data-isread="1"]').closest("li").hide()

/pre

4 Add JS event handler on "noread" button with following code:

pre

//Note you should replace "mobilelist_41" with your list component name.
Apperyio("mobilelist_41").find('[data-isread]').closest("li").show();
Apperyio("mobilelist_41").find('[data-isread="0"]').closest("li").hide()

/pre

Regards.

Thu Aug 07, 2014 2:25 pm

Thank you Yurii for the assistance. Your code was very helpful!