Intro Power Apps Creator Kit
In the first part of this series of articles about the Power Platform Creator Kit, we learned what is this kit, what we can use it for, and how to install it.
In this second issue, we will explore the applications that are part of the package, and how to use them as a learning and reference tool.
Reference Apps
After installing the kit in the environment, there will be two Apps available, one is a Canvas App and the other a Model-Driven app.
If we open these apps, we will see a demo of each control, we will be able to play with it and we will learn how we can use them, with code examples for each.
Controls Info
In both apps, you will find every control in the kit, along with different configurations for it, a description, best practices and sample code.
The sample code part is very useful and will allow us to reproduce the examples step by step.
Take for example the screenshot below. There are three controls used in it.
lblExampleTitle_9 is the auto-width label control.
sldWords is a standard slider.
iconResizeWidthIndicator is a fluent icon control.
You also have the properties of each control, along with their values. The property values can contain simple text or values, or Power FX formulas, like the example below.
(If you need a cheat sheet about Power FX we have this free resource for you: Formulas Power Apps Glossary).
If you want to reproduce this example, you need to add these three controls to your canvas screen, then copy each property value and set it to each control.
The formula above returns a number of words from the Array that contains the lorem ipsum text. The number of words returned depends on the value selected in the slider.
Theme Designer
Another Canvas App available with the kit is the Fluent Theme Designer. This designer will allow us to do four important things:
1. Configure a Color Scheme by selecting 3 main colours.
2. Preview how those colours will look in the controls of the kit.
3. Validate if the chosen colours have any accessibility issues. For example, the colours may not have enough contrast, which will make the text harder to read in some circumstances.
4. Export it to be able to use it in our apps.
App Template Power Apps Creator Kit
The Power CAT team made it really easy for us to start using these controls. Another Canvas App included in the solution is the Canvas Template.
We can use this App to quickly start playing around with the controls or maybe even use it as the starting point for new Apps. The idea is that you create a new solution, add the template app, open the App in design mode, and then create a copy of it using the Save As functionality.
What’s in the template?
You have two screens, the first contains a basic structure of containers, with a header and a central space. This is the basic structure for a responsive app.
The second screen contains some of the most common controls with their properties and formulas set up, so you can see them in action.
Controls
Find below more screenshots of some of the controls available.
Additional Information Power Apps Creator Kit
- Creator KIT Components reference: Full list of all the controls, with detailed documentation.
https://learn.microsoft.com/en-us/power-platform/guidance/creator-kit/components - Fluent UI Controls: Full reference of the controls included in the Fluent UI library.
https://developer.microsoft.com/en-us/fluentui#/controls/ - Scott Durow’s example of the Detail List control: The creator of the Ribbon Workbench Configurator shows how to use some of the controls in the kit.
https://www.youtube.com/watch?v=1SCs1D70vLQ
Conclusion
We hope you enjoyed reading it. If you have any questions, or you need help customizing your Power Platform apps, don’t hesitate to let us know. Feel free to leave any feedback or comments below.