Show Items in Detail View as Pills

[Raphael_Aebersold]

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

[Darren_Murphy]

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?

[Raphael_Aebersold]

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

[nathanaelb]

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

[Raphael_Aebersold]

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

[Darren_Murphy]

@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.

[nathanaelb]

@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.

@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.

[Jeff_Hager]

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

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. [image]

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

[Jeff_Hager]

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.

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);

[nathanaelb]

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.

[Jeff_Hager]

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

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

[Darren_Murphy]

@Jeff_Hager

This is untested,

It works

[Jeff_Hager]

Awesome!

[Raphael_Aebersold]

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

I like the simplicity of nathanaelb just as much as the beautiful pill approach of Jeff_Hager.

Also thanks 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.

[Raphael_Aebersold]

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.