Create Forms to submit user data

This tutorial outlines how to build a Product Form application that submits new products into a database via a REST API.
To build the application:
1.​Design the user interface​
2.​Connect to a REST API​
3.​Build application logic​
At the end of this tutorial, the app should look similar to this:
Design the user interface
Follow the steps below to prepare the user interface layout:
1.Create and open a new app.
2.Navigate to the Design view.
3.Open the Libraries panel and select the Patterns tab.
4.Drag-and-drop the Products Form pattern into the Design canvas.
Note: You can use the Inspector panel or the quick selection menu to configure the form's style as needed.
5.Select the Components tab and drag-and-drop a Snackbar component onto the page. This is used to display pop-up messages in your app.
Note: The Snackbar component does not appear in the Design view preview.
Connect to a REST API
After you complete your user interface layout, prepare a REST API connection to submit form data into an external database:
Note: This tutorial uses the dummyjson.com REST API, a resource with fake JSON data at different types of REST endpoints.
1.Select the Connect tab.
2.Click Add a new data connection.
3.Select the REST API connection.
4.Name the connection Dummy JSON.
5.Set the URL field to https://dummyjson.com and the Method field to POST, since the form will add (POST) a product.
6.Set Path to the following endpoint: /products/add.
7.Add the following keys to the Body parameters and enable them via the checkboxes to the left of each key.
Note: The checkboxes display the corresponding keys on the REST API component so you can dynamically pass form data into the component.
title
price
description
category
8.(Optional) Rename the action to a more descriptive name (e.g. POST New Product). The Action Name field determines how the connection component is titled in the Logic view.
9.Click Publish to Logic to create the new component and add it to the Logic view Libraries panel.
Build application logic
To enable your application to POST data to an external database:
1.Select Logic to enter the Logic view.
2.Open the Libraries panel, scroll down to the Design References section, and drag-and-drop the following design references into the Logic flow canvas:
Products Form
Title Input
Description Input
Price Input
Category Select
Snackbar
Your logic flow should look similar to this:
3.Drag the POST New Product component into the Logic flow canvas.
Note: You can quickly search for POST New Product in the Libraries panel to locate the API component.
4.Select the Snackbar component and open the quick selection State menu to change its snackbarMessage to Product added.
5.Connect the following nodes to invoke the REST API and pass data from each form input into its corresponding field:
Products Form onSubmit > POST New Product call (this invokes the API when the form is submitted)
Title Input getValue > POST New Product body.title
Description Input getValue > POST New Product body.description
Price Input getValue > POST New Product body.price
Category Select getValue > POST New Product body.category
6.Connect the POST New Product's onSuccess node to the Snackbar's open node. Your flow should now look like this:
7.In the Studio Preview panel, enter the form values and click Submit Product to test your application. The Product Added Snackbar message should appear.
Congratulations, you've successfully created an app that can submit user data to a database via a REST API.
Last modified 2mo ago