Merge branch 'powercards-preview' of https://github.com/MicrosoftDocs/powerapps-docs-pr into powercards-preview

merges main

Author: anuitz

powerapps-docs/cards/make-a-card/connectors/connector-intro.md

@@ -19,10 +19,28 @@ Connectors are an important part of Power Apps, allowing your card to talk to ot
 
 For more information on Connectors in Power Platform, see [Connectors overview](/connectors/connectors).
 
+## Prerequisites
+
+- A [Power Apps](https://powerapps.microsoft.com/) account.
+- A card to add connectors to. For an example, see the [simple card tutorial](../../tutorials/hello-world-card.md).
+- Familiarity with the [Card Designer](../../make-a-card/designer-overview.md).
+
+## Access connectors in cards
+
+To access connectors in card:
+
+1. Go to [Power Apps](https://make.test.powerapps.com/) and select **Cards (preview)**.
+1. On the left, select **Cards** and select the card you want to test add a connector to.
+1. On the left, select **Data**. Then select **+ Add data**.
+
+    :::image type="content" source="../../media/connector-intro/add-data-___location.png" alt-text="Screenshot of + Add data menu":::
+
+    You'll then be able to add a data source and see all available connectors.
+
 ## Types of connectors
 
-Within Teams, only connections to Dataverse are available. You can connect to Dataverse tables for creating, reading, updating, and deleting records.
+Only connections to Dataverse are currently available. You can connect to Dataverse tables for creating, reading, updating, and deleting records.
 
 Learn how to [create a card with data from Dataverse](../../tutorials/dataverse-card.md).
 
-The other connectors are available within the Card Designer as they work in the Play Page. You can use the Play Page to share card instances and experiment with different data connections.
+The other connectors are available within the Card Designer, but functionality for them will be added in future updates.

powerapps-docs/cards/make-a-card/screens/use-screens.md

@@ -1,6 +1,6 @@
 ---
 title: Use screens (Preview)
-description: Learn how to build a card with multiple screens.
+description: Learn how to build with screens.
 ms.date: 09/20/2022
 ms.topic: article
 author: iaanw
@@ -15,18 +15,40 @@ ms.collection:
 
 [!INCLUDE[cards_preview_notice](../../includes/preview-include.md)]
 
-Cards can have multiple screens that a user can navigate between using the **Back** and **Navigate** formulas or with a **Show Screen** type button. These screens can be used to show different UI for specific scenarios. For example, a polling card might have a screen to collect user responses and a screen to show the current aggregated poll results.
+Cards can have multiple screens. Each screen can show a different user interface for specific scenarios. For example, a polling card might have a screen to collect user responses and a screen to show the current aggregated poll results. Use buttons to let users switch between screens or use Power Fx formulas for more complex scenarios.
 
 ## Tree view
 
 You can view the screens in your card and change properties of each screen using the tree view in the Card Designer.
 
    :::image type="content" source="../../media/make-a-card/cards-tree-view.png" alt-text="Screenshot of tree view in Card Designer." border="false":::
 
+## Make a new screen
 
+1. Open the **Tree View** for your card and select **+ New screen**.
+1. Enter a name for your new screen and select **Create** to make it.
+1. Add any controls, data, and variables you want to this screen. After you've added everything you wanted, you can use buttons to call your screen from a card.
 
-## make multiple screens
+## Use a button to show a screen
 
-## navigate between screens
+To show screens from other cards, use the **Show Screen** button.
 
-placeholder
+1. Select **Insert** from the left. Then select **Input** then **Button** to create a new button.
+1. Go to **Type** in the Properties pane on the right. Select the drop-down and change the **Type** to **Show Screen**.
+1. **ShowCard** will appear on the right. Set **Screen** to the screen you want to show and set **Title** to the text to display on your button.
+
+   :::image type="content" source="../../media/make-a-card/show-card-properties.png" alt-text="Screenshot of ShowCard options." border="false":::
+
+    In the example above, this button will show the `NameScreen` screen when a user selects the button titled "Say Goodbye".
+
+    Now, the screen will appear when you test your card and select the button. The example below shows how the screen appears after adding an example button to the [simple card tutorial](../../tutorials/hello-world-card.md) card.
+
+   :::image type="content" source="../../media/make-a-card/screen-example.png" alt-text="Screenshot of an example screen in a card." border="false":::
+
+Repeat this process as many times as needed to create more screens.
+
+## Switch screens with Power Fx formulas
+
+The Power Fx [Back](/power-platform/power-fx/reference/function-navigate#back) and [Navigate](/power-platform/power-fx/reference/function-navigate#navigate) functions let you switch between screens. While **ShowScreen** just shows a screen, these functions can be used outside of buttons and are appropriate for more complex screen-switching scenarios.
+
+For more information about Back and Navigate, see the Power Fx reference documentation [syntax](/power-platform/power-fx/reference/function-navigate#syntax), [examples](/power-platform/power-fx/reference/function-navigate#examples), and [step-by-step instructions](/power-platform/power-fx/reference/function-navigate#step-by-step).

powerapps-docs/cards/make-a-card/testing/debugging-cards.md

@@ -15,60 +15,83 @@ ms.collection:
 
 [!INCLUDE[cards_preview_notice](../../includes/preview-include.md)]
 
-Once you've created a card, you can view what your finished card will look like before sending it out to your teammates. This is done via the Play Page, which also has the tools to test your card and debug any issues.
+Use the **Play** page to see how finished cards will look and act before sending them out to users. It has the tools to test your card and debug any issues.
 
-Note: Card instances and their data, which is what you see on the Play Page, will only last 48 hours after being created. Press the play button from the Card Designer to get a new instance of that card. 
+> [!NOTE]
+> Card instances and their data, which you see on the **Play** page, will only last 48 hours after being created. Select the **Play** button from the Card Designer to get a new instance of that card.
 
-## Play page intro
+## Prerequisites
 
-The play page is made up of a few different components:
+- A [Power Apps](https://powerapps.microsoft.com/) account.
+- A card to test. For an example, see the [simple card tutorial](../../tutorials/hello-world-card.md).
+- Familiarity with the [Card Designer](../designer-overview.md).
 
-- Card title
-- View mode
-- Card viewer
-- Customize button
-- Debug pane
+## Access the **Play** page
 
-## Set up debugging
+To access the Play page:
 
-1. Create a card
+1. Go to [Power Apps](https://make.test.powerapps.com/) and select **Cards (preview)**.
+1. On the left select **Cards** to see all of your cards. Select the card you want to test and debug.
+1. Select the **Play** button at the top of the page. A new window will appear with the Play page.
 
-1. Go to **Variables** and select **New variable**.
+   :::image type="content" source="../../media/debugging-cards/play-button-in-designer.png" alt-text="Screenshot of the **Play** button in the Card Designer":::
 
-   1. In this example, create the following two variables:
+## **Play** page components
 
-      | Variable      | Type   |
-      | ------------- | ------ |
-      | `title`       | String |
-      | `valuesArray` | Array  |
+The **Play** page is made up of the following components:
 
-   1. When creating each variable, select the **Advanced settings** drop down in the variable making pane. Under **Input**, select **Required**.
+   :::image type="content" source="../../media/debugging-cards/play-page-elements.png" alt-text="Screenshot of the Play page elements":::
 
-1. Once you've created both variables, save your card.
+1. Card title - The title of the card
+1. View mode - Switch between light and dark modes to see how cards looks in different environments.
+1. Card viewer - Interact with and view the card.
+1. Send button - Send the card in Teams with a link.
+1. Debug pane - Displays important debugging information while testing. For more information, see the [debugging](#debug-your-card) section.
 
-1. Now that you have variables, add them to your card. In this example, add the following code to:
+## Test your card
 
-   1. Title block: `${title}`
+Now that you're on the Play page and understand the different elements of it, you can test your card. The example used in this section is from the [simple card tutorial](../../tutorials/hello-world-card.md).
 
-   1. Text block: `${valuesArray}`
+Try interacting with your card. In the example below, the **Say Hello** button is used to fill a variable with the user's text input. Notice how the bot's title changes to the user input.
 
-    :::image type="content" source="../../media/debugging-cards/add-vars-to-card.png" alt-text="Screenshot of variables added to the card for debugging":::
+Before interacting with the card:
 
-1. Save and play your card.
+:::image type="content" source="../../media/debugging-cards/card-before-interaction.png" alt-text="Screenshot of the card before interacting with it":::
 
-1. The first time you open the Play page, you’ll be prompted with the Customize Card pane. Enter the values for the required variables you created, then select **Done**.
+After interacting with the card:
 
-    :::image type="content" source="../../media/debugging-cards/customize-card-popup.png" alt-text="Screenshot of the customize card popup, allowing values to be added to required variables for debugging." border="false":::
+:::image type="content" source="../../media/debugging-cards/card-after-interaction.png" alt-text="Screenshot of the card after interacting with it":::
 
-   1. If you need to edit any of these values later, you can do so by selecting **Customize** on the Play Page.
+You can also change the **View** button on the **Play** page to switch between light and dark modes. The example below is the same card in dark mode:
 
-   > [!NOTE]
-   > The Customize Card pane will only appear on first viewing of the card after you’ve set up the variables. On subsequent views of the Play Page, you’ll only be prompted with this pane if you add a new required variable to the card.
+:::image type="content" source="../../media/debugging-cards/dark-mode-card.png" alt-text="Screenshot of the card in dark mode":::
 
-1. The values you provided will now show up on your card.
+If you encounter issues while testing your card, use the [Debug](#debug-your-card) panel to try and fix them.
 
-    :::image type="content" source="../../media/debugging-cards/added-vars-shown.png" alt-text="Screenshot of added required variable values in card play page":::
+## Debug your card
 
-## Debugging pane
+The **Debug** panel lets you ascertain issues with your card and gives suggestions when possible for fixes.
 
+To open the **Debug** panel, select the **Debug** button on the right. There are four elements to the debug panel: **Memory**, **JSON**, **Output**, and **Info**.
 
+### Memory
+
+The **Memory** section lets you see variables stored in memory and how your card is assigning and using them.
+
+The example below shows that the user input stored in `UserAnswer` has the same value as the assigned variable `UserName` used in the card.
+
+:::image type="content" source="../../media/debugging-cards/memory-example.png" alt-text="Screenshot of the Memory section in the Debug panel":::
+
+If you're encountering issues with memory, check your variable names and any related Power Fx formulas used in your card.
+
+### JSON
+
+The **JSON** section lets you see the JSON representation of your card. This can be helpful for developers working on cards who prefer a code-first approach.
+
+### Output
+
+The **Output** sections lets you see any output from your card. This is only available for cards where output is set up already.
+
+### Info
+
+The **Info** section lets you see information about the card's **Environment ID**, **Card ID**, and **User**.