|
| 1 | +--- |
| 2 | +title: Add hierarchy to inspection ___location |
| 3 | +description: Learn about how to add hierarchy to inspection locations in Inspections sample app. |
| 4 | +author: sbahl10 |
| 5 | +ms.service: powerapps |
| 6 | +ms.topic: conceptual |
| 7 | +ms.custom: |
| 8 | +ms.date: 07/12/2021 |
| 9 | +ms.author: v-shrutibahl |
| 10 | +ms.reviewer: tapanm |
| 11 | +contributors: |
| 12 | + - joel-lindstrom |
| 13 | + - navjotm |
| 14 | + - tapanm-msft |
| 15 | + - sbahl10 |
| 16 | +--- |
| 17 | + |
| 18 | +# Add hierarchy to inspection ___location |
| 19 | + |
| 20 | +The Inspections sample app allows users to create and perform inspections in the app. There are three apps, one per persona to perform, manage, and review Inspections. The three apps are—Inspections, Manage Inspections and Review Inspections. |
| 21 | + |
| 22 | +By default, the Inspections app is designed for a single store. But what if you perform inspections on multiple stores? You'll want to add a table for stores to the app and let the user select the store in which they are performing inspections so that you can track at which store the inspection was performed. |
| 23 | + |
| 24 | +In this article, we'll learn how to update the app to add a hierarchy of stores so that inspections can be performed for different stores. |
| 25 | + |
| 26 | +## Prerequisites |
| 27 | + |
| 28 | +To complete this lesson, we'd need the ability to log in into Microsoft Teams that will be available as part of select Microsoft 365 subscriptions, and will also need to have the Inspections sample app for Teams installed. This app can be installed from <https://aka.ms/TeamsInspection>. |
| 29 | + |
| 30 | +## Edit the Inspections app |
| 31 | + |
| 32 | +1. Login into Teams, and right-click on Power Apps app from the left-pane, and select **Pop out app**. |
| 33 | + |
| 34 | +1. Select **Build** from the top ribbon. |
| 35 | + |
| 36 | +1. Select the team in which the Inspections app is installed. |
| 37 | + |
| 38 | +1. Select Inspections to open the app in Power Apps Studio. |
| 39 | + |
| 40 | +### Add a new table called Store |
| 41 | + |
| 42 | +1. Select **Data** from the left-pane. |
| 43 | + |
| 44 | +1. Select **+ Add data**. |
| 45 | + |
| 46 | +1. Select the **+ Create new table**. |
| 47 | + |
| 48 | +1. Enter table name Store and select **Create**. |
| 49 | + |
| 50 | +1. Select the **Add Column** button to add a new column. |
| 51 | + |
| 52 | +1. Enter column name as "Store Number", and select **Create**. |
| 53 | + |
| 54 | +1. Add a few sample records in the table, and select **Close.** |
| 55 | + |
| 56 | +  |
| 57 | + |
| 58 | +### Add a column to capture Store in the Area Inspections table |
| 59 | + |
| 60 | +1. Select **Data** from the left navigation menu. |
| 61 | + |
| 62 | +1. Locate the **Area Inspections** table, and select **...** (ellipsis). |
| 63 | + |
| 64 | +1. Select **Edit data**. |
| 65 | + |
| 66 | +1. Select **Add Column**, and enter the table name as "Store", type as "Lookup", and related table as "Store". |
| 67 | + |
| 68 | +1. Select **Create**. |
| 69 | + |
| 70 | +1. Select **Close**. |
| 71 | + |
| 72 | +### Add a new screen with a Gallery of Stores |
| 73 | + |
| 74 | +1. Select the Tree view from the left-pane. |
| 75 | + |
| 76 | +1. Select **+ New** screen from the tree view. |
| 77 | + |
| 78 | +1. Select blank layout. |
| 79 | + |
| 80 | +1. Rename the screen to "StoreSelectionScreen". |
| 81 | + |
| 82 | +1. Update the **Fill** property to `gblAppStyles.Background.Fill`. |
| 83 | + |
| 84 | +1. Select **+ Insert** to add a gallery to the new screen. |
| 85 | + |
| 86 | +1. Select **Stores** as the data source. |
| 87 | + |
| 88 | +1. Rename the gallery to "StoresGallery". |
| 89 | + |
| 90 | +1. Set the following properties for the gallery **StoresGallery**. |
| 91 | + |
| 92 | + | Property | Value | |
| 93 | + | - | - | |
| 94 | + | Template size | 108 | |
| 95 | + | Font size | 20 | |
| 96 | + | Height for Title4 | 45 | |
| 97 | + | Font size for label Subtitle4 | 18 | |
| 98 | + | Height for label Subtitle4 | 45 | |
| 99 | + |
| 100 | +1. Go to the **Items** screen, and copy the **Back** button from the top of the screen. |
| 101 | + |
| 102 | +1. Paste the copied button on the new screen. |
| 103 | + |
| 104 | +1. Repeat the previous steps to copy the label **lblIndividualAreasHeader** from Items screen that reads the text as ___location to the new screen. |
| 105 | + |
| 106 | +1. Set **Y** property of the label to `btnBackToHome_1.Y+btnBackToHome_1.Height`. |
| 107 | + |
| 108 | +1. Set the following properties of the gallery **StoresGallery**. |
| 109 | + |
| 110 | + | Property | Value | |
| 111 | + | - | - | |
| 112 | + | Y | `btnBackToHome_1.Height+lblIndividualAreasHeader_1.Height` | |
| 113 | + | Height `Parent.Height-btnBackToHome_1.Height- lblIndividualAreasHeader_1.Height` | |
| 114 | + | OnSelect | `Set(gblSelectedStore,ThisItem);Navigate('Items Screen')` | |
| 115 | + |
| 116 | +1. Go to the Items, select the **Back to home** button on top, and update the following button properties. |
| 117 | + |
| 118 | + | Property | Value | |
| 119 | + | - | - | |
| 120 | + | OnSelect | `Navigate(StoreSelectionScreen, ScreenTransition.Fade)` | |
| 121 | + | Text | `"Back to Store Selection"` | |
| 122 | + |
| 123 | +1. Go to **Checklist Steps** screen. |
| 124 | + |
| 125 | +1. Select the **OnSelect** property of the screen, and update the patch function for updating the **Area Inspections** app to add the store value in the formula. |
| 126 | + |
| 127 | + ```powerapps-dot |
| 128 | + , Store: gblSelectedStore |
| 129 | + ``` |
| 130 | +
|
| 131 | +  |
| 132 | +
|
| 133 | +### Update the Welcome Screen navigation |
| 134 | +
|
| 135 | +1. From the tree view, select the Welcome Screen. |
| 136 | +
|
| 137 | +1. Select the button **Perform an Inspection** (btnInspect). |
| 138 | +
|
| 139 | +1. Update the **Navigate** function from the **OnSelect** property of the button so that it takes you to the **StoreSelectionScreen** screen instead of the **Items** screen, with the remaining of the formula unchanged. |
| 140 | +
|
| 141 | + ```powerapps-dot |
| 142 | + Navigate( |
| 143 | + StoreSelectionScreen, |
| 144 | + ScreenTransition.Fade |
| 145 | + ); |
| 146 | + ``` |
| 147 | + |
| 148 | +  |
| 149 | + |
| 150 | +### Publish the Inspections app |
| 151 | + |
| 152 | +All the changes to the Inspections app are completed. The app can now be published by selecting the **Publish to Teams** button on the top-right. |
| 153 | + |
| 154 | + |
| 155 | + |
| 156 | +## Edit the Review Inspections app |
| 157 | + |
| 158 | +1. Open **Power Apps** in Teams. |
| 159 | + |
| 160 | +1. Select **Build** tab from the top ribbon. |
| 161 | + |
| 162 | +1. Select the team in which the Inspections app is installed. |
| 163 | + |
| 164 | +1. Select **Review Inspections** to open the app in the editor. |
| 165 | + |
| 166 | +1. Select **Data** from the left-pane. |
| 167 | + |
| 168 | +1. Select **+ Add** data, and add the **Stores** table to this database for this app. |
| 169 | + |
| 170 | +1. Refresh the **Area Inspections** table so that the **Stores** column shows up in the table. |
| 171 | + |
| 172 | +### Add a label to display the store on the Inspection |
| 173 | + |
| 174 | +1. Open the tree view, and select the Items Screen. |
| 175 | + |
| 176 | +1. Under the group **grpInspectionSteps**, select label called "lblInspection_SubmissionDetails", and update it's **Text** property to the following formula. |
| 177 | + |
| 178 | + ```powerapps-dot |
| 179 | + If( |
| 180 | + DateDiff( |
| 181 | + Date( |
| 182 | + Year(galInspections.Selected.createdon), |
| 183 | + Month(galInspections.Selected.createdon), |
| 184 | + Day(galInspections.Selected.createdon) |
| 185 | + ), |
| 186 | + Today(), |
| 187 | + Days |
| 188 | + ) = 0, |
| 189 | + If( |
| 190 | + DateDiff( |
| 191 | + Date( |
| 192 | + Year(galInspections.Selected.createdon), |
| 193 | + Month(galInspections.Selected.createdon), |
| 194 | + Day(galInspections.Selected.createdon) |
| 195 | + ), |
| 196 | + Today(), |
| 197 | + Hours |
| 198 | + ) \> 0, |
| 199 | + galInspections.Selected.Store.Name & " | Submitted by " & |
| 200 | + galInspections.Selected.createdby.'Full Name' & ", " & DateDiff( |
| 201 | + Date( |
| 202 | + Year(galInspections.Selected.createdon), |
| 203 | + Month(galInspections.Selected.createdon), |
| 204 | + Day(galInspections.Selected.createdon) |
| 205 | + ), |
| 206 | + Today(), |
| 207 | + Hours |
| 208 | + ) & " hrs ago", |
| 209 | + If( |
| 210 | + DateDiff( |
| 211 | + Date( |
| 212 | + Year(galInspections.Selected.createdon), |
| 213 | + Month(galInspections.Selected.createdon), |
| 214 | + Day(galInspections.Selected.createdon) |
| 215 | + ), |
| 216 | + Today(), |
| 217 | + Hours |
| 218 | + ) = 0, |
| 219 | + //"minutes ago" |
| 220 | + galInspections.Selected.Store.Name & " | Submitted by " & |
| 221 | + galInspections.Selected.createdby.'Full Name' & ", minutes ago" |
| 222 | + , |
| 223 | + If( |
| 224 | + DateDiff( |
| 225 | + Date( |
| 226 | + Year(galInspections.Selected.createdon), |
| 227 | + Month(galInspections.Selected.createdon), |
| 228 | + Day(galInspections.Selected.createdon) |
| 229 | + ), |
| 230 | + Today(), |
| 231 | + Days |
| 232 | + ) = 1, |
| 233 | + //"yesterday", |
| 234 | + galInspections.Selected.Store.Name & " | Submitted by " & |
| 235 | + galInspections.Selected.createdby.'Full Name' & ", yesterday", |
| 236 | + galInspections.Selected.Store.Name & " | Submitted by " & |
| 237 | + galInspections.Selected.createdby.'Full Name' & ", " & DateDiff( |
| 238 | + Date( |
| 239 | + Year(galInspections.Selected.createdon), |
| 240 | + Month(galInspections.Selected.createdon), |
| 241 | + Day(galInspections.Selected.createdon) |
| 242 | + ), |
| 243 | + Today(), |
| 244 | + Days |
| 245 | + ) & " days ago" |
| 246 | + ) |
| 247 | + ) |
| 248 | + ) |
| 249 | + ) |
| 250 | + ``` |
| 251 | +
|
| 252 | +## Test the app |
| 253 | +
|
| 254 | +1. Open the Inspections app in the team in which it's installed. |
| 255 | +
|
| 256 | +1. Select the Welcome screen from the tree view if running inside Studio, and select **Preview**. |
| 257 | +
|
| 258 | +1. Select **Perform an Inspection**. |
| 259 | +
|
| 260 | +1. Verify that the Store Selector screen opens. |
| 261 | +
|
| 262 | +1. Select a store. The next screen should be the Items screen. |
| 263 | +
|
| 264 | +1. Select a ___location. |
| 265 | +
|
| 266 | +1. Select a food inspection checklist on the next screen. |
| 267 | +
|
| 268 | +1. Select the button **Begin Inspection**. |
| 269 | +
|
| 270 | +1. Answer the questions that are part of the inspection, and then select **Review Inspection**. |
| 271 | +
|
| 272 | +1. Select **Submit Inspection** on the next screen. |
| 273 | +
|
| 274 | +1. Now, login into the **Review Inspections** app by selecting the **Review Inspection** tab on the top in the team where it's installed. |
| 275 | +
|
| 276 | +1. Select the ___location that you selected earlier to show a list of inspections performed. |
| 277 | +
|
| 278 | +1. Select the inspection that was submitted earlier. |
| 279 | +
|
| 280 | +1. The screen displays the store name. |
| 281 | +
|
| 282 | +  |
| 283 | +
|
| 284 | +### See also |
| 285 | +
|
| 286 | +- [Understand Inspection sample apps architecture](inspection-architecture.md) |
| 287 | +- [Customize Inspection sample app](customize-inspections.md) |
| 288 | +- [Customize sample apps](customize-sample-apps.md) |
| 289 | +- [Sample apps FAQs](sample-apps-faqs.md) |
| 290 | +- [Use sample apps from the Teams store](use-sample-apps-from-teams-store.md) |
| 291 | +
|
| 292 | +[!INCLUDE[footer-include](../includes/footer-banner.md)] |
0 commit comments