Customize sample apps installed from Teams store

In this article, you'll learn about customizing sample apps installed from the Teams store. For example, you may need to change the company logo, update the data inside the sample apps to fit your business requirement, add or remove controls on the screens to extend the app.

Prerequisites

Before using this app:

  1. Find the app in the Microsoft Teams store.
  2. Install the app.
  3. Set up the app for the first use.

For details about the above steps, go to Use sample apps from the Teams store.

Note

  • Sections of this article uses one of the available sample apps from the Teams store as an example. The tables, controls, screens and other components of the apps may vary depending on the app you installed. Use discretion when customizing the app that you select.
  • Read Sample app updates before you customize sample apps to understand the impact of new releases to the sample app versions.

Open the sample app in Power Apps Studio

To start with customizing the sample apps, the first step is to open the app inside Power Apps Studio.

  1. Sign in to Teams.

  2. Select More added apps (More added apps).

  3. Select Power Apps.

    Select Power Apps app

  4. Select Build tab.

  5. Select the team environment where you installed the sample app.

  6. Select Installed apps.

  7. Select the sample app that you installed.

  8. If prompted, select the location.

More information: Edit an app in Power Apps Studio

Remove sample data

When you install sample apps, the tables are pre-populated with sample data. The following table lists the sample apps and the list of tables with the sample data to be removed:

Sample app Tables
Bulletins (Preview) Bulletins
Bulletin Bookmarks
Bulletin Categories
Bulletin Contacts
Bulletin FAQs
Bulletin FAQ Categories
Bulletin Links
Bulletin Link Categories
Bulletin Read Receipts
Employee ideas Employee Ideas
Employee Idea Campaigns
Employee Idea Files
Employee Idea Questions
Employee Idea Responses
Inspection Area Inspection Steps
Area Inspections
Area Inspection Checklist Steps
Area Inspection Checklists
Area Inspection Locations
Area Inspection Location Types
Area Inspection Groups
Area Inspection Task
Issue reporting Issue Reports
Issue Report Questions
Issue Report Templates
Issue Report Categories
Milestones (Preview) Projects
Project Activities
Project Milestones
Project Team Members
Project User Settings
Project Work items
Project Work Item Categories
Project Work Item Priorities
Project Work Item Statuses

To remove data from the sample apps:

  1. Open the sample app (for example, Manage inspections) in Power Apps Studio.

  2. Select Data from the left pane.

  3. Select Data - ellipsis next to the table name (for example, Area Inspection Task for Manage inspections app).

  4. Select Edit data.

  5. Delete all rows containing sample data.

    Delete rows

  6. Close the visual editor.

  7. Repeat the previous steps for the remaining tables.

Add your logo to the loading screen

  1. Open the sample app (for example, Inspection) in Power Apps Studio.

  2. Select Tree view from the left pane.

  3. If not already selected, select Landing Screen.

  4. Select Insert.

  5. Select Image control in Media.

    Add image

  6. From the properties pane on the right side, select the Image drop-down, and then select + Add an image file.

    Add image file

  7. Select image for your company logo, and then select Open.

  8. Position and size image control to the position you want on loading screen.

    Company logo

Change the welcome screen text

Note

The Inspection app welcome screen greeting text uses a formula containing global variables to correctly display the desired terminology for inspections and items being inspected. Use caution when changing this formula.

  1. Open the sample app (for example, Inspection) in Power Apps Studio.

  2. Select the text label control with the greeting text Glad to have you here.

    The formula for the greeting text is in this format:

    "Glad to have you here, we are ready for you to " & If(Lower(gblWorkType)="inspection", "inspect", Lower(gblWorkType)) & Switch(
    Left(
        Lower(areaLabel),
        1
    ),
    "a",
    " an ",
    "e",
    " an ",
    "i",
    " an ",
    "o",
    " an ",
    "u",
    " an ",
    " a "
    ) & Lower(areaLabel)
    
  3. Select the formula bar.

  4. Select the phrase Glad to have you here.

  5. Update the greeting text, such as We are happy that you are here.

    "We are happy that you are here, we are ready for you to " & If(Lower(gblWorkType)="inspection", "inspect", Lower(gblWorkType)) & Switch(
    Left(
        Lower(areaLabel),
        1
    ),
    "a",
    " an ",
    "e",
    " an ",
    "i",
    " an ",
    "o",
    " an ",
    "u",
    " an ",
    " a "
    ) & Lower(areaLabel)
    

    Update greeting text in formula

Change the screen background color

Note

The Inspection app leverages global theme variables to ensure consistent user experience. If you modify a screen fill, the modified screen will no longer use the standard app theme.

  1. Open the sample app (for example, Inspection) in Power Apps Studio.

  2. Select Tree view from the left pane.

  3. Select Welcome Screen from Tree view.

  4. Select Fill from the property list on the top-left.

  5. In formula bar, replace the formula with the color that you want.

    Screen background fill color will be set to the selected background color.

    Change background color

