Wedding story app — Part 3. Adding an RSVP form

The wedding app saga continues! This time, we’re creating a form that enables the wedding app users to RSVP to your invitations — in other words, send data to a data sheet. This is made possible by our Google Sheets plugin.

I’m continuing right where we left off, so what I’ve got here is a list of wedding photos (fetching images and descriptions from a Google Sheet — described in part 1), and a Details View screen (illustrated in part 2). Now, though, we’ve also added a tail block containing a button that leads the user to the RSVP form, along with a data sheet for said RSVP form.

1. Create new stencil and select it as Tail block for the main list element

The tail block’s button links up to the RSVP form

1. The button that takes the user to the RSVP form is added as a tail block stencil, so it always appears as the last item of the list. The setting for this is located in the List’s Element settings.

2. Create the RSVP form

2. The RSVP form itself is pretty simple: it has a toggle named ‘attending’, and text fields for ‘name’ and ‘message’. You can change their names in the Element list.

3. Add header columns that match the Element names

3. Now, move on to Google Sheets and create a new sheet. (If you did the previous tutorial, just click the + sign on the bottom left. If you didn’t you’ll find the instructions to add the Google Sheets plugin to your project here.)

Add header columns ‘attending’, ‘name’, and ‘message’. Won’t need anything else at this point — just make sure that the Element names in Neonto match the column headers in the Google Sheet!

Remember to also check that you’ve shared the Sheet to the Service account stated on your Neonto Cloud admin page and that you’ve given “Can edit” permissions.

4. Get your document ID on the Neonto Cloud admin page

4. Go to your Neonto Cloud admin page, add your sheet and generate a Document ID to be used in your app. Cloud admin is available for all paid users. Copy the Document ID.

5. Create a data sheet and set it up

5. Back to Neonto! Create a Data sheet and name it RSVP. Remember to check the “Saves user’s changes on the device” on your Project Map. Click Edit, make sure “Live Data from Web Service” picker is set on gsheet, and put in the Document ID.

6. Then, set up the Send button. It’s going to have four interactions attached to it:

1: The data in the RSVP form will be sent to the Google sheet

2: The input fields will be cleared

3: The user will be notified that the RSVP was sent via a popup message

4: The Send button will send the user back to the Start screen

Now you’re ready to test your form either on a simulator or your iPhone.

You’ll see the input data appearing in the Google Sheet. Neat! Now you know that your guests are on weird diets! Your catering service will be pleased.

Download Neonto at www.neonto.com.