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

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

Website Navigation

• Skip to main content

Collections - JavaScript - AWS Amplify Gen 1 Documentation

Collections are any list of repeating items. You can visually create a collection from any individual component by selecting the Create collection button in the top right corner of the UI component editor. All collections are generated as code with real-time subscriptions automatically set up.

Amplify Studio offers a visual way to bind collections to items in your data model. Collection items can be filtered, sorted, or linked to specific records from the content management view.

Amplify Studio supports data binding to all Amplify GraphQL APIs, with or without DataStore. Learn more about DataStore and Conflict Resolution here.

For APIs without DataStore, there are some minor Collection feature limitations:

• Collections cannot be Sorted
• Collections have limited Search
• Collections have limited Pagination

Additionally, if your data has any relationships, APIs without DataStore require a query depth of 4 or greater. To update your codegen query depth:

1. Navigate to the root directory of your project in your terminal
2. Run amplify configure codegen
3. When prompted, set query depth to 4 or greater. All other options can be set to your preference
4. Run amplify codegen to generate queries with your new depth

1. Launch Amplify Studio for an app
2. Create a collection from a component
3. Link collection to a data model
4. Set filters to customize what data should be displayed
5. Set sort conditions to customize how the data should be displayed

   Note: If your component doesn't have a property backed by a data model, then you need to manually map a component's property to a designated data model field.

Filters control what records are displayed in a collection. You can add multiple filters to a single collection.

Sort conditions control the direction records are displayed in a collection.

You can edit some of the Amplify UI collection properties directly in Studio. Changes to the layout properties (e.g. List vs. grid, direction, order, padding) are reflected in the real-time preview.

Collections can be configured to automatically include a search bar by selecting the Include link on the left-hand bar. You can customize the placeholder for the search bar, and test it in-browser.

Collections can be configured to automatically paginate, with a specific number of items per page. Select Include on the left-hand bar to enable pagination and set the number of items.

For collections bound to GraphQL APIs without DataStore, pagination has limited support. Users can step forward through pages (e.g. page 1 to page 2), but cannot skip pages (e.g. page 1 to page 3).

Learn more about DataStore and Conflict Resolution.

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