Merge pull request #6869 from MicrosoftDocs/powercards-preview

Powercards preview [WIP]

Author: iaanw

powerapps-docs/cards/glossary.md

@@ -0,0 +1,37 @@
+---
+title: Cards glossary (Preview)
+description: Glossary resource for terminology related to cards.
+ms.date: 09/20/2022
+ms.topic: article
+author: iaanw
+ms.author: iawilt
+manager: shellyha
+ms.reviewer: 
+ms.custom: 
+ms.collection: 
+---
+
+# Cards glossary
+
+The table below is a glossary of terminology related to cards.
+
+| Term | Description |
+| - | - |
+| card | A lightweight, data-driven, interactive UI element that can be sent in Teams. |
+| card definition | JSON representation of a card that is stored in Dataverse, including all the controls, their properties, the screens, formulas, data connections, and more. |
+| Card Designer | Where you author cards. See [Designer overview](/make-a-card/designer-overview.md). |
+| card instance | When a card definition is played, that card definition is turned into a card instance. They can be send to other users and shared across users and clients, like Teams or the Play page. |
+| card session | When a user views a card instance within a specific client like Teams or the Play page. Each time the user reloads the card a session starts. A session is for a single user, in a single client, for a single card instance. |
+| control | A UI element for a card, like a text label, container, date input, or button. See [controls](/make-a-card/ui-elements/use-controls.md). |
+| data connection | A way to bring in data and run actions through services in a secure way. See [connectors](/make-a-card/connectors/connector-intro.md). |
+| Data pane | A pane on the left side of the Card Designer where you can add and manage the data connections for a card. |
+| Debug pane | A pane on the right side of the Play page that lets the user see information about the card, like what the variables are set to, what connections are available, and what the current card JSON looks like. |
+| formula | An expression used to define business logic within a card, like calculating values, updating variables, or changing data sources from connections. See [formulas](/make-a-card/power-fx/intro-to-pfx.md). |
+| Formula bar | A bar along the top of the Card Designer used to change properties or write formulas. |
+| Insert pane | A pane on the left side of the Card Designer where you can see the controls available to add into a card. |
+| JSON view | A pane on the right side of the Card Designer where you can see the card definition in its JSON representation. |
+| Play page | A place to play cards; it can be used to either validate cards during the authoring process or to share cards on the web. |
+| screen | A set of controls put together for a user to interact with. A card can have multiple screens. See [screens](/make-a-card/screens/understand-screens.md). |
+| Tree view | A pane on the left side of the Card Designer where you can see the hierarchical structure of the card, including screens and controls. |
+| variable | A way to store data within the context of card. See [variables](/make-a-card/variables/variables.md). |
+| Variable pane | A pane on the left side of the Card Designer where you can add and manage the variables for a card. |

powerapps-docs/cards/includes/preview-include.md

@@ -0,0 +1 @@
+[This article is pre-release documentation and is subject to change.]

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

@@ -0,0 +1,46 @@
+---
+title: Connectors overview (Preview)
+description: Learn about connectors and how you can use them to expand the capabilities of your cards.
+ms.date: 09/20/2022
+ms.topic: article
+author: iaanw
+ms.author: iawilt
+manager: shellyha
+ms.reviewer: 
+ms.custom: 
+ms.collection: 
+---
+
+# Connectors (Preview)
+
+[!INCLUDE[cards_preview_notice](../../includes/preview-include.md)]
+
+Connectors are an important part of Power Apps, allowing your card to talk to other apps, data, and devices in the cloud.
+
+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" border="true":::
+
+    You'll then be able to add a data source and see all available connectors.
+
+## Types of connectors
+
+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, but functionality for them will be added in future updates.

powerapps-docs/cards/make-a-card/designer-overview.md

