Page updated Mar 6, 2024

UI event handler

Amplify Studio offers the ability to bind UI component events (onClick, onChange, and more) to actions to build interactive components. Use the UI component editor to map UI components' events to actions for navigation, data manipulation, authentication, and more. All data bindings get automatically included in generated code.

  1. Launch Amplify Studio for an app
  2. Select an UI element such as a button
  3. Click Set onClick action on Child properties panel
  4. Select an action to bind it to the UI element

Bind UI to navigation actions

You can bind UI elements to navigation actions. Navigation actions include the ability to go to a URL, open a URL in a new tab, scroll to an anchor, and refresh the page.

Go to URL

The "Go to URL" action navigates the customer to the designated URL. You can also construct the URL with dynamic data provided by the component's top-level properties.

  1. Select the Go to URL
  2. Enter the target URL. For example: https://support.example.com
Studio interface to "Go to URL"Live app navigating to the URL
Studio interface to configure "Go to URL"Interactive website
  1. Dynamically navigate to a specific item's URL in a collection by concatenating the item's id. In the example below, the URL is concatenated with home's id field.

Studio interface to dynamically bind URL to element ID

Open URL in new tab

Select "Open URL in new tab" to open the target URL in a new tab. Similar to Go to URL, you can also construct the URL with dynamic data provided by the component's top-level properties.

Scroll to anchor

You can bind an onClick action to scroll to a designated anchor (based on HTML's id attribute) on the page. For example, have a table of contents section that then navigates to a specific element in a UI.

  1. Select the Scroll to anchor
  2. Enter lorem-ipsum as the value
  3. In your app code add an HTML element with id="lorem-ipsum"
1import { HeroLayout1 } from './ui-components'
2
3<div className="App">
4 <HeroLayout1 />
5 ...
6 <div id="lorem-ipsum">
7 <h2>Lorem Ipsum</h2>
8 <p>
9 Here is a description of my new feature.
10 </p>
11 </div>
12 ...
13</div>

Scroll to a specific element's id

Refresh page

Select "Refresh" to execute a browser refresh of the current page.

Bind UI to create, update, or delete a data record

Amplify Studio now provides a new experience to build React forms. We recommend reviewing Form Builder (React) before using the data action bindings documented below.

You can bind UI elements to data actions, so your Figma-generated UI components function as forms. Data actions include the ability to create, update, and delete records from your database.

Make sure to mark the component as a form for accessibility.

  1. Select the top element from the element tree
  2. Add a new child property named as
  3. Set the value to form

This will render the component within an HTML <form /> element.

Using DataStore

Forms created using Studio event handlers can work with any Amplify GraphQL API, with or without DataStore.

If you are using DataStore, however, DataStore will only use the default authentication type and not the additional types unless configured with MULTI_AUTH enabled. In most cases, you will want to have authentication for your forms. For example, an app might use API Key for public content and Cognito User Pool for personalized content once the user logs in.

To enable multiple authentication types in DataStore & Amplify Forms, please refer to Configure Multiple Authorization Types.

Create a record in database

You can create a new record based on the values provided by input fields. For example, you have a form to create a new "Home" for a rental listing site. The form contains inputs for the address, price, and an image URL.

  1. Select the "Submit" button element
  2. Add an onClick action to the element
  3. Choose the "Create" data action
  4. Select the database model to create a record for
  5. Map the model fields to input values

Studio console experience to create a record

Render the component with the "Create" data action. Pro tip: Amplify Studio's collection components synchronizes data in real-time. If a new record is available in the database, it will automatically sync to the app.

1import { NewHomeInput, HomeCollection } from './ui-components'
2
3...
4<div>
5 <NewHomeInput />
6 <HomeCollection />
7</div>

In app record create data action binding

Update a record from database

You can update an existing record using the "Update" data action. For example, users can click on a home in a collection and update its values with a form.

  1. Select the "Submit" button element
  2. Add an onClick action to the element
  3. Choose the "Update" data action
  4. Select the database model to create a record for
  5. Enter the ID of the record to update
  6. Map the model fields to input values

Studio console experience to create a record

Use the overrideItems property in collections to configure an onClick handler to select a home to update. Optionally, configure the form's placeholder values to be the current home value.

Pro tip: Amplify Studio's collection components synchronizes data in real-time. If a record is updated in the database, it will automatically sync to the app.

1import { UpdateHome, HomeCollection } from './ui-components'
2import { useState } from 'react'
3
4...
5
6function App() {
7 const [updateHome, setUpdateHome] = useState()
8 return (
9 <div>
10 <UpdateHome home={updateHome}/>
11 <HomeCollection overrideItems={({ item }) => ({
12 onClick: () => setUpdateHome(item)
13 })} />
14 </div>
15 )
16}

In app record update data action binding

Delete a record from database

You can delete a new record based on a model's ID field. For example, if you have a modal to delete a "Home" from a rental listing site.

  1. Select the "Delete" button element
  2. Add an onClick action to the element
  3. Choose the "Delete" data action
  4. Select the database model to delete from
  5. Map the ID value to a property

Studio console experience to create a record

In your app code, you can set an onClick handler for Home collections to show the delete modal. Then, set the DeleteHome component's home property to configure which home to delete. You can also listen in to the ui Hub events to dismiss the modal after the record is deleted.

1import { HomeCollection, DeleteHome } from './ui-components'
2import { Hub } from 'aws-amplify/utils'
3import { useState, useEffect } from 'react'
4
5...
6
7function App() {
8 const [showDeleteHome, setShowDeleteHome] = useState()
9 useEffect(() => {
10 Hub.listen('ui', ({ payload }) => {
11 if (payload.event === 'actions:datastore:delete:finished') {
12 setShowDeleteHome()
13 }
14 })
15 }, [setShowDeleteHome])
16
17 return (
18 <div className="App">
19 <HomeCollection overrideItems={({ item }) => ({
20 onClick: () => setShowDeleteHome(item)
21 })} />
22 {showDeleteHome &&
23 <div className='modal'>
24 <DeleteHome home={showDeleteHome} />
25 </div>}
26 </div>
27 );
28}

Delete a record in-app experience

Bind UI event to modify another UI element

Use the element modification action binding to introduce more UI-level interactivity for your components. For example, you can configure hover effects, trigger color changes when a user clicks on an element, or toggle visibility on other elements based on user interactions. To add a hover effect to an element:

  1. Set the "onMouseEnter" property
  2. Select "Modify element property"
  3. Select the component you want to modify
  4. Select the "backgroundColor" as an example
  5. Update the desired background color value
  6. Repeat with "onMouseLeave" property to reset the background value

Studio experience to configure hover effects

Bind UI to "sign out" actions

Use the "Sign out" actions to sign out the user from the app. Choose to either sign out from the current device or across all devices, also known as global sign out.

  1. Select the "Sign out" button element
  2. Add an onClick action to the element
  3. Choose the "Sign out from this device" data action

Studio console experience to configure a sign out action

The sign out actions work in combination with the Authenticator component. When you sign out, the Authenticator will appear to request the user to sign-in again.

1import { withAuthenticator } from '@aws-amplify/ui-react'
2import { UserInfo } from './ui-components'
3
4function App() {
5 return <UserInfo />
6}
7
8export default withAuthenticator(App);

Sign out experience in-app

Handle UI changes after action execution

In case you want to add additional business logic after an action is executed, review Add additional business logic before or after action execution. You can use this capability to dismiss a modal after a data record was created, send analytics event after action, or display loading indicators when a record is being created.