# Tutorials
**Topics**
+ [Build an AI text summarizer app with Amazon Bedrock](tutorial-conversational-bedrock.md)
+ [Interacting with Amazon Simple Storage Service with components and automations](automations-s3.md)
+ [Invoking Lambda functions in an App Studio app](tutorial-lambda.md)
# Build an AI text summarizer app with Amazon Bedrock
In this tutorial, you will build an application in App Studio that uses Amazon Bedrock to provide concise summaries of text input from end users. The application contains a simple user interface where users can input any text they want summarized. This could be meeting notes, article content, research findings, or any other textual information. After users enter the text, they can press a button to send the text to Amazon Bedrock, which will process it using the Claude 3 Sonnet model and return a summarized version.
**Contents**
+ [Prerequisites](#tutorial-conversational-bedrock-prerequisites)
+ [Step 1: Create and configure an IAM role and App Studio connector](#tutorial-conversational-bedrock-steps-create-role-connector)
+ [Step 2: Create an application](#tutorial-conversational-bedrock-steps-create-application)
+ [Step 3: Create and configure an automation](#tutorial-conversational-bedrock-steps-create-automation)
+ [Step 4: Create pages and components](#tutorial-conversational-bedrock-steps-user-interface)
+ [Rename the default page](#tutorial-conversational-bedrock-steps-user-interface-create-page)
+ [Add components to the page](#tutorial-conversational-bedrock-steps-user-interface-add-components)
+ [Configure the page components](#tutorial-conversational-bedrock-steps-user-interface-configure-components)
+ [Step 5: Publish the application to the **Testing** environment](#tutorial-conversational-bedrock-steps-publish)
+ [(Optional) Clean up](#tutorial-conversational-bedrock-steps-cleanup)
## Prerequisites
Before you get started, review and complete the following prerequisites:
+ Access to AWS App Studio. Note that you must have the Admin role to create a connector in this tutorial.
+ Optional: Review [AWS App Studio concepts](concepts.md) and the [Tutorial: Start building from an empty app](getting-started-tutorial-empty.md) to familiarize yourself with important App Studio concepts.
## Step 1: Create and configure an IAM role and App Studio connector
To provide App Studio access to Amazon Bedrock models, you must:
1. Enable the Amazon Bedrock models that you want to use in your app. For this tutorial, you will use **Claude 3 Sonnet**, so ensure you enable that model.
1. Create an IAM role with appropriate permissions to Amazon Bedrock.
1. Create an App Studio connector with the IAM role that will be used in your app.
Go to [Connect to Amazon Bedrock](connectors-bedrock.md) for detailed instructions, and return to this tutorial after you have followed the steps and created the connector.
## Step 2: Create an application
Use the following procedure to create an empty app in App Studio that you will build into the text summarizer app.
1. Sign in to App Studio.
1. Navigate to the builder hub and choose **\$1 Create app**.
1. Choose **Start from scratch**.
1. In the **App name** field, provide a name for your app, such as **Text Summarizer**.
1. If you're asked to select data sources or a connector, choose **Skip** for the purposes of this tutorial.
1. Choose **Next** to proceed.
1. (Optional): Watch the video tutorial for a quick overview of building apps in App Studio.
1. Choose **Edit app**, which will bring you into the application studio.
## Step 3: Create and configure an automation
You define the logic and behavior of an App Studio app in *automations*. Automations consist of individual steps known as *actions*, *parameters* that are used to pass data to the action from other resources, and an *output* that can be used by other automations or components. In this step, you will create an automation that handles the interaction with Amazon Bedrock with the following:
+ Inputs: A parameter to pass the text input from the user to the automation.
+ Actions: One **GenAI Prompt** action that sends the text input to Amazon Bedrock and returns the output text summary.
+ Outputs: An automation output that consists of the processed summary from Amazon Bedrock, that can be used in your app.
**To create and configure an automation that sends a prompt to Amazon Bedrock and processes and returns a summary**
1. Choose the **Automations** tab at the top of the canvas.
1. Choose **\$1 Add automation**.
1. In the right-hand panel, choose **Properties**.
1. Update the automation name by choosing the pencil icon. Enter **InvokeBedrock** and press **Enter**.
1. Add a parameter to the automation that will be used to pass the text prompt input from the user into the automation to be used in the request to Amazon Bedrock by performing the following steps:
1. In the canvas, in the parameters box, choose **\$1 Add**.
1. In **Name**, enter **input**.
1. In **Description**, enter any description, such as **Text to be sent to Amazon Bedrock**.
1. In **Type**, select **String**.
1. Choose **Add** to create the parameter.
1. Add a **GenAI Prompt** action by performing the following steps:
1. In the right-hand panel, choose **Actions**.
1. Choose **GenAI Prompt** to add an action.
1. Configure the action by performing the following steps:
1. Choose the action from the canvas to open the right-hand **Properties** menu.
1. Rename the action to **PromptBedrock** by choosing the pencil icon, entering the name, and pressing enter.
1. In **Connector**, select the connector that was created in [Step 1: Create and configure an IAM role and App Studio connector](#tutorial-conversational-bedrock-steps-create-role-connector).
1. In **Model**, choose the Amazon Bedrock model you want to use to process the prompt. In this tutorial, you will choose **Claude 3.5 Sonnet**.
1. In **User prompt**, enter `{{params.input}}`. This represents the `input` parameter that you created earlier, and will contain the text input by your app users.
1. In **System prompt**, enter the system prompt instructions you want to send to Amazon Bedrock. For this tutorial, enter the following:
```
You are a highly efficient text summarizer. Provide a concise summary of the prompted text, capturing the key points and main ideas.
```
1. Choose **Request settings** to expand it, and update the following fields:
+ In **Temperature**, enter `0`. The tempearture determines the randomness or creativity of the output on a scale of 0 to 10. The higher the number, the more creative the response.
+ In **Max Tokens**, enter `4096` to limit the length of the response.
1. The output of this automation will be the summarized text, however, by default automations do not create outputs. Configure the automation to create an automation output by performing the following steps:
1. In the left-hand navigation, choose the **InvokeBedrock** automation.
1. In the right-hand **Properties** menu, in **Output**, choose **\$1 Add**.
1. In **Output**, enter **\$1\$1results.PromptBedrock.text\$1\$1**. This expression returns the contents of the `processResults` action.
## Step 4: Create pages and components
In App Studio, each page represents a screen of your application's user interface (UI) that your users will interact with. Within these pages, you can add various components such as tables, forms, buttons, and more to create the desired layout and functionality.
### Rename the default page
The text summarizer app in this tutorial will only contain one page. Newly created applications come with a default page, so you will rename that one instead of adding one.
**To rename the default page**
1. In the top bar navigation menu, choose **Pages**.
1. In the left-side panel, choose **Page1** and choose the **Properties** panel in the right-side panel.
1. Choose the pencil icon, enter **TextSummarizationTool**, and press **Enter**.
1. In **Navigation label** enter **TextSummarizationTool**.
### Add components to the page
For this tutorial, the text summarizer app has one page that contains the following components:
+ A **Text input** component that end users use to input a prompt to be summarized.
+ A **Button** component that is used to send the prompt to Amazon Bedrock.
+ A **Text area** component that displays the summary from Amazon Bedrock.
Add a **Text input** component to the page that users will use to input a text prompt to be summarized.
**To add a text input component**
1. In the right-hand **Components** panel, locate the **Text input** component and drag it onto the canvas.
1. Choose the text input in the canvas to select it.
1. In the right-side **Properties** panel, update the following settings:
1. Choose the pencil icon to rename the text input to **inputPrompt**.
1. In **Label**, enter **Prompt**.
1. In **Placeholder**, enter **Enter text to be summarized**.
Now, add a **Button** component that users will choose to send the prompt to Amazon Bedrock.
**To add a button component**
1. In the right-hand **Components** panel, locate the **Button** component and drag it onto the canvas.
1. Choose the button in the canvas to select it.
1. In the right-side **Properties** panel, update the following settings:
1. Choose the pencil icon to rename the button to **sendButton**.
1. In **Button Label**, enter **Send**.
Now, add a **Text area** component that will display the summary returned by Amazon Bedrock.
**To add a text area component**
1. In the right-hand **Components** panel, locate the **Text area** component and drag it onto the canvas.
1. Choose the text area in the canvas to select it.
1. In the right-side **Properties** panel, update the following settings:
1. Choose the pencil icon to rename the button to **textSummary**.
1. In **Label**, enter **Summary**.
### Configure the page components
Now that the app contains a page with components, the next step is to configure the components to carry out the appropriate behavior. To configure a component, such as a button, to take actions when it is interacted with, you must add a *trigger* to it. For the app in this tutorial, you will add two triggers to the `sendButton` button to do the following:
+ The first trigger sends the text in the `textPrompt` component to Amazon Bedrock to be analyzed.
+ The second trigger displays the returned summary from Amazon Bedrock in the `textSummary` component.
**To add a trigger that sends the prompt to Amazon Bedrock**
1. Choose the button in the canvas to select it.
1. In the right-side **Properties** panel, in the **Triggers** section, choose **\$1 Add**.
1. Choose **Invoke Automation**.
1. Choose the **InvokeAutomation1** trigger that was created to configure it.
1. In **Action Name**, enter **invokeBedrockAutomation**.
1. In **Invoke Automation**, select the **InvokeBedrock** automation that was created earlier.
1. In the parameters box, in the **input** parameter that was created earlier, enter **\$1\$1ui.inputPrompt.value\$1\$1**, which passes the content in the `inputPrompt` text input component.
1. Choose the left arrow at the top of the panel to return to the component properties menu.
Now, you've configured a trigger that invokes the automation to send a request to Amazon Bedrock when the button is clicked, the next step is to configure a second trigger that displays the results in the `textSummary` component.
**To add a trigger that displays the Amazon Bedrock results in the text area component**
1. In the right-side **Properties** panel of the button, in the **Triggers** section, choose **\$1 Add**.
1. Choose **Run component action**.
1. Choose the **Runcomponentaction1** trigger that was created to configure it.
1. In **Action Name**, enter **setTextSummary**.
1. In **Component**, select the **textSummary** component.
1. In **Action**, select **Set value**.
1. In **Set value to**, enter **\$1\$1results.invokeBedrockAutomation\$1\$1**.
## Step 5: Publish the application to the **Testing** environment
Typically, while you are building an app, it's good practice to preview it to see how it looks and do initial testing on its functionality. However, because applications don't interact with external services in the preview environment, you'll instead publish the app to the Testing environment to be able to test sending requests and receiving responses from Amazon Bedrock.
**To publish your app to the Testing environment**
1. In the top-right corner of the app builder, choose **Publish**.
1. Add a version description for the Testing environment.
1. Review and select the checkbox regarding the SLA.
1. Choose **Start**. Publishing may take up to 15 minutes.
1. (Optional) When you're ready, you can give others access by choosing **Share** and following the prompts. For more information about sharing App Studio apps, see [Sharing published applications](application-share.md).
After testing your application, choose **Publish** again to promote the application to the Production environment. Note that apps in the Production environment aren't available to end users until they are shared. For more information about the different application environments, see [Application environments](applications-publish.md#application-environments).
## (Optional) Clean up
You have now successfully completed the tutorial and built a text summarization app in App Studio with Amazon Bedrock. You can continue to use your app, or you can clean up the resources that were created in this tutorial. The following list contains a list of resources to be cleaned up:
+ The Amazon Bedrock connector created in App Studio. For more information, see [Viewing, editing, and deleting connectors](viewing-deleting-connectors.md).
+ The text summarizer app in App Studio. For more information, see [Deleting an application](applications-delete.md).
+ The IAM role created in the IAM console. For more information, see [Delete roles or instance profiles](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_manage_delete.html) in the *AWS Identity and Access Management User Guide*.
+ If you requested model access to use Claude 3 Sonnet and want to revert access, see [Manage access to Amazon Bedrock foundation models](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html) in the *Amazon Bedrock User Guide*.
# Interacting with Amazon Simple Storage Service with components and automations
You can invoke various Amazon S3 operations from an App Studio app. For example, you could create a simple admin panel to manage your users and orders and display your media from Amazon S3. While you can invoke any Amazon S3 operation using the **Invoke AWS** action, there are four dedicated Amazon S3 actions that you can add to automations in your app to perform common operations on Amazon S3 buckets and objects. The four actions and their operations are as follows:
+ **Put Object**: Uses the `Amazon S3 PutObject` operation to add an object an Amazon S3 bucket.
+ **Get Object**: Uses the `Amazon S3 GetObject` operation to retrieve an object from an Amazon S3 bucket.
+ **List Objects**: Uses the `Amazon S3 ListObjects` operation to list objects in an Amazon S3 bucket.
+ **Delete Object**: Uses the `Amazon S3 DeleteObject` operation to delete an object from an Amazon S3 bucket.
In addition to the actions, there is an **S3 upload** component that you can add to pages in applications. Users can use this component to choose a file to upload, and the component calls `Amazon S3 PutObject` to upload the file to the configured bucket and folder. This tutorial will use this component in place of the standalone **Put Object** automation action. (The standalone action should be used in more complex scenarios that involve additional logic or actions to be taken before or after uploading.)
## Prerequisites
This guide assumes you have completed the following prerequisite:
1. Created and configured an Amazon S3 bucket, IAM role and policy, and Amazon S3 connector in order to successfully integrate Amazon S3 with App Studio. To create a connector, you must have the Administrator role. For more information, see [Connect to Amazon Simple Storage Service (Amazon S3)](connectors-s3.md).
## Create an empty application
Create an empty application to use throughout this guide by performing the following steps.
**To create an empty application**
1. In the navigation pane, choose **My applications**.
1. Choose **\$1 Create app**.
1. In the **Create app** dialog box, give your application a name, choose **Start from scratch**, and choose **Next**.
1. In the **Connect to existing data** dialog box, choose **Skip** to create the application.
1. Choose **Edit app** to be taken to the canvas of your new app, where you can use components, automations, and data to configure the look and function of your application.
## Create pages
Create three pages in your application to gather or show information.
**To create pages**
1. If necessary, choose the **Pages** tab at the top of the canvas.
1. In the left-hand navigation, there is a single page that was created with your app. Choose **\$1 Add** twice to create two more pages. The navigation pane should show three total pages.
1. Update the name of the **Page1** page by performing the following steps:
1. Choose the ellipses icon and choose **Page properties**.
1. In the right-hand **Properties** menu, choose the pencil icon to edit the name.
1. Enter **FileList** and press **Enter**.
1. Repeat the previous steps to update the second and third pages as follows:
+ Rename **Page2** to **UploadFile**.
+ Rename **Page3** to **FailUpload**.
Now, your app should have three pages named **FileList**, **UploadFile**, and **FailUpload**, which are shown in the left-hand **Pages** panel.
Next, you will create and configure the automations that interact with Amazon S3.
## Create and configure automations
Create the automations of your application that interact with Amazon S3. Use the following procedures to create the following automations:
+ A **getFiles** automation that lists the objects in your Amazon S3 bucket, which will be used to fill a table component.
+ A **deleteFile** automation that deletes an object from your Amazon S3 bucket, which will be used to add a delete button to a table component.
+ A **viewFile** automation that gets an object from your Amazon S3 bucket and displays it, which will be used to show more details about a single object selected from a table component.
### Create a `getFiles` automation
Create an automation that will list the files in a specified Amazon S3 bucket.
1. Choose the **Automations** tab at the top of the canvas.
1. Choose **\$1 Add automation**.
1. In the right-hand panel, choose **Properties**.
1. Update the automation name by choosing the pencil icon. Enter **getFiles** and press **Enter**.
1. Add a **List objects** action by performing the following steps:
1. In the right-hand panel, choose **Actions**.
1. Choose **List objects** to add an action. The action should be named `ListObjects1`.
1. Configure the action by performing the following steps:
1. Choose the action from the canvas to open the right-hand **Properties** menu.
1. For **Connector**, choose the Amazon S3 connector that you created from the prerequisites.
1. For **Configuration**, enter the following text, replacing *bucket\$1name* with the bucket you created in the prerequisites:
```
{
"Bucket": "bucket_name",
"Prefix": ""
}
```
**Note**
You can use the `Prefix` field to limit the response to objects that begin with the specified string.
1. The output of this automation will be used to populate a table component with objects from your Amazon S3 bucket. However, by default, automations don't create outputs. Configure the automation to create an automation output by performing the following steps:
1. In the left-hand navigation, choose the **getFiles** automation.
1. On the right-hand **Properties** menu, in **Automation output**, choose **\$1 Add output**.
1. For **Output**, enter **\$1\$1results.ListObjects1.Contents\$1\$1**. This expression returns the contents of the action, and can now be used to populate a table component.
### Create a `deleteFile` automation
Create an automation that deletes an object from a specified Amazon S3 bucket.
1. In the left-hand **Automations** panel, choose **\$1 Add**.
1. Choose **\$1 Add automation**.
1. In the right-hand panel, choose **Properties**.
1. Update the automation name by choosing the pencil icon. Enter **deleteFile** and press **Enter**.
1. Add an automation parameter, used to pass data to an automation, by performing the following steps:
1. On the right-hand **Properties** menu, in **Automation parameters**, choose **\$1 Add**.
1. Choose the pencil icon to edit the automation parameter. Update the parameter name to **fileName** and press **Enter**.
1. Add a **Delete object** action by performing the following steps:
1. In the right-hand panel, choose **Actions**.
1. Choose **Delete object** to add an action. The action should be named `DeleteObject1`.
1. Configure the action by performing the following steps:
1. Choose the action from the canvas to open the right-hand **Properties** menu.
1. For **Connector**, choose the Amazon S3 connector that you created from the prerequisites.
1. For **Configuration**, enter the following text, replacing *bucket\$1name* with the bucket you created in the prerequisites:
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
### Create a `viewFile` automation
Create an automation that retrieves a single object from a specified Amazon S3 bucket. Later, you will configure this automation with a file viewer component to display the object.
1. In the left-hand **Automations** panel, choose **\$1 Add**.
1. Choose **\$1 Add automation**.
1. In the right-hand panel, choose **Properties**.
1. Update the automation name by choosing the pencil icon. Enter **viewFile** and press **Enter**.
1. Add an automation parameter, used to pass data to an automation, by performing the following steps:
1. On the right-hand **Properties** menu, in **Automation parameters**, choose **\$1 Add**.
1. Choose the pencil icon to edit the automation parameter. Update the parameter name to **fileName** and press **Enter**.
1. Add a **Get object** action by performing the following steps:
1. In the right-hand panel, choose **Actions**.
1. Choose **Get object** to add an action. The action should be named `GetObject1`.
1. Configure the action by performing the following steps:
1. Choose the action from the canvas to open the right-hand **Properties** menu.
1. For **Connector**, choose the Amazon S3 connector that you created from the prerequisites.
1. For **Configuration**, enter the following text, replacing *bucket\$1name* with the bucket you created in the prerequisites:
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
1. By default, automations don't create outputs. Configure the automation to create an automation output by performing the following steps:
1. In the left-hand navigation, choose the **viewFile** automation.
1. On the right-hand **Properties** menu, in **Automation output**, choose **\$1 Add output**.
1. For **Output**, enter **\$1\$1results.GetObject1.Body.transformToWebStream()\$1\$1**. This expression returns the contents of the action.
**Note**
You can read the response of `S3 GetObject` in the following ways:
`transformToWebStream`: Returns a stream, which must be consumed to retrieve the data. If used as an automation output, the automation handles this, and the output can be used as a data source of an image or PDF viewer component. It can also be used as an input to another operation, such as `S3 PutObject`.
`transformToString`: Returns the raw data of the automation, and should be used in a JavaScript action if your files contain text content, such as JSON data. Must be awaited, for example: `await results.GetObject1.Body.transformToString();`
`transformToByteArray`: Returns an array of 8-bit unsigned integers. This response serves the purpose of a byte array, which allows storage and manipulation of binary data. Must be awaited, for example: `await results.GetObject1.Body.transformToByteArray();`
Next, you will add components to the pages you created earlier, and configure them with your automations so that users can use your app to view and delete files.
## Add and configure page components
Now that you have created the automations that define the business logic and functionality of your app, you will create components and connect them both.
### Add components to the **FileList** page
The **FileList** page that you created earlier will be used to display a list of files in the configured Amazon S3 bucket and more details about any file that is chosen from the list. To do that, you will do the following:
1. Create a table component to display the list of files. You will configure the table's rows to be filled with the output of the **getFiles** automation you previously created.
1. Create a PDF viewer component to display a single PDF. You will configure the component to view a file selected from the table, using the **viewFile** automation you previously created to fetch the file from your bucket.
**To add components to the **FileList** page**
1. Choose the **Pages** tab at the top of the canvas.
1. In the left-hand **Pages** panel, choose the **FileList** page.
1. On the right-hand **Components** page, find the **Table** component and drag it to the center of the canvas.
1. Choose the table component that you just added to the page.
1. On the right-hand **Properties** menu, choose the **Source** dropdown and select **Automation**.
1. Choose the **Automation** dropdown and select the **getFiles** automation. The table will use the output of the **getFiles** automation as its content.
1. Add a column to be filled with the name of the file.
1. On the right-hand **Properties** menu, next to **Columns**, choose **\$1 Add**.
1. Choose the arrow icon to the right of the **Column1** column that was just added.
1. For **Column label**, rename the column to **Filename**.
1. For **Value**, enter **\$1\$1currentRow.Key\$1\$1**.
1. Choose the arrow icon at the top of the panel to return to the main **Properties** panel.
1. Add a table action to delete the file in a row.
1. On the right-hand **Properties** menu, next to **Actions**, choose **\$1 Add**.
1. In **Actions**, rename **Button** to **Delete**.
1. Choose the arrow icon to the right of the **Delete** action that was just renamed.
1. In **On click**, choose **\$1 Add action** and choose **Invoke automation**.
1. Choose the action that was added to configure it.
1. For **Action name**, enter **DeleteRecord**.
1. In **Invoke automation**, select **deleteFile**.
1. In the parameter text box, enter **\$1\$1currentRow.Key\$1\$1**.
1. For **Value**, enter **\$1\$1currentRow.Key\$1\$1**.
1. In the right-hand panel, choose **Components** to view the components menu. There are two choices for showing files:
+ An **Image viewer** to view files with a `.png`, `.jpeg`, or `.jpg` extension.
+ A **PDF viewer** component to view PDF files.
In this tutorial, you will add and configure the **PDF viewer** component.
1. Add the **PDF viewer** component.
1. On the right-hand **Components** page, find the **PDF viewer** component and drag it to the canvas, below the table component.
1. Choose the **PDF viewer** component that was just added.
1. On the right-hand **Properties** menu, choose the **Source** dropdown and select **Automation**.
1. Choose the **Automation** dropdown and select the **viewFile** automation. The table will use the output of the **viewFile** automation as its content.
1. In the parameter text box, enter **\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
1. In the right-hand panel, there is also a **File name** field. The value of this field is used as the header for the PDF viewer component. Enter the same text as the previous step: **\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
### Add components to the **UploadFile** page
The **UploadFile** page will contain a file selector that can be used to select and upload a file to the configured Amazon S3 bucket. You will add the **S3 upload** component to the page, which users can use to select and upload a file.
1. In the left-hand **Pages** panel, choose the **UploadFile** page.
1. On the right-hand **Components** page, find the **S3 upload** component and drag it to the center of the canvas.
1. Choose the S3 upload component that you just added to the page.
1. On the right-hand **Properties** menu, configure the component:
1. In the **Connector** dropdown, select the Amazon S3 connector that was created in the prerequisites.
1. For **Bucket**, enter the name of your Amazon S3 bucket.
1. For **File name**, enter **\$1\$1ui.s3Upload1.files[0]?.nameWithExtension\$1\$1**.
1. For **Max file size**, enter **5** in the text box, and ensure that **MB** is selected in the dropdown.
1. In the **Triggers** section, add actions that run after successful or unsuccessful uploads by performing the following steps:
To add an action that runs after successful uploads:
1. In **On success**, choose **\$1 Add action** and select **Navigate**.
1. Choose the action that was added to configure it.
1. For **Navigation type**, choose **Page**.
1. For **Navigate to**, choose **FileList**.
1. Choose the arrow icon at the top of the panel to return to the main **Properties** panel.
To add an action that runs after unsuccessful uploads:
1. In **On failure**, choose **\$1 Add action** and select **Navigate**.
1. Choose the action that was added to configure it.
1. For **Navigation type**, choose **Page**.
1. For **Navigate to**, choose **FailUpload**.
1. Choose the arrow icon at the top of the panel to return to the main **Properties** panel.
### Add components to the **FailUpload** page
The **FailUpload** page is a simple page containing a text box that informs users that their upload failed.
1. In the left-hand **Pages** panel, choose the **FailUpload** page.
1. On the right-hand **Components** page, find the **Text** component and drag it to the center of the canvas.
1. Choose the text component that you just added to the page.
1. On the right-hand **Properties** menu, in **Value**, enter **Failed to upload, try again**.
## Update your app security settings
Every application in App Studio has content security settings that you can use to restrict external media or resources, or which domains in Amazon S3 you can upload objects to. The default setting is to block all domains. To upload objects to Amazon S3 from your application, you must update the setting to allow the domains you want to upload objects to.
**To allow domains for uploading objects to Amazon S3**
1. Choose the **App settings** tab.
1. Choose the **Content Security Settings** tab.
1. For **Connect source**, choose **Allow all connections**.
1. Choose **Save**.
## Next steps: Preview and publish the application for testing
The application is now ready for testing. For more information about previewing and publishing applications, see [Previewing, publishing, and sharing applications](applications-preview-publish-share.md).
# Invoking Lambda functions in an App Studio app
This tutorial shows you how to connect App Studio to Lambda and invoke Lambda functions from your apps.
## Prerequisites
This guide assumes you have completed the following prerequisites:
1. Created an App Studio app. If you do not have one, you can create an empty app to use in the tutorial. For more information, see [Creating an application](applications-create.md).
**Note**
While you don't need a Lambda function to follow this tutorial and learn how to configure it, it may be helpful to have one for ensuring you have correctly configured the app. This tutorial does not contain information about creating Lambda functions. for more information, see the [AWS Lambda Developer Guide](https://docs.aws.amazon.com/lambda/latest/dg/).
## Create a Lambda connector
To use Lambda functions in your App Studio app, you must use a connector to connect App Studio to Lambda to provide access to your functions. You must be an Administrator to create connectors in App Studio. For more information about creating Lambda connectors, including the steps to create one, see [Connect to AWS Lambda](connectors-lambda.md).
## Create and configure an automation
Automations are used to define the logic of your application and are made up of actions. To invoke a Lambda function in your app, you first add and configure an *Invoke Lambda* action to an automation. Use the following steps to create an automation and add the *Invoke Lambda* action to it.
1. While editing your app, choose the **Automations** tab.
1. Choose **\$1 Add automation**.
1. In the right-hand **Actions** menu, choose **Invoke Lambda** to add the step to your automation.
1. Choose the new Lambda step in the canvas to view and configure its properties.
1. In the right-hand **Properties** menu, configure the step by performing the following steps:
1. In **Connector**, select the connector that was created to connect App Studio to your Lambda functions.
1. In **Function name**, enter the name of your Lambda function.
1. In **Function event**, enter the event to be passed to the Lambda function. Some common use case examples are provided in the following list:
+ Passing an automation parameter's value, such as a file name or other string: `varName: params.paramName`
+ Passing the result of a previous action: `varName: results.actionName1.data[0].fieldName`
+ If you add an *Invoke Lambda* action inside a *Loop* action, you can send fields from each iterated item similar to parameters: `varName: currentItem.fieldName`
1. The **Mocked output** field can be used for providing mock output to test the app while previewing, where connectors are not active.
## Configure a UI element to run the automation
Now that you have an automation that is configured with an action to invoke your Lambda function, you can configure a UI element to run the automation. In this tutorial, you will create a button that runs the automation when clicked.
**Tip**
You can also run automations from other automations with the *Invoke automation* action.
**To run your automation from a button**
1. While editing your app, choose the **Pages** tab.
1. In the right-hand menu, choose the **Button** component to add a button to the page.
1. Choose the new button to configure it.
1. In the right-hand **Properties** menu, in **Triggers**, choose **\$1 Add** and choose **Invoke automation**.
1. Choose the new automation invoke trigger to configure it.
1. In **Invoke automation**, select the automation that invokes your Lambda function and configure any parameters that you want to send to the automation.
Now, any user that chooses this button in your app will cause the configured automation to run.
## Next steps: Preview and publish the application for testing
Your application is now ready for testing. When previewing your app in the Development environment, connectors are not active, so you cannot test the automation while previewing as it uses a connector to connect to AWS Lambda. To test your app's functionality that depends on connectors, you must publish the app to the Testing environment. For more information about previewing and publishing applications, see [Previewing, publishing, and sharing applications](applications-preview-publish-share.md).