@@ -0,0 +1,112 @@
+---
+title: Card Designer overview (Preview)
+description: Learn about the designer and how to create cards using it.
+ms.date: 09/20/2022
+ms.topic: article
+author: iaanw
+ms.author: iawilt
+manager: shellyha
+ms.reviewer: 
+ms.custom: 
+ms.collection: 
+---
+
+# Card Designer overview (Preview)
+
+[!INCLUDE[cards_preview_notice](../includes/preview-include.md)]
+
+The Card Designer is where makers and developers can build cards to suit their needs. The designer lets you optimize and automate business user tasks and create actionable scenarios in interactive and easy-to-make cards. The designer builds off of the designer for Adaptive Cards, introducing a few new concepts:
+
+- Power Fx: specify an action to trigger when an element is selected
+- Connectors: bring data into cards (currently only from Dataverse)
+- Variables: store, bind, and reuse data across a card
+- Dataverse: stores each card you create and allows you to retrieve the card at send time
+
+## Find the designer
+
+To get to the designer, take the following steps:
+
+1. Go to [Power Apps](https://make.powerapps.com) and make sure you're in the correct environment.
+
+1. Go to the pane on the left to access all of the card-related views.
+
+   1. To create a new card, select **Cards** then **Create**.
+   1. To see all current cards, select **Cards** then **Cards**
+
+      :::image type="content" source="../media/designer-overview/create-new-card.png" alt-text="Screenshot showing card creation screen." border="true":::
+
+1. Select the **+ Create a card** to start building your own card.
+
+## What's in the designer?
+
+The designer is made up of the following elements:
+
+:::image type="content" source="../media/designer-overview/designer-elements.png" alt-text="Screenshot of Card Designer with elements highlighted." border="true":::
+
+1. Main menu
+1. Tool pane
+1. Card canvas
+1. Property pane
+1. Formula bar
+1. Play button
+
+The sections below describe each of the designer elements.
+
+### Main menu
+
+The main menu lets you switch between the different tools available in the designer. In order, these are:
+
+- Tree View: see the card as a hierarchical outline and view the relationships of the card elements.
+- Insert: main UI for editing and adding card elements.
+- Data: add connectors to your card to use data from external sources.
+- Variables: store, bind, and reuse data across a card.
+
+### Tool pane
+
+When you start making your card, you'll use controls from the Tool pane. There are three categories of controls in the pane:
+
+- Display: Add text and media to cards.
+- Input: Add different types of input boxes to collect information from users.
+- Layout: Add formatting and customize your card's structure.
+
+### Card canvas
+
+The card canvas is where where you build the user interface for your card, using connectors, variables, and elements from the Tool pane.
+
+You can't resize a card in the card canvas view because cards automatically fit themselves to the ___location they're placed into.
+
+### Property pane
+
+The property pane is used to change up specific properties for an element. Each type of element has its own property pane, including the card itself. For most of the drag-and-drop elements, you'll be able to specify things like:
+
+- **Name**: the variable name associated with that element, which you can reference in a Power Fx formula
+- **Label**/**Text**: any text the user will see when they load in the card
+- **Default value**: the initial value of a field
+- **Initially visible**: choose if the element will be visible on load
+
+Certain elements have visual aspects that you can modify. For text labels and input controls, for example, you can customize font, color, spacing, and more.
+
+Each property pane also contains advanced features, which allow you to specify things like:
+
+- **Repeat for every**: provide a trigger for if/when an element should be repeated
+- **Show when**: provide a trigger to show the element
+- **Requires**: make the element dependent on certain features, corresponding with a minimum version
+
+You can also input Power Fx expressions into the properties, utilizing low-code solutions to make your card more powerful.
+
+### Power Fx editor
+
+The formula bar is at the top of the card designer and allows you to write Power Fx expressions. When you select an element on the card, the formula bar lets you select a property of that element from the dropdown that supports a code input and then assists you in writing an expression.
+
+To get started with Power Fx, see [Introduction to Power FX](../make-a-card/power-fx/intro-to-pfx.md). For more information on the specific functions you can use, see the Microsoft documentation for [Formula reference for Power Apps](/powerapps/maker/canvas-apps/formula-reference).
+
+> [!NOTE]
+> Some expressions supported in Power Apps aren't available for cards during preview.
+
+### Play button
+
+Once you've set up your card to your liking, you can preview the card with the **Play** button. This will open your card on the **Play** page in a new tab and allow you to test the card's functionalities. This is also where, if needed, you'll be able to debug and troubleshoot your card. For more information on debugging, see [Debugging cards](../make-a-card/testing/debugging-cards.md).
+
+## Next steps
+
+Now that you've got an overview of designer, [make your first card](../tutorials/hello-world-card.md).

powerapps-docs/cards/make-a-card/power-fx/intro-to-pfx.md

@@ -0,0 +1,40 @@
+---
+title: Introduction to Power Fx (Preview)
+description: Learn about Power FX and how it's used in cards to add business logic.
+ms.date: 09/20/2022
+ms.topic: article
+author: iaanw
+ms.author: iawilt
+manager: shellyha
+ms.reviewer: 
+ms.custom: 
+ms.collection: 
+---
+
+# Introduction to Power Fx (Preview)
+
+[!INCLUDE[cards_preview_notice](../../includes/preview-include.md)]
+
+[Power Fx](/power-platform/power-fx/overview) is a low-code programming language available across the Power Platform, including cards. Cards can calculate values, perform other tasks, and respond to user input using [formulas](/power-platform/power-fx/formula-reference) expressed with Power Fx.
+
+For example, a formula might determine what happens when a user selects a button or enters text into a text input. Formulas can also be used to update variables and data sources. Expressions can be combined to create complex formulas that can handle advanced business logic.
+
+## Power Fx documentation
+
+The [Power Fx documentation](/power-platform/power-fx/overview) is the main source for information about Power Fx. Makers and developers working with cards will find the following articles helpful:
+
+- [Expression grammar](/power-platform/power-fx/expression-grammar)
+- [Operators](/power-platform/power-fx/operators)
+- [Variables](/power-platform/power-fx/variables)
+- [Formula reference](/power-platform/power-fx/formula-reference)
+
+## Known Power Fx limitations with cards
+
+There are some known limitations with cards and Power Fx. These include:
+
+- All device sensor formulas don't work (**Acceleration**, **App**, **Compass**, **Connection**, and **Location**).
+- **SaveData**, **LoadData**, and **ClearData** don't work.
+- Form-related formulas don't work (**EditForm**, **NewForm**, **SubmitForm**, **ResetForm**, and **ViewForm**).
+- **Collect**, **Patch**, and **Remove** only work for variables and Dataverse tables.
+- **Update** and **UpdateIf** don't work.
+- **Set** requires the type of the variable to match what you are trying to set it to and requires the variable to be already created using the variable creation.

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

@@ -0,0 +1,54 @@
+---
+title: Use screens (Preview)
+description: Learn how to build with screens.
+ms.date: 09/20/2022
+ms.topic: article
+author: iaanw
+ms.author: iawilt
+manager: shellyha
+ms.reviewer: 
+ms.custom: 
+ms.collection: 
+---
+
+# Use screens (Preview)
+
+[!INCLUDE[cards_preview_notice](../../includes/preview-include.md)]
+
+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="true":::
+
+## 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.
+
+## Use a button to show a screen
+
+To show screens from other cards, use the **Show Screen** button.
+
+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="true":::
+
+    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="true":::
+
+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).