Add Row Button for Table Features (user input)

[Dan_A]

I am creating a coda doc that I hope to one day ship to users as a way for freelance tutors to keep track of their payments and lessons.

I have the “Add Student” button for adding new students to the table… but once clicked and the form is filled it is very unintuitive for the user to understand they have completed the form without a submission button. Is there any way to add one?

[Daniel_Stieber]

Hey @Dan_A ,
welcome to the community

Yes, there are several ways with different up- and downsides.

Here are three that I’d come up with:

Using a form
The most obvious is using the form feature instead of a table.

How to

• Copy and paste your table to get a view of your table.
• Then in the table options, you can select ‘Form’ as your type and voila, you have a form with a submit button.
  

Demo

Using a dummy button
Another way is to add a button that imitates a submission. This helps a user to understand the user journey and can even close the modal. But it has a downside: Sometimes a user will start to fill out WITHOUT submitting anyway. So you will have a lot of half-filled rows. But also there is a little workaround, so you can check which is submitted data and which is not.

How to

• Add two columns: A button ‘Submit’ and a checkbox ‘isSubmitted’.
  
  
• The submit button will run two actions: change the isSubmitted column to true AND close the modal. You can use the formula ‘runactions’ to run two actions at once.
• To close the modal, you need to use a little trick: You have to actually “Open” the window with openWindow() where you want the user to land at without the modal. To make this without a reload, you just have to add the desired page URL Id, instead of a real URL. You can find it in the address bar after your page name. It will start with ‘_su’. In my case:
  https://coda.io/d/Community-Examples_d64iZZh9gx8/Submit-with-Dummy-Button_su4f0#Submit-with-Dummy-Button_tuJQB it is _su4f0

• Make an AddSubmission Button to open the modal:
  

• To get rid of the half-filled rows, you can now create an automation that runs e.g. daily in the night, when no one is filling out stuff.
  

Demo

Using a second table to cache pre-submitted data
A third way is to create a second table, that ‘caches’ your data. It is almost like the second way, but you don’t mix up pre-filled and after-submit data in one table.

How to

• Create a second ‘helper’ table with the same fields. I used ‘HLP’ in the names to better differenciate though.
• Make the AddSubmission button now open a new row in the helper table.
• When people fill it out, it will ‘cache’ the data there.
• Set the submit button on this second table now to create a new row in the original table. Now you only have clean data in your original table and real working submit button.
  
  
• Again, an automation can delete the cached data e.g. every day in your helper table.

Demo

Hope something of that will work for your use case

[Brendan_Woithe]

It might feel like a LOT of study, but user @Paul_Danyliuk 's youtube channel has an amazing 6 x 1 hour set of videos that show a bunch of best practices for setting up docs - and covers things like this (but he uses a different method which I think is much better).
There is SO much gold in this that I can’t stress how helpful it is, and how 6 hours of study will save you weeks of work when developing your first docs.
The first thing I did with coda was an extremely complex doc for my small business. I wish I had this set of resources when I originally made it. What it does mean is that I’m making a completely new V2 alongside our first effort now, and it is so much better its not funny (especially with entering info into a database / making sure the data is not messy / that there are data logs etc!)

Best Practices Showcase (8 hours of videos & a doc)

I created a doc to showcase best practices for making Coda docs that are enjoyable to build and use. As I was building it from scratch, I filmed it and narrated extensively. At the moment this is the single concentrated source of knowledge on how to approach building great Coda docs, how to be mindful of good user experience and clean maintainable architecture. I tried to pack as much Coda experience that I’ve got over the last few years as I could into these. Hence the length: I’m explaining …

[Daniel_Stieber]

Totally agree with @Brendan_Woithe . Watching Pauls Best Practice series is totally worth the time!

The described ‘Cache Table’ way is a basic version of how Paul does form submissions with Modals. He also adds Validation, a Cancel Button and more.

[Dan_A]

Thank you for the thorough answer!

Is there a way to attach a form to a button?

Also, can a button lead to a question that the user can answer and react accordingly?

For example: I would like the mark lesson button to ask “Was the lesson today?” (pick yes or no)- if yes automatically insert todays date and if no allow the user to select the date

[Brendan_Woithe]

Just thinking out loud - there’s many ways to accomplish things with coda. I’ve learnt the hard way that just diving in is not the best way to construct semi-complicated docs.
My gut feeling on your example is to not have a button / question at all.

I would be using a modal over a form unless absolutely necessary. And in that, I would just insert todays date as the default answer, so that a user can change it if the lesson was on a different date. With good UX/UI decisions around the modal layout, this can be easily directed.

Plan out your entire doc before starting. Figure out what needs to be user facing, what needs to be in a master database (please do not have users actually “using” the master database if you want to maintain integrity of your data.) Much depends on your actual project / what you are attempting to achieve.

Coda is an extraordinary tool which can be used very simply, but it can also achieve extremely complex things. Having more of overall idea about what you are trying to achieve will help people here give you guidance over best practices for achieving a good result. Make sense?