List items delete and style

[Hawk]

I have the listitem in the screenshot below. The list is linked via list service to the DB. I need to make it interactive such that the user can delete the selected item by click on recycle bin. I do not want to use delete service as I do not want to delete records from the DB, rather, I want to update the item status (there is a column for that), and those items with status (deleted) will not appear in the App. Now I have problem with updating the status to (deleted). And hence I have a couple of questions as follows:

ol
liShould I make the list (or listItem) "linked) from the properties panel in order to enable the user to select items? I expect the user can select item (which will be highlighted ) and then click on the recycle bin to delete (by invoke update and then list services subsequently)/li

liIn case I need to make it (linked), a colored background appears which I do want not keep. I used the following CSS to make it transparent but it did not work (given "mobilelistitem_272" is the listItem's name. and "Inbox_list" is the list name):

preli[name="mobilelistitem_272"] {
background:transparent !important;
border:none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}/pre

And I tried the following:

pre
li [name="Inbox_list"] {
background:transparent !important;
border:none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}/pre

So, (if I need to make it linked), how to remove the green background appears behind the light green labels?
/li

liLastly, how to return the name of the selected value and its respective _id to LSV? I need the value so when the user clicks on recycle bin, the button will invoke update service and update that record status to (deleted)./li
/ol

Many thanks for your help and support

[Evgene Karachevtsev]

Hello Hawk,

1) You shouldn't do anything linked.
2) Please add a hidden label in list item, which will map _id. On click on list item please hang actionSet storage variable binding LSV to label component containing _id

[Hawk]

Thanks Evgene. That worked.
Another question, I need to highlighted the selected item from the list by changing the color. I've used the following JS on selected event:

pre$("[name=mobilegridcell_285_326]").css("background-color", "#ffffff");

Appery("mobilegridcell_285_326").css("background-color", "#ffffff");/pre

However, as the listItem is mapped to the DB, all items color are changing when I select one item.

How can I change the color of the the selected item only, with JS if possible? Would be possible without any linking the DB ?

[Hawk]

In ordre to clarify, the list item has 10 records. I want the user to be able to click on any item and this item changes its color (gridcell background). By using the JS above, when the user clicks on any item, the entire list changes its color (10 items).

[Evgene Karachevtsev]

Hello Hawk,

On event click on mobilegridcell hang up this code:
pre$('[name="mobilegridcell_285_326"]').css("background-color", "#000000");
$(this).css("background-color", "#ffffff");/pre
where #000000 is the default color for mobilegridcell. (You may change it to your desired color)
Please let me explain a little.
With this code
pre$('[name="mobilegridcell_285_326"]').css("background-color", "#000000");/pre
you color all gridcells with the name mobilegridcell_285_326 paint in the default color.
And with this
pre$(this).css("background-color", "#ffffff");/pre
gridcell which is clicked get painted in the color #ffffff

[Hawk]

Hi Evgene,

I used the script above on gridcell click. Again, all gridcells got painted!

To reproduce:
link: http://appery.io/app/mobile-frame?src...
credentials: 1234/star1234
Navigate: NavBar: Messages - inbox

[Hawk]

Thanks. It works perfectly

[Hawk]

Evgene, Last question, what event (or JS) can I use in order to change the item color when display. Given the list shown above, some messages will be in a certain color, and I want when the user scroll to display the message, the message (mobilegridcell) changes its color after it's entirely displayed.
Many thanks for your help

[Evgene Karachevtsev]

Hawk,

You may try this plugin for jquery - appear: http://plugins.jquery.com/appear/

[Roger6240907]

Hi,

I have a related question. How can I change the mobilegridcell background color from a javascript function that is called at page load?

I can change the cell color by using Evgene code directly inside the click event:

code$(this).css("background-color", "#ffffff");/code

At page load I cannot use 'this', and the mobilegridcell name does not work either. This will not work:

code Apperyio("mgc5").css("background-color", "#CC0000!important");/code

Thanks,
R