Is there a better way to create your own inline list than what I'm currently doing?

Ask for Help
1

Hi all,

I have a use case where I’d like to display a list of items with custom formatting.

Basic Setup:

  • I have two tables: Users and Education.
  • The Users table has three columns: Name, Email and relation to the Education table.
  • The education table has six columns: School, Program Name, From (Date), To (Date), Country, Program Description (Rich Text/Markdown)
  • I am using a Details screen type

Requirements:

  • I want to retain the ability to tap on any given entry to display an Edit form screen for that entry, like in the preconfigured list views.
  • I’d like to display the list in a specific way, represented here:
Program Name
School
From - To
Country 

Course Description

Current Solution
My current solution creates a Single entry column to get a single element of the array of Education entries. Then, a lookup from that Single entry column to a Template column in the Education table that formats the information contained above to look like what I want.

The limitation is that it displays only first 10 entries of education. And it’s an ugly solution.

So I’m wondering - is there a better way to do this?

Here’s a sample app demonstrating all of the above: https://hanging-icicle-5411.glideapp.io/

Thanks for any ideas :slight_smile:

2

Any chance you can make that sample app copyable?

3

Done! Ignore the ugliness :see_no_evil:

4

hehe, yeah that’s not exactly pretty :laughing:

I guess my initial thought would be to use an Inline List with a cards layout. Might require a bit of fiddling (and possibly a bit of CSS) to fit everything in, but should be doable. And would certainly be much more scalable, and easier to maintain.

Have you tried that approach?

5

Yes, I thought of something along those lines too.

The blocker to that solution is that I’d like to give the editors the ability to have formatted rich text with markdown in the Course Description field. So if the course description contains a bulleted list of something like this, as it often this, it would format correctly, below the original block of basic information about the education entry:

  • Requires all students to finish a thesis
  • Average GPA of 3.4
  • Finished summa cum laude of the group

The predefined inline lists don’t seem to play very well with markdown, and hence the ugly solution!

6

mmm, okay.

I just had a quick fiddle, and it doesn’t look too bad?

Screen Shot 2022-03-14 at 1.18.31 AM
Screen Shot 2022-03-14 at 1.18.31 AM644×1138 110 KB

One drawback with a cards list is that there is a limit to the number of lines that can be displayed. I’m not sure if that can be extended with CSS. I suspect not.

7

That’s not bad! Which element of the card view got you the line breaks? Setting Course Description to the “Details” section renders everything in one long line for me.

8

That’s just a bit of CSS:

<pre><span><style>
[data-test="card-item"] .card-subtitle {
  white-space: break-spaces;
}
3 Likes
9

Ah, got it. Might be worthwhile to do it this way, even if the other markdown styling goes out the window.

Will have to experiment with the amount of information that is carried over, as you pointed out🤔