Stack Submit Data and Navigate Actions on a Button

With Stackable Actions, you're able to attach multiple actions to a single Button/Touchable. In this tutorial, we're going to demonstrate submitting data in a form and navigating to a List View screen to see the data submission. We'll demonstrate this by creating a basic Grocery List that will be hosted in Airtable.

If you don't have an Airtable account, you can sign up for one for free, here.

  1. Adding a Service and Endpoint
  2. Using the Service and Endpoint to display data on a List View screen
  3. Creating a Form screen to Submit Data to our Endpoint
  4. Attaching the Submit Data and Navigate actions to the Button

Setting up the Airtable

For the Grocery List, I've started with a very basic Airtable that only has one column (Name) for the names of the grocery items.

image
image

Once you have your base, click the Help button in the upper right-hand corner and select "API Documentation" from the dropdown. Once you're inside the documentation, navigate to the "Authentication" section. Make sure to check the 'show API key' checkbox to populate to generate your API key. Now that we have this information, we can add our Service and Endpoint to our app in Draftbit.

image
image

Adding the Service and Endpoint

With an app open in Draftbit, click the Data button on the left-hand side of the Builder.

  1. Enter a name for the API (I used 'Grocery List')
  2. Paste the Airtable URL (without the actual table name, reference the picture below) in the Base URL input
  3. Add a new Key/Value pair, set the Key to Authorization and select the Global Variable you created from the dropdown.

image

Once finished, you can save your Service. Next, you'll be prompted to create a new endpoint. This is the endpoint we'll be using in our Fetch component to display the list of data. Give your endpoint a name, and add the Table name in the Add Path & Params input. You can see what the full URL looks like in the Endpoint input above. Click 'Test' to ensure your data is pulling through properly and then click 'Save'.

image

Building the List Screen and Mapping Data

Add a Fetch, List, View, Text, and Button Solid component to a blank screen and re-arrange them in the Layer Tree so they appear like this:

image

Select the Fetch Component in the Layer Tree. Go to the Data tab and select the Service you just created in the Service dropdown. The Endpoint will automatically populate with the Endpoint you just created as well.

image

Next, select the List component in the Layer Tree and set the Mapped Data Value to data.records in the dropdown in the Data tab.

image

We're only mapping one data value, the name, in this example so select the Text component in the Layer Tree, select the Text dropdown in the Layer Tree and set it to fields.Name

image

Now, we'll add some basic styling to finish up the screen.

On the first Text component:

  • Change the Text to 'Grocery List' in the Data tab
  • Change the Font to Headline4 in the Styles tab
  • Change Align Text to Center in the Styles tab
  • Add 32pt top Margin in the Styles tab

On the View:

  • Change the Align Items to Center in the Styles tab
  • Add 8pt top Margin in the Styles tab

On the Button Solid:

  • Change the Text to 'Add New Item' in the Data tab
  • Add 32pt bottom Margin in the Styles tab

Once finished, your screen should look like this:

image

Building the Form Screen

Add a new, blank screen to your app. Add a View, Text Field - Solid and Button Solid to the screen and re-arrange them in the Layer Tree so they appear like this:

image

Again, we'll add some basic styling to the screen.

On the View:

  • Add 32pt top Margin in the Styles tab
  • Add 16pt left and right Margin in the Styles tab

On the Text:

  • Change Text to 'New Item' in the Data tab
  • Change Font to 'Headline4' in the Styles tab
  • Change Align Text to Center in the Styles tab

On the Text Field - Solid:

  • Change the Label to 'Item' in the Data tab
  • Change the Field Name to 'name' in the Configs tab

On the Button Solid:

  • Change the Label to 'Add Item' in the Data tab

Once finished, your screen should look like this:

image

Now, click the Data button on the left-hand side of the Builder and select the Grocery List Service you created and click the 'Create New Endpoint' button.

In this window we'll:

  1. Enter a name for the Endpoint (I used 'Groceries (Add)')
  2. Change the Method to POST using the dropdown
  3. Adding the same Table name from Grocery List endpoint the in the Add Path & Params input

image

Once you're finished, you'll want to go over to the Body Structure tab and paste

{"fields": {
        "Name": {{name}}}
        }]}

into the input as pictured below.

image

Next, go over to the Body tab and enter a Test Value for your POST request.

image

Once you've entered a Test Value, go to the Body Preview tab and you'll be able to see your request structured with the Test Value you've provided.

image

Last, go to the Test Response tab and click the 'Test' button. If you see the 200 OK message appear above the response you can click "Save" to save your endpoint and exit the modal.

image

Attaching the Submit Data and Navigate actions to the Button

Select the Button Solid in the Layer Tree. Go to the Interactions tab, click the "+" next to Actions and select "Submit Data" from the dropdown.

image

Under the Setup section, select your Grocery List service and the POST request endpoint. Under configuration, select name.

image

After setting this up, you're ready to Submit Data. Type an item into the input and click the 'Add Item' button and you will see whatever you've input in the field appear in your Airtable base.

The last thing to do is attach an additional action, the Navigate action, to the Button Solid so you'll return to the List view screen after submitting your data.

To do this, select the Button Solid in the Layer Tree. Go to the Interactions tab, click the "+" next to Actions and select "Navigate" from the dropdown.

image

Select your Grocery List from the dropdown and you're done!

image

⚠️

Navigation doesn't work inside of Web Preview so you'll have to preview the stackable actions with Live Preview in your Expo app.