Edit

Create a simple card (preview)

  • Article

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, variables, and Power Fx.

Prerequisites

A Power Apps account

Create a card

  1. Sign in to Power Apps and select your environment.

  2. From the navigation menu, select ...More > Cards.

  3. Select + Create a card.

  4. Under Card name, type HelloWorldCard, and then select Create.

Ask for text input

  1. Select the text Add and remove element to customize your new card., and then select the Remove icon (X) to delete it.

    Screenshot of the placeholder text label to remove in a new card in the card designer.

  2. From the navigation menu, select + Insert.

  3. In the tool pane, select Input to expand the category, and then select Text input.

    Screenshot of the card designer tool pane with input controls shown and the Text input control highlighted.

  4. In the text input properties pane, set Label to What's your name?.

    Screenshot of a card with a labeled text input control in the card designer.

Assign variables

  1. From the navigation menu, select Tree View and change the textInput1 name to UserAnswer.

    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.

    Screenshot of the text input control from the Tree View navigation menu with a changed name.

    Tip

    Give your variables descriptive and unique names to make them easier to use in Power Fx expressions.

    We need another variable to add the user's input to the card title, so let's create one now.

  2. From the navigation menu, select Variables.

  3. Select + New variable.

  4. In the New variable window, enter UserName under Name and enter No Name under Default value. Leave the other values as they are.

  5. Select Save.

    Screenshot of the variable properties pane.

  6. In your canvas, select the card title, which is a text label control. In the control's properties pane, set Text to ="Hello " & UserName.

    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.

    Screenshot of a text expression entered in the card title's Text property.

Add a Power Fx button

  1. From the navigation menu, select + Insert.

  2. In the tool pane, select Input to expand the category, and then select Button.

  3. In the button properties pane, set Title to Say Hello.

    Screenshot of the named button properties pane and the button in the card.

  4. In the properties pane next to On select, select PowerFx to place your cursor in the formula bar.

  5. Type the following Power Fx expression in the formula bar: Set(UserName, UserAnswer)

    This 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.

    Screenshot of the Power Fx expression in the formula bar, assigned to the button's OnSelect property.

Test the card

You should always save your changes before you play a card. Select Save, and then select Play.

Test your card a few times with different inputs. Make sure your input replaces the default value "No Name" in the card title each time.

Next steps

Learn how to make a slightly more complex card in the simple shopping list tutorial.