# Show Items in Detail View as Pills

**URL:** <https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428>\
**Category:** Ask for Help\
**Created:** [September 22, 2023, 8:18am UTC](https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428 "2023-09-22T08:18:05Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Raphael\_Aebersold](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/raphael_aebersold/32/64167_2.png) [@Raphael\_Aebersold](https://community.glideapps.com/u/Raphael_Aebersold)\
**Post date:** [September 22, 2023, 8:18am UTC](https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428/1 "2023-09-22T08:18:05Z")

</div>

Hi there,

I’m building a marketing agency directory.  
Each agency has a detail view. In this detail view one can see their strenghts (SEO, Content Marketing etc.).

Now the problem is, that it really shows the view as a list of text. Is it possible to show it as “pills” or any other way that looks more neat? I’ve tried showing the split text values, but that is sadly not possible.

Best,  
Raphael

---

<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:** [September 22, 2023, 8:25am UTC](https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428/2 "2023-09-22T08:25:56Z")

</div>

Do they need to be clickable, either individually or as a group?  
Also, how are they saved in the underlying table? Sounds like you have them as a single comma-separated list?

---

<div class="post-metadata">

**Author:** ![Raphael\_Aebersold](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/raphael_aebersold/32/64167_2.png) [@Raphael\_Aebersold](https://community.glideapps.com/u/Raphael_Aebersold)\
**Post date:** [September 22, 2023, 12:16pm UTC](https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428/3 "2023-09-22T12:16:06Z")

</div>

Hi Darren and thanks for taking the time to answer me,

They don’t need to be clickable – it’s purely a visual thing (a comma separated list looks very unprofessional, especially if there aren’t any spaces after the commas).

At the moment the data is saved as a **comma separated list** (the **column is formatted as a text field** ).

I’ve also split the text by commas, but it seems like I can’t use the split column in a “detail field”.

I’ll attach three images below for better reference.

Img 1: table  
Img 2: app view  
Img 3: how i imagine a solution

 ![Screenshot 2023-09-22 at 14.12.43](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/c/ac8aee089fcdafa86b84a9c52b4d79636837d6b6.png)

 ![Screenshot 2023-09-22 at 14.11.45](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/0/3009bdea0ed004a65d6323e18b2951db4cd797d5.jpeg)  
 ![future-look](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/5/15678cf31dc05cef7d34e14ee9ed7cda916ffc2d.jpeg)

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [September 22, 2023, 12:42pm UTC](https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428/4 "2023-09-22T12:42:26Z")

</div>

Would you consider using different types of separators? I think 1 and 5 in the screenshot would be my first choices.

 ![Screenshot 2023-09-22 at 14.38.20](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/3/530e5b5f64201a61d115395a45fea9edaf774203.jpeg)

---

<div class="post-metadata">

**Author:** ![Raphael\_Aebersold](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/raphael_aebersold/32/64167_2.png) [@Raphael\_Aebersold](https://community.glideapps.com/u/Raphael_Aebersold)\
**Post date:** [September 22, 2023, 1:03pm UTC](https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428/5 "2023-09-22T13:03:26Z")

</div>

Dear nathanaelb,

Thanks a lot for your input.

I think this would be a workaround I could live with. How did you create these symbols?

However, I don’t specifically like the fact that this would force me to reformat the inputs (from a form field) in yet another column. Hence I’ll leave the ticket open still.

Best,  
Raphael

---

<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:** [September 22, 2023, 1:08pm UTC](https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428/6 "2023-09-22T13:08:36Z")

</div>

> [@Raphael\_Aebersold](#):
>
> Img 3: how i imagine a solution

You could get this, but it requires a bit of work.  
Essentially you would need to use a Helper Table to coerce your joined list into a vertical list, and then you could use that list as the source of a choice component using the chips style. You would also need to add a “dummy” column to use as the target of the choice component. A side effect of this approach is that the individual chips would be clickable, which creates two downsides: 1) It will impact your usage, as every click will count as an update, and 2) it could create a confusing user experience. So I’m not sure that I would recommend this option, but that’s up to you.

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [September 22, 2023, 1:17pm UTC](https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428/7 "2023-09-22T13:17:43Z")

</div>

> [@Raphael\_Aebersold](#):
>
> I don’t specifically like the fact that this would force me to reformat the inputs

The comma-separated input needs to come from somewhere. Probably from a choice component? I used two columns to reformat, I find it acceptable. You could even use one column only (a Template column), but I prefer it the way I did it.

 ![CleanShot 2023-09-22 at 15.11.39](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/d/8dc7db202854596608f7f3f3b52f40ea844ecc4a.png)

> [@Raphael\_Aebersold](#):
>
> How did you create these symbols?

There is a shortcut on my Macbook to display emojis and symbols. Or you could do an online search for symbols.

![Screenshot 2023-09-22 at 15.16.52](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/5/b5268c660f841c43c27662abc19dc1f6267831ef.png)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [September 22, 2023, 1:19pm UTC](https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428/8 "2023-09-22T13:19:41Z")

</div>

I would go to a full on html approach. Went down that path a while back to create pills that looked like choice chips. Never really completed it since I was just trying to see if I could do it. My approach was overkill, but something like a javascript column or even a template column could convert a comma delimited list into HTML that can be displayed in a rich text component reasonably easily depending on how lucky you are on the design of the pills.

> [@Choice component appearance](https://community.glideapps.com/t/choice-component-appearance/57142/7):
>
> Working on something. Top is CSS styled DIV tags created from a joined list column. Bottom is a choice component. Not overly complicated, but edging on overkill. Might end up making a single javascript column do handle it. Also, these are not clickable, so only useful if you just want a bunch of tags generated from a comma delimited list.

I wouldn’t use a choice component simply because users could still click on them.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [September 22, 2023, 1:34pm UTC](https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428/9 "2023-09-22T13:34:24Z")

</div>

I just threw the question at ChatGPT to create javascript. This is untested, but just looking at the code, I believe it should work. Pass your comma delimited list as the p1 parameter. The result should be html that you can use in a rich text component.

```auto
function createBluePillsList(input) {
  // Split the input string into an array of words
  const words = input.split(',');

  // Create an empty string to store the HTML
  let html = '';

  // Loop through each word and create a blue pill for it
  words.forEach(word => {
    // Trim the word to remove leading/trailing spaces
    const trimmedWord = word.trim();

    // Add the HTML for the blue pill with inline styling
    html += `<span style="background-color: #0074D9; color: white; padding: 4px 8px; margin: 4px; border-radius: 15px;">${trimmedWord}</span>`;
  });

  // Return the HTML string
  return html;
}

return createBluePillsList(p1);

```

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [September 22, 2023, 1:37pm UTC](https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428/10 "2023-09-22T13:37:01Z")

</div>

That’s beautiful, Jeff. What prompt did you use? Not that I would want to start using the columns that house code, but I’m curious.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [September 22, 2023, 1:41pm UTC](https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428/11 "2023-09-22T13:41:53Z")

</div>

This is what I asked. The only thing I changed after the fact was to put in a call to the function passing p1.

```auto
Give me javascript that takes a comma delimited list as input and
returns html with styling to make each word look like blue pills.

```

---

<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:** [September 22, 2023, 1:42pm UTC](https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428/12 "2023-09-22T13:42:04Z")

</div>

> [@Jeff\_Hager](#):
>
> This is untested,

It works 🙂

 ![CleanShot 2023-09-22 at 21.41.06@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/a/dae9c094f53f1c45c673b6218fab79e1c3a4db35.jpeg)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [September 22, 2023, 1:42pm UTC](https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428/13 "2023-09-22T13:42:23Z")

</div>

Awesome!

---

<div class="post-metadata">

**Author:** ![Raphael\_Aebersold](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/raphael_aebersold/32/64167_2.png) [@Raphael\_Aebersold](https://community.glideapps.com/u/Raphael_Aebersold)\
**Post date:** [September 22, 2023, 4:23pm UTC](https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428/14 "2023-09-22T16:23:13Z")

</div>

Wow guys, I’m stunned! Thanks so much for your help 🙏

I like the simplicity of [nathanaelb](https://community.glideapps.com/u/nathanaelb) just as much as the beautiful pill approach of [Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager).

Also thanks [Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy) for the list of pros and cons of your purely programmatic approach.

I think I’ll go with the easiest solution first (replacing the delimiters) and in the meantime I’ll look to create the pills.

---

<div class="post-metadata">

**Author:** ![Raphael\_Aebersold](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/raphael_aebersold/32/64167_2.png) [@Raphael\_Aebersold](https://community.glideapps.com/u/Raphael_Aebersold)\
**Post date:** [September 23, 2023, 8:27am UTC](https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428/15 "2023-09-23T08:27:06Z")

</div>

Now for everybody coming after us: I’ve encountered an issue that the pills were overflowing each other (top to bottom). To avoid that simply add the following code to each element:

`display: inline-block;`

Like that, they aren’t squished together and fit in every screen perfectly.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [September 30, 2023, 8:28am UTC](https://community.glideapps.com/t/show-items-in-detail-view-as-pills/66428/16 "2023-09-30T08:28:00Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.