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/dataverse-card.md
+33-89Lines changed: 33 additions & 89 deletions
Original file line number
Diff line number
Diff line change
@@ -17,125 +17,69 @@ ms.collection:
17
17
In this tutorial, you'll learn how to build a card that utilizes the Dataverse connector to show and update information about an Account.
18
18
19
19
- Connectors, specifically Dataverse
20
-
- How to use more of the controls
21
20
- More advanced Power Fx expressions
22
21
23
-
The result will look like the example below:
22
+
## Prerequisites
24
23
25
-
:::image type="content" source="../media/tutorial-use-connectors/use-connectors-card.png" alt-text="Screenshot of a finished card using the Bing search connector." border="false":::
24
+
- A [Power Apps](https://powerapps.microsoft.com/) account.
25
+
- Familiarity with 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).
26
26
27
-
## Basic data binding
27
+
## Tutorial
28
28
29
-
1. Create your card. You'll be asked to name your card—use something you'll remember later when you go looking for it, like "Bing Search".
29
+
###Create a card
30
30
31
-
:::image type="content" source="../media/tutorial-use-connectors/rename-card-title.png" alt-text="Screenshot of the card renamed to Bing search." border="false":::
31
+
1. Go to [Power Apps](https://make.powerapps.com) and select **Cards (preview)** on the left.
32
32
33
-
1.Remove the default text box.
33
+
1.Select **+ Create a card**.
34
34
35
-
1.From the Elements side menu, drag and drop an**Input.Text** box under the card title.
35
+
1.Enter "DataverseCard" under **Card name**and then select**Create**.
36
36
37
-
:::image type="content" source="../media/tutorial-use-connectors/add-new-input-text-box.png" alt-text="Screenshot of a new input text box added under the title box." border="false":::
37
+
### Add the Dataverse connector to the Accounts table
38
38
39
-
1.Add a descriptive label to the input text box, such as `Search for:`
39
+
1.Go to the Data pane on the left-hand menu and select **Add data**
40
40
41
-
:::image type="content" source="../media/tutorial-use-connectors/add-search-for-label.png" alt-text="Screenshot of how to add the search for label to the input text box." border="false":::
41
+
1. Select the **Microsoft Dataverse** connector, wait for it to configure the connection, press **OK** then select the **Accounts** table and press **Select**
42
42
43
-
1. Set the following properties:
44
-
1.**Name**: `query`
45
-
1.**Default value**: `${query}`
43
+
### Ask for the account name
46
44
47
-
:::image type="content" source="../media/tutorial-use-connectors/adding-query-vars.png" alt-text="Screenshot of how to add query to the input text box properties." border="false":::
45
+
1. Navigate to the Insert pane in the left-hand menu and add a Text label control, setting the **Text** to `Enter account name`
48
46
49
-
1.Drag and drop a **Button Group** into the card under the card description.
47
+
1.Add a Text input control
50
48
51
-
:::image type="content" source="../media/tutorial-use-connectors/add-button-group-to-card.png" alt-text="Screenshot of an added button group." border="false":::
49
+
1. Add a button and set the Title to `See details`
52
50
53
-
1.Click **Add Button**.
51
+
1.Navigate to the Variables pane and select **New variable**
54
52
55
-
1. Set the button **Title** to `Back`.
53
+
1. Set the variable name to `enteredAccountName`, the type to `Text`, and select **Save**
56
54
57
-
:::image type="content" source="../media/tutorial-use-connectors/add-button-title-back.png" alt-text="Screenshot showing a button renamed to back." border="false":::
55
+
1. Navigate to the Tree View pane in the left-hand menu and select **New screen**
58
56
59
-
1.In the PowerFX code line at the top, add the following for this button: `Back();`
57
+
1.Set the name to `DetailsScreen` and select **Create**
60
58
61
-
:::image type="content" source="../media/tutorial-use-connectors/add-back-pfx-to-button.png" alt-text="Screenshot showing Power FX expression to add to back button to make functional." border="false":::
59
+
1. Select the button and set the **OnSelect** property to `Set(enteredAccountName, textInput1); Navigate(DetailsScreen);`
62
60
63
-
1. Select the empty space around the Back button to re-select the Button Group.
61
+
### Show additional account details
64
62
65
-
1.Select **Add Button**.
63
+
1.In the DetailsScreen, set the Text property on the bolded text label that is added by default to `LookUp(account, 'Account Name' = enteredAccountName).'Account Name'`
66
64
67
-
:::image type="content" source="../media/tutorial-use-connectors/add-new-button-to-group.png" alt-text="Screenshot showing how to add a second button to the button group." border="false":::
65
+
1. Through the Insert pane, add a text label and set the **Text** property to `LookUp(account, 'Account Name' = enteredAccountName).'Account Number'`
68
66
69
-
1.Name the new button `Search`.
67
+
1.Through the Insert pane, add a button and set the **Text** property to `"Search for a different account"` and the **OnSelect** property to `Back()`
70
68
71
-
:::image type="content" source="../media/tutorial-use-connectors/add-button-title-search.png" alt-text="Screenshot showing a second button renamed to search." border="false":::
69
+
### Change the account description
72
70
73
-
1.Select **Data Connections** from the Navigation bar and then select **Add data**.
71
+
1.Navigate to the Insert pane in the left-hand menu and add a Text input control and button to your DetailsScreen
74
72
75
-
:::image type="content" source="../media/tutorial-use-connectors/go-to-data-connections.png" alt-text="Screenshot showing how to get to the data connections pane." border="false":::
73
+
1. Set the button text to `"Update description"` and the **OnSelect** property to `Patch(account, LookUp(account, 'Account Name' = enteredAccountName), { Description: textInput2 })`
76
74
77
-
1. Select the **+ plus** next to **Bing Search**.
75
+
### List all accounts
78
76
79
-
:::image type="content" source="../media/tutorial-use-connectors/add-bing-connector.png" alt-text="Screenshot showing how to add the Bing search connector to the card." border="false":::
77
+
1. On the main screen, add a text label
80
78
81
-
1.Go to the **Variables**tab and select **New variable**.
79
+
1.On the text label, set the **Text**property to `ThisItem.'Account Name'`and set the **Repeat for every** property on the Advanced tab to `account`
82
80
83
-
:::image type="content" source="../media/tutorial-use-connectors/add-new-var.png" alt-text="Screenshot showing how to add a new variable to the card." border="false":::
81
+
## Test the card
84
82
85
-
1.Create a variable to store the results of your Bing search, here called `searchResults`, then set the variable type to array.
83
+
1.**Save** the card by selecting the button on the top right. You should always save changes before playing an updated card. Then select **Play**.
86
84
87
-
:::image type="content" source="../media/tutorial-use-connectors/create-search-results-array.png" alt-text="Screenshot showing how to set up the search results array variable." border="false":::
88
-
89
-
1. Save the card.
90
-
91
-
1. With the Search button selected, go to the PowerFX editor and enter the following: `Set(searchResults, bingSearch.GetNews(query));`
92
-
93
-
:::image type="content" source="../media/tutorial-use-connectors/add-pfx-to-search-button.png" alt-text="Screenshot showing how to add power fx to the search button to use the bing connector." border="false":::
94
-
95
-
1. To output the search results as clickable links, add another text box below the buttons. Add the following to the text box: `[${name}](${url})`.
96
-
97
-
:::image type="content" source="../media/tutorial-use-connectors/add-pfx-for-links.png" alt-text="Screenshot showing how to add power fx to a text box to make the resulting links clickable." border="false":::
98
-
99
-
1. With the text box selected, go to the PowerFX bar at the top and enter searchResults. Make sure the drop down to the left is set to **Repeat for Every**.
100
-
101
-
:::image type="content" source="../media/tutorial-use-connectors/add-search-results-to-text-box.png" alt-text="Screenshot showing how to make each link show up in the results." border="false":::
102
-
103
-
1. Save and preview your card.
104
-
105
-
:::image type="content" source="../media/tutorial-use-connectors/preview-search-card.png" alt-text="Screenshot showing a working bing search card, with clickable links for each result." border="false":::
106
-
107
-
### More advanced data binding
108
-
109
-
Instead of just showing a clickable link, you can also set the Bing search up to show a photo and a short description of each article in the search.
110
-
111
-
1. Remove the text box from your card and add a **ColumnSet** element.
112
-
113
-
:::image type="content" source="../media/tutorial-use-connectors/add-column-set.png" alt-text="Screenshot showing a column set added to the card in place of the text box from previous steps." border="false":::
114
-
115
-
1. Add a column for the article photo and set the column width to **auto**.
116
-
117
-
:::image type="content" source="../media/tutorial-use-connectors/set-column-to-auto.png" alt-text="Screenshot showing how to set the columns in the column set to auto width." border="false":::
118
-
119
-
1. Drag and drop an **Image** element into the column.
120
-
121
-
:::image type="content" source="../media/tutorial-use-connectors/add-image-to-column.png" alt-text="Screenshot of an image block added to the first column in the column set." border="false":::
122
-
123
-
1. Add the following to the image **Url** box: `= image.thumbnail.contentUrl`
124
-
125
-
1. Select the empty space around the first column to re-select the ColumnSet.
126
-
127
-
1. Add a second column to the ColumnSet and make sure the column width is set to **stretch**.
128
-
129
-
:::image type="content" source="../media/tutorial-use-connectors/add-second-column.png" alt-text="Screenshot showing a second column added to the column set." border="false":::
130
-
131
-
1. Add a **Text block** to the second column and add the following: `[${name}](${url})`
132
-
133
-
1. Drag a second **Text block** into the column underneath the first and add the following: `${description}`
134
-
135
-
:::image type="content" source="../media/tutorial-use-connectors/add-pfx-to-second-col.png" alt-text="Screenshot of power fx expressions added to text blocks within the second column." border="false":::
136
-
137
-
1. With the ColumnSet selected, go to the PowerFX bar at the top and enter `searchResults`. Make sure the drop down to the left is set to **Repeat for Every**.
138
-
139
-
:::image type="content" source="../media/tutorial-use-connectors/add-pfx-to-column-set.png" alt-text="Screenshot showing the power fx to add to the column set to view each search result in the card." border="false":::
140
-
141
-
1. Save and preview your card.
85
+
The card will have two screens - the first screen lists all accounts and allows the user to type in the exact name of an account to see additional details, the second screen shows the account name and number as well as lets the user modify the description.
0 commit comments