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
title: Tutorial for customizing a gallery | Microsoft Docs
3
-
description: In this tutorial, you customize the default browse screen, including the gallery, of an app generated in PowerApps.
4
-
documentationcenter: na
2
+
title: Tutorial - Customize a gallery in a generated app | Microsoft Docs
3
+
description: In this tutorial, you customize the data that appears in the gallery and other elements of an app that was generated automatically in PowerApps.
5
4
author: AFTOwen
6
-
manager: kfile
7
-
editor: ''
8
-
tags: ''
9
5
10
6
ms.service: powerapps
11
-
ms.devlang: na
12
-
ms.topic: conceptual
7
+
ms.topic: tutorial
13
8
ms.component: canvas
14
-
ms.date: 03/11/2018
9
+
ms.date: 04/24/2018
15
10
ms.author: anneta
16
-
11
+
#As a business analyst with little or no coding experience, I want to change the data that appears in the default gallery of a generated app and make other changes so that my users can more easily manage information.
17
12
---
18
13
# Tutorial: Customize a gallery in PowerApps
19
-
In this tutorial, you'll customize the default browse screen, including the gallery, of an app generated in PowerApps. You can manage data by using the default app without customizing it, but it will be much more powerful and easier to use if you make these changes:
14
+
In this tutorial, you'll customize the gallery and make other changes to an app that was generated automatically in Microsoft PowerApps. Users can manage data in the app even if you don't make these changes, but the app will be easier to use if you customize it for your organization's needs:
20
15
21
16
> [!div class="checklist"]
22
-
> * Change the layout
23
-
> * Change the data that appears
24
-
> * Set the columns for filtering and sorting
25
-
> * Test filtering and sorting
26
-
> * Change the title
27
-
> * Show a scrollbar
17
+
> * Change the layout of the gallery
18
+
> * Change the type of data that appears in the gallery
19
+
> * Change the columns by which users can sort and search the data
20
+
> * Change the screen title
21
+
> * Show a scroll bar
28
22
29
-
This tutorial starts with an app generated from the [Common Data Service for Apps](../common-data-service/data-platform-intro.md), but the same concepts apply to apps generated from SharePoint, Excel, and other data sources.
23
+
This tutorial starts with an app that was generated from a specific data source. However, the same concepts apply to any app that you generate in PowerApps from a SharePoint list, an Excel table, or another data source.
30
24
31
25
If you don't have a license for PowerApps, you can [sign up for free](../signup-for-powerapps.md).
32
26
33
27
## Prerequisites
34
-
Before you start this tutorial, [generate an app](data-platform-create-app.md) from the Common Data Service for Apps.
28
+
You can review this topic for general concepts only, or you can follow each step if you first [generate this app](data-platform-create-app.md).
35
29
36
30
## Open the generated app
37
-
1. Sign in to [PowerApps](https://web.powerapps.com), and then click or tap**Apps** near the left edge.
31
+
1. Sign in to [PowerApps](https://web.powerapps.com), and then select**Apps** near the left edge.
38
32
39
33

40
34
41
-
1. Find the app that you generated, and then click or tap the ellipsis icon (**...**) for it near the right edge.
The value of this property appears in the formula bar and determines not only the data source for the gallery but also the filter and sort columns.
75
+
The value of this property appears in the formula bar. You set this property to specify not only the data source for the gallery but also the columns by which users can sort and search the data.
76
+
77
+
1. Copy this formula, and then paste it in the formula bar.
85
78
86
-
1. In the formula bar, replace both instances of **emailaddress1** to **name**, and retain the double-quotation marks that surround each instance.

83
+
- If a user types one or more characters in the search bar, the gallery shows only those account names that contain the text that the user typed.
84
+
- If a user selects the sort icon, the gallery is sorted alphabetically by account name in either ascending or descending order, depending on how many times the user selects the icon.
91
85
92
-
The first instance of **name** specifies that the user can filter the list to show only those records for which the account name contains text that the user typed in the search bar. The second instance of **name** specifies that the user can sort the list alphabetically by account name. For more information about these and other functions, see the [formula reference](formula-reference.md).
86
+
For more information about these and other functions, see the [formula reference](formula-reference.md).
93
87
94
88
## Test sorting and searching
95
-
1. Open Preview mode by pressing F5 (or by clicking or tapping the play button near the upper-right corner).
89
+
1. Open Preview mode by pressing F5 (or by selecting the play button near the upper-right corner).
1. Near the upper-right corner of the browse screen, click or tap the sort icon one or more times to change the alphabetical sort order between ascending and descending.
93
+
1. Near the upper-right corner of the browse screen, select the sort icon one or more times to change the alphabetical sort order between ascending and descending.
100
94
101
95

102
96
103
-
1. In the search box, type **k** to show only those accounts for which the name contains the letter that you typed.
97
+
1. In the search box, type **k** to show only those account names that contain the letter that you typed.
104
98
105
99

106
100
107
-
1. Remove all text from the search bar, and then close Preview mode by pressing Esc (or by clicking or tapping the close icon *under* the title bar for PowerApps).
101
+
1. Remove all text from the search bar, and then close Preview mode by pressing Esc (or by selecting the close icon near the upper-right corner).
108
102
109
-
## Change the title of the screen
110
-
1.Click or tap the title of the screen to select it.
103
+
## Change the screen title
104
+
1.Select the title of the screen by clicking or tapping it.
1. Ensure that the property list shows **Text**, and then type **Browse**, surrounded by double quotation marks, in the formula bar.
108
+
1. Ensure that the property list shows **Text** and then, in the formula bar, replace **Accounts** with **Browse** (retaining the double quotation marks).
If your users might not have touch screens or mouse wheels, configure the **Gallery** control to show a scroll bar when the user hovers over it with the mouse. That way, users can show all accounts even if the screen can't show them all at once.
117
+
If your users might have neither touch screens nor mouse wheels, configure the gallery to show a scroll bar when the user hovers over it with the mouse. That way, users can show all accounts even if the screen can't show them all at once.
124
118
125
-
1. Select the **Gallery** control as the first procedure describes.
119
+
1. Select the gallery as the first procedure describes.
In this tutorial, you've customized the **Gallery** control and the title of the default browse screen of a generated app. You can also customize the default screens for displaying details and creating or updating accounts. Those screens contain a **Display form** control and an **Edit form** control, and you can change (for example) which types of data they show and in which order.
128
+
In this tutorial, you've customized the gallery and made other changes to the default screen for browsing records in a generated app. You can also customize the default screens for displaying details and creating or updating accounts. As the browse screen contains a gallery, the other two screens in the app contain forms. You can change, for example, which types of data the forms show and in which order.
title: Generate an app in PowerApps for the Common Data Service for Apps (quickstart)| Microsoft Docs
3
-
description: Automatically generate an app in PowerApps to manage data in the Common Data Service for Apps
4
-
documentationcenter: na
2
+
title: Quickstart - Generate an app from Common Data Service for Apps | Microsoft Docs
3
+
description: Automatically generate an app in PowerApps to manage data in Common Data Service for Apps
5
4
author: AFTOwen
6
-
manager: kfile
7
5
8
6
ms.service: powerapps
9
-
ms.devlang: na
10
7
ms.topic: conceptual
11
8
ms.component: canvas
12
9
ms.date: 03/10/2018
13
10
ms.author: anneta
14
11
15
12
---
16
-
# Quickstart for generating an app in PowerApps for the Common Data Service for Apps
13
+
# Quickstart: Generate an app from Common Data Service for Apps in PowerApps
17
14
18
-
In this quickstart, you'll use PowerApps to automatically generate your first app based on a list of sample accounts in the [Common Data Service for Apps](../common-data-service/data-platform-intro.md). In this app, you can browse all accounts, show details of a single account, and create, update, or delete an account.
15
+
In this quickstart, you'll use Microsoft PowerApps to automatically generate an app based on a list of sample accounts in [Common Data Service (CDS) for Apps](../common-data-service/data-platform-intro.md). In this app, you can browse all accounts, show details of a single account, and create, update, or delete an account.
19
16
20
-
To follow this quickstart, you must switch to an [environment](working-with-environments.md) in which a database in the Common Data Service has been created and contains data. If no such environment exists and you have administrative privileges, you can [create an environment](../../administrator/environments-administration.md#create-an-environment) that meets this requirement.
17
+
To follow this quickstart, you must [switch to an environment](working-with-environments.md) in which a database in CDS for Apps has been created, contains data, and allows updates. If no such environment exists and you have administrative privileges, you can [create an environment](../../administrator/environments-administration.md#create-an-environment) that meets this requirement.
21
18
22
19
If you don't have a license for PowerApps, you can [sign up for free](../signup-for-powerapps.md).
23
20
24
21
## Generate an app
25
-
1. Sign in to [PowerApps](https://web.powerapps.com).
22
+
1. Sign in to [PowerApps](https://web.powerapps.com) and, if necessary, switch environments as specified earlier in this topic.
26
23
27
24

28
25
29
26
1. Under **Make apps like these**, hover over **Start from data**, and then select **Make this app**.
30
27
31
28

32
29
33
-
1.Under **Start with your data**, select the arrow that points to the right.
30
+
1.On the **Common Data Service** tile, select **Phone layout**.
1. Under **Connections**, select your connection to the Common Data Service.
34
+
1. Under **Choose a table**, select **Accounts**, and then select **Connect**.
38
35
39
-
1.Type **Accounts** in the search box (near the right edge), select **Accounts** under **Choose a table**, and then select **Connect**.
36
+
1.If the **Welcome to PowerApps Studio** dialog box appears, select **Skip**.
40
37
41
-

38
+
Your app opens to the browse screen, which shows a list of accounts. Near the top of the screen, a title bar shows icons for refreshing the list, sorting the list, and creating an account. Under the title bar, a search box provides the option to filter the list based on text that you type or paste.
42
39
43
-
After a few minutes, your app opens to the browse screen, which shows a list of accounts. Near the top of the screen, a title bar shows icons for refreshing the list, sorting the list, and creating an account. Under the title bar, a search box provides the option to filter the list based on text that you type or paste.
44
-
45
-
By default, the list shows an image, an email address, a city, and an ID for that account. But you can customize the list, which is called a gallery, to show other types of data.
40
+
By default, the list shows an email address, a city, and an ID for that account. But you can customize the list, which is called a gallery, to show other types of data.
You'll probably want to make more changes before you use this app or share it with others. As a best practice, save your work so far before you proceed.
51
46
52
-
1. Near the upper-left corner, click or tap the **File** tab.
47
+
1. Near the upper-left corner, select the **File** tab.
53
48
54
49
1. In the **App settings** page, set the app name to **AppGen**, change the background color to deep red, and change the icon to a checkmark.
1. Near the left edge, select **Save** and then, in the lower-left corner, select**Save**.
59
54
60
55
## Next steps
61
-
In this quickstart, you created an app to manage sample data about accounts in the Common Data Service for Apps. As a next step, customize the default browse screen to better suit your needs.
56
+
In this quickstart, you created an app to manage sample data about accounts in CDS for Apps. As a next step, customize the gallery and other elements of the default browse screen to better suit your needs.
62
57
63
58
> [!div class="nextstepaction"]
64
-
> [Customize a default browse screen](customize-layout-sharepoint.md).
59
+
> [Customize a gallery](customize-layout-sharepoint.md).
0 commit comments