Front-End Web & Mobile

NEW: Announcing Storage Manager and Relationship Support for Form Builder

Today, AWS Amplify is excited to announce the launch of two new features for Amplify Studio Form Builder: Storage Manager, and Relationship support! With this launch, we are extending the functionality of Form Builder to support even more use cases. Storage Manager links your generated React forms to Amplify Storage, using S3, so your forms can accept and upload files. And Relationship support allows your forms to connect to data models with one-to-one, one-to-many, and many-to-many relationships. Additionally, we’ve included several quality-of-life changes for Form Builder that should improve the experience of building and using forms.

Info card with an impact of storage manager within Form Builder

To start building with Studio Form Builder, create an app in the AWS Amplify console.

Storage Manager

Amplify Studio makes it simple to configure and deploy the Amplify Storage feature, which automatically provisions an S3 bucket to integrate with your application. Until now, however, it was up to developers to design a way to upload files. Now, with the introduction of Storage Manager support for Form Builder, you can add a Storage Manager input to your cloud-connected forms – on submission, any files selected by your end user will be uploaded to your S3 bucket.

If your form is connected to an Amplify GraphQL API using DataStore, Storage Manager will save the file’s S3 key, so it’s easy to programmatically access later on. Configure a connected form, and change any input mapped to a string field to a StorageField – when the form is submitted, the uploaded file’s S3 key will be stored in the connected data model as a string. You can then retrieve and use the file in-code using the Amplify JS library.

Screenshot showing the selection of a StorageManager field within a form

The Storage Manager field is powered by the Amplify UI Library, and gives you the same control and flexibility – you can include or restrict file types, allow multiple files to be uploaded, limit the file size, and more.

We will be sharing a detailed tutorial on how to use Storage Manager soon – check back to the AWS Amplify blog for updates!

Relationship Support

When building a backend for any moderately complex application, it’s likely that your data schema will include relationships. Today, you can build one-to-one, one-to-many, and many-to-many relationships in Studio using the data modeling functionality. Now, when you connect your forms to your data (or, use one of our default forms), any relationship fields will be represented using an Amplify UI Library autocomplete field.

For example, you might have an Author model, with a one-to-many relationship to Book. If your form is connected to the Book model, Studio will use an Autocomplete field will let you select from any existing Author record.

When configuring your form, you can adjust how your Autocomplete field displays the related records. By default, Studio will label related records in the Autocomplete using a “firstField – ID” structure, but this can be customized using any combination of fields and strings you prefer.

Screenshot showing the configuration options for an autocomplete field

In this example, the form is configured to display records using “author.firstName author.lastName – author.dateOfBirth” format.

Screenshot showing a form with a customized label for related records

In an upcoming blog post, we will share an in-depth tutorial on using Form Builder with Relationship fields – stay tuned!

Other Updates

In addition to the Storage Manager and Relationship support features, we have several quality-of-life improvements that have been added to Studio Form Builder:

  • Default forms in Studio are now labeled with an icon
  • Forms can now be unmapped and remapped to data models
  • Forms can be configured to mark required fields with a red asterisk, or to mark optional fields with an italicized label
  • Autocomplete fields can be used with unconnected forms by providing a manual list of options

What’s Next?

Get starting building with Amplify Studio’s Form Builder today by creating a new app in your AWS Amplify console, or by launching Studio for any of your existing apps. You can read more details on form builder in our Amplify Studio documentation. We would love to see what you have built using Form Builder – share your creations with us on Twitter, or join the community conversation on Discord.