# Highlighting selection on click

**URL:** <https://forum.inductiveautomation.com/t/highlighting-selection-on-click/98532>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [November 12, 2024, 6:32pm UTC](https://forum.inductiveautomation.com/t/highlighting-selection-on-click/98532 "2024-11-12T18:32:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![William\_Gibson](https://avatars.discourse-cdn.com/v4/letter/w/a88e4f/32.png) [@William\_Gibson](https://forum.inductiveautomation.com/u/William_Gibson)\
**Post date:** [November 12, 2024, 6:32pm UTC](https://forum.inductiveautomation.com/t/highlighting-selection-on-click/98532/1 "2024-11-12T18:32:08Z")

</div>

I have two views. The "SelectableList" is a flex repeater with some styling. Items in this flex repeater are the "ListItem" view. I need to highlight the item on click/touch, which is easy. I am struggling with removing that styling when the user click another item, as only one item should be selected at a time.

Here are some screenshots of the related views  
Embedded "SelectableList" view:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/4/84b137e187ddd15701ced72a90da206a41f34df4.png)  
Selectable List View:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/9/69e30b0c8a1fefd50ae8319bd4d221faa6c3b30b.png)  
ListItem View:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/c/4ca3809bd760b8e24d653b69674d94070523b68f.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 12, 2024, 6:40pm UTC](https://forum.inductiveautomation.com/t/highlighting-selection-on-click/98532/2 "2024-11-12T18:40:35Z")

</div>

You have a number assigned to each item. Pass that number out to a custom property on the holding container. (You might use a message handler for this.) Pass the number back into each view as a parameter and create an expression binding on the view's props.style to detect if it's the selected view (`number = viewNumber`). Set the appropriate style if true and the default if false.

---

<div class="post-metadata">

**Author:** ![William\_Gibson](https://avatars.discourse-cdn.com/v4/letter/w/a88e4f/32.png) [@William\_Gibson](https://forum.inductiveautomation.com/u/William_Gibson)\
**Post date:** [November 12, 2024, 7:56pm UTC](https://forum.inductiveautomation.com/t/highlighting-selection-on-click/98532/3 "2024-11-12T19:56:04Z")

</div>

This worked a charm. In order to implement it, I have to change how I run some of my scripts, but I needed to clean up some code anyway. Thank you!

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 12, 2024, 7:59pm UTC](https://forum.inductiveautomation.com/t/highlighting-selection-on-click/98532/4 "2024-11-12T19:59:43Z")

</div>

Good work. If you're not doing it already, create the styles in Project Browser | Perspective | Styles and reference these in the view's `props.style`, or wherever. It makes maintaining visual consistency much, much easier.

See [Perspective Built-In Themes | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/perspective-built-in-themes#theme-colors).