Skip to content

Commit c2e7a1f

Browse files
committed
Updated screenshots
Added a link for the Set function. Fixed wording to match new UI.
1 parent 4cb50f2 commit c2e7a1f

File tree

7 files changed

+15
-15
lines changed

7 files changed

+15
-15
lines changed
Loading
Loading
Binary file not shown.
Loading
Loading
Loading

powerapps-docs/cards/tutorials/hello-world-card.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Create a simple card
33
description: Learn about basic elements of a card by creating a simple "Hello World" card
4-
ms.date: 09/20/2022
4+
ms.date: 2/29/2024
55
ms.topic: how-to
66
author: iaanw
77
ms.author: iawilt
@@ -12,17 +12,17 @@ ms.collection:
1212

1313
# Create a simple card (preview)
1414

15-
In this tutorial, you'll create a card that asks the user to enter their name, and then shows the name in the title of the card. You'll use the [card designer](../make-a-card/designer-overview.md), [variables](../make-a-card/variables/variables.md), and [Power Fx](../make-a-card/power-fx/intro-to-pfx.md).
15+
In this article, you create a card that asks the user to enter their name, and then shows the name in the title of the card. You use the [card designer](../make-a-card/designer-overview.md), [variables](../make-a-card/variables/variables.md), and [Power Fx](../make-a-card/power-fx/intro-to-pfx.md).
1616

1717
## Prerequisites
1818

19-
- A [Power Apps](https://powerapps.microsoft.com/) account
19+
A [Power Apps](https://powerapps.microsoft.com/) account
2020

2121
## Create a card
2222

2323
1. Sign in to [Power Apps](https://make.powerapps.com) and select your environment.
2424

25-
1. In the left pane, select **Cards**. [!INCLUDE [left-navigation-pane](../../includes/left-navigation-pane.md)]
25+
1. From the navigation menu, select **...More** > **Cards**.
2626

2727
1. Select **+ Create a card**.
2828

@@ -34,53 +34,53 @@ In this tutorial, you'll create a card that asks the user to enter their name, a
3434

3535
:::image type="content" source="../media/hello-world-card/remove-placeholder-text-label.png" alt-text="Screenshot of the placeholder text label to remove in a new card in the card designer.":::
3636

37-
1. In the left pane, select **Insert**.
37+
1. From the navigation menu, select **+ Insert**.
3838
1. In the tool pane, select **Input** to expand the category, and then select **Text input**.
3939

4040
:::image type="content" source="../media/hello-world-card/text-input-___location.png" alt-text="Screenshot of the card designer tool pane with input controls shown and the Text input control highlighted.":::
4141

4242
1. In the text input properties pane, set **Label** to *What's your name?*.
4343

44-
:::image type="content" source="../media/hello-world-card/edit-input-text-label.png" alt-text="Screenshot of a card with a labeled text input control in the card designer.":::
44+
:::image type="content" source="../media/hello-world-card/edit-input-text-label.png" alt-text="Screenshot of a card with a labeled text input control in the card designer." lightbox="../media/hello-world-card/edit-input-text-label.png":::
4545

4646
## Assign variables
4747

48-
1. In the text input properties pane, set **Name** to *UserAnswer*.
48+
1. From the navigation menu, select **Tree View** and change the **textInput1** name to *UserAnswer*.
4949

50-
We're giving the text input control the name of a variable that we're going to associate with the user's input.
50+
We give the text input control the name of a variable that is associated with the user's input. Any input control name can be used as a variable, for example a text input, button, or text label.
5151

52-
:::image type="content" source="../media/hello-world-card/edit-input-text-variable-name.png" alt-text="Screenshot of the text input control properties with the Name entered.":::
52+
:::image type="content" source="../media/hello-world-card/edit-input-text-title-name.png" alt-text="Screenshot of the text input control from the Tree View navigation menu with a changed name.":::
5353

5454
> [!TIP]
5555
> Give your variables descriptive and unique names to make them easier to use in Power Fx expressions.
5656
5757
We need another variable to add the user's input to the card title, so let's create one now.
5858

59-
1. In the left pane, select **Variables**.
59+
1. From the navigation menu, select **Variables**.
6060
1. Select **+ New variable**.
6161
1. In the **New variable** window, enter *UserName* under **Name** and enter *No Name* under **Default value**. Leave the other values as they are.
6262
1. Select **Save**.
6363

6464
:::image type="content" source="../media/hello-world-card/new-variable-setup.png" alt-text="Screenshot of the variable properties pane.":::
6565

66-
1. Select the card title, which is a text label control. In the control's properties pane, set **Text** to *="Hello " & UserName*.
66+
1. In your canvas, select the card title, which is a text label control. In the control's properties pane, set **Text** to *="Hello " & UserName*.
6767

6868
This expression changes the card title to the string "Hello " followed by the value of the variable you created. You can enter the expression in the formula bar or the properties pane.
6969

70-
:::image type="content" source="../media/hello-world-card/card-title-with-variable.png" alt-text="Screenshot of a text expression entered in the card title's Text property.":::
70+
:::image type="content" source="../media/hello-world-card/card-title-with-variable.png" alt-text="Screenshot of a text expression entered in the card title's Text property." lightbox="../media/hello-world-card/card-title-with-variable.png":::
7171

7272
## Add a Power Fx button
7373

74-
1. In the left pane, select **Insert**.
74+
1. From the navigation menu, select **+ Insert**.
7575
1. In the tool pane, select **Input** to expand the category, and then select **Button**.
7676
1. In the button properties pane, set **Title** to *Say Hello*.
7777

7878
:::image type="content" source="../media/hello-world-card/rename-button-title.png" alt-text="Screenshot of the named button properties pane and the button in the card.":::
7979

80-
1. In the properties pane, select **PowerFx** to place your cursor in the formula bar.
80+
1. In the properties pane next to **On select**, select **PowerFx** to place your cursor in the formula bar.
8181
1. Type the following Power Fx expression in the formula bar: *Set(UserName, UserAnswer)*
8282

83-
This expression assigns the value of the user's input, `UserAnswer`, to the `UserName` variable you referred to in the card title, when the button is selected. Another way to read the expression is, "Set the value of the variable UserName equal to the value of UserAnswer." Since the expression is bound to the button's **OnSelect** property, it runs when the user selects the button.
83+
This [Set()](/power-platform/power-fx/reference/function-set) function expression assigns the value of the user's input, `UserAnswer`, to the `UserName` variable of the text label (the card title), when the button is selected. Another way to read the expression is _Set the value of the variable UserName equal to the value of UserAnswer_. Since the expression is bound to the button's **On select** property, also called **Verb** next to the formula bar, it runs when the user selects the button.
8484

8585
:::image type="content" source="../media/hello-world-card/pfx-in-button.png" alt-text="Screenshot of the Power Fx expression in the formula bar, assigned to the button's OnSelect property.":::
8686

0 commit comments

Comments
 (0)