add App Builder onboarding modal docs

content/en/actions/app_builder/_index.md

@@ -30,18 +30,6 @@ further_reading:
 
 Datadog App Builder is a low-code application building platform. It streamlines the development of your internal tools with a user-friendly drag-and-drop interface and built-in support for JavaScript. App Builder integrates with popular services such as AWS and GitHub, allowing you to leverage data and seamlessly connect with external APIs and data stores. By integrating with Datadog's existing capabilities, App Builder provides a centralized context that enables you to take preventive actions or respond to ongoing incidents, all from within the same view that you use for troubleshooting.
 
-{{< img src="/service_management/app_builder/app-builder-app.png" alt="An app in App Builder" style="width:100%;" >}}
-
-## Configure App Builder actions
-
-Datadog App Builder provides an [Action Catalog][1] of hundreds of actions across multiple integrations. The Action Catalog and the connection credentials for each integration are shared with [Datadog Workflow Automation][2]. If there isn't an integration that accomplishes your task, you can use generic actions such as the HTTP requests and JavaScript functions to perform any task that your app requires.
-
-{{< img src="/service_management/app_builder/app-builder-action-catalog.png" alt="Datadog App Builder provides an Action Catalog of hundreds of actions across multiple integrations." style="width:100%;" >}}
-
-## Start with blueprints
-
-Datadog provides you with preconfigured flows in the form of out-of-the-box [blueprints][3] to help you [get started][5].
-
 Below are a few examples of what App Builder apps can do:
 - Identify the most likely causes of a regression given a text description of an incident and the most recent 150 commits to a repo.
 - Monitor your PagerDuty service status to get complete context while working on incidents.
@@ -50,21 +38,36 @@ Below are a few examples of what App Builder apps can do:
 - Use a PagerDuty integration to see who is on-call for each team in an organization.
 - Summarize the progress of each PR in a given repo.
 
-{{< img src="/service_management/app_builder/app-builder-blueprints-2.png" alt="App blueprints" style="width:100%;" >}}
+{{< img src="/service_management/app_builder/app-builder-app.png" alt="A screenshot of an app in App Builder" caption="An app in App Builder" style="width:100%;" >}}
+
+## Start with Onboarding
+
+When creating a new app, Datadog displays an onboarding modal with the following options: 
+- [Start with Blueprint][5]
+- [Start with Layout][12]
+- [Start with Data][13]
+- [Start with App Playground][14]
+- [Start from Scratch][10] 
+
+## Configure App Builder actions
+
+Datadog App Builder provides an [Action Catalog][1] of hundreds of actions across multiple integrations. The Action Catalog and the connection credentials for each integration are shared with [Datadog Workflow Automation][2]. If there isn't an integration that accomplishes your task, you can use generic actions such as the HTTP requests and JavaScript functions to perform any task that your app requires.
+
+{{< img src="/service_management/app_builder/app-builder-action-catalog-2.png" alt="A screenshot of App Builder after clicking Add Action" caption="The Action Catalog modal inside App Builder" style="width:100%;" >}}
 
 ## Take action directly from dashboards
 
 You can use your apps from the Apps page or [access them directly from within your dashboards][6]. Datadog Apps function as native dashboard integrations, allowing you to customize and take action on your data straight from your Dashboard.
 
-{{< img src="/service_management/app_builder/app-builder-embedded-dashboard.png" alt="An app embedded in a dashboard" style="width:100%;" >}}
+{{< img src="/service_management/app_builder/app-builder-embedded-dashboard-2.png" alt="A screenshot of an app embedded in a dashboard" caption="An ECS Task Balancer app embedded in a dashboard" style="width:100%;" >}}
 
 ### Apps created by Datadog
 
 Apps created by Datadog are apps that are embedded in Integration dashboards. They work without having to build them; all you need to do is choose a connection.
 
 For example, the [EC2 integration dashboard][7] offers an EC2 instance management app. When you load the dashboard, the app is populated with demo data:
 
-{{< img src="/service_management/app_builder/ootb-app-ec2-demo-data.png" alt="EC2 app created by Datadog, populated with demo data" style="width:100%;" >}}
+{{< img src="/service_management/app_builder/ootb-app-ec2-demo-data.png" alt="A screenshot of an EC2 app created by Datadog; the app is populated with demo data." caption="An EC2 app created by Datadog" style="width:100%;" >}}
 
 To use the app with your data, click **+ Connect Data**, then either create a new connection or select an existing one. After you save your selection, the app displays data from your connection.
 
