|
| 1 | +--- |
| 2 | +title: Customize Inspection Steps |
| 3 | +description: Learn about how the steps followed in the Inspection sample apps can be customized |
| 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 | +# Inspections App – Customize inspection steps |
| 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 | +In this article, we'll learn how to customize inspection steps in the user app. For example, removing the ability to add pictures to checklist steps. This customization is important because just deleting the particular control can cause issues with responsiveness, and the look and feel of the app can get affected. |
| 23 | + |
| 24 | +## Prerequisites |
| 25 | + |
| 26 | +To complete this lesson, we'd need the ability to sign-in to 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>. |
| 27 | + |
| 28 | +## Open the Inspections app |
| 29 | + |
| 30 | +1. Login into Teams, and right-click Power Apps from the left-pane, and select **Pop out app**. |
| 31 | +1. Select **Build** from the top ribbon. |
| 32 | +1. Select the team where the Inspections app is installed. |
| 33 | +1. Select Inspections to open the app in the editor. |
| 34 | + |
| 35 | +  |
| 36 | + |
| 37 | +1. Select the tree view from the left-pane. |
| 38 | + |
| 39 | +1. Select to open the Items screen. |
| 40 | + |
| 41 | +  |
| 42 | + |
| 43 | +1. Press **Alt** key on the keyboard, and select Ambient or Backstage to open the record. The Food Inspection checklists page opens. |
| 44 | + |
| 45 | +1. Press **Alt** key on the keyboard, and select any one of the options (Detailed Walk/Morning Store Walk). The Inspection Overview screen appears. |
| 46 | + |
| 47 | +1. Press **Alt** key on the keyboard, and select **Begin Inspection**. The Inspection list screen opens. |
| 48 | + |
| 49 | +  |
| 50 | + |
| 51 | +1. This article explains the following scenarios: |
| 52 | + |
| 53 | + - [Hide the Add details section](#hide-the-add-details-section) |
| 54 | + |
| 55 | +  |
| 56 | + |
| 57 | + - [Hide just the Photo option](#hide-the-photo-option) |
| 58 | + |
| 59 | +  |
| 60 | + |
| 61 | + - [Hide the Task option](#hide-the-task-option) |
| 62 | + |
| 63 | +  |
| 64 | + |
| 65 | +## Hide the Add Details section |
| 66 | + |
| 67 | +Hiding the Add Details section includes more than just setting the Visible property of all those controls to False. |
| 68 | + |
| 69 | +1. Set the **Visible** property for the **Add details** label, and the other labels (Photo, Note, and Task) and their icons to "False". |
| 70 | + |
| 71 | +  |
| 72 | + |
| 73 | +  |
| 74 | + |
| 75 | +1. Set the **Visible** property for **grpNote**, **grpTask**, and **grpPhoto** to "False". |
| 76 | + |
| 77 | +  |
| 78 | + |
| 79 | +1. We'll also need to shrink the white space containing the Photo, Note, and Task buttons to avoid wasting any extra space. Select **btnActionBackground** control from the tree view, select somewhere on the white space to highlight the box space. |
| 80 | + |
| 81 | +  |
| 82 | + |
| 83 | +1. Open the **Height** property of the control, and comment the existing formula with `//` at the beginning of each line. |
| 84 | + |
| 85 | +1. Add the following formula. |
| 86 | + |
| 87 | + ```powerapps-dot |
| 88 | + btnOK.Y + btnOK.Height - Self.Y + 20 |
| 89 | + ``` |
| 90 | +
|
| 91 | +  |
| 92 | +
|
| 93 | +The white space shrinks, and leaves no extra space hiding the entire **Add Details** section. |
| 94 | +
|
| 95 | +## Hide the Photo Option |
| 96 | +
|
| 97 | +This scenario requires to revert all the changes made above. And then, we'll have to set the **Visible** property of the Photo option label, and icon to "False", and then move the Note option and the Task Options to the left. |
| 98 | +
|
| 99 | +1. To hide the Photo option, select **grpPhoto** from the tree view, and set **Visible** property to "False". |
| 100 | +
|
| 101 | +  |
| 102 | +
|
| 103 | +1. The Note option needs to move to the left in place of the Photo option. Copy the X property of the Photo Icon and paste it in the X property of the Note icon (notice that the label also moves along with the icon—this is because the Note label’s X property is dependent on the Note icon’s X property, and changes accordingly thus leaving no empty spaces – the Task option also reacts similarly). |
| 104 | +
|
| 105 | + ```powerapps-dot |
| 106 | + btnImageBackground.X+18 |
| 107 | + ``` |
| 108 | +
|
| 109 | +  |
| 110 | +
|
| 111 | +## Hide the Task Option |
| 112 | +
|
| 113 | +This scenario requires to revert all the changes made above. With this scenario, we only want to hide the Task section. |
| 114 | +
|
| 115 | +Change the **Visible** property for **grpTask** to "False". |
| 116 | +
|
| 117 | + |
| 118 | +
|
| 119 | +## Publish the Inspection app |
| 120 | +
|
| 121 | +All the changes to the Inspection app are completed. |
| 122 | +
|
| 123 | +1. Select **Publish to Teams** on the top-right. |
| 124 | +
|
| 125 | +  |
| 126 | +
|
| 127 | +1. Select **Next**. |
| 128 | +
|
| 129 | +  |
| 130 | +
|
| 131 | +1. Select **Save and close**. |
| 132 | +
|
| 133 | +  |
| 134 | +
|
| 135 | +## Test the app |
| 136 | +
|
| 137 | +On the Inspection list screen, once you make the change for any of the above listed scenarios, select **Preview** to run the app. |
| 138 | +
|
| 139 | +Make sure to check for responsiveness by shrinking the size of the screen when testing in the Window mode. |
| 140 | +
|
| 141 | +### See also |
| 142 | +
|
| 143 | +- [Understand Inspection sample apps architecture](inspection-architecture.md) |
| 144 | +- [Customize Inspection sample app](customize-inspections.md) |
| 145 | +- [Customize sample apps](customize-sample-apps.md) |
| 146 | +- [Sample apps FAQs](sample-apps-faqs.md) |
| 147 | +- [Use sample apps from the Teams store](use-sample-apps-from-teams-store.md) |
| 148 | +
|
| 149 | +[!INCLUDE[footer-include](../includes/footer-banner.md)] |
0 commit comments