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

[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 “play” 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.

[Marc-Olivier]

thanks This is helpful to check if user mail already exists in the sheet when creating a new account

[AyS_0908]

Thank you @darren.

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.