Microsoft offers a set of sample apps, built with the Power Platform, that you can install for your team in MS Teams. These apps serve as fully functioning apps, that you can use as they are, but mainly they can be used as a great example on how Microsoft wants us to build Dataverse for Teams apps. They are the most production-ready apps out there, built by Microsoft itself.
These apps usually contain multiple canvas apps, some Power Automate flows and sometimes even a Power Virtual Agent component.
I use them as inspiration:
- Looking for a way to support multiple languages in PowerApps: The examples got you covered.
- Looking for a way to split functionalities between a general user application and a management application: The examples got you covered.
- Looking for a way to use consistent styling and theming in your PowerApp: The examples got you covered.
- Looking to build a fancy loading screen: The examples got you covered.
You can find the sample apps and how to install them in your Teams environment here. Microsoft currently has a collection of 10 sample apps. A couple of the most prominent are shown below. The link also describes how you can install these sample apps to try them out for yourself.
Editing a sample app
After you’ve installed a sample application, you are able to use it in Teams, or you can edit the application straight from the Power Apps app in Teams.
Warning: these apps are complex and can be very overwhelming.
When editing the app, you can modify whatever you want or extract parts of it that you want to reuse in your own Power App development. This is were things can get difficult: The Power Apps studio is not like VS Code. There’s no way to jump to for example the definition of a variable to inspect it and see what’s really behind it. You need to find where the variable is declared yourself. In the screenshot below, we see that the styling of the Ideas label for property FocusedBorderThickness is coming from:
gblAppStyles.Label.FocusedBorderThicknessBut where is gblAppStyles defined? I went looking in the App.OnStart property, but no luck. Rather than browsing through all possible properties to find where it might be defined, it’s easier to find it when you unpack the solution in VS Code and can just execute a Search on the entire application.
Find the MsApp file
So I wanted to download the Employee Ideas solution and unpack it to open it in VS Code. I’ve read before that Dataverse for Teams apps do exist in their own solution, but for some weird Microsoft logic, they’re only visible in the Solutions section of the Power Automate Portal. Once you log in to https://flow.microsoft.com you can see your Teams under Environments in the upper right corner. Select your Team and go to Solutions. Bingo! The Employee Ideas solution is there. However, the sample apps are installed as Managed Solution, and we’re not able to export these. Only unmanaged solutions can be exported.
So we’re looking for another way to get the solution exported… Luckily, Microsoft is using GitHub for most of its documentation and resources. So after some searching, I stumbled upon the OfficeDev GitHub account. If you look there for the name of the Sample App, you’ll quickly find a GitHub repo for it. Some examples below:
On the releases page of the repo, you’ll find the DataverseSolution. This is the one you’ll need to download.
Once you download and extract it, you’ll find the *.msapp files. There can be multiple if the Sample App contains for example both the main app and a manager app. Now let’s see how we can find what’s inside.
Unpack using VS Code
VS Code is a very lightweight and extensible code editor. Microsoft has created an extension called Power Platform Tools that contains a CLI for managing Power Platform assets. You can install it through the extension menu of VS Code.
Once installed, you can use the terminal in VS Code to unpack a *.msapp file. Put the file in a folder and browse to that folder in the terminal. Use the following command to unpack the file, with the name of the msapp file and a link to a directory where the unpacked version needs to be stored:
pac canvas unpack --msapp **NAME_OF_THE_MSAPP** --sources **DIRECTORY_TO_STORE_SOURCE**The result should look something like the below screenshot. You can open the directory in which you’ve unpack the msapp file in VS Code.
Conclusion
Once you’ve opened the directory in VS Code, you’ll see what’s really behind a canvas application. It’s a collection of json and yaml files that store the entirety of the configuration of your Power App. Under the Src folder, you can find the definition of the screens.
Now, you can easily use the VS Code search functionality to look for any variables that you weren’t able to find back in the Power Apps Studio. In our example, let’s look for the gblAppStyles variable. We can see that the variable is defined in the OnVisible property on the Loading Screen.
Being able to unpack a solution like the Sample Apps offers a tool to learn from these well-built and professional Power Apps. It makes it easier to find your way through the setup and understand how these apps are built.
If you know a better way to achieve the same result, let me know!