# Custom search box in the detail tab

**URL:** <https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086>\
**Category:** Ask for Help\
**Created:** [June 17, 2021, 4:55pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086 "2021-06-17T16:55:33Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 12, 2021, 1:06am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/21 "2021-10-12T01:06:18Z")

</div>

Sorry I’m at work and can’t record things for you any time soon. Can you specify what you are trying to do with your data so we can help?

---

<div class="post-metadata">

**Author:** ![HouseHippo](https://avatars.discourse-cdn.com/v4/letter/h/6f9a4e/32.png) [@HouseHippo](https://community.glideapps.com/u/HouseHippo)\
**Post date:** [October 12, 2021, 1:11am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/22 "2021-10-12T01:11:42Z")

</div>

No problem! If you get the time, I’d be thankful!

I’m trying to use the text input to search a single column and return matching results in the corresponding inline list. Not sure how to set the relation or rollup. The backend confused me. Watching a quick setup may help.

Also showing “results counter” would be great.

For reference, this thread was linked from my other thread here. Related topics. [Filtering Workaround Requests - #7 by ThinhDinh](https://community.glideapps.com/t/filtering-workaround-requests/32870/7)

---

<div class="post-metadata">

**Author:** ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)\
**Post date:** [October 12, 2021, 3:15pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/23 "2021-10-12T15:15:28Z")

</div>

Hi Thin, this happens to me, but I think it’s a common factor. When I enter text in the non-native search bar, the first few characters overlap the magnifying glass. Do you have a way to avoid this? Thanks!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 12, 2021, 11:30pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/24 "2021-10-12T23:30:28Z")

</div>

No good way to do that. The native search bar has a special SVG setting that enables the magnifying glass to stays on the screen. I haven’t been able to replicate that.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 12, 2021, 11:32pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/25 "2021-10-12T23:32:31Z")

</div>

> [@HouseHippo](#):
>
> I’m trying to use the text input to search a single column and return matching results in the corresponding inline list. Not sure how to set the relation or rollup.

You should be able to do this with a setup like this:

- Have the search bar write to a user-specific column.

- In the Sheet that you will apply the search on, use a single value column pointing to the user-specific column above to cast that search term across all rows.

- Use an if then else column, if search term is included in column to search then true, else false. (Do this for all columns you want the user to search, so if you have 5 columns to search then your ITE column will have 5 conditions).

- Filter the inline list by that ITE column is true.

---

<div class="post-metadata">

**Author:** ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)\
**Post date:** [October 13, 2021, 6:19am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/26 "2021-10-13T06:19:44Z")

</div>

As always thanks for your technical pearls 😌

---

<div class="post-metadata">

**Author:** ![HouseHippo](https://avatars.discourse-cdn.com/v4/letter/h/6f9a4e/32.png) [@HouseHippo](https://community.glideapps.com/u/HouseHippo)\
**Post date:** [October 14, 2021, 12:08pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/27 "2021-10-14T12:08:38Z")

</div>

Lost me.

- Single value column, or single value relation? How do I point it?

- How does “single value” connect to If Then Else?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 14, 2021, 12:18pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/28 "2021-10-14T12:18:53Z")

</div>

