Add hierarchy to inspection location

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.

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.

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.

Watch this video to learn how to add hierarchy to inspection location:

Prerequisites

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.

Edit the Inspections app

  1. Login into Teams, and right-click on Power Apps app from the left-pane, and select Pop out app.

  2. Select Build from the top ribbon.

  3. Select the team in which the Inspections app is installed.

  4. Select Inspections to open the app in Power Apps Studio.

Add a new table called Store

  1. Select Data from the left-pane.

  2. Select + Add data.

  3. Select the + Create new table.

  4. Enter table name "Store" and select Create.

  5. Select the Add Column button to add a new column.

  6. Enter column name as "Store Number", and select Create.

  7. Add a few sample records in the table, and select Close.

    Store Table

Update Items screen

Update the formula for the following controls to allow the Items screen to show inspections.

  1. Search for and select lblIssues_Header label in the Tree view.

  2. Select the Text property.

  3. Replace the following section of the formula.

    Remove formula section:

    With(
    {
        varDefault: "Issues reported (" & CountRows(
            Filter(
                locSelectedInspection,
                Outcome = 'Inspection Outcome'.Issue
            )
        ) & ")",
        varOOBTextId: "_translateVariable_IssuesHeader",
        varParam0: "(" & CountRows(
            Filter(
                locSelectedInspection,
                Outcome = 'Inspection Outcome'.Issue
            )
        ) & ")"
    },
    

    Add formula section:

    With(
    {
        varDefault: "Issues reported (" & CountRows(
            Filter(
                galInspections.Selected.'Area Inspection Steps',
                Outcome = 'Inspection Outcome'.Issue
            ).'Area Inspection Step'
        ) & ")",
        varOOBTextId: "_translateVariable_IssuesHeader",
        varParam0: "(" & CountRows(
            Filter(
                galInspections.Selected.'Area Inspection Steps',
                Outcome = 'Inspection Outcome'.Issue
            ).'Area Inspection Step'
        ) & ")"
    },
    
  4. Search for and select lblNoIssues_Header label in the Tree view.

  5. Select the Text property.

  6. Replace the following section of the formula.

    Remove formula section:

    With(
    {
        varDefault: "No issues (" & CountRows(
            Filter(
                locSelectedInspection,
                Outcome = 'Inspection Outcome'.OK || Outcome = 'Inspection Outcome'.'N/A'
            )
        ) & ")",
        varOOBTextId: "_translateVariable_NoIssuesHeader",
        varParam0: "(" & CountRows(
            Filter(
                locSelectedInspection,
                Outcome = 'Inspection Outcome'.OK || Outcome = 'Inspection Outcome'.'N/A'
            )
        ) & ")"
    },
    

    Add formula section:

    With(
    {
        varDefault: "No issues (" & CountRows(
            Filter(
                galInspections.Selected.'Area Inspection Steps',
                Outcome = 'Inspection Outcome'.OK || Outcome = 'Inspection Outcome'.'N/A'
            ).'Area Inspection Step'
        ) & ")",
        varOOBTextId: "_translateVariable_NoIssuesHeader",
        varParam0: "(" & CountRows(
            Filter(
                galInspections.Selected.'Area Inspection Steps',
                Outcome = 'Inspection Outcome'.OK || Outcome = 'Inspection Outcome'.'N/A'
            ).'Area Inspection Step'
        ) & ")"
    },
    
  7. Search for and select galNoIssuesAttachments gallery in the Tree view.

  8. Select the Items property.

  9. Replace the following section of the formula.

    Remove formula section:

    ThisItem.'Area Inspection Images'
    

    Add formula section:

    LookUp('Area Inspection Steps','Area Inspection Step'=ThisItem.'Area Inspection Step').'Area Inspection Images'
    
  10. Search for and select galIssuesAttachments gallery in the Tree view.

  11. Select the Items property.

  12. Replace the following section of the formula.

    Remove formula section:

    ThisItem.'Area Inspection Images'
    

    Add formula section:

    LookUp('Area Inspection Steps','Area Inspection Step'=ThisItem.'Area Inspection Step').'Area Inspection Images'
    
  13. Search for and select galNoIssues gallery in the Tree view.

  14. Select the Items property.

  15. Replace the following section of the formula.

    Remove formula section:

    Sort(
    Filter(
        locSelectedInspection,
        Outcome = 'Inspection Outcome'.OK || Outcome = 'Inspection Outcome'.'N/A'
    ),
    Value(Sequence),
    Ascending
    )
    

    Add formula section:

    Sort(
    Filter(
        galInspections.Selected.'Area Inspection Steps',
        Outcome = 'Inspection Outcome'.OK || Outcome = 'Inspection Outcome'.'N/A'
    ),
    Sequence,
    Ascending
    )
    
  16. Search for and select galIssues gallery in the Tree view.

  17. Select the Items property.

  18. Replace the following section of the formula.

    Remove formula section:

    Sort(
    Filter(
        locSelectedInspection,
        Outcome = 'Inspection Outcome'.OK || Outcome = 'Inspection Outcome'.'N/A'
    ),
    Value(Sequence),
    Ascending
    )
    

    Add formula section:

    Sort(
    Filter(
        galInspections.Selected.'Area Inspection Steps',
        Outcome = 'Inspection Outcome'.OK || Outcome = 'Inspection Outcome'.'N/A'
    ),
    Sequence,
    Ascending
    )
    

Add a column to capture Store in the Area Inspections table

  1. Select Data from the left navigation menu.

  2. Locate the Area Inspections table, and select ... (ellipsis).

  3. Select Edit data.

  4. Select Add Column, and enter the table name as "Store", type as "Lookup", and related table as "Store".

  5. Select Create.

  6. Select Close.

  1. Select the Tree view from the left-pane.

  2. Select + New screen from the tree view.

  3. Select blank layout.

  4. Rename the screen to "StoreSelectionScreen".

  5. Update the Fill property to gblAppStyles.Background.Fill.

  6. Select + Insert to add a gallery to the new screen.

  7. Select Stores as the data source.

  8. Rename the gallery to "StoresGallery".

  9. Set the following properties for the gallery StoresGallery.

    Property Value
    Template size 108
    Font size 20
    Height for Title4 45
    Font size for label Subtitle4 18
    Height for label Subtitle4 45
  10. Go to the Items screen, and copy the Back button from the top of the screen.

  11. Paste the copied button on the new screen.

  12. Repeat the previous steps to copy the label lblIndividualAreasHeader from Items screen that reads the text as location to the new screen.

  13. Set Y property of the label to btnBackToHome_1.Y+btnBackToHome_1.Height.

  14. Set the following properties of the gallery StoresGallery.

    Property Value
    Y btnBackToHome_1.Height+lblIndividualAreasHeader_1.Height
    Height Parent.Height-btnBackToHome_1.Height- lblIndividualAreasHeader_1.Height
    OnSelect Set(gblSelectedStore,ThisItem);Navigate('Items Screen')
  15. Go to the Items, select the Back to home button on top, and update the following button properties.

    Property Value
    OnSelect Navigate(StoreSelectionScreen, ScreenTransition.Fade)
    Text "Back to Store Selection"
  16. Go to Checklist Steps screen.

  17. Select the OnVisible property of the screen, and update the patch function for updating the Area Inspections app to add the store value in the formula.

    , Store: gblSelectedStore
    

    Add Store to the Patch function

Update the Welcome Screen navigation

  1. From the tree view, select the Welcome Screen.

  2. Select the button Perform an Inspection (btnInspect).

  3. 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.

    Navigate(
    StoreSelectionScreen,
    ScreenTransition.Fade
    );
    

    Navigate to Store Selection screen

Publish the Inspections app

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.

Publish to Teams

Edit the Review Inspections app

  1. Open Power Apps in Teams.

  2. Select Build tab from the top ribbon.

  3. Select the team in which the Inspections app is installed.

  4. Select Review Inspections to open the app in the editor.

  5. Select Data from the left-pane.

  6. Select + Add data, and add the Stores table to this database for this app.

  7. Refresh the Area Inspections table so that the Stores column shows up in the table.

Add a label to display the store on the Inspection

  1. Open the tree view, and select the Items Screen.

  2. Under the group grpInspectionSteps, select label called "lblInspection_SubmissionDetails", and update it's Text property to the following formula.

    If(
        DateDiff(
            Date(
                Year(galInspections.Selected.createdon),
                Month(galInspections.Selected.createdon),
                Day(galInspections.Selected.createdon)
                ),
            Today(),
            Days
                ) = 0,
    If(
        DateDiff(
            Date(
                Year(galInspections.Selected.createdon),
                Month(galInspections.Selected.createdon),
                Day(galInspections.Selected.createdon)
                ),
            Today(),
            Hours
                ) > 0,
        galInspections.Selected.Store.Name & " | Submitted by " &
        galInspections.Selected.createdby.'Full Name' & ", " & DateDiff(
        Date(
            Year(galInspections.Selected.createdon),
            Month(galInspections.Selected.createdon),
            Day(galInspections.Selected.createdon)
            ),
        Today(),
        Hours
                ) & " hrs ago",
    If(
        DateDiff(
            Date(
                Year(galInspections.Selected.createdon),
                Month(galInspections.Selected.createdon),
                Day(galInspections.Selected.createdon)
                ),
        Today(),
        Hours
        ) = 0,
    //"minutes ago"
    galInspections.Selected.Store.Name & " | Submitted by " &
    galInspections.Selected.createdby.'Full Name' & ", minutes ago"
    ,
    If(
        DateDiff(
        Date(
            Year(galInspections.Selected.createdon),
        Month(galInspections.Selected.createdon),
        Day(galInspections.Selected.createdon)
            ),
        Today(),
        Days
        ) = 1,
        //"yesterday",
        galInspections.Selected.Store.Name & " | Submitted by " &
        galInspections.Selected.createdby.'Full Name' & ", yesterday",
        galInspections.Selected.Store.Name & " | Submitted by " &
        galInspections.Selected.createdby.'Full Name' & ", " & DateDiff(
        Date(
            Year(galInspections.Selected.createdon),
            Month(galInspections.Selected.createdon),
            Day(galInspections.Selected.createdon)
            ),
        Today(),
        Days
        ) & " days ago"
    )
    )
    )
    )
    

Test the app

  1. Open the Inspections app in the team in which it's installed.

  2. Select the Welcome screen from the tree view if running inside Studio, and select Preview.

  3. Select Perform an Inspection.

  4. Verify that the Store Selector screen opens.

  5. Select a store. The next screen should be the Items screen.

  6. Select a location.

  7. Select a food inspection checklist on the next screen.

  8. Select the button Begin Inspection.

  9. Answer the questions that are part of the inspection, and then select Review Inspection.

  10. Select Submit Inspection on the next screen.

  11. Now, login into the Review Inspections app by selecting the Review Inspection tab on the top in the team where it's installed.

  12. Select the location that you selected earlier to show a list of inspections performed.

  13. Select the inspection that was submitted earlier.

  14. The screen displays the store name.

    Store showing on Location screen

See also