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/maker/canvas-apps/add-gallery.md
+50-56Lines changed: 50 additions & 56 deletions
Original file line number
Diff line number
Diff line change
@@ -20,120 +20,114 @@ Show a list of items from any data source by adding a **[Gallery](controls/contr
20
20
21
21
## Prerequisites
22
22
23
-
* Learn how to [add and configure a control](add-configure-controls.md) in PowerApps.
23
+
- Learn how to [add and configure a control](add-configure-controls.md) in PowerApps.
24
24
25
-
* Set up the sample data:
25
+
- Set up the sample data:
26
26
1. Download [this Excel file](https://az787822.vo.msecnd.net/documentation/get-started-from-data/FlooringEstimates.xlsx), which contains sample data for this tutorial.
27
27
28
28
2. Upload the Excel file to a [cloud-storage account](connections/cloud-storage-blob-connections.md), such as OneDrive for Business.
29
29
30
-
## Add a Gallery control
31
-
1. Open PowerApps, and then click or tap **New** near the left edge.
30
+
- Open a blank app:
31
+
1.[Sign in to PowerApps](http://web.powerapps.com?utm_source=padocs&utm_medium=linkinadoc&utm_campaign=referralsfromdoc).
32
32
33
-
2. On the **Blank app** tile, click or tap **Phone layout**.
33
+
1. Under **Make your own app**, select **Canvas app from blank**.
34
34
35
-
3. In the **Welcome to PowerApps Studio** dialog box, click or tap**Skip**.
35
+
1. Specify a name for your app, select **Phone**, and then select**Create**.
36
36
37
-
4.[Add a connection](add-data-connection.md) to the **FlooringEstimates**table in the Excel file.
37
+
1. If the **Welcome to PowerApps Studio**dialog box appears, select **Skip**.
38
38
39
-
5. (optional) Add a **Gallery** control to the default screen by clicking or tapping the **Insert**tab, clicking or tapping **Gallery**, and then clicking or tapping a **Gallery** control that's empty (blank) or that contains a default set of controls.
39
+
1.[Add a connection](add-data-connection.md)to the **FlooringEstimates**table in the Excel file.
40
40
41
-
These options include **Gallery** controls that scroll horizontally or vertically. You can also add a **Gallery** control that automatically bases its size on the amount of content in each item.
> Whether you add a **Gallery** control to a new screen or an existing one, you can click or tap near the bottom of the **Gallery** control to select it, click or tap **Flooring Estimates** in the right-hand pane, and then click or tap a different layout in the **Data** pane. For this tutorial, leave the default layout.
51
+
1. (optional) In the **Layout** list, select a different option.
You'll configure sort and search later in this topic.
69
-
70
65
## Add a control to the Gallery control
71
-
Before you do any customization, decide on a **Gallery** control layout. The first set of controls in a**Gallery** control is the template, which determines how all data in the **Gallery** control appears.
66
+
Before you do any other customization, ensure that the layout for your **Gallery** control most closely matches what you want. From there, you can further modify the**Gallery** template, which determines how all data in the **Gallery** control appears.
72
67
73
-
1. Select the template by clicking or tapping near the bottom of the **Gallery** control and then clicking or tapping the pencil icon in the upper-left corner.
68
+
1. Select the template by clicking or tapping near the bottom of the **Gallery** control and then selecting the pencil icon in its upper-left corner.
2. With the template still selected, add a **[Label](controls/control-text-box.md)** control, and then move and resize it so that it doesn't overlap with other controls in the template.
The **[Items](controls/properties-core.md)** property of a **Gallery** control determines which items it shows. In this procedure, you configure that property so that the **Gallery** control shows only those items for which the product name contains the text in **TextSearchBox1**.
1. Select the **Gallery** control by clicking or tapping near the bottom of that control.
100
-
101
-
2. On the **Advanced** tab, set the **[Items](controls/properties-core.md)** property of the **Gallery** control to this formula:
88
+
## Filter and sort a gallery
89
+
The **[Items](controls/properties-core.md)** property of a **Gallery** control determines which items it shows. In this procedure, you configure that property so that it also determines which records appear based on filter criteria and in what order.
102
90
103
-
**If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name)))**
104
-
105
-
For more information about the functions in this formula, see the [formula reference](formula-reference.md).
106
-
107
-
3. Type part or all of a product name in the search box.
108
-
109
-
The **Gallery** control shows only those items that meet the filter criterion.
110
-
111
-
## Sort the Gallery control
112
-
The **[Items](controls/properties-core.md)** property of a **Gallery** control determines the order in which it shows items. In this procedure, you configure that property so that the **Gallery** control shows the order of items as set by **ImageSortUpDown1**.
113
-
114
-
91
+
115
92
116
93
1. Set the **[Items](controls/properties-core.md)** property of the **Gallery** control to this formula:
117
94
118
-
**Sort(If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name))), Name, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))**
95
+
```powerapps-dot
96
+
Sort
97
+
(If
98
+
(IsBlank(TextSearchBox1.Text),
99
+
FlooringEstimates,
100
+
Filter(
101
+
FlooringEstimates,
102
+
TextSearchBox1.Text in Text(Name)
103
+
)
104
+
),
105
+
Name,
106
+
If(
107
+
SortDescending1,
108
+
SortOrder.Descending,
109
+
SortOrder.Ascending
110
+
)
111
+
)
112
+
```
119
113
120
-
2. Select the sort icon to change the sorting order of the **Gallery** control by the names of the products.
114
+
For more information about the functions in this formula, see the [formula reference](formula-reference.md).
121
115
122
-
To sort *and* filter your **Gallery** control:
116
+
1. Double-click the search box, and then type part or all of a product name in it.
123
117
124
-
* Replace both instances of *DataSource* in this formula with the name of your data source.
118
+
Only those items that meet the filter criterion appear.
125
119
126
-
* Replace both instances of *ColumnName* with the name of the column by which you want to sort and filter.
120
+
1. While pressing the Alt key, select the sort icon one or more times to switch the sort order.
127
121
128
-
**Sort(If(IsBlank(TextSearchBox1.Text),***DataSource*, **Filter(***DataSource*, **TextSearchBox1.Text in Text(***ColumnName***))),***ColumnName*, **If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))**
122
+
The records toggle between ascending and descending alphabetical order based on the product name.
129
123
130
124
## Highlight the selected item
131
-
Set the **Gallery** control's **TemplateFill** property to a formula that's similar to this example:
125
+
Set the **Gallery** control's **TemplateFill** property to a formula that's similar to this example, but you can specify different colors if you want:
132
126
133
127
**If(ThisItem.IsSelected, LightCyan, White)**
134
128
135
129
## Change the default selection
136
-
Set the **Gallery** control's **Default** property to the record that you want to select by default. For example, specify the fifth item in the **FlooringEstimates** data source:
130
+
Set the **Gallery** control's **Default** property to the record that you want to select by default. For example, you can specify the fifth item in the **FlooringEstimates** data source:
0 commit comments