Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.amplify.aws/gen1/react/build-ui/uibuilder/eventhandling/ below:

Website Navigation

• Skip to main content

UI event handler - React

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

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.

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

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.

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.

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"

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

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.

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.

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

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.

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

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.

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

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.

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

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

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.

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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4