Adding, editing, and deleting components - AWS App Studio
Adding components to a pageViewing and editing component propertiesDeleting components

AWS App Studio is in preview and is subject to change.

Adding, editing, and deleting components

Use the following procedures to add, edit, and delete components in or from pages in the App Studio application studio to craft the desired user interface for your application.

Adding components to a page

  1. If necessary, navigate to the application studio of your application.

  2. Navigate to the Pages tab of the application studio.

  3. The components panel is located in the right-side menu, which contains the available components.

  4. Drag and drop the desired component from the panel onto the canvas. Alternatively, you can double-click on the component in the panel to automatically add it to the center of the current page.

  5. Now that you've added a component, use the right-side Properties panel to adjust its settings, such as the data source, layout, and behavior. For detailed information about configuring each component type, see Components reference.

Viewing and editing component properties

  1. If necessary, navigate to the application studio of your application.

  2. Navigate to the Pages tab of the application studio.

  3. In the left-side Pages menu, expand the page that contains the component and choose the component to be viewed or edited. Alternatively, you can choose the page and then choose the component from the canvas.

  4. The right-side Properties panel displays the configurable settings for the selected component.

  5. Explore the various properties and options available, and update them as necessary to configure the component's appearance and behavior. For example, you might want to change the data source, configure the layout, or enable additional functionality.

    For detailed information about configuring each component type, see Components reference.

Deleting components

  1. If necessary, navigate to the application studio of your application.

  2. Navigate to the Pages tab of the application studio.

  3. In the left-side Pages menu, choose the component to be deleted to select it.

  4. In the right-side Properties menu, choose the trash icon.

  5. In the confirmation dialog box, choose Delete.