How do I create a custom form?

[Darren_Murphy]

I’m just dropping this here so I have something to refer people to when they ask.

This is a simple concept app (copyable), that demonstrates the following techniques:

• Building custom forms for adding and editing list items (as an alternative to the native forms provided by Glide)
• Preventing duplicate new entries using User Specific Columns and Relations
• Enforcing mandatory input items
• The use of visibility conditions and user specific booleans to control user flow

There is nothing particularly advanced here, but it does demonstrate a few concepts that new users sometimes appear to struggle with.

Custom Forms Concept

Update 2021-11-16: If you’re wondering what a Custom Form actually is, or when you might want to use one, then please read this:

Multi-step form

A custom form is just a detail screen that’s designed to act like a form and uses entry components linked to user specific columns as the temporary placeholders for the data. Once you are done filling out the form, you can have a button with a custom action that will first have an Add Row action that will take those user specific column values and write them to a different table. You can then follow that action with a Set Column action that will clear the user specific columns so it’s ready fo…

Update 2021-12-26: Concept app has been updated, to take advantage of some newer features and techniques. Changes include:

• A working table has been added, and is used to prevent duplicates being created on edit (this makes use of the Remove Element from Array plugin)
• Names are trimmed to remove extra white space
• Actions have been “modernised” to keep Save buttons disabled while all required criteria are not met.

Update 2024-12-16: Created a new Concept App, which is available as a template.

[ThinhDinh]

Thanks for making this!

[SuperMerabh]

@Darren_Murphy thank you so much for this. I’m totally inspired by your ideas and I’m trying to implement them on my app. I am bumping into one big problem…the “edit” button I added, won’t click! I duplicated everything you did on your app, so not sure what the problem is.

[Darren_Murphy]

The presence of that blue outline around your button suggests “select” mode. It’s not something as simple as being in the wrong mode, is it?

[SuperMerabh]

DUH

[AyS_0908]

Thank you @Darren_Murphy.
Is there a real risk of duplication when we create Custom Form, cf. the use of User Specific in addition to the target column?

I have a Custom Form with 50 questions (in addition to relations etc), so I am a bit relunctant to double these columns…

Thanks in advance.

[Darren_Murphy]

Being able to avoid duplicate entries (before they are created) is a nice side effect of using custom forms.
If you’re using the standard Open Form method, then I’m not aware of any way you can stop duplicates from being created. So I guess it depends on whether or not that is important for your use case.

[Eric_Penn]

I haven’t tried but if you prefer the modal form @ThinhDinh suggests you could conditionally hide the submit button using CSS.

Required fields when hidden

If clients insist on a form I use CSS to control the submit button. <pre><span><style> [data-test="nav-button-Submit"] { pointer-events: none; opacity: 0.4; } Then I can conditionally control when to make this “visible”.

I’m actually in the process of redoing one of my larger forms in a details view. Copy paste all!! Thanks @Darren_Murphy for the custom forms write up. I like your use of the ITE column to decide if we could save or not.

[AyS_0908]

Thank you @Darren_Alderman.

My question was not accurate, sorry: my issue is that I need to create a Custom Form (cannot use the standard Open Form component), but I was wondering if I could do it without using the User Specific columns in addition to the ones which records the values?
(the reason being that I have 50 questions, so using User Specific would mean x2 in terms of columns).

Incidentally, I have another issue: when I create my custom form with a “link to screen” button, I always have the value of the current row (which is not the case in your application).
Do you have any clue on this?

Many thanks in advance for your help

[Darren_Murphy]

@AyS_0908

My question was not accurate, sorry: my issue is that I need to create a Custom Form (cannot use the standard Open Form component), but I was wondering if I could do it without using the User Specific columns in addition to the ones which records the values?

I’ve never done that, so I’m not really sure. You might have to try it and see. I guess my concern is there might be a danger of over writing existing values.

@AyS_0908

Incidentally, I have another issue: when I create my custom form with a “link to screen” button, I always have the value of the current row (which is not the case in your application).

