Add FluentUI Datalist grid in Canvas Power Apps or Custom Pages with Creator Kit Power Platform

Microsoft Power Apps are a set of robust application development platform which provides maximum flexibility to integrate latest UI and UX trends like Microsoft Fluent UI and material designs with tools.

Here in this post we will discuss how to use Fluent UI components like Details List, Dialogs, Panels, Command Bars etc in Power Apps such as Canvas App and Custom Pages for a better productivity with less code and no code way for a consistent look and feel of the app design. A sample App screenshot given below.

So lets start. Follow the below steps to understand the way the Power Apps Creator Kit works.

STEP 1 – Overview of Power Platform Creator Kit

The Power Platform Creator Kit helps you to create Power Apps with easy-to-use sample controls and components using Fluent UI. The kit contains a component library with several commonly used Power Apps component framework controls such as Dialogs, Panels. Progress Bard, Spinners etc, and other utilities that increase developer productivity.

STEP 2 – Pre-requisites for Creator Kit

Enable Code Component Feature for your environment using Admin Power Platform. Go to admin.powerplatform.com and select Environments link. Select correct environment and click Setting icon.

In the settings select Product Features and select Power Apps Component framework for canvas app ON.

STEP 2 – How to Install Creator Kit

Download the managed Solution of Creator Kit from the below path.

Once the ZIP file downloaded, import the solution in environment using Power Apps solution area.

After import successful you see the solution is now available in the solution list.

In the apps section you will find the below Apps.

You have successfully installed the Creator Kit in your Environment.

STEP 3 – How to use Creator Kit

(1) Fluent Theme Designer App

You can Use The Fluent Theme Designer App to generate Themes of your choice and export Theme Codes and use in your canvas App. In App area open the Fluent Theme Designer App.

You can select element colors of your choice and Export theme, copy the generated code and paste in the canvas app AppTheme global variable using App OnStart event.

In the below powerfx The AppTheme global variable is initialized on App OnStart property.

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"
  }
});

(2) Canvas App Template

Canvas App template App is designed to help you quickly start creating responsive Fluent UI–based canvas apps. They come with the custom components preloaded and attached to a Theme JSON variable, which reduces time to start developing.

(3) Creator Kit Reference App

The reference app is to learn about each component, get recommended best practices for the optimal user experience, interact with each component, and see behind the properties to the implementation code that enables their behavior. You can explore different Fluent UI components and its properties here before use in your app.

You check the best practices and Do’s, Don’ts using this app before using in your own app.

STEP 4 – Working DEMO with Different Components of Creator Kit package

Watch the video below to learn how different components are sing in Canvas Apps and Custom Pages using Creator Kit in my YouTube Channel.

https://www.youtube.com/channel/UCx28J1vtdIZId2ztVgFiJPQ

Hope this helps.

Follow my blog for more trending topics on Dynamics 365, Azure, C#, Power Portals and Power Platform. For training, Courses and consulting, call to us at +91 832 886 5778 I am working more for community to share skills in Dynamics 365 and Power Platform. Please support me by subscribing my YouTube Channel. My YouTube Channel link is this : https://www.youtube.com/user/sppmaestro