Front-End Web & Mobile

Announcing the general availability of data management capabilities in the Admin UI

Today, AWS Amplify announced the general availability (GA) release of the Data Manager in the Admin UI. Launched at re:Invent 2020, the AWS Amplify Admin UI is an externally hosted console for frontend teams to visually create an app backend and manage their app content and users. Data management enables developers to visually browse app data, and content editors to update the app content post-release. Thanks to the feedback from the Amplify community to help move this feature from public preview to generally available. Here’s a recap of the key features:

Key features

Visual data browser

The Amplify Data Manager gives developers a visual way to browse and manipulate data for their Amplify backend. Developers first define a data model, and then can use the content view to access and manipulate basic CRUD operations on the data, create and manage relationships, generate seed data, filter and sort, and switch between different table views. The Data Manager automatically generates input fields based on the type of data – for example, the AWSDateTime field will create a date field.

Markdown support for content editors

App content editors can use the Data Manager view to edit and store data as markdown with the markdown editor. This is especially useful for blogs, news, marketing, or content-focused apps where developers want the app UI to be styled appropriately. The markdown editor is available for all fields of type String.

Admin UI Data Manager markdown editor screenshot

Seed data generation (NEW!)

Developers building apps can easily test their backend by generating seed data in a few clicks – seed data is data that populates the database at the time it’s created. Amplify Data Manager gives developers a quick way of generating test data to exercise end-to-end app workflows. The Data Manager allows allows developers to set constraints by defining the number of records to create along with min/max size of the record.

Admin UI - Content - Seed data generation screenshot

Hosted outside AWS console

The Amplify Admin UI can be accessed by team members outside the AWS Management Console. It provides a contextual view of your Amplify app backend and enables access to developers and non-developers (such as QA testers, and PMs) to manage app content and to users without creating AWS Identity and Access Management (IAM) users. Each Admin UI is hosted at https://region.admin.amplifyapp.com/appid/envname. Learn more

Quickstart

Deploy the full-stack sample below that will give you a starter Chakra UI project with a Listings backend. The code is already setup with Amplify DataStore, our client library for accessing and manipulating data in real-time.


Deploy to Amplify Console

Once the app is deployed, you should see a successful build pipeline. Click on the amplifyapp URL to visit the deployed site. It should look something like this.

Seed data sample app screenshot

Now let’s populate the backend with some data. From the Amplify Console, select Backend environment, and choose Open Admin UI. This will open the Admin UI in a new window. The Admin UI provides an abstracted view of your app backend. First, navigate to the Data tab to make sure your data model is deployed as shown below.

Amplify Admin UI - Home screenshot

Amplify Admin UI - Data screenshot

Navigate to the Content tab to view the CMS. The Content view allows you to access and manipulate the data in your app backend.

To populate some data, choose Auto-generate seed data. Enter 10 records of data and before hitting ‘Save’ open your Amplify hosted app side-by-side. Once you hit Save, you should see both the CMS and your Amplify app show results in real-time.Amplify CMS and Seed data sample app screenshot

To get started, build your own data model in our sandbox experience (no AWS account required) or view our docs to learn more about the Admin UI features.