Link to Screen → This Item should always keep you on the current row. Are you saying that doesn’t happen in my sample app? I’d be skeptical of that.

[AyS_0908]

@Darren_Murphy

Link to Screen → This Item should always keep you on the current row. Are you saying that doesn’t happen in my sample app? I’d be skeptical of that.

Hi, it works very well in your app; I tried to replicate it without User Specific but I don’t see how it’s possible.

• Test a: Button “Link to screen / this item”: opens screen with row 1 entries populated

• Test b: Button “Action > Add row > Link to screen”: it does create an empty row, but still opens a screen with row 1 entries populated; here I thought that it would have opened the newly created row…

[Jeff_Hager]

If I understand it correctly…or at least how I do it…is that I have a custom action that clears the USC columns prior to the Link To Screen action, and/or I clear the USC columns in a custom action after first Adding the Row. You shouldn’t be adding a row prior to the Link to Screen action. Really, in most cases, you will be editing the same (most likely the first) row every time you use and submit the form.

One suggestion I have is to create your 50 USC columns, but in a separate table with only one row. It will just be a work table to temporarily hold data while filling out the form. That way you can keep it separate from your form response table. Display your tab or screen using that new work table, fill out the form, and have it submit to you existing form response table.

[AyS_0908]

Thank you @Jeff_Hager, I will follow your suggestions.

(truth is that I have much more than 50 columns, because at least 15 of them require multiselect… cf. your post on this topic, and the app that you built, that I am “dissecting”)

[Darren_Murphy]

@Jeff_Hager

If I understand it correctly…or at least how I do it…is that I have a custom action that clears the USC columns prior to the Link To Screen action, and/or I clear the USC columns in a custom action after first Adding the Row. You shouldn’t be adding a row prior to the Link to Screen action. Really, in most cases, you will be editing the same (most likely the first) row every time you use and submit the form.

Yep, this is what I usually do. Although sometimes I’ll leave the user specific columns intact, and use them to build a CSS table to present the row that’s just been created, and give the user an opportunity to review and/or edit it. So I’ll show the user the table, plus a button bar with “Edit” and “Go Back” options. If they choose Edit, then they get an edit form pre-populated with the User Specific values, and if they choose “Go Back”, only then I’ll clear the User Specific columns.

@Jeff_Hager

One suggestion I have is to create your 50 USC columns, but in a separate table with only one row. It will just be a work table to temporarily hold data while filling out the form. That way you can keep it separate from your form response table. Display your tab or screen using that new work table, fill out the form, and have it submit to you existing form response table.

Yes, I do this a lot.

[Mns_Glide]

Using this method, if I am pointing to a Glide Table that is new, I do not have access to the global User data…How to make it accessible? For example, I want to do column for Name, Photo and so on…

Thanks

[Darren_Murphy]

Are you wanting to:

• Add a new row to your User Profiles table,
• Update an existing row in your User Profiles table, or
• Reference columns in your User Profiles table?

[Mns_Glide]

You can see here the differences. I setup two buttons pointing to the same Glide Table,

1. one to show form when clicked
2. one to show new screen when clicked

you can see that 1. will allow me access to User’s Information and 2. does not. What I want is ability to access User’s Information in 2.

“Button Show Form”

“Show Form can access User’s Data”

“Button Show New Screen”

Cannot find User’s data

[Darren_Murphy]

You didn’t answer my question

[Mns_Glide]

Oh yes. Reference columns in User Profiles table

[Darren_Murphy]

Okay. So it depends on whether or not you’re using row owners. If you are, just add a component and you’ll find that you can use columns from your User Profiles as the source. Row owners will ensure that you’re selecting from the row that belongs to the currently signed in user.

If you’re not using row owners, then it’s a little trickier. Essentially you’d need to create a single relation between the current table and your User Profiles table (using a template containing the current users ID or email address), and then import whatever columns you need using lookups via that relation.

This might be a case where a custom form isn’t a good choice - I can’t say for sure.