@@ -74,7 +77,7 @@ You can change the selected connection by clicking **Change Connection** in the
 
 The App Builder Overview dashboard provides a high-level overview of your Datadog apps. To find the dashboard, go to your [Dashboard list][8] and search for `App Builder Overview`.
 
-{{< img src="service_management/app_builder/app-builder-overview-dashboard.png" alt="The App Builder Overview dashboard" style="width:100%;" >}}
+{{< img src="service_management/app_builder/app-builder-overview-dashboard-2.png" alt="A screenshot of the App Builder Overview dashboard" caption="The App Builder Overview dashboard"style="width:100%;" >}}
 
 ## Further reading
 
@@ -91,3 +94,8 @@ The App Builder Overview dashboard provides a high-level overview of your Datado
 [7]: https://app.datadoghq.com/dash/integration/60
 [8]: https://app.datadoghq.com/dashboard/lists
 [9]: https://app.datadoghq.com/app-builder/apps/list
+[10]: /actions/app_builder/build/?site=us#create-a-custom-app
+[11]: /actions/app_builder/build/#build-an-app-with-ai
+[12]: /actions/app_builder/build/#build-an-app-from-a-layout
+[13]: /actions/app_builder/build/#build-an-app-from-data
+[14]: /actions/app_builder/build/#build-with-app-playground

content/en/actions/app_builder/build.md

@@ -16,48 +16,96 @@ further_reading:
 
 You can create an app or edit existing apps from the [App Builder][1] page. The page lists information about existing apps, including the following:
 - Author
-- Status
-- Date that each app was last modified
+- Tags
+- Date that the app was last modified
 - Whether the app is published
 
 On the App Builder page, you can access and filter your apps. Hover over an app for options to edit, delete, view, or clone the app. You can also enable the **My apps** toggle to see only apps that you created:
 
 {{< img src="service_management/app_builder/app-builder-my-apps.png" alt="The App Builder page, filtered to show only 'My apps'" style="width:100%;" >}}
 
+## See what's possible with App Playground
+
+If you're new to App Builder, you can use the App Playground to learn about its core concepts, including: 
+- Data fetching
+- Displaying query data in a table
+- Configuring a button to fire a query
+- Configuring the loading states for a component to reflect a query's loading state
+- Visualizing data in a graph
+
+To access the App Playground:
+1. From [App Builder][1], click **New App**. 
+1. Click **App Playground**.
+
 ## Create an app
 
 ### Build an app from a blueprint
 
-Blueprints are helpful starter apps that cover common use cases. They come loaded with demo data that you can use to familiarize yourself with the app. Blueprints also showcase best practices for setting up app functionality and visual presentation.
+Blueprints are helpful templates that cover common use cases. They come loaded with demo data that you can use to familiarize yourself with the app. Blueprints also showcase best practices for setting up app functionality and visual presentation.
 
-1. From [App Builder][1], click the [Blueprints][2] tab.
-1. Find the blueprint that you want to use and click **Preview**.
+1. From [App Builder][1], click the [Blueprints][2] tab. Alternatively, click **New App**, then **Start with Blueprint**.
+1. Find the blueprint that you want to use and click **View**.
 1. Click **Use Blueprint** to open the app blueprint.
 1. To change the app name and description, click the app name.
 1. Each blueprint template comes loaded with demo data. To customize the app, edit the **Connection** for each query.
-1. To save the app, click **Save as New App**.
-1. To preview the app, click **Preview**. Click **Edit** from the preview screen to return to the configuration view.
-1. After you finish modifying the app, Click **Run** to test it.
-1. When you're ready to publish your app, click **Publish**. Publishing an app makes it available to your dashboards.
+1. To save the app, click **Save**.
+1. To preview the app, click **View**. Click **Edit** from the preview screen to return to the configuration view.
+1. After you finish modifying the app, click **Run** to test it.
+1. When you're ready to publish your app, click **Publish**. After publishing, you can click the settings {{< img src="icons/settings.png" inline="true" style="width:14px;">}} icon to add to a dashboard, notebook, or Self-Service Actions.
 
-### Create a custom app
+### Build an app from a layout
+
+Choosing a layout creates an app as a table, form, or custom chart. 
 
 1. From [App Builder][1], click **New App**.
