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
These are the basic building blocks of a card, and the ones you're most likely to use.
18
+
Controls are the building blocks for designing your card's interface and functionality. They let you add text, visual elements, and other elements that create a rich cards experience.
19
19
20
-
|**Item**|**Description**|
20
+
## Prerequisites
21
+
22
+
- A [Power Apps](https://powerapps.microsoft.com/) account.
23
+
- A card. For an example, see the [simple card tutorial](../../tutorials/hello-world-card.md).
24
+
- Familiarity with the [Card Designer](../designer-overview.md).
25
+
26
+
## Types of controls
27
+
28
+
To access card controls, go to [Power Apps](https://powerapps.microsoft.com/), select **Cards** and a card to edit, and then select **Insert**.
29
+
30
+
:::image type="content" source="../../media/make-a-card/insert-menu.png" alt-text="Screenshot of the Insert menu Card Designer." border="false":::
31
+
32
+
There you'll see the following control categories:
33
+
34
+
-**Display**: controls that display elements, including text, images, and other media
35
+
-**Input**: controls that let you ask for different types of user input. These includes options where users can provide custom input (like text and numbers), specific types of input (like dates and time), as well as pre-determined options (like buttons and drop downs).
36
+
-**Layout**: controls that let you update the layout and physical appearance of elements on cards.
37
+
38
+
To add a control to your card, select the control from the list, and Power Apps will add the control to the card. To modify the control, use the **Properties** pane on the right.
39
+
40
+
For information about all of the control types, see the [controls reference](#controls-reference) section.
41
+
42
+
## Controls reference
43
+
44
+
These tables describe the available card controls.
| TextBlock | Standard text block; supports strings and PowerFX formulas. |
23
-
| Button | Specify an action to occur when the button is pressed with PowerFX formula. |
50
+
| Text label | Standard text block; supports strings and Power Fx formulas. |
24
51
| Image | Supports addition of images to card via URL. |
25
52
| Media | Supports addition of other forms of media to card via URL. |
26
-
| Button Group | If you have multiple buttons in one ___location on the card, use a Button Group to manage the buttons under one parent element (visible on the Structure page). Provides an easy UI method to add more buttons. |
27
53
28
-
#### Inputs
54
+
###Input
29
55
30
56
Use an input element when you want the end user of the card to specify information.
| Input.Text | Allow the user to input a text response; parses as a string. |
35
-
| Input.Number | Allow the user to input a numerical response by typing a number or selecting from the up/down arrows; parses as a string. |
36
-
| Input.Date | Allow the user to input a date (mm/dd/yyyy) or choose a date from the dropdown calendar. |
37
-
| Input.Time | Enter a time (HH:MM AM/PM) or select a time from the dropdown clock. |
38
-
| Input.ChoiceSet | User selects a choice from the dropdown; default is two choices, but more can be added. |
39
-
| Input.Toggle | Checkbox for the user to select if applicable; default is unchecked. |
60
+
| Text input | Allow the user to input text. The value is stored as a string. |
61
+
| Number input | Allow the user to input a number. The value is stored as a string. |
62
+
| Button | Allow the user to select a button. Use a Power Fx formula to control what happens when the button is selected. |
63
+
| Date picker | Allow the user to input a date (in mm/dd/yyyy format) or choose a date from the dropdown calendar. The value is stored as a Date. |
64
+
| Time picker | Enter a time (in HH:MM AM/PM format) or select a time from the dropdown clock. The variable is stored as a Time. |
65
+
| Drop down | User selects a choice from the dropdown; default is two choices, but more can be added. |
66
+
| Checkbox | Checkbox for the user to select, if applicable; default is unchecked. |
40
67
41
-
#### Containers
68
+
###Layout
42
69
43
-
Just like with the Button Group in the Elements section, use a container when you want to group elements together, either for ease of reference or design purposes.
70
+
Just like with the **Button** group, use layout controls when you want to group elements together, either for ease of reference or design purposes.
| Container | A standard container, useable with any element; takes on the properties of the first element placed inside. Doesn't support multiple element types at once. |
48
-
| ImageSet | Container for images; provides an easy UI method to add more images. |
49
-
| FactSet | Creates a table of property/value pairs. |
50
-
| ColumnSet | Container for columns; provides an easy UI method to add more columns. Required when using columns. |
51
-
| Column | Add to a ColumnSet to create dividers on the page. Empty columns aren't inherently visible in the final card, so you'll need to put another element (e.g., TextBlock, Input, etc.) into a column to make it visible. |
75
+
| Button set | Container for a set of buttons. |
76
+
| Image set | Container for images; provides an easy UI method to add more images. |
77
+
| Fact set | Creates a table of property-value pairs. |
78
+
| Column set | Container for columns; provides an easy UI method to add more columns. Required when using columns. |
79
+
| Column | Add to a column set to create dividers on the page. Empty columns aren't inherently visible in the final card, so you'll need to put another element (like a text input control) into a column to make it visible. |
80
+
81
+
## Data binding
82
+
83
+
Data binding is used to repeat controls for a table variable using the **Repeat for every** advanced property.
84
+
85
+
For example, if you have a table named `fruits` bound to the array `["apples", "oranges", "pears"]`, you can add a text label control and set its **Repeat for every** property to `fruits` and the **Text** property to `ThisItem`. When played, the card will show three text labels with each of the strings in the table.
86
+
87
+
:::image type="content" source="../../media/make-a-card/cards-data-binding.png" alt-text="Screenshot of tree view in Card Designer." border="false":::
0 commit comments