#PowerPlatformTip 50: 'Use TemplateApp'

TL;DR: The PnP Power Apps Design Toolkit ships a Material Design component library (16 components, imported as a solution) and a template .msapp with theme variables in OnStart and a collection of about 6,000 SVG icons. Import the solution once per environment, start every new app from the template, and insert the components from Get more components so they stay linked to the library.

💡 Challenge

Starting a new canvas app often results in inconsistent styling and missing UI components, slowing down development. Building a consistent design system from scratch, matching fonts, spacing, button states, and icons across every screen, is exactly the kind of repetitive setup work that’s easy to shortcut on a deadline, which is how apps end up with three different button styles by the time they ship.

✅ Solution

Use the Material Design part of the PnP Power Apps Design Toolkit: a ready-made component library plus a template app that already uses the same colour variables, so standard controls and library components match from the first screen.

🔧 How It’s Done

1. Get the files.

🔸 Repository: github.com/pnp/powerapps-designtoolkit, folder materialdesign components → solution.

🔸 You need two files: the solution MaterialDesignComponentLibrary_1_0_0_8.zip and the template MD_Template_v1_1.msapp.

2. Import the component library.

🔸 In make.powerapps.com → Solutions → Import solution, import the ZIP into every environment where you build apps with these components.

3. Start the app from the template.

🔸 Open the .msapp in Power Apps Studio. The toolkit documents this route: Create → pick any data source tile (Dataverse, SharePoint or Excel, not Blank app) → Open → select the .msapp file.

🔸 Save it under a new name and add it to your solution.

4. Insert the components from the library.

🔸 Insert (+) → Get more components at the bottom → select the MaterialDesign component library. The controls then appear under Library components.

🔸 Do this in every new app. Components copied from the demo app aren’t linked to the library and won’t receive updates.

5. Apply your branding.

🔸 Change primaryColor and the other values at the top of App.OnStart. Standard controls in the template already use these variables (for example defaults.primaryColor instead of a fixed RGBA value), so the whole app follows.

6. Use the icons.

🔸 The template contains the collection MaterialDesignIcons with about 6,000 SVG icons. Read one by name, for example in an Image control:

LookUp(MaterialDesignIcons, name = "death-star", svgPath)

🔸 The icon data adds roughly 700 kB to the app. If you don’t need it, delete it from the Data pane.

7. Run the App checker before you ship.

🔸 The repository was last updated in February 2024. After importing, run App checker and fix any warnings about deprecated functions or properties once, instead of inheriting them silently.

🎉 Result

You start every new app with consistent colours, 16 linked library components and about 6,000 SVG icons. When the library is updated, importing the newer solution prompts each app to take over the new component versions.

🌟 Key Advantages

🔸 Accelerates app development with prebuilt components.

🔸 Ensures consistent styling and user experience.

🔸 Saves time with reusable assets and documentation.

🔸 Components live in one component library per environment, so an update reaches every app that uses them.

🛠️ FAQ

1. Can I modify the Material Design components to match my organization’s branding?

Yes. Colours and settings come from the variables in App.OnStart. Change them there and both the library components and the template’s standard controls follow.

2. Can I use the icons in commercial apps?

The toolkit itself is published under the MIT license. The icons come from the community project Material Design Icons (github.com/Templarian/MaterialDesign) with its own license, so check that license too before you ship a commercial app.

3. What happens when a new version of the library is released?

Import the newer solution into the environment. When you edit an app that uses the library components, Power Apps Studio asks you to review the component update. The template itself is only a starting point: changes to a newer template don’t reach apps you already built from it.

🔗 Related Tips

🔸 #PowerPlatformTip 55: ‘Picking Colors’ - grab your own brand’s color palette to apply on top of this template.

🔸 #PowerPlatformTip 86: ‘Free Power Apps Icons’ - more free SVG icons if the template’s collection isn’t enough.