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

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

Website Navigation

• Skip to main content

Data binding - React - AWS Amplify Gen 1 Documentation

Amplify Studio offers visual data binding capabilities to bind UI components to data to build dynamic components. Use the UI component editor to map fields to static values, or map fields to your backend data model. All data bindings get automatically included in generated code.

The UI component editor allows you to bind elements in your component to actual data.

The elements tree shows the composition of the component in Figma. Each layer in Figma maps to a specific Amplify UI primitive. For example, a frame in Figma maps to a <Flex> component in the Amplify UI library. Clicking on a layer will highlight the element in the live preview.

The live preview is a representation of the React component! If you inspect the component in the browser developer tools, you will see that each element in the component maps to real code. Click on any element within a component to select a specific child component. This will highlight the layer in the elements tree as well as bring up all relevant child properties for that component.

Just like in React, you can set props on your parent component. React components use props to communicate with each other. Every parent component can pass some information to its child components by giving them props. To learn more about React props visit their documentation. Amplify Studio supports Scalar (String, Number, Boolean) and Data model component types.

Clicking on any child elements within the live preview allows you to set child prop values. You can either set static values or pass prop values from the parent component. Child props will map to props available on the UI primitives. For example, if you select a <Button> component, you will be able to set props such as variation, size and see the live preview update with the values.

You can perform the following actions on a component:

1. Edit component in Figma: This will deep link you into the Figma file to edit the component.
2. Shuffle preview data: When you bind UI to static data or data from data models, use shuffle preview to see how your component renders with different data.
3. Create collection: Create a collection out of a component. Learn more.
4. Get component code: Use this React component in your app.

With Amplify Studio, you can bind elements in your UI component to actual backend data from your database by passing component properties with a Data model type down to the child elements.

You need to deploy a data model in order to bind to data. Studio supports any GraphQL API created with Amplify, with and without DataStore.

1. In Amplify Studio, navigate to UI builder components and select a component.
2. Add Component property named foo. Reference your data model (e.g. Home) as the type.
3. Click on an image child element in your UI component.
4. Choose Set prop for child properties. From the Prop dropdown, choose src, and for value, link to home.image_url. The live preview should update to an image from your database. Continue to repeat the same steps for different child elements such as text fields, inputs etc.

Learn more in the Collections documentation

You can bind text labels to static values. Use one of the following two methods to bind UI elements to static values.

The following example demonstrates how to set the text label's value to the component's default value.

1. In Amplify Studio, navigate to UI builder components and select a component.
2. Add a Component property named foo of type String with a default value of Hello world.
3. Click on a text child element in your UI component.
4. Choose Set prop for child properties. From the Prop dropdown, choose label and for value, link to foo. The live preview should update to display "Hello world".

You can directly set child prop values with all available properties. In the following example, you are setting the label prop to "Explore" and the color prop to "orange".

Modifiers let you apply custom logic to renders child prop values.

You can apply conditional logic on values of child props. The following example demonstrates how you can conditionally set the value of a child prop based on custom logic.

You can apply concatenations on values of child props. The following example demonstrates how to add a $ sign before displaying a price.

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