Bulk edit data

If you want to quickly edit the data in the app, you can open the table and modify or delete data.

Caution

Sample apps uses several related tables, such as Area Inspection Locations and Area Inspection Location Types for Inspection app. Use caution when deleting records from the tables without checking data relationship and dependencies.

  1. Open the sample app (for example, Inspection) in Power Apps Studio.

  2. Select Data from the left pane.

  3. Select Data - ellipsis next to the table name (for example, Area Inspection Location Types for Inspection app).

  4. Select the cell inside the Visual Editor, for example Food in the Name column.

  5. Replace the text with the value you want.

  6. Close the visual editor.

    Data in the app should reflect the updated value, such as the location name in this example.

    Bulk edit data

Add a column to the app

Important

The Inspection app customization steps in this section covers some of the advanced configuration options. This example requires that you have familiarity with the Power Apps Studio, are comfortable with modifying formulas, and work with controls such as containers.

Consider a scenario where you have multiple stores, and you want to associate locations and inspections with specific stores.

Add Store Name text column to the Location table

  1. Open the Manage inspections app in Power Apps Studio.

  2. Select Data from the left pane.

  3. Select Data - ellipsis next to the table name (for example, Area Inspection Locations for Manage inspections app).

  4. Select Add column.

  5. Enter Name as "Store Name".

  6. Select Create.

  7. Close the visual editor.

    Add Store Name column

Add Store Name column to the location form

  1. Select the Locations Screen.

    Tip

    You can ignore the error about the use of the preview connectors in this app.

  2. In Tree view, search for btnArea_GroupedAreas.

  3. In the Grouped Areas on the form, drag the left edge to be parallel with the edge of the Title field.

    Note

    The Grouped Areas field control is in a container. Hence, the selected area may appear in a different part of the screen than where you see the column. Dragging the selected area resizes the column.

  4. Select Insert from the left pane.

  5. Select Label control.

  6. Position the Label so that it's aligned horizontally with Grouped areas, and vertically with the Area type.

    Label control position

  7. Select Text from the property list on the top-left.

  8. Select the formula bar.

  9. Change the formula to Store Name.

  10. Select Insert from the left pane.

  11. Select Text box control.

  12. Drag the text box control to be aligned horizontally with Grouped area and vertically with Area type.

  13. Select Value from the property list on the top-left.

  14. In the formula bar, replace the current value with gblLocation.'Store Name'

  15. Select ColorBackground from the property list on the top-left.

  16. In the formula bar, enter "White".

    ColorBackground property

  17. Select Display mode from the property list on the top-left.

  18. In the formula bar, enter "Edit" if not already present.

  19. Hold the ALT key on your keyboard, and select the Edit.

    Edit with alt key pressed

  20. Select Tree view from the left pane.

  21. Search for btnAreaDetails_Save and select the returned control.

  22. Expand the formula bar.

  23. At the end of the 17th line, add a comma and this formula:

    'Store Name':Microsoft_CoreControls_TextBox1.Value
    

    This section of the formula should now look like the following:

    {
    	msft_name: txtArea_EditTitle.Text,
    	'Location Type': cmbAreaDetails_AreaType.Selected,
    	'Primary Image': picArea_UploadedImage.Image, 'Store Name':Microsoft_CoreControls_TextBox1.Value
    }
    

    Note

    If the updated formula shows error, verify the text box name for the store name. For example, it may be Microsoft_CoreControls_TextBox2 instead of Microsoft_CoreControls_TextBox1, depending on your changes.

  24. Select the label control added in step 5.

  25. Select the Y property from the property list on the top-left.

  26. Select the formula bar.

  27. Change the formula to:

    If(gblEditLocation,250,200)
    
  28. Select text box added in step 11.

  29. Select the Y property from the property list on the top-left.

  30. Select the formula bar.

  31. Change the formula to:

    If(gblEditLocation,282,232)
    
  32. Hold the CTRL key on your keyboard, and select both the store name label and the text box.

  33. Select Visible property from the property list on the top-left.

  34. Select the formula bar.

  35. Change the formula to:

    If(gblViewInspection, false, true)
    

    Position changes with property Y

Publish app updates to Teams

To save and publish the changes to the sample app:

  1. Select Save from the top-right.

  2. Select Publish to Teams

  3. Select Next.

  4. To publish updated version of an app to an existing active tab, select Save + close.
    To add published version of an app to a new tab in a different channel, Select Add a tab (Add a tab) for the channel you want, and then select Save + close.

More information: Publish and add an app to Teams

See also

Note

Can you tell us about your documentation language preferences? Take a short survey.

The survey will take about seven minutes. No personal data is collected (privacy statement).