Power Apps Creator Kit Overview 07-13-2022 01:46 AM

[aprildunnam]

If you want to speed up your Power Apps development and create a consistent look and feel then you need to check out the Power Apps Creator Kit. The Power Apps Creator Kit is an open source solution that contains several canvas and code components to use in your Power Apps. It also includes a Fluent UI theme editor for styling your apps and all the components use the Fluent UI. I'll cover what this Power Apps Creator Kit contains, how to download and install and how to use the canvas and code components in your apps.

Download the Power Apps Creator Kit: https://aka.ms/creatorkit

watch?v=L599ttvkXwI

[ckelsoe]

I was super excited to see the Creator Kit. Unfortunately, attempting to look at it seems to require a premium license. The premium license requirements immediately limits the value of this kit. There is a great opportunity lost to gain citizen developers who need to create solutions to show the value of PowerApps to management in order to grow into the premium license. There seems to be a lot of focus in this kit for canvas apps. However, I had to connect to DataVerse in order to even install it. I am very disappointed in the decision to tie this to premium licensing as it made the entire kit useless.

[DavesTechTips]

Hello @ckelsoe.

I think I might have some good news for you. I don't think the Creator Kit Requires a premium license, but the Creator Kit Reference app in the solutions is connecting to Dataverse for the Accounts, contact and Organisations tables for demonstration purposes. This is why you are prompted for a premium license or trail when you launch the app.

If you install the solution into an environment and use the code components in your Canvas apps that don't talk to any external data sources or Dataverse, you should be good to go without premium licensing.

FYI: Please see below article for component framework=

https://docs.microsoft.com/en-us/power-apps/developer/component-framework/overview#licensing

I hope this helps

Dawid van Heerden

Follow on Twitter: @davestechtips

Subscribe to YouTube: https://www.youtube.com/davestechtips?sub_confirmation=1

**If you found this reply helpful, please give it a thumbs up and Accept as Solution to close the topic and make it easier to find for other people with similar questions.

[Anonymous]

To follow up on Daves post, I did create an app using Reference App, and it did say it was premium. I removed the 3 dataverse connections within the app and it changed to standard.

Hope this helps.

[dsoden]

Love the Creator Kit & Component Library in General -

@aprildunnam Can you pass this suggestion below up the stack to adjust the Code Component "Fluent Theme Designer (1.0.8)"?

Fluent Theme Designer and Export Theme function, specifically the code in side the code block itself... Suggestion is to wrap the HEX values in the {key:value} inside the ColorValue() function so you can more easily reference the colors in the app. Otherwise the maker has to wrap this Text Value to cast it as a usable color, every time it's used and it's very in efficient.

Real use case as things are currently. Setting the FILL property of a Button control.

ColorValue(AppTheme.palette.themePrimary)

 With this suggestion, one only has to use the following:

AppTheme.palette.themePrimary

This is how pasting the code in App.OnStart looks now

Set(
    AppTheme,
    {
        palette: {
            themePrimary: "#0f3a57",
            themeLighterAlt: "#d3e1eb",
            themeLighter: "#afc8d8",
            themeLight: "#8eafc6",
            themeTertiary: "#7098b3",
            themeSecondary: "#5683a1",
            themeDarkAlt: "#3f6f8e",
            themeDark: "#2c5c7c",
            themeDarker: "#1b4a69",
            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"
        }
    }
)

With the suggested changes the code generated would look like this

Set(
    AppTheme,
    {
        palette: {
            themePrimary: ColorValue("#0f3a57"),
            themeLighterAlt: ColorValue("#d3e1eb"),
            themeLighter: ColorValue("#afc8d8"),
            themeLight: ColorValue("#8eafc6"),
            themeTertiary: ColorValue("#7098b3"),
            themeSecondary: ColorValue("#5683a1"),
            themeDarkAlt: ColorValue("#3f6f8e"),
            themeDark: ColorValue("#2c5c7c"),
            themeDarker: ColorValue("#1b4a69"),
            neutralLighterAlt: ColorValue("#faf9f8"),
            neutralLighter: ColorValue("#f3f2f1"),
            neutralLight: ColorValue("#edebe9"),
            neutralQuaternaryAlt: ColorValue("#e1dfdd"),
            neutralQuaternary: ColorValue("#d0d0d0"),
            neutralTertiaryAlt: ColorValue("#c8c6c4"),
            neutralTertiary: ColorValue("#a19f9d"),
            neutralSecondary: ColorValue("#605e5c"),
            neutralPrimaryAlt: ColorValue("#3b3a39"),
            neutralPrimary: ColorValue("#323130"),
            neutralDark: ColorValue("#201f1e"),
            black: ColorValue("#000000"),
            white: ColorValue("#ffffff")
        }
    }
)