Merge pull request #7013 from MicrosoftDocs/emgrol/buttons-variables

Author: emgrol

powerapps-docs/cards/make-a-card/ui-elements/use-buttons.md

@@ -1,5 +1,5 @@
 ---
-title: Use buttons (Preview)
+title: Add buttons
 description: Learn how to build a card with buttons.
 ms.date: 09/20/2022
 ms.topic: article
@@ -11,12 +11,66 @@ ms.custom:
 ms.collection: 
 ---
 
-# Use buttons
+# Add buttons
 
-Buttons let users perform actions in you card. Buttons can do one of four things:
+Buttons are a type of control that let users perform actions in cards. They're a visual interface that makes it easy for users to do things with cards without entering any input aside from a click.
+
+Buttons can do one of four things:
 
 1. Run Power Fx - when selected, the button will run a [Power Fx formula](../power-fx/intro-to-pfx.md)
-1. Show Screen - when selected, the button will navigate to the specified screen
+1. Show Screen - when selected, the button will go to the specified screen
 1. Open Url - when selected, the button will launch the given url in an external or embedded web browser
 1. Toggle Visibility - when selected, the button will show or hide other controls in the card
 
+## Prerequisites
+
+- A [Power Apps](https://powerapps.microsoft.com/) account.
+- A card. For an example, see the [simple card tutorial](../../tutorials/hello-world-card.md).
+- Familiarity with the [Card Designer](../designer-overview.md).
+
+## Add a button to a card
+
+1. Go to [Power Apps](https://powerapps.microsoft.com/). Select **Cards (Preview)** and then the card you want add a button to.
+1. Select **+ Insert** on the left. Then select **Button** to add a button to your card.
+
+    :::image type="content" source="../../media/use-buttons/add-button.png" alt-text="Screenshot of Button in Insert menu":::
+
+1. Now that the button is on your card, you can edit its properties. At a minimum, choose a button **Type** and add a button **Title** to display on the card, as shown below.
+
+    :::image type="content" source="../../media/use-buttons/button-title.png" alt-text="Screenshot of button title change":::
+
+### Button type
+
+There are four types of buttons you can add to your card:
+
+- Run PowerFx
+- Show Screen
+- Open Url
+- Toggle Visibility
+
+#### Run PowerFX
+
+The **Run PowerFX** button type lets you use buttons to run Power Fx formulas. These formulas can be simple or complex, and when combined with buttons make it easy for users to navigate card logic.
+
+Set the **Type** to **Run PowerFX**. Then select the **Power Fx** link to add a formula to the Formula bar.
+
+When you test the button, the actions expressed by the Power Fx formula should happen.
+
+#### Show Screen
+
+The **Show Screen** button lets users select a button and then display a screen. For more information about screens, see the [screens](../screens/use-screens.md) article.
+
+Set the **Type** to **Show Screen** and then select a **Screen** to switch to. If you don't have any screens, only **main** will appear in the list. When the user selects the button, the new screen will appear under the card.
+
+#### Open Url
+
+The **Open Url** button lets users select a button that opens a URL.
+
+Set the **Type** to **Open Url** and then enter a **Url**. When the user selects the button, the URL entered previously will open.
+
+#### Toggle Visibility
+
+The **Toggle Visibility** button shows or hides other controls in the card.
+
+Set the **Type** to **Toggle Visibility**. Then select the **Target Elements** pane and select **+ Add new**. Enter the **ElementID** and toggle the **Visibility** property to make the element visible or invisible. Add as many elements as you want to toggle the visibility of.
+

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

@@ -1,7 +1,6 @@
 ---
-title: "Using variables"
-description: "Learn about storing data in variables"
-keywords: "Card Designer, Power Apps, cards, variables"
+title: Use variable
+description: Learn about storing data in variables
 ms.date: 09/20/2022
 ms.topic: article
 author: iaanw
@@ -17,3 +16,45 @@ ms.collection:
 Variables are used to store data within the context of a card. That data can be of different types like table, text, or a number. The value can also be temporary, where it resets for every card session, or permanent, where it is shared across all sessions for a specific card instance. Variables have unique names, which is how they are referenced in [formulas](../../make-a-card/power-fx/intro-to-pfx.md).
 
 For example, if you wanted a card that counted how many times a user pressed a button during a session, you would create a temporary number variable. If you wanted to capture the name of the last user to press a button for a card instance, you would use a permanent text variable. If you wanted to save data between card instances, you would use a [data connection](../connectors/connector-intro.md).
+
+## Prerequisites
+
+- A [Power Apps](https://powerapps.microsoft.com/) account.
+- A card. For an example, see the [simple card tutorial](../../tutorials/hello-world-card.md).
+- Familiarity with the [Card Designer](../designer-overview.md).
+
+## Add a variable
+
+To add variables in cards, do the following.
+
+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 **Variables**. Then select **+ New variable**.
+
+    :::image type="content" source="../../media/variables/new-variable.png" alt-text="Screenshot of the + Add variable button":::
+
+1. The **New variable** window will appear. Set the following values:
+    - **Name**: the name of your variable.
+    - **Type**: the type of variable.
+    - **Default value**: the default value of the variable, prior to input.
+    - **Value Persistance**: whether the variable is temporary (resets every time the card's opened) or permanent.
+
+    You can also customize sender options, as well as the **Title** and **Description** of the variable. These may be helpful for testing and debugging.
+1. After you've entered everything select **Save**. The new variable will appear in the **Variables** list and can be used anywhere in your card.
+
+### Edit and delete variables
+
+If you want to to edit or delete a variable, select the three dots next to the variable and choose the option that works for you.
+
+:::image type="content" source="../../media/variables/edit-delete-variable.png" alt-text="Screenshot of the Edit and Delete variable button":::
+
+>[!NOTE]
+> After creation, the variable **Name** and **Type** cannot be edited. If you need to change these values, create a new variable.
+
+## Use variables in cards
+
+There are a variety of ways to use variables in cards. The most common option is memory storage, especially for user input.
+
+To use variables in Power Fx expressions simply add the variable name to your formula. For an example, see the [simple card tutorial](../../tutorials/hello-world-card.md). Your variables should be recognized in the formula bar as well, shown below:
+
+:::image type="content" source="../../media/variables/formula-bar-example.png" alt-text="Screenshot of auto-filling variable name in formula bar button":::