How to create a Power App based on Modern Microsoft Lists with Zero Code

Photo of author

By Ragnar Heil

In this article, we’ll explore how to create a new Power App based on an existing Microsoft List without any coding skills. Why might it matter to you? You can develop No-Code Modern Apps which don’t look like ordinary lists, are much more powerful and contain many media elements. They work better and  more responsive in Teams and on Mobile Devices – including rich search capabilities and simple ways to add more content.  

Modern Lists are easy to create and use, provide many benefits and advantages compared to Excel Sheets. If you think that default Look and Feel of Lists does not match with your requirements and you need advanced formatting in a mobile App, then this Blogpost is written for you. We walk you step-by-step through the process of building a Power App based on a Modern List.  

Please make sure you read Part 1 of this Blogpost Series where I have explained how to import Excel Sheets into modern Microsoft Lists. If you want to learn how to create a Subscription Tracker with Microsoft Lists and Power Automate, you’ll want to check out our 2nd Blogpost in this series at Practical365.com

image
Figure 1: Microsoft Lists Standard View


You can create Lists like Issue Tracker, Contact Lists, Project Bugs, Launch Planning, Ideation Collection, Asset Manager etc. In this blog, I will be creating a Contact List that is associated with a hypothetical virtual event. This list would then potentially be used for e-marketing campaigns, etc. You can find more templates for your Microsoft Lists App in the Microsoft Lists Resource Center

Step 1) Getting Started by Adding Power Apps to Microsoft Teams

 First, you will want  to navigate over to the Team in Microsoft Teams where you would like to add your Power App. You’ll then add Power Apps as a new tab in your Teams Channel, and be sure to doublecheck first that you’re not adding it to  a Teams Chat.

image 1
Figure 2: Adding Power Apps to Microsoft Teams

If you follow this step for the first time, it will create a new Power Platform environment including Dataverse Databases. Capacity can be monitored and managed in Microsoft Power Apps Admin Center. If you have an existing environment, then next steps look different.

Step 2) Create a new Contact App for virtual events in PowerApps

In the next dialog you could choose from existing Apps or add a new one (see arrow)

image 3
Figure 3: Create a new App in Power Apps

Next, you’ll want to name your App (in my case it was ‘Virtual Event Contact List April 2021’). It is already assigned correctly to the corresponding Team:

image 4
Figure 4: Naming your Power Apps

Step 3) Add SharePoint as Data Source

Now that the app is pinned to the appropriate Team, you’ll want to click on the PowerApps icon in the left navigation sidebar. Next, you’ll click on ‘Data’ where you’ll insert ‘SharePoint,’ and from there you’ll want to select the correct  SharePoint account.

image 5
Figure 5: Adding SharePoint as Data Source to your Power App

From there you will have your choice of SharePoint Lists,  so pick your ‘Virtual Event Contact List’ (or however you named it) and then click ‘connect.’ You’ll want to use the SharePoint URL for the location of your specified list but you can also pick from ‘Recent Sites,’ which in this case would be “Sales and Marketing” since the list lives somewhere on that site:

image 6
Figure 6: Selecting and adding SharePoint Site to your Power App

Now that you are in the right SharePoint site, you’ll need to select the desired  list, and then click “connect:”

image 7
Figure 7: Selecting existing Microsoft Lists to your Power App

Once connected, you are now ready to customize properties within your List to best fit your needs.

Step 4) Customize your Power Apps form according to your design needs:

With Lists, you can change properties such as font size, font type, font color, alignment, position, display mode (disabled, edit, view) and much more.

image 8
Figure 8: customize your Power Apps

If connection settings are fine and you have chosen a background image (not mandatory), you should see your data from Microsoft Lists rendered and displayed:

image 9
Figure 9: Microsoft Lists Data displayed as a Power Apps

You can edit inputs to your forms like Text Boxes, Date Picker, List Boxes, Radio Groups, Slides, Ratings, Timer, Pencil input, rich text editors plus Media elements like images, video, Microsoft Stream, Microphone recording button, Audio files, PDF viewers, 3D objects and much more

image 10
Figure 10: Insert Objects and Media elements

Step 5) Preview your App in PowerApps.

Once your customizations are complete, the List can be published. Prior to publishing your new List, you’ll want to preview in PowerApps first to ensure everything looks correct:

image 11
How to create a Power App based on Modern Microsoft Lists with Zero Code 20
image 12
Figure 11:  Preview of your Power App inside Power Apps Studio

