Skip to content

Commit 14d1c49

Browse files
committed
2327179
1 parent 55998f0 commit 14d1c49

File tree

2 files changed

+44
-52
lines changed

2 files changed

+44
-52
lines changed

powerapps-docs/maker/TOC.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2266,6 +2266,8 @@
22662266
href: ../teams/customize-inspections.md
22672267
- name: Add hierarchy inspection ___location
22682268
href: ../teams/inspections-hierarchy-locations.md
2269+
- name: Customize inspection steps
2270+
href: ../teams/customize-inspection-steps.md
22692271
- name: Issue reporting
22702272
items:
22712273
- name: Issue reporting

powerapps-docs/teams/customize-inspection-steps.md

Lines changed: 42 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -17,92 +17,82 @@ contributors:
1717

1818
# Inspections App – Customize inspection steps
1919

20-
The Inspections Power Apps template allows users to create and perform inspections in the app. There are three apps, one per persona to perform,
21-
manage, and review Inspections. The three apps are – Inspections, Manage Inspections and Review Inspections.
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.
2221

23-
In this topic we will learn how to customize inspection steps in the user app e.g. removing the ability to add pictures to checklist steps. This is important
24-
because just deleting the particular control can cause issues with responsiveness and the look and feel of the app can get affected.
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.
2523

2624
## Prerequisites
2725

28-
To complete this lesson, we would need the ability to login into Microsoft Teams which will be available as part of select Microsoft 365 subscriptions and will also need to have the Inspections Power Apps template for Microsoft Teams installed. This app can be installed from aka.ms/TeamsInspection.
26+
To complete this lesson, we'd need the ability to sign-in to Microsoft Teams which 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>.
2927

30-
## Login into the Inspections app
28+
## Open the Inspections app
3129

32-
1. Login into Teams and right click Power Apps from the left menu and select **Pop out app**.
33-
2. Select Build from the top ribbon.
34-
3. Select the Team in which the Inspections app is installed.
35-
4. Select Inspections to open the app in the editor.
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.
3634

37-
![Open Inspection app](media/customize-inspection-steps/open-inspection-app.png "Open Inspection app")
35+
![Open Inspection app](media/customize-inspection-steps/open-inspection-app.png "Open Inspection app")
3836

39-
5. The Inspections app opens.
37+
1. Select the tree view from the left-pane.
4038

41-
6. Select the tree view from the left menu.
39+
1. Select to open the Items screen.
4240

43-
7. Select to open the Items screen.
41+
![Items Screen](media/customize-inspection-steps/items-screen.png "Items Screen")
4442

45-
![Items Screen](media/customize-inspection-steps/items-screen.png "Items Screen")
43+
1. Press **Alt** key on the keyboard, and select Ambient or Backstage to open the record. The Food Inspection checklists page opens.
4644

47-
8. Press Alt and select Ambient or Backstage to open the record.
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.
4846

49-
9. The Food Inspection checklists page opens.
47+
1. Press **Alt** key on the keyboard, and select **Begin Inspection**. The Inspection list screen opens.
5048

51-
10. Press Alt and select any one of the options (Detailed Walk/Morning Store Walk).
49+
![Inspection List Screen](media/customize-inspection-steps/inspection-list-screen.png "Inspection List Screen")
5250

53-
11. The Inspection Overview screen appears.
51+
1. This article explains the following scenarios:
5452