+1. Click **Start with Layout**.
+1. Select a layout. The pane on the right displays a preview of the app.
+1. Click **Use Layout**.
+1. To change the app name and description, click the app name.
+1. Each layout template comes loaded with demo data. To customize the app, edit the **Connection** for each query.
+1. To save the app, click **Save**.
+1. To preview the app, click **View**. Click **Edit** from the preview screen to return to the configuration view.
+1. After you finish modifying the app, click **Run** to test it.
+1. When you're ready to publish your app, click **Publish**. After publishing, you can click the settings {{< img src="icons/settings.png" inline="true" style="width:14px;">}} icon to add to a dashboard, notebook, or Self-Service Actions.
+
+### Build an app from data
+
+You can get started with an app by importing data from one of the integrations listed in the [Action Catalog][17].
+
+1. From [App Builder][1], click **New App**. 
+1. Click **Start with Data**. 
+1. Choose an integration, then click **Continue**.
+1. Choose one or more actions. There is no limit to the number of actions you can choose. 
+1. Click **Create**.
+1. To change the app name and description, click the app name.
+1. To add a [UI component](#app-canvas-and-components) to the app canvas, click **Add Component** to open the **Components** tab. Click the component or drag it onto the canvas.
+1. Each layout template comes loaded with demo data. To customize the app, edit the **Connection** for each query.
+1. To save the app, click **Save**.
+1. To preview the app, click **View**. Click **Edit** from the preview screen to return to the configuration view.
+1. After you finish modifying the app, click **Run** to test it.
+1. When you're ready to publish your app, click **Publish**. After publishing, you can click the settings {{< img src="icons/settings.png" inline="true" style="width:14px;">}} icon to add to a dashboard, notebook, or Self-Service Actions.
+
+### Create a custom app
+
+If you don't want to use any of the methods above, you can create a new app from the blank App Builder canvas.
+
+1. From [App Builder][1], click **New App**. 
+1. Click **Start From Scratch**, or click the **X** to close the onboarding modal.
 1. To change the app name and description, click the app name.
-1. To add a [UI component](#app-canvas-and-components) to the app canvas, click the plus ({{< img src="service_management/app_builder/components-icon.png" inline="true" width="30px">}}) to open the **Components** tab, then click the component or drag it onto the canvas.
+1. To add a [UI component](#app-canvas-and-components) to the app canvas, click **Add Component** to open the **Components** tab. Click the component or drag it onto the canvas.
 1. Use [queries][12] to populate or interact with your canvas.
-1. To save the app, click **Save as New App**.
-1. To preview the app, click **Preview**. Click **Edit** from the preview screen to return to the configuration view.
-1. After you finish modifying the app, Click **Run** to test it.
-1. When you're ready to publish your app, click **Publish**. Publishing an app makes it available to your dashboards.
+1. To save the app, click **Save**.
+1. To preview the app, click **View**. Click **Edit** from the preview screen to return to the configuration view.
+1. After you finish modifying the app, click **Run** to test it.
+1. When you're ready to publish your app, click **Publish**. After publishing, you can click the settings {{< img src="icons/settings.png" inline="true" style="width:14px;">}} icon to add to a dashboard, notebook, or Self-Service Actions.
 
 ## Customize your app
 
 Apps are made up of UI components and queries which interact with each other to form the user experience and logic behind each app. The query list and editor appear on the left side of the page, while the app canvas and UI components make up the right side of the page.
 
 Basic customization:
 - To edit the **Name**, **Description**, or **Canvas Color** of your app, click the app name at the top left.
-- Click the **Preview** button to preview your app. Preview mode allows you to view the app from the user's perspective. Use preview mode to interact with the app UI and test your queries. When you're done, click **Edit** to return to the app builder.
+- Click the **View** button to see your app from the user's perspective. Use view mode to interact with the app UI and test your queries. When you're done, click **Edit** to return to the app builder.
 - To save your app, click **Save**.
 - When you're ready to publish your app, click **Publish**. Publishing an app makes it available to your dashboards.
 
@@ -165,3 +213,6 @@ To access the Debug Console, go to [your apps list][14] and click **Edit** {{< i
 [12]: /service_management/app_builder/queries
 [13]: /service_management/app_builder/expressions
 [14]: https://app.datadoghq.com/app-builder/apps/list
+[15]: /actions/app_builder/build/#customize-your-app
+[16]: /getting_started/integrations/
+[17]: /actions/actions_catalog/