Use Send Data to Add a User to a User List

In this tutorial, we’re going to build an app with 2 screens:

  • One screen that displays a list of people.
  • One screen that allows a user to add new people to that list.

For this tutorial, you will need:

Example Data is a free “Lorem Ipsum” data service that lets you prototype apps without worrying about building back-ends.

Build the List of People screen

Lay out the screen

Starting with a Blank screen, add and rearrange the following components. When you’re done, your Layer Tree should match the screenshot below:

  • Fetch
    • List
      • View

data_layer

Make sure the Fetch Render Item of the List is set to Data and the FlatList Item of the View is set to Item. Do not change these defaults.

Add 16pt of padding on all sides of the View. Add 3 Text components as children to the View component.

add_text

Change the Font of:

  • the first Text component to Headline 5
  • the second Text component to Body 1
  • the last Text component to Caption

Connect Data to the screen

To add the Example Data endpoint to your app:

  • Open App Settings :gear: from the bottom of the left-hand ribbon.
  • Navigate to the Services tab.
  • Add a new REST service.
  • Enter Example Data as the API Name.
  • Copy & paste https://example-data.draftbit.com/ into the Base URL field.
  • Click Save on the API modal.
  • Click Save again on the App Settings modal.

Make sure you only save the Base URL and exclude the actual endpoint (ex. users stocks, cars, etc). You can add the endpoint later when configuring your Fetch component and Button component.

saveexampledata

Connect Data to components

Select the Fetch component in the Layer Tree and then:

  • Open the Data tab from the Properties Panel.
  • Click Connect Data.
  • Select your saved Example Data API from the Base API or Service dropdown
  • Append users to the URL in the Endpoint field.
  • Click Test to make sure the data is pulling through, then Save to exit the Build Query modal.

connectexample

Next, select the List in the Layer Tree and set its Mapped Data Value to data in the Data Tab. If you’ve done that correctly, then vertically-repeating placeholder text will appear on your app screen. You can now begin mapping data values to the Text component:

  • Set the first Text component to fullName.
  • Set the second Text component to email.
  • Set and the last Text component to username.

mappingdata

Now that you’ve built out a simple list of users, we can move on to building a form to add new users.

Build the Add Person screen

Lay out the screen

Add a new, Blank screen to your project. Add the following components. When you’re done, your Layer Tree should match the screenshot below:

  • View component
    • Text component
    • 3x Text Field - Solid components
    • Button Solid component

48_PM

Style & Configure components

On the View component set:

  • Padding-Top to 32pt
  • Padding-Left + Padding-Right to 16pt

On the Text component set:

  • Font to Headline5
  • Text Align to Center
  • Text to Add a User
  • Bottom margin to 16pt

On the the first Text Field - Solid component set:

  • Field Name to fullName
  • Label to Full Name
  • Bottom margin to 16pt

On the the second Text Field - Solid component set:

  • Field Name to email
  • Label to Email
  • Bottom margin to 16pt

On the the third Text Field - Solid component set:

  • Field Name to username
  • Label to Username
  • Bottom margin to 16pt

On the Button Solid component set:

  • Text to Add User

Once finished, your screen should look like this:

Configure the Submit action

To configure the Submit data action on the Button:

  • Select the Button Solid in the Layer Tree.
  • Go to the Interactions tab (in Properties Panel) and select the Submit data option from the dropdown.
  • Click the Configure Data Submission button.
  • Select the Example Data API and append /users to the Endpoint the input field.
  • Add a Key/Value pair and assign it the Value of this.state.fullName from the dropdown.
  • Repeat this two more times but instead add this.state.email and this.state.username.

configuresubmission

Once finished, the setup should look like this:

Next, go to the Headers tab and add Content-Type: application/json as pictured below. Once finished you can save and exit the modal.

Now it’s time to test it out! Enter some information on the screen you just created and click the ‘Add User’ button.

Now, if you go to http://example-data.draftbit.com/users and scroll all the way down, you’ll see the entry you just created appear alongside the rest of the sample JSON data.

42_PM

If you go back to the User List screen you created, you’ll see your newly submitted data in Live Preview as well.

As a final note, please remember that any data submitted in a POST request will eventually disappear from the dataset. This service is meant to be used for testing purposes only!