55-
12. Press Alt and select the Begin Inspection button.
53+
- [Hiding the Add details section](#hiding-the-add-details-section)
5654

57-
13. The Inspection list screen opens.
55+
![Hide Add Details Section](media/customize-inspection-steps/hide-add-details-section.png "Hide Add Details Section")
5856

59-
![Inspection List Screen](media/customize-inspection-steps/inspection-list-screen.png "Inspection List Screen")
57+
- [Hiding just the Photo option](#hiding-the-photo-option)
6058

61-
1. The three scenarios we will be covering in this topic are
59+
![Hide Photo Option](media/customize-inspection-steps/hide-photo-option.png "Hide Photo Option")
6260

63-
- **Hiding the Add details section completely**
61+
- [Hiding the Task option](#hiding-the-task-option)
6462

65-
![Hide Add Details Section](media/customize-inspection-steps/hide-add-details-section.png "Hide Add Details Section")
63+
![Hide Task Option](media/customize-inspection-steps/hide-task-option.png)
6664

67-
- **Hiding just the Photo option**
65+
## Hiding the Add Details section
6866

69-
![Hide Photo Option](media/customize-inspection-steps/hide-photo-option.png "Hide Photo Option")
67+
Hiding the Add Details section includes more than just setting the Visible property of all those controls to False.
7068

71-
- **Hiding the Task option**
69+
1. Set the **Visible** property for the **Add details** label, and the other labels (Photo, Note and Task) and their icons to "False".
7270

73-
![Hide Task Option](media/customize-inspection-steps/hide-task-option.png)
71+
![Add Details Label visibility False](media/customize-inspection-steps/lbladddetails-visible-false.png "Add Details Label")
7472

75-
## Customizing Inspection Steps
73+
![Photo Container grpPhoto visibility False](media/customize-inspection-steps/photo-visible-false.png "Photo Container grpPhoto visibility False")
7674

77-
### Hiding the Add Details section completely
75+
1. Set the **Visible** property for **grpNote**, **grpTask**, and **grpPhoto** to "False".
7876

79-
1. Hiding the Add Details section completely is not as easy as just setting the Visible property of all those controls to False.
80-
81-
2. First, set the Visible property for the Add details label and the other labels (Photo, Note and Task) and their icons to False.
82-
83-
![Add Details Label visibility False](media/customize-inspection-steps/lbladddetails-visible-false.png "Add Details Label")
84-
85-
![Photo Container grpPhoto visibility False](media/customize-inspection-steps/photo-visible-false.png "Photo Container grpPhoto visibility False")
86-
87-
3. Thus, set the Visible property for grpNote, grpTask and grpPhoto to false – and all the options get hidden.
88-
89-
![All icons visibility False](media/customize-inspection-steps/all-icons-visible-false.png "All icons visibility False")
77+
![All icons visibility False](media/customize-inspection-steps/all-icons-visible-false.png "All icons visibility False")
9078

91-
4. Then, we will 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 or just click somewhere on the white space to highlight the box space.
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.
9280

93-
![Adjust Button Background](media/customize-inspection-steps/adjust-button-background.png "Adjust Button Background")
81+
![Adjust Button Background](media/customize-inspection-steps/adjust-button-background.png "Adjust Button Background")
9482

95-
5. Open the Height property of the control and comment the existing formula.
83+
1. Open the **Height** property of the control, and comment the existing formula with `//` at the beginning of each line.
9684

97-
6. Then add the following formula – btnOK.Y + btnOK.Height - Self.Y + 20.
85+
1. Add the following formula.
9886

99-
![Adjust Button Height](media/customize-inspection-steps/adjust-button-height.png "Adjust Button Height")
87+
```powerapps-dot
88+
btnOK.Y + btnOK.Height - Self.Y + 20
89+
```
10090
101-
7. The white space shrinks and leaves no extra space/wastage.
91+
![Adjust Button Height](media/customize-inspection-steps/adjust-button-height.png "Adjust Button Height")
10292
103-
8. Thus, the entire Add Details section is hidden.
93+
The white space shrinks, and leaves no extra space hiding the entire **Add Details** section.
10494
105-
### Hiding just the Photo Option
95+
### Hiding the Photo Option
10696
10797
1. For this scenario (assuming all the changes made above were undone), we will 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.
10898
2. To hide the Photo option, we will select grpPhoto from the tree view and set Visible = false.
@@ -118,7 +108,7 @@ btnImageBackground.X+18
118108
119109
![Adjust X position of Note icon](media/customize-inspection-steps/adjust-note-icon-x.png "Adjust X position of Note icon")
120110
121-
### Hiding the Task Option Only
111+
### Hiding the Task Option
122112
123113
1. For this scenario (assuming all the changes made above were undone), we only want to hide the Task section.
124114
@@ -153,6 +143,6 @@ btnImageBackground.X+18
153143
- [Customize Inspection sample app](customize-inspections.md)
154144
- [Customize sample apps](customize-sample-apps.md)
155145
- [Sample apps FAQs](sample-apps-faqs.md)
156-
- [Use sample apps from the Microsoft Teams store](use-sample-apps-from-teams-store.md)
146+
- [Use sample apps from the Teams store](use-sample-apps-from-teams-store.md)
157147
158148
[!INCLUDE[footer-include](../includes/footer-banner.md)]

0 commit comments

Comments
 (0)