Available for copy: Newest form choice, progress bars & joined texts concept

Hi guys, as I work with my latest apps, I discovered some tricks that may help with your app design, so I thought it would be nice to share.

App link: https://interesting-history-7076.glideapp.io/

1/Filtered form choice

Very recently, it seems Glide has added support for filtering choices within a form, so in this concept app I applied it to two cases:

  • Filter a choice based on a previous choice in the same screen: You can find in the car choice that the car model will be filtered based on the car make.

  • Prevent duplicate choices for different choice components: You can find in the activities/food preference choices that when you have selected activity X for activity 1 field, it will not be in the choice list for activity 2 and vice versa. Same applies for the food choice components.

2/Progress bar for forms

Many of us have forms that are very long, and it would be nice to have sections inside the form like Google Forms.

In this app, I do it by creating a number column called “Progress” from Glide’s data editor so it would honor the number format. I also create a datetime column from Glide’s data editor.

How would there be progress bars when there’s actually no progress? The answer is by changing the max and min value of the progress bar.

The progress bar takes value from the previous screen, and as I never write the actual progress number to the Sheet, it will always be 0.

With 2 sections, and a progress number that will always be 0, the 1st progress bar would have a min of -1 and max at 1 so it will show a 50% progress.

With the 2nd progress bar, it will be a min of whatever you want and max at 0.

Same process applies for forms that would take more sections.

3/Navigation between sections

Navigation would include “Next section” and “Previous section”.

Different to the progress bar, which takes the value from the previous screen, these navigation buttons can increase a value inside the form, which is also set to Progress.

For the first screen, there will be 2 scenarios: either the progress is empty (at the start), or it equals 0 (when a user navigates backwards).

The first “Next section” button will be tied to an increment action for progress column, and as we also have to take into account the condition that each field in the section must not be empty before a user can go to the next, there must be 2 buttons for the 2 scenarios mentioned above. (as we can not do and + or at the moment)

For “Previous section”, only 1 button is needed, and it will show up when Progress is greater or equal to 1.

4/Cards without images & grouping

As you may have noticed, cards can now be configured without images and it gives a lovely nice look.

I also used a grouping action on the preferred date column to show an alternative view for a “calendar”.

5/"Textjoin" inside Glide

You may have faced a situation where you have to join multiple columns of text to give a good display, but your array doesn’t always have the same sizee. This is when you collect many fields of the same category in an array column via form (i.e Activities 1, Activities 2, etc.) without all columns required.

With the new Joined List column, we can do this inside Glide.

First, create a multple relation matching the array column back to the Choices sheet, then make a joined list column using that relation and separate them with a delimiter, in this case I use the default comma.

With that setup, I can use them in a template column to display the text inside the details view.

However, this approach would only work when you have a reference choice list to relate back. When you take random values from users, there must be a further step to combine all of user inputs into a column for this to work.

image

30 Likes

@Jeff_Hager @Robert_Petitto @Manan_Mehta hopefully this is useful and can give you some ideas, also thanks for the date grouping trick!

4 Likes

wow, it seems an huge work, thanks.
I’m taking a look right now

Gio
:wave:t2:

1 Like

Wow this is some great work!
Love how you always come up with great ideas to provide a better UX.
Well done!

3 Likes

This is really fantastic @ThinhDinh , congratulations on the beautiful work​:clap::clap::clap:.

1 Like

Not sure if this is a challenge for @ThinhDinh or not, but I’m trying to figure out a way to only show the latest submission from each user — without a query formula — all in Glide. I think I need proper date calcs/comparisons to do it without a query, but maybe there’s another way?!

1 Like

Quick answer, create a template of user email and timestamp. Create a self relation to the data in the sheet using user email. Then create a single value column to get last email timestamp value. Finally use an if then column to compare template to single value. If it matches, it’s the last row.

Or you can incorporate rollup to get max date instead of single value from the relation. Then create a template of email and rollup and check if it matches the current row.

Finally filter by if then column result.

2 Likes

To add to what Jeff said above, I always used that rollup approach for my 1v1 text setups.

We always see “latest messages” from popular apps like Messenger, WhatsApp, Instagram message, etc. and that was the thought behind using the rollup.

2 Likes

@ThinhDinh @Jeff_Hager I guess I need to come up with more challenging challenges haha… thanks for the help!

2 Likes

Very nice!!, congratulations, thanks for sharing,

1 Like

@ThinhDinh One very tiny flaw for you brother
I can press submit without moving to the next section just because all the other required fields are hidden till I press next section!
I have come across this problem in some of my apps, I usually put a text entry component down in the bottom without a header and make it required but make sure it’s hidden out of sight to avoid this from happening. Still not the best practice

4 Likes

@ThinhDinh awesome thanks for sharing. :+1:t2:

2 Likes

Thanks for pointing out brother :grin:

1 Like

Amazing work @ThinhDinh

1 Like

Can you CSS the submit button away (display: none) only on the screens that you don’t want it to appear?

1 Like

I suppose you can do that with the right conditions for the rich text :thinking:

Hey @Manan_Mehta, How do you make sure it is out of sight?

Just use a filter condition on something that you know will never be true.

1 Like

Hey @Darren_Murphy, Wish you a very Happy Birthday! :blush:
Tried that but than Submit sign is enabled as the text entry is filtered out.

oh yeah… haha sorry, my bad. Didn’t think that one through :crazy_face:

Okay, so I guess what @Manan_Mehta is saying is if you put a Text Entry component at the bottom of the screen with no Title and no Placeholder, it will just appear as a horizontal line at the bottom, so users may not even notice it. You could set it to write to a dummy User Specific column, just in case somebody puts something in it.

Not a great solution, but would work.

Personally, I just prefer to create my own forms - then you don’t have this problem as you have more control. I suspect that if @ThinhDinh was to re-create this app now, he’d probably do the same thing :wink:

3 Likes