The Amplify UI Builder API provides a programmatic interface for creating and configuring user interface (UI) component libraries and themes for use in your Amplify applications. You can then connect these UI components to an application's backend Amazon Web Services resources.

You can also use the Amplify Studio visual designer to create UI components and model data for an app. For more information, see Introduction in the Amplify Docs.

The Amplify Framework is a comprehensive set of SDKs, libraries, tools, and documentation for client app development. For more information, see the Amplify Framework. For more information about deploying an Amplify application to Amazon Web Services, see the Amplify User Guide.

Installing

To install this package, simply type add or install @aws-sdk/client-amplifyuibuilder using your favorite package manager:

npm install @aws-sdk/client-amplifyuibuilder
yarn add @aws-sdk/client-amplifyuibuilder
pnpm add @aws-sdk/client-amplifyuibuilder

Getting Started

Import

The AWS SDK is modulized by clients and commands. To send a request, you only need to import the AmplifyUIBuilderClient and the commands you need, for example ListFormsCommand:

// ES5 example
const { AmplifyUIBuilderClient, ListFormsCommand } = require("@aws-sdk/client-amplifyuibuilder");

// ES6+ example
import { AmplifyUIBuilderClient, ListFormsCommand } from "@aws-sdk/client-amplifyuibuilder";

Usage

To send a request, you:

Initiate client with configuration (e.g. credentials, region).
Initiate command with input parameters.
Call send operation on client with command object as input.
If you are using a custom http handler, you may call destroy() to close open connections.

// a client can be shared by different commands.
const client = new AmplifyUIBuilderClient({ region: "REGION" });

const params = {
  /** input parameters */
};
const command = new ListFormsCommand(params);

Async/await

We recommend using await operator to wait for the promise returned by send operation as follows:

// async/await.
try {
  const data = await client.send(command);
  // process data.
} catch (error) {
  // error handling.
} finally {
  // finally.
}

Async-await is clean, concise, intuitive, easy to debug and has better error handling as compared to using Promise chains or callbacks.

Promises

You can also use Promise chaining to execute send operation.

client.send(command).then(
  (data) => {
    // process data.
  },
  (error) => {
    // error handling.
  }
);

Promises can also be called using .catch() and .finally() as follows:

client
  .send(command)
  .then((data) => {
    // process data.
  })
  .catch((error) => {
    // error handling.
  })
  .finally(() => {
    // finally.
  });

Callbacks

We do not recommend using callbacks because of callback hell, but they are supported by the send operation.

// callbacks.
client.send(command, (err, data) => {
  // process err and data.
});

v2 compatible style

The client can also send requests using v2 compatible style. However, it results in a bigger bundle size and may be dropped in next major version. More details in the blog post on modular packages in AWS SDK for JavaScript

import * as AWS from "@aws-sdk/client-amplifyuibuilder";
const client = new AWS.AmplifyUIBuilder({ region: "REGION" });

// async/await.
try {
  const data = await client.listForms(params);
  // process data.
} catch (error) {
  // error handling.
}

// Promises.
client
  .listForms(params)
  .then((data) => {
    // process data.
  })
  .catch((error) => {
    // error handling.
  });

// callbacks.
client.listForms(params, (err, data) => {
  // process err and data.
});

Troubleshooting

When the service returns an exception, the error will include the exception information, as well as response metadata (e.g. request id).

try {
  const data = await client.send(command);
  // process data.
} catch (error) {
  const { requestId, cfId, extendedRequestId } = error.$metadata;
  console.log({ requestId, cfId, extendedRequestId });
  /**
   * The keys within exceptions are also parsed.
   * You can access them by specifying exception names:
   * if (error.name === 'SomeServiceException') {
   *     const value = error.specialKeyInException;
   * }
   */
}

Getting Help

Please use these community resources for getting help. We use the GitHub issues for tracking bugs and feature requests, but have limited bandwidth to address them.

Visit Developer Guide or API Reference.
Check out the blog posts tagged with aws-sdk-js on AWS Developer Blog.
Ask a question on StackOverflow and tag it with aws-sdk-js.
Join the AWS JavaScript community on gitter.
If it turns out that you may have found a bug, please open an issue.

To test your universal JavaScript code in Node.js, browser and react-native environments, visit our code samples repo.

Contributing

This client code is generated automatically. Any modifications will be overwritten the next time the @aws-sdk/client-amplifyuibuilder package is updated. To contribute to client you can check our generate clients scripts.

License

This SDK is distributed under the Apache License, Version 2.0, see LICENSE for more information.

Client Commands (Operations List)

CreateComponent

@aws-sdk/client-amplifyuibuilder