Third step: Connect the data to the app

Completed

The table for saving vocabulary words is now ready. Next, the table needs to be connected to the app created in the earlier unit.  

Step 11

In Teams, open Power Apps again using the icon on the left side of the Teams window.

If the icon didn’t remain pinned to the left side of the window, select the apps icon to find it and open it again.

Screenshot of Power Apps menu bar with build button highlighted.

Select Build in the navigation bar at the top of the window. Find and select the vocabulary app in the list that pops up in the middle of the window.

Select With data from the options in the middle of the window. This brings up options for Select a data source. Choose Select a data source.

Screenshot of start the screen showing with data and with layout options.

The zoom control under the window can enlarge the view.

Screenshot of zoom function in Power Apps.

  • Select the table of words created earlier (the demo table is Vocabularies). It'll appear on the left side of the screen.

You may see the plural version of the title rather than the singular version. It's the same table so select it.

Screenshot of window to select data source option.

Power Apps creates several controls, so they don't have to be added one by one. This includes a form for adding, editing, and viewing data. The look and feel of this form can be changed. 

It's easier to view the app on a small screen if there is only one field per row instead of three. That view option can be adjusted in this step. 

Step 12

Select the blank white space below the fields in the form. A blue border will appear around the entire form to show that it's selected.

Change the number of columns from one to three on the properties panel.

Screenshot of configuration screen for EditForm1.

Step 13

Select Save at the top right of the Power Apps canvas window to save the app.

After the initial manual save process, Power Apps automatically saves changes at regular intervals. Save intervals can be adjusted in the settings. However, it's always a good idea to manually save the app before exiting the interface or quitting Teams.

Screenshot of save, preview, and publish to Teams buttons.

  • Preview the app by selecting the Preview icon at the top right next to Save.

The vocabulary list and words are now connected, and the app is working!

Screenshot of vocabulary app build in Power Apps.

Publish the app to Teams

With the vocabulary app created, it' time to publish it to Teams so others can use it. These steps explain the process. 

Step 14

  • Select Publish to Teams in the top right of the window next to Preview.

Screenshot of buttons to save, preview, and publish to Teams.

  • On the next screen, select Edit details to add a description to the app. Adding a description provides users with information about the app or how it's to be used.

Screenshot of Publish to Teams screen showing the vocabulary app.

Add an app description in the text box that appears. When finished, select the X at the top right to close the window.

Screenshot of settings options for an app that was created.

Select the team channel where the app is to be published. To create a new Teams channel for the app, select the + button at the top right (or create the new channel prior to publishing the app to Teams).

Screenshot of selecting a channel in Teams.

Select Save and close at the bottom right.

The app will be added as a tab in a channel in the selected team.

Screenshot of build screen showing vocabulary app as a tab.

Customization options

Congratulations for successfully creating the vocabulary app in Microsoft Teams! Getting the context of these basic building blocks ensures a better understanding of how to further customize the app.

Test this new app and experiment with customizing screen colors and other options. Adding the app to a class team is a great way to test it with students.

Understand Power Apps Studio contains an overview of Power Apps Studio in Microsoft Teams along with information on app customization options. Information about the options available in the app settings is also included. Explore Power Apps studio to learn the possibilities!

Screenshot of overview of Power Apps Studio.