# Highlight Selected Row

**URL:** https://community.thunkable.com/t/highlight-selected-row/1041699
**Category:** Questions about Thunkable X
**Created:** [December 24, 2020, 2:25pm UTC](https://community.thunkable.com/t/highlight-selected-row/1041699 "2020-12-24T14:25:13Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [December 24, 2020, 2:25pm UTC](https://community.thunkable.com/t/highlight-selected-row/1041699/1 "2020-12-24T14:25:14Z")

</div>

I am coding an app for a shop to start selling online. The owner asked an unusual request, at least for Thunkable features.

He wants the user when selecting an item from the list to stay in the same screen and fill other info like quantity ordered, size, color and while the user is keying these info the selected item should be highlighted in the list (Data Viewer List) for ease of reference for the user. This feature is not available out of the box.

I did a workaround and thought of sharing it with the community and I welcome your suggestions and enhancements.

The workaround does not provide full highlight but you might give me better solution.

@drted @tatiang @eddie.rebehy @jared @jared @codeswept @domhnallohanlon

> **[Thunkable](https://x.thunkable.com/projects/5fe49968180d0200197113a3/98fdc1cc-9341-4fa7-8f0d-755e72e326a1/designer)**

---

<div class="post-metadata">

### Author: ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)
#### Post date: [December 25, 2020, 2:53am UTC](https://community.thunkable.com/t/highlight-selected-row/1041699/2 "2020-12-25T02:53:56Z")

</div>

I think this is possible if you use a Custom Data Viewer Grid/ List. You can add specific buttons to your liking, and inputs for the user to enter quantities, etc. Inputs, buttons and other components work normally inside Data Viewer Layouts. The button on click event and other events return the row id the same way as Left Swipe does. That way, when the user updates his/her item preferences, you can change that in your Data Source.  
Hope this helps.  
Merry Christmas!

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [December 25, 2020, 6:45am UTC](https://community.thunkable.com/t/highlight-selected-row/1041699/3 "2020-12-25T06:45:40Z")

</div>

Yes you are right but when I tried it, it wasn’t impressive at all for more than one reason.

Doing so means each row will occupy the space of more than 3 rows in the screen resulting in fewer data being displayed per screen.

In the other hand, I don’t know of a way to hide the additional components until the user selects a row and then view the extra components only for that selected row.

Sometimes, users look forward to things and then ideas very differently and without any consideration of platform limitations.

---

<div class="post-metadata">

### Author: ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)
#### Post date: [December 25, 2020, 6:58am UTC](https://community.thunkable.com/t/highlight-selected-row/1041699/4 "2020-12-25T06:58:47Z")

</div>

Could you please explain a bit more about your app?

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [December 25, 2020, 8:10am UTC](https://community.thunkable.com/t/highlight-selected-row/1041699/5 "2020-12-25T08:10:24Z")

</div>

Many thanks for your interest @codeswept

This is an app I’m doing for a client. His business is actually in garment and need to run the business online with payment and delivery all within the country (Bahrain)

The **highlight** of selected row is his idea not mine. However, I found it useful in other ways and tried to find a workaround.

The blocks I shared works fine in the web Live Test but does not work in the mobile app which is something I’m trying to figure how to fix it.

Of course, if you add a refresh block for the Data Viewer List, it works I’m the mobile app but I’m not changing the data behind the code and the refresh block should not be required.

I’m posting it to get better feedback from you all.

---

<div class="post-metadata">

### Author: ![gobassky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/gobassky/32/77019_2.png) [@gobassky](https://community.thunkable.com/u/gobassky)
#### Post date: [December 26, 2020, 5:41am UTC](https://community.thunkable.com/t/highlight-selected-row/1041699/6 "2020-12-26T05:41:45Z")

</div>

Do you mean the client wants other users to see the selection “live” on the app? Meaning: user 1 selects an item, then user 2, 3 or 4 while browsing is able to see what use 1 has selected? this is an interesting idea. I think this is doable with Thunkable using the Firebase realtime data base.

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [December 26, 2020, 5:49am UTC](https://community.thunkable.com/t/highlight-selected-row/1041699/7 "2020-12-26T05:49:31Z")

</div>

Only the user sees the selection. The way Thunkable treats a selection is only through an event.

The data list viewer will not show the selected row any different from other rows. The owner of the app wants the selected row to be highlighted just like Excel or Google sheets.

---

<div class="post-metadata">

### Author: ![gobassky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/gobassky/32/77019_2.png) [@gobassky](https://community.thunkable.com/u/gobassky)
#### Post date: [December 26, 2020, 5:55am UTC](https://community.thunkable.com/t/highlight-selected-row/1041699/8 "2020-12-26T05:55:44Z")

</div>

I see. Then your best bet is to construct your own “viewer list” with some labels/buttons in a scrollable column component and use clone blocks. So that you can control the attributes of individual items (such as highlighting wit colored backgrounds).

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [December 26, 2020, 8:34am UTC](https://community.thunkable.com/t/highlight-selected-row/1041699/9 "2020-12-26T08:34:33Z")

</div>

@gobassky  
If you look at the project I shared, you’ll see that I made a good progress. They issue is that it works in the web Live Test but not on the phone.

---

<div class="post-metadata">

### Author: ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)
#### Post date: [November 8, 2024, 12:19pm UTC](https://community.thunkable.com/t/highlight-selected-row/1041699/10 "2024-11-08T12:19:26Z")

</div>


