|
1 | 1 | --- |
2 | | -title: How to customize Milestones sample app |
3 | | -description: Learn how to customize the Milestones Power Apps template installed from Teams store. |
| 2 | +title: Customize Milestones sample app |
| 3 | +description: Learn how to customize the Milestones sample app installed from the Microsoft Teams store. |
4 | 4 | author: joel-lindstrom |
5 | 5 | ms.service: powerapps |
6 | 6 | ms.topic: conceptual |
7 | 7 | ms.custom: |
8 | | -ms.date: 06/14/2021 |
| 8 | +ms.date: 06/23/2021 |
9 | 9 | ms.author: v-ljoel |
10 | 10 | ms.reviewer: tapanm |
| 11 | +contributors: |
| 12 | + - navjotm |
| 13 | + - tapanm-msft |
| 14 | + - joel-lindstrom |
11 | 15 | --- |
12 | | -# How to customize Milestones sample app |
13 | | -The Milestones Power App template for Microsoft Teams is designed to be a complete app experience but allow makers to easily extend it for their own purposes. In this guide we will go over how to customize the Milestones app in Power Apps Studio in Microsoft Teams. |
| 16 | +# Customize Milestones sample app |
| 17 | + |
| 18 | +The Milestones sample app for Microsoft Teams is designed to be a complete app experience. At the same time, allow makers to easily extend it for their own purposes. |
| 19 | + |
| 20 | +We'll go over how to customize the Milestones app using Power Apps Studio in Microsoft Teams. |
14 | 21 |
|
15 | 22 | Before you can customize the app, you must install it from the Teams store. You can get the app at <https://aka.ms/teamsmilestones>. |
16 | 23 |
|
17 | | -Once the app is installed you can then customize the app using the following steps |
| 24 | +Once the app is installed, you can then customize it using the following steps. |
18 | 25 |
|
19 | | -## Opening Power Apps in Microsoft Teams |
20 | | -1. Click the ellipsis (…) and search for **Power Apps** . |
| 26 | +## Open Milestones app in Teams |
| 27 | + |
| 28 | +1. Select ellipsis (…), and search for **Power Apps**. |
21 | 29 |
|
22 | 30 |  |
23 | 31 |
|
24 | | -2. The Power Apps app icon will now appear on the Microsoft Teams left side menu. |
| 32 | +2. The Power Apps app icon will now appear on the left pane. |
25 | 33 |
|
26 | | -3. Right click on the **Power Apps** icon and select **Pin** to pin the Power Apps app to your Teams menu—this will make it appear every time you open Microsoft Teams. |
| 34 | +3. Right-click on the **Power Apps** icon, and select **Pin** to pin the app to your Teams menu. Pinning will make it appear every time you open Microsoft Teams. |
27 | 35 |
|
28 | 36 |  |
29 | 37 |
|
30 | | -4. We recommend that you right click on the Power Apps logo and select **Pop out app** to open the app in a new window, so you won't lose your work when navigating other places in Microsoft Teams. |
| 38 | +4. We recommend that you right-click on the Power Apps logo, and select **Pop out app** to open the app in a new window. This way, you won't lose your work when working at other places in Teams. |
31 | 39 |
|
32 | | -The app opens in Microsoft Teams. |
| 40 | +The app now opens in Microsoft Teams. |
33 | 41 |
|
34 | 42 | ## Extend the Milestones data model |
35 | 43 |
|
36 | | -If you are modifying or adding any fields to your app, you will want to first update or add these columns in their Dataverse tables. In this section we will |
37 | | -explore the data model for Milestones and how to modify it in Power Apps in Microsoft Teams. Below is the data model for Milestones. |
| 44 | +To modify or add any fields to Milestones app, update or add columns in Microsoft Dataverse tables first. |
38 | 45 |
|
39 | | - |
| 46 | +In this section, we'll explore the data model for Milestones, and understand how to modify it using Power Apps in Teams. |
40 | 47 |
|
41 | | -Before modifying the fields, you need to first decide where the fields you want to add should go. What are the users doing when they should see or interact with these fields? |
| 48 | +Here's the data model for Milestones app. |
42 | 49 |
|
43 | | -- If it is information about the project that appears in the project list on the left or the header, add it to the **Project** table |
44 | | - |
45 | | - - If it is information about work items that a user should add or view when looking at their work items/tasks, add it to the **Project Work |
46 | | - Item** table. |
47 | | - |
48 | | - - The other tables, such as Project Milestones, Project Category, Project Status, and Priority are primarily lookup tables that are referenced by |
49 | | - work item. |
| 50 | + |
50 | 51 |
|
51 | | -## Open the Milestones app in Power Apps Studio |
| 52 | +Before modifying fields, decide where the fields you want to add should go. What are the users doing when they should see or interact with these fields? |
52 | 53 |
|
53 | | -To edit the Milestones app, open it in the Power Apps in Microsoft Teams. |
| 54 | +- If it's information about the project that appears in the project list on the left or the header, add it to the **Project** table. |
| 55 | +- If it's information about work items that a user should add, or view when looking at their work items/tasks, add it to the **Project Work Item** table. |
| 56 | +- The other tables, such as **Project Milestones**, **Project Category**, **Project Status**, and **Priority** are primarily lookup tables referenced by work item. |
54 | 57 |
|
55 | | -- Select **Power Apps** on the Microsoft Teams left side menu In Power Apps Studio, select **Build** tab |
| 58 | +## Open the Milestones app in Power Apps Studio |
56 | 59 |
|
| 60 | +To edit the Milestones app, open it using Power Apps Studio in Teams. |
57 | 61 |
|
58 | | -- This screen will show all the teams that have Power Apps. Select the team in which you installed Milestones. |
| 62 | +- Select **Power Apps** on the Microsoft Teams pane. |
| 63 | +- In Power Apps Studio, select **Build** tab. |
| 64 | +- From the list of all teams having apps, select the team that you installed Milestones app in. |
59 | 65 | - Select **Installed apps**. |
60 | | - |
61 | 66 | - In the **Milestones** tile, select the Milestones app. |
62 | 67 |
|
63 | | -  |
64 | | - |
65 | | -The Milestones app will open in the Power Apps Designer. This may take a minute or two. |
| 68 | +  |
66 | 69 |
|
| 70 | +The Milestones app will open in Power Apps Studio. This process may take one to two minutes. |
67 | 71 |
|
| 72 | +## Customize Milestones app in the Power Apps Studio |
68 | 73 |
|
69 | | -## Customizing Milestones in the Power Apps Designer |
| 74 | +Now that the Milestones App is open in the Studio, let’s explore the app. |
70 | 75 |
|
71 | | -Now that the Milestones App is open in the Designer, let’s explore the app |
| 76 | +1. On left side, select the Tree View. |
72 | 77 |
|
73 | | -1. On left side, select Tree View (if not already selected). |
| 78 | +  |
74 | 79 |
|
75 | | -  |
| 80 | +1. From the Tree View, you can see the screens included in the app. Selecting the arrow to the left of a screen will expand the contents of the screen, giving you access to the components of the screen, including galleries, buttons, text labels, and text input controls. |
76 | 81 |
|
77 | | -2. From the Tree View you can see the screens included in the app. Selecting the arrow to the left of a screen will expand the contents of the screen, giving you access to the components of the screen, including galleries, buttons, text labels, and text input controls. |
| 82 | +1. In Tree View, select **Projects Screen**. |
78 | 83 |
|
79 | | -3. In Tree View, select **Projects Screen**. |
| 84 | +1. You'll now see the main Milestones app screen, and have access to modifying any of the screen controls. |
80 | 85 |
|
81 | | -4. You will now see the main Milestones app screen and have access to modifying any of the screen controls. |
| 86 | +1. Make your changes to the app. |
82 | 87 |
|
83 | | -5. Make your desired changes to the app. |
| 88 | +1. When finished, select **Save**. |
84 | 89 |
|
85 | | -6. When finished, select **Save**. |
| 90 | +1. To preview your changes, select the  button. |
86 | 91 |
|
87 | | -7. To preview your changes, select the  button. |
88 | | - 1. The app will launch in preview mode, where you can test the user experience when running the app. |
89 | | - |
90 | | - 2. To exit preview mode, press **Escape** on your keyboard or select the **X** in the upper right corner. |
| 92 | + The app will launch in preview mode, where you can test the user experience when running the app. To exit preview mode, press **Escape** on your keyboard, or select the **X** in the upper right corner. |
91 | 93 |
|
92 | | -8. To publish your app changes, select the  button. |
| 94 | +1. To publish your app changes, select the **Publish to Teams** button. |
93 | 95 |
|
94 | | -- Publishing the app makes your changes visible to users of the app. |
95 | | - |
96 | | -- A dialog will open confirming that you want to publish. |
| 96 | + Publishing the app makes your changes visible to users of the app. A dialog will open confirming that you want to publish. |
97 | 97 |
|
98 | 98 |  |
99 | 99 |
|
100 | | -- To change app settings, such as icon and background color, select **Edit details**. |
101 | | - |
102 | | -- To publish the app, select **Next**. |
103 | | - |
104 | | -- On the next screen, confirm the channel you want the app to appear. You can add to other channels in the Team by pressing the **+** button. |
| 100 | +1. To change app settings, such as icon and background color, select **Edit details**. Or, to publish the app, select **Next**. |
| 101 | + |
| 102 | +1. Confirm the channel you want the app to appear. You can add to other channels in the Team by selecting the **+** button. |
105 | 103 |
|
106 | | -- To complete publishing your changes, select **Save and close**. |
| 104 | +1. To complete publishing your changes, select **Save and close**. |
107 | 105 |
|
108 | 106 | ## Ideas for extension |
109 | 107 |
|
110 | 108 | The possibilities for extending the Milestones app are only limited to your imagination. Here are some of the common ways makers extend the Milestones app: |
111 | 109 |
|
112 | | -- Add company logo. |
113 | | - |
114 | | -- Change Milestones colors to match your company colors. |
| 110 | +- Add company logo. |
| 111 | +- Change Milestones colors to match your company colors. |
| 112 | +- Use Power Automate to create tasks in Microsoft Planner/Tasks for work items. |
| 113 | +- Use Power Automate to notify project team members when they're assigned to a Project. |
| 114 | +- Add new columns to work items. |
| 115 | +- Use Power Automate to send a weekly summary email of work item and project status. |
115 | 116 |
|
116 | | -- Use Power Automate to create tasks in Microsoft Planner/Tasks for work items. |
| 117 | +## Customization considerations |
117 | 118 |
|
118 | | -- Use Power Automate to notify project team members when they are assigned to a Project. |
119 | | - |
120 | | -- Add new columns to work items. |
| 119 | +Before modifying the Milestones app, consider the following items: |
121 | 120 |
|
122 | | -- Use Power Automate to send a weekly summary email of work item and project status. |
| 121 | +- Milestones, project category, status, and priority are set in the settings area of the Milestones app. Changing these values in the table may cause issues with the app. For example, the New status is expected by the Project screen Milestone Status indicator. |
| 122 | +- When customizing the app, always right-click on the Power Apps icon, and select **Pop out app** to open Power Apps in a new window. That way, you won't lose your place when you work somewhere else in Teams. |
| 123 | +- The app theming has been developed to support dark and high contrast mode in Teams. Changing the fill color of screens may break dark and high contrast modes. |
| 124 | +- Changes made to an app will be added as a new version of the app. If you get a new version from store, your customizations won't be overridden. The new version will be installed, but the new version won't be published. |
| 125 | +- The updated version of the app is available from the version history of the app. Selecting **Details** from the app list will display the versions of the app and allow you to publish the new version. |
| 126 | +- Columns and tables added by you'll go to **built by this team** section of the Power Apps app. You can also add new tables in the **See all** area. |
123 | 127 |
|
124 | | -## Customization considerations |
| 128 | +### See also |
125 | 129 |
|
126 | | -Before modifying the Milestones app, consider the following items: |
| 130 | +- [Use Milestones apps from teams store](milestones.md) |
| 131 | +- [Understand Milestones sample app architecture](milestones-architecture.md) |
| 132 | +- [Customize sample apps](customize-sample-apps.md) |
| 133 | +- [Sample apps FAQs](sample-apps-faqs.md) |
| 134 | +- [Use sample apps from the Microsoft Teams store](use-sample-apps-from-teams-store.md) |
127 | 135 |
|
128 | | -- Milestones, project category, status, and priority are set in the settings area of the Milestones app. Changing these values in the table may cause |
129 | | - issues with the app. For example, the New status is expected by the Project screen Milestone Status indicator. |
130 | | - |
131 | | -- When customizing the app, always right mouse click on the Power Apps icon and select **Pop out app** to open Power apps in a new window. That way you will not lose your place when you navigate somewhere else in Microsoft Teams. |
132 | | - |
133 | | -- The app theming has been developed to support dark and high contrast mode in Microsoft Teams. Changing the fill color of screens may break dark and high contrast modes |
134 | | - |
135 | | -- Changes made to an app will be added as a new version of the app. If you get a new version from store, your customizations will not be overridden. The new version will be installed, but the new version will not be published. |
136 | | - |
137 | | - The updated version of the app is available from the version history of the app. Selecting **Details** from the app list will display the versions of |
138 | | - the app and allow you to publish the new version. |
139 | | - |
140 | | -- Columns and tables added by you will go to **built by this team** section of the Power Apps app. You can also add new tables in the **See all** area. |
| 136 | +[!INCLUDE[footer-include](../includes/footer-banner.md)] |
0 commit comments