@aws-sdk/client-amplifyuibuilder
Advanced tools
AWS SDK for JavaScript Amplifyuibuilder Client for Node.js, Browser and React Native
@aws-sdk/client-amplifyuibuilder is an AWS SDK client for interacting with AWS Amplify UI Builder, which allows developers to create and manage UI components and themes for their Amplify applications programmatically.
Create Component
This feature allows you to create a new UI component in your Amplify application. The code sample demonstrates how to create a button component with the text 'Click Me'.
const { AmplifyUIBuilderClient, CreateComponentCommand } = require('@aws-sdk/client-amplifyuibuilder');
const client = new AmplifyUIBuilderClient({ region: 'us-west-2' });
const params = {
appId: 'your-app-id',
environmentName: 'your-environment-name',
componentToCreate: {
name: 'MyComponent',
componentType: 'Button',
properties: {
text: { value: 'Click Me' }
}
}
};
const command = new CreateComponentCommand(params);
client.send(command).then(response => {
console.log('Component created:', response);
}).catch(error => {
console.error('Error creating component:', error);
});Update Component
This feature allows you to update an existing UI component in your Amplify application. The code sample demonstrates how to update the text property of a button component.
const { AmplifyUIBuilderClient, UpdateComponentCommand } = require('@aws-sdk/client-amplifyuibuilder');
const client = new AmplifyUIBuilderClient({ region: 'us-west-2' });
const params = {
appId: 'your-app-id',
environmentName: 'your-environment-name',
id: 'component-id',
updatedComponent: {
properties: {
text: { value: 'Updated Text' }
}
}
};
const command = new UpdateComponentCommand(params);
client.send(command).then(response => {
console.log('Component updated:', response);
}).catch(error => {
console.error('Error updating component:', error);
});Delete Component
This feature allows you to delete an existing UI component from your Amplify application. The code sample demonstrates how to delete a component by its ID.
const { AmplifyUIBuilderClient, DeleteComponentCommand } = require('@aws-sdk/client-amplifyuibuilder');
const client = new AmplifyUIBuilderClient({ region: 'us-west-2' });
const params = {
appId: 'your-app-id',
environmentName: 'your-environment-name',
id: 'component-id'
};
const command = new DeleteComponentCommand(params);
client.send(command).then(response => {
console.log('Component deleted:', response);
}).catch(error => {
console.error('Error deleting component:', error);
});List Components
This feature allows you to list all UI components in your Amplify application. The code sample demonstrates how to retrieve and log the list of components.
const { AmplifyUIBuilderClient, ListComponentsCommand } = require('@aws-sdk/client-amplifyuibuilder');
const client = new AmplifyUIBuilderClient({ region: 'us-west-2' });
const params = {
appId: 'your-app-id',
environmentName: 'your-environment-name'
};
const command = new ListComponentsCommand(params);
client.send(command).then(response => {
console.log('Components list:', response);
}).catch(error => {
console.error('Error listing components:', error);
});React is a popular JavaScript library for building user interfaces. While it does not provide direct integration with AWS Amplify, it can be used in conjunction with AWS Amplify to build and manage UI components.
Material-UI is a popular React UI framework that provides a set of pre-designed components. It can be used to build user interfaces for web applications, similar to how Amplify UI Builder provides components for Amplify applications.
Styled-components is a library for React and React Native that allows you to use component-level styles in your application. It provides a way to manage styles in a modular and reusable way, similar to how Amplify UI Builder allows you to manage UI components.
AWS SDK for JavaScript AmplifyUIBuilder Client for Node.js, Browser and React Native.
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.
To install this package, simply type add or install @aws-sdk/client-amplifyuibuilder using your favorite package manager:
npm install @aws-sdk/client-amplifyuibuilderyarn add @aws-sdk/client-amplifyuibuilderpnpm add @aws-sdk/client-amplifyuibuilderThe 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";
To send a request, you:
send operation on client with command object as input.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);
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.
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.
});
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.
});
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.
});
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;
* }
*/
}
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.
aws-sdk-js
on AWS Developer Blog.aws-sdk-js.To test your universal JavaScript code in Node.js, browser and react-native environments, visit our code samples repo.
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.
This SDK is distributed under the Apache License, Version 2.0, see LICENSE for more information.
3.714.0 (2024-12-17)
FAQs
AWS SDK for JavaScript Amplifyuibuilder Client for Node.js, Browser and React Native
The npm package @aws-sdk/client-amplifyuibuilder receives a total of 80,575 weekly downloads. As such, @aws-sdk/client-amplifyuibuilder popularity was classified as popular.
We found that @aws-sdk/client-amplifyuibuilder demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.