You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: powerapps-docs/cards/tutorials/hello-world-card.md
+15-15Lines changed: 15 additions & 15 deletions
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: Create a simple card
3
3
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
5
5
ms.topic: how-to
6
6
author: iaanw
7
7
ms.author: iawilt
@@ -12,17 +12,17 @@ ms.collection:
12
12
13
13
# Create a simple card (preview)
14
14
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).
16
16
17
17
## Prerequisites
18
18
19
-
-A [Power Apps](https://powerapps.microsoft.com/) account
19
+
A [Power Apps](https://powerapps.microsoft.com/) account
20
20
21
21
## Create a card
22
22
23
23
1. Sign in to [Power Apps](https://make.powerapps.com) and select your environment.
24
24
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**.
26
26
27
27
1. Select **+ Create a card**.
28
28
@@ -34,53 +34,53 @@ In this tutorial, you'll create a card that asks the user to enter their name, a
34
34
35
35
:::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.":::
36
36
37
-
1.In the left pane, select **Insert**.
37
+
1.From the navigation menu, select **+ Insert**.
38
38
1. In the tool pane, select **Input** to expand the category, and then select **Text input**.
39
39
40
40
:::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.":::
41
41
42
42
1. In the text input properties pane, set **Label** to *What's your name?*.
43
43
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":::
45
45
46
46
## Assign variables
47
47
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*.
49
49
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.
51
51
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.":::
53
53
54
54
> [!TIP]
55
55
> Give your variables descriptive and unique names to make them easier to use in Power Fx expressions.
56
56
57
57
We need another variable to add the user's input to the card title, so let's create one now.
58
58
59
-
1.In the left pane, select **Variables**.
59
+
1.From the navigation menu, select **Variables**.
60
60
1. Select **+ New variable**.
61
61
1. In the **New variable** window, enter *UserName* under **Name** and enter *No Name* under **Default value**. Leave the other values as they are.
62
62
1. Select **Save**.
63
63
64
64
:::image type="content" source="../media/hello-world-card/new-variable-setup.png" alt-text="Screenshot of the variable properties pane.":::
65
65
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*.
67
67
68
68
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.
69
69
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":::
71
71
72
72
## Add a Power Fx button
73
73
74
-
1.In the left pane, select **Insert**.
74
+
1.From the navigation menu, select **+ Insert**.
75
75
1. In the tool pane, select **Input** to expand the category, and then select **Button**.
76
76
1. In the button properties pane, set **Title** to *Say Hello*.
77
77
78
78
:::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.":::
79
79
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.
81
81
1. Type the following Power Fx expression in the formula bar: *Set(UserName, UserAnswer)*
82
82
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.
84
84
85
85
:::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.":::
0 commit comments