> [@HouseHippo](#):
>
> - Single value column, or single value relation? How do I point it?

Single Value Column. When you enter the search term and it’s written to the user specific column, it’s only written to a single row. But you want to filter across all rows, so you need the search term applied to all rows. The single value column does this for you.

> [@HouseHippo](#):
>
> How does “single value” connect to If Then Else?

It’s used as part of each condition in the if-then-else column. So for each column that you want to apply the search to, you’ll have a separate conditional in the if-then-else that compares the value in that column to the value in the single value column. You’ll probably want to use “if column-to-be-searched includes single-value-column, then true”. The effect of that is that if _any_ of the columns you apply it to include the search term, then it will return true, and the associated row can be included in your search results.

---

<div class="post-metadata">

**Author:** ![Gideon\_Lahav\_Busines](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gideon_lahav_busines/32/41121_2.png) [@Gideon\_Lahav\_Busines](https://community.glideapps.com/u/Gideon_Lahav_Busines)\
**Post date:** [October 14, 2021, 12:30pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/29 "2021-10-14T12:30:54Z")

</div>

So you can add the “text entry” component, which should do the same function. right?

---

<div class="post-metadata">

**Author:** ![HouseHippo](https://avatars.discourse-cdn.com/v4/letter/h/6f9a4e/32.png) [@HouseHippo](https://community.glideapps.com/u/HouseHippo)\
**Post date:** [October 14, 2021, 12:44pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/30 "2021-10-14T12:44:23Z")

</div>

@Darren_Murphy Your explanations on how these components interact is very helpful. Thank you.

Now for single value, I get this. Not a clue what to select.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/1/f12a2c0aea5f1ca65ed70487c13953a74d003ef1.png)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 14, 2021, 12:45pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/31 "2021-10-14T12:45:51Z")

</div>

Assuming that you’re working in the first row in the table, you’ll want to select “first” from the table that contains the user specific column where your search term is being written to, and select that column.

---

<div class="post-metadata">

**Author:** ![HouseHippo](https://avatars.discourse-cdn.com/v4/letter/h/6f9a4e/32.png) [@HouseHippo](https://community.glideapps.com/u/HouseHippo)\
**Post date:** [October 14, 2021, 12:54pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/32 "2021-10-14T12:54:47Z")

</div>

Ohh! Point to the User Specific dump CELL, to duplicate across rows, so the ITE can run filter logic for each row. Got it now. Works. Thanks so much.

Going to try results counter now, may start new thread if unable. Sorry to hijack this thread @profxeni. There were some missing pieces for my dummy brain.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 14, 2021, 1:00pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/33 "2021-10-14T13:00:42Z")

</div>

> [@HouseHippo](#):
>
> Ohh! Point to the User Specific dump CELL, to duplicate across rows, so the ITE can run filter logic for each row. Got it now. Works. Thanks so much.

hehe, I had a silent chuckle to myself when I watched your video the other day and heard you referring to it as a “dump cell”. My guess is that once you begin to grasp the true power of user specific columns, you might give them a little more respect 😉

PS. You didn’t decide to take up my [challenge](https://community.glideapps.com/t/filter-and-propagation-issue-bug/32703/10)? 🤔  
PPS. For your results counter, you’ll want a [Rollup Column](https://docs.glideapps.com/all/reference/data-editor/computed-columns/rollup)

---

<div class="post-metadata">

**Author:** ![HouseHippo](https://avatars.discourse-cdn.com/v4/letter/h/6f9a4e/32.png) [@HouseHippo](https://community.glideapps.com/u/HouseHippo)\
**Post date:** [October 14, 2021, 4:29pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/34 "2021-10-14T16:29:00Z")

</div>

Not yet @Darren_Murphy, above my paygrade still.

On the custom text search still. Any quick ways to clear an input? An “x” button on same line perhaps? Other single-click actions? I do have other button filters, maybe one of them can overwrite the User-Specific Search Cell “OnClick”? Can’t figure the logic.

Anything to prevent user having to backspace 10 characters…

Might as well make this the “everything custom search thread”.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 14, 2021, 11:16pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/35 "2021-10-14T23:16:52Z")

</div>

> [@HouseHippo](#):
>
> On the custom text search still. Any quick ways to clear an input? An “x” button on same line perhaps?

That is hard UI-wise. CSS can theoretically put an image of “x” icon on the same line but if you have a long search term it might clash with that “x”.

I think the easiest option is have a “Clear input” button just under the search, with an action to clear the column you’re using to house the search term.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [December 12, 2021, 2:21am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/36 "2021-12-12T02:21:01Z")

</div>

Here’s my new code which has the same icon at the start.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/a/aabd9e23cd22d1beb9d1140fc5d6cba16e8a5e0d.jpeg)

```auto
<pre><span><style>

[data-test="app-text-field"] .input-wrap >div::before {
content: URL("https://i.imgur.com/4gNlaXl.png");
position: fixed;
}

[data-test="app-text-field"] .input-wrap .ta-inputbox{
margin-left: 28px;
}

div[id*='screenScrollView'] > div > :nth-of-type(1) >div >div >div{
height: 40px;
border-radius: 10px;
}

[data-test="app-text-field"].focused .input-wrap {
box-shadow: none;
}

```

---

<div class="post-metadata">

**Author:** ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)\
**Post date:** [December 13, 2021, 5:31pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/37 "2021-12-13T17:31:59Z")

</div>

Ohhh… Thank you @ThinhDinh 💪

---

<div class="post-metadata">

**Author:** ![Krishna\_Kashyap](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krishna_kashyap/32/47838_2.png) [@Krishna\_Kashyap](https://community.glideapps.com/u/Krishna_Kashyap)\
**Post date:** [October 7, 2022, 11:22am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/38 "2022-10-07T11:22:51Z")

</div>

Hi,

I want to custom search bar in glide app that searching for action text…

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/d/4d11b062b43acf6b8d1fd43ae52b597d1e1bd845.jpeg)

thanks

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 7, 2022, 12:15pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/39 "2022-10-07T12:15:21Z")

</div>

Searching and filtering works on lists of data.  
Setting up a custom search/filter on a series of action text components might be technically possible, but that’s an incredibly awkward way of going about it, and would be a nightmare to maintain.

If you’ve wound up with a long series of action text components that look like a list, that’s a sure sign that your back end tables are poorly designed. You should consider changing things around.

If you want to provide some screen shots of your current tables with a little bit of context about your App, perhaps we can guide you to getting a better foundation for your App.

---

<div class="post-metadata">

**Author:** ![NoCodeAndy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeandy/32/62530_2.png) [@NoCodeAndy](https://community.glideapps.com/u/NoCodeAndy)\
**Post date:** [January 17, 2024, 4:49pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/40 "2024-01-17T16:49:23Z")

</div>



[Previous page](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086.md?page=1)