Listing all elements in a single cell in a repeating group?

[jonathan.pinet]

Hello all!

I am building an application describing jobs and skills. Each job has a list of skills, which I defined in option sets. I want to build an RG that lists all the skills for a given job in the same cell (in-line, one after the other), rather than by rows and columns. Here is the targeted design:

Here is what I have tried, using a 1 by 1 RG:

How may I do it? Thanks in advance!

cc @boston85719 if you see this!

[mikeloc]

Hi there, @jonathan.pinet… someone had the same question (or at least a very similar one) a few days ago, and that thread resurfaced another thread that you might want to check out.

Tip: Converting simple list output to tag-like element

Tl ;dr. Get a nice looking list output, rather than the normal commas or line breaks. [skill1] I was searching around how to make my boring output look a little prettier. It was basically a list of things that outputted like this: Yacht Ratings Certificate, PWCI, Navigation and Radar (OOW), Master 500gt (yacht), GMDSS (ROC) I liked the thought of adding each list item to a tag display, but I couldn’t really find what I wanted here in the forum so I created something myself. I thought I woul…

Hope this helps.

Best…
Mike

[sudsy]

@jonathan.pinet

How may I do it?

Hi @jonathan.pinet,

If you’re using the new layout engine (new responsive engine), there’s also this approach, which involves a simple CSS tweak to a regular RG. Here’s the result.

In your case, the “tag cloud” RG would be nested within a cell of your main RG. In that case, you’d need to tweak the CSS to target the inner RG properly. If you need a working example of that, let me know.

-Steve

[jonathan.pinet]

Thanks a lot @mikeloc and @sudsy ! It looks like what I’m trying to build. I will try to do it and let you know if I can’t.

Cheers

[jonathan.pinet]

Hi again @sudsy, thanks for sharing the ressource. I implemented on my page and it seems to work well, except that items are not wrapping when reducing the page width (an horizontal scrollbar appears, which I don’t want).
See my list:

and your sample list:

The current CSS code is as follows:

#rg-cell-wrap { display: flex; flex-wrap: wrap; height: auto !important; min-height: auto !important; }

I’m not a CSS expert: is there anything I need to add to this snippet? or setting my containers with specific widths and heights?

Thanks in advance

[NigelG]

A neat trick is to use a Multi Drop down set to just display only (input is disabled). That does a simple “tag cloud” effect.

[sudsy]

@jonathan.pinet

items are not wrapping when reducing the page width

Just to cover the bases, do you have the element id option enabled in your app settings? (Settings → General → Expose the option to add an ID attribute to HTML elements)

If you do that and assign the rg-cell-wrap ID to your main (outer) RG, then you’ll have to tweak the CSS to target the inner (nested) RG. I think something like the following should work…

#rg-cell-wrap .RepeatingGroup {
   display: flex;
   flex-wrap: wrap;
   height: auto !important;
   min-height: auto !important;
}

That should apply the CSS to the inner RG instead of the main RG. (Note that the rg-cell-wrap ID needs to be added to the outer RG. Don’t include the # symbol when you enter the ID into the property editor.)

Seems like @NigelG has an even simpler solution though.

EDIT

One final note… In my working example, the CSS is included in an HTML element which accompanies the RG. That’s done for ease of distribution. However, it should ideally be included at the page or app level of your app. You don’t want/need the CSS to be output in each cell.

-Steve

[jonathan.pinet]

That’s what I was missing! It works now, thanks so much for your help @sudsy
Thanks also @NigelG - that’s a good trick to know for future instances!

[boston85719]

Here is a link to my tutorial on how to do it in the old responsive engine

Category/Topic Tags | NoCode Trainer

In the new responsive engine, I would follow the approach listed in this forum post as it doesn’t require HTML elements making it much easier to trigger workflows and conditionals when the tags/chips are clicked etc.