Rajeev Pentyala – Microsoft Power Platform

If you are a beginner or expert in Power Apps Canvas Apps, building a consistent and intuitive user experience is always challenging, as there were no standard guidelines.

Using the Creator Kit (Preview) from Microsoft Power CAT team, now you can seamlessly create consistent and effective user experiences using pre-built controls and components built on the Fluent UI framework.

In this blog post, lets see how to install and use the ‘Creator Kit’.

Prerequisites:

To use ‘Creator Kit’, following Prerequisites must be fulfilled.

• A Power Platform environment with Dataverse database 
• Power Apps component framework feature enabled (Refer next section on steps to enable).
  • Feature has to be enabled before you import ‘Creator Kit’ solution.
• System Customizer security role is needed to use the Creator Kit components.
• A Premium Power Apps license is required to develop and use apps with custom components.

Enable Power Apps component framework feature:

• Code components contain code that may not be generated by Microsoft and can potentially access security tokens and data when rendered in Power Apps Studio.
• Hence to add code components to your app, you need to enable the Power Apps component framework feature in each environment.
• By default, the Power Apps component feature is enabled for model-driven apps but not for Canvas Apps.
• To enable sign in to Power Apps with ‘System Administrator’ role.
• Select Settings , and then select Admin Center.
• Go to the Environment, and click on ‘Settings’

• From ‘Settings’ screen, navigate to ‘Product -> Features’.

• Turn on Power Apps component framework for canvas apps, and then select Save.

Assuming all prerequisites are configured, lets proceed with ‘Creator Kit’ installation and usage.

Install ‘Creator Kit’:

• ‘Creator Kit’ comes as a ‘Managed’ solution and download the solution from here.

• Connect to Power Apps maker portal and pick the Environment where you want to install the ‘Creator Kit’.
• Import the solution.

‘Creator Kit’ Components:

Once you imported the ‘Creator Kit’ solution, open the Solution and you would find following components.

• Reference App – Canvas app for you to learn each component.
• Templates – Quickly start creating responsive Fluent UI-based apps.
• Canvas App Template – A template of canvas app for reuse.
• Custom Page Template – A template of custom page for reuse.
• Theme Editor App – Canvas App. Generates theme JSON object for styling components consistently.
• Canvas components – Fluent UI canvas components.
• Code components – Fluent UI code components.

Now that we know how to install and the components of ‘Creator Kit’, lets dive in to the details of each component.

Creator Kit Reference App:

• This canvas app helps as a guide and allows you to learn about each component, recommended best practices for optimal user experience and see the implementation code (Select the Code tab to see the Power Fx formulas used).

Canvas Template App:

‘Canvas Template’ App contain all the reusable components of ‘Creator Kit’. To use the ‘Creator Kit’ components in your own Canvas App, follow the steps.

• Create a new Solution. I’ve named my solution as ‘Use Creator Kit‘.
• Open the Solution and add the ‘Canvas Template‘ app which is part of ‘Creator Kit’ managed solution, by using Add existing > Apps > Canvas action in the ribbon.
• Now open the ‘Canvas Template‘ app by using ‘Edit’ option.

• You will get following warning popup because the app contain custom code components. Continue by clicking ‘Open app’.

• Now, create a copy of the app by select File > Save As and enter a new name for the copy. I named my app as ‘Canvas App from Template‘.

• Click ‘Save’ and the copy will appear in the same solution (i.e., ‘Use Creator Kit’ in my case).

• Now we have our own App (i.e., Canvas App from Template) to start with, remove the original ‘Canvas Template‘ app from the solution to avoid confusion.

• Open our ‘Canvas App from Template‘ app and you would find 2 screens (Template Screen and Controls Screen).

• ‘Controls Screen’ contain all the code components of ‘Creator Kit’ for our development reference. We can select any of the controls and understand the properties which helps while building our screens.

• ‘Template Screen’ contain placeholders to head start your development.

• You can customize ‘Template Screen’ as per your requirement and can also add ‘Code Components/Library Components’ installed from ‘Creator Kit’ as needed.

Fluent Theme Designer App:

Use this app to generate a Theme JSON object for styling components consistently. To generate follow below steps.

• Either open the ‘Creator Kit’ solution which you downloaded and imported or go to ‘Apps’ from maker portal and select the ‘Fluent Theme Designer App’ and ‘Play’.
• Choose the Primary color, Text color, and Background color values as per your need.

• Select Export theme from the top-right corner to generate the Power Fx expression version of the Theme JSON, then copy the value from the panel.

• Save the Theme JSON as a global variable in the OnStart property of your app, with the ‘palette’ code block as a property of the AppTheme object variable.

Set( AppTheme, {
  palette: {
    themePrimary: "#0078d4",
    themeLighterAlt: "#eff6fc",
    themeLighter: "#deecf9",
    themeLight: "#c7e0f4",
    themeTertiary: "#71afe5",
    themeSecondary: "#2b88d8",
    themeDarkAlt: "#106ebe",
    themeDark: "#005a9e",
    themeDarker: "#004578",
    neutralLighterAlt: "#faf9f8",
    neutralLighter: "#f3f2f1",
    neutralLight: "#edebe9",
    neutralQuaternaryAlt: "#e1dfdd",
    neutralQuaternary: "#d0d0d0",
    neutralTertiaryAlt: "#c8c6c4",
    neutralTertiary: "#a19f9d",
    neutralSecondary: "#605e5c",
    neutralPrimaryAlt: "#3b3a39",
    neutralPrimary: "#323130",
    neutralDark: "#201f1e",
    black: "#000000",
    white: "#ffffff"
  }
});

Canvas components:

Components are reusable building blocks for canvas apps so that app makers can create custom controls to use inside an app, or across apps using a component library.

In ‘Creator Kit’ components are defined in the component library called Power CAT Component Library.

Code Components:

App makers can use Power Apps component framework (PCF) to create code components that can be used in their canvas apps.

• In ‘Creator Kit’, ‘Code Components’ are defined as individual custom controls in the solution.

• View the ‘Creator Kit’ code components details in the components reference page.

Hope you got some knowledge on the usage of ‘Creator Kit’ and I highly recommend to explore this.

The best part is its an open source project and you can view the code in the latest version of the ‘Creator Kit’ in the GitHub repository

🙂