Dynamic changed image in List Item

[Kurt Spangsbjerg Petersen]

How can I make a small button in the list item. It should change color depending of the text in the item. Is that possible?

[Illya Stepanov]

Hi Kurt -

This should be possible using CSS, you should check whether the framework which you're using supports buttons UI modification.

Also a good thing to use for help is browser inspector tool to inspect components properties on the page.
:: https://docs.appery.io/docs/using-bro...

[Kurt Spangsbjerg Petersen]

Hi

But css does not support conditional statements, right.
It is quite simple what I want.

I have a list item with values from at database. If the field in the list item has a specific value, then an image (small bullet) should be shown in the list item.

Any ideas?

[Serhii Kulibaba]

Hello Kurt,

Please add that button's color on the mappig to that list component: https://docs.appery.io/docs/appbuilde...

E.g. check it's value and set buttons color with JS:
preelement.find("[name=myButton]").addClass("red-button");/pre
here myButton - name of the button you want to change
red-button - css class, which sets a color for the button

[Kurt Spangsbjerg Petersen]

Hi
Unfortunately this is not working. I'll try to explain my need in another and more precise way
This is my list item (the list is filled through the "ng-repeat" feature).
[ITEM1] [FIELD A] [FIELD B] [FIELD C] - (if FIELD A="1" show red image here)
[ITEM2] [FIELD A] [FIELD B] [FIELD C] - (if FIELD A="1" show red image here)
[ITEM3] [FIELD A] [FIELD B] [FIELD C] - (if FIELD A="1" show red image here)
etc.

[Serhii Kulibaba]

I see you use AngularJS application. In that case you have to use ng-show or ng-hide attribute to hide/show that image (https://docs.angularjs.org/api/ng/dir...)

e.g. codeng-show = item.fieldA/code
in that case that image will be visible, if fieldA from the item component is defined

[Kurt Spangsbjerg Petersen]

Perfect. It works...

But the nq-show is working on the entire list item. Can it be managed to work just for a specific icon in the list item?

[Kurt Spangsbjerg Petersen]

I mean if you use the Icon Left or Icon Right within the list item and the ng-show should only affect them.

[Serhii Kulibaba]

Kurt, it is impossible to do with the default list component's icons.

Please use a grid component instead of list for that behavior. In that case you'll be able to add your custom button, and set it's attribute ng-show