Please check every field if values are mapped correct. It can be that e.g. mobile or land line number are mixed, then field mapping can be changed here. This is also the right place to change field properties from editable to viewable or vice versa.

image 13
Figure 12: Changing field mapping

Step 6) Publish to Teams

Once your List is finalized, with one single click you can publish your new Power App straight to Microsoft Teams:

image 14
Figure 13: Publish your Power App to Microsoft Teams

Next you select your Teams channel and tab:

image 15
Figure 14: Select Microsoft Teams Channel for your Power App

Permission Management is already done now because you have shared it within a Teams Channel context. Sounds easy, isn’t it?

At this point, it is very important that you ‘Allow’  access when the ‘Almost there’ window pops up:

image 16
Figure 15: Allowing and granting SharePoint access to your Power App


Step 7) Edit list content in Power Apps embedded in Teams

Welcome to Microsoft Teams and your Power Apps which is located in the select Teams and Channel!

Of course, you can edit your list items/conference attendees or registrations within the Power App. They will automatically be changed in your new Microsoft List as well. I am adding “Angela” to Adele Vance’s Name

image 17
Figure 16: Modify your list records within your Power App

Step 8) Verify that your new PowerApp has updated Microsoft Lists

image 18
Figure 17: Modified Microsoft Lists records within Lists

Voila  – that’s it! Now you see how Excel Sheets can be imported into a Modern Microsoft Lists based on SharePoint and used as Power App inside of Microsoft Teams

 

Power Apps with Teams – Quo vadis?

Let me assume that you might need have noticed that there are few different ways to create PowerApps based on a Microsoft Lists and use it also within Microsoft Teams. Which approach is recommended and how does a guideline can look like? This table compares 3 major approaches and explains Pros and Cons:

 ProContra
Create Power Apps within Teams–  Dataverse created
– 10,000 Dataverse for Teams environments per Tenant
– Teams Power Apps App not only for default environment  
– Dataverse database is always created although you might not need it
– Limited sharing options (only in Teams Permissions M365 Security Group context)
– Power App only visible in mobile Teams App
– Power Apps cannot be embedded to SharePoint etc.
Use Power App Studio to create Power App and publish to Teams– Newer controls and fluent design features
– Per User License optional
– Dataverse database is not always created although you might not need it
– Advanced sharing options (not only in Teams and M365 Security Group context)
– Power App visible in mobile Teams App AND Mobile Power Apps App
– Power Apps can be embedded to SharePoint etc.  
– Mobile Power Apps App only for default environment
Create Power Apps Forms within Microsoft Lists– Unlimited but only one Power Apps Form per List
– Dataverse database is not created although you might not need it
– Power App cannot be used isolated from her assigned List
– Power Apps cannot be embedded to SharePoint etc.  
Figure 17: Comparison of 3 different approaches to build PowerApps

Check licensing guide here for latest figures: https://go.microsoft.com/fwlink/?linkid=2085130

Please also note thatControls and design options are not less in Option 1 or 2, just different.

(Thank you, Tomislav Karafilov, for you input here!)


It is also interesting not only to compare 3 different approaches to build Power Apps with Teams but also look deeper into Tabular Data Sources.  MVP April Dunnham has published a helpful video

image 19
Figure 18: Data Source Comparisons

We focused on Dataverse for Teams, the “lite” Version of Dataverse. It is good to get started here and fulfill your business needs. Don’t skip to consider and reflect these aspects:

  • Governance
  • Limitations
  • Ownership
  • Scalability

Power Apps created within Microsoft Teams create a Dataverse databases automatically which also means that owners of the Team are going to be responsible for this database. Power Platform Admins can’t control the creation of Dataverse for Teams, they could only disable Teams Apps via Teams App policies.

Nevertheless possibilities are endless because Dataverse cannot only be used for Power Apps, also for Power Automate and Power Virtual Agent Bots.

Summary

Now that we have walked through the basic steps on how to import a classic Excel spreadsheet into Microsoft Lists (Part 1 of our Blog post Series), and build a Power App on top with zero code. Interesting for you? If yes, then we can create an additional blog post and cover advanced formatting in Power Apps. One of the next blog posts is going to cover Power BI Dashboard based on Modern Lists.

If you don’t see the value for a Power App –  because you don’t need it for a mobile experience, advanced look and feels or working with Power Virtual Agents – you can still use these Lists within Teams – or in the new Microsoft List experience (mobile App or Web).

 Lots of new options to keep on track and sync with your lists collaboratively – and easier than ever!


Leave a Comment