Hands On with the Power Platform Creator Kit

I’m currently working with a client that is interested in redesigning their old InfoPath Forms onto Power Apps. Since this is a very large project, with many Power App developers, I wanted to templatize this process as much as possible, while providing a very familiar interface for the end users. With this amount of change in an organization, PowerApps would introduce a TON of change. With that in mind, I decided to take the recently released Creator Kit for the Power Platform for a spin to see if this could help decrease our development time, and provide a repeatable experience for the users. I can honestly say, I was NOT disappointed 😁

What is the Creator Kit?

The Creator kit is simply a collection of PCF (Power Apps Component Framework) Code Components packaged into a Solution that you can then leverage in your Power Apps. These Code Components are built using the Fluent UI, so it provides a very familiar look and feel for users who are used to using Microsoft products, especially SharePoint. In addition, as a apart of the Creator Kit, there is also a Theme builder, so you can create a palette of colors for your Power Apps, which the custom controls can then leverage as you add them into your PowerApp, to provide a much easier experience when designing your UI.

Installing the Creator Kit

The Creator Kit consists of 2 Solutions: the Core PCF Components, and a solution that contains a Template and the Theme Builder. To get started with using these, you’ll first need to enable the ability for your Environment that you’ll use the Creator kit to allow PCF Components. You can enable this setting in the Features area of the Environment in the Power Platform Admin center:

Once that is turned on, you just need to download and install the Core solution from here: https://aka.ms/creatorkitdownload. I also recommend installing the Reference solution (either ‘Model’ or ‘Canvas’) which provides a Template, reference app, and the Theme Builder to help accelerate your learning with the Creator kit. For the purposes of this blog, we’ll be using the Canvas Reference solution, which can be downloaded here: https://aka.ms/creatorkitreferencecanvas

Once the solutions are imported, you will be able to then see the PowerApps that were installed:

Create a Copy of the Template

Now that I have the Canvas Template in my environment, the first thing I want to do is make my own copy of it, so I don’t overwrite the one that came with the Creator kit. To do this, I’ll create my own solution, add the template to it, save a copy of it, and then remove it from my solution.

Step 1. Create a new Solution:

Step 2. Add an Existing App to the solution, and choose Canvas Template:

Step 3. Edit the newly added Canvas Template App from your solution. Note that when you open the app, you’ll see the following warning, Click ‘Open App’

Step 4. When the App is opened in the Designer, click of ‘File’ and then click ‘Save As’. Save the App under a new file name:

Step 5. Remove the Canvas Template App from your solution:

We now have our own version of the Canvas Template that we can modify to our hearts content. You can either use this solution to make your own template, or you can begin building your new app immediately. For the purposes of this blog, we’re just going to jump right in a build a new App directly from the Template we just copied, as all of the controls will automatically be at our disposal.

Building the App

Step 1 – Adding a Details List

Edit the template we created and add in a blank Screen:

Click the ‘+’ button on the left. When you navigate down, you’ll see an area for Code Components. The first thing we want to add is a Fluent Details List, but you’ll notice it’s not appearing! We’ll need to first add that component to the app.

At the bottom of the list, click ‘Get more Components’. You’ll then see a new screen where we can import Code Components already installed into the Environment. Select ‘Fluent Details List’ and click ‘Import’

Once you’ve imported it, you can now select it from the ‘Insert’ sidebar under ‘Code Components’. Click it to add a Details List to the screen. Also, size it up so it only takes about 80% of the screen, as we’ll add more components above it later in the article.

Step 2 – Configuring the Details List

Now that we’ve added the details list, we want to add columns and rows to it so we can see our data. First, I’ve defined the ‘Items’ property to point to a Test list in SharePoint. Also, I have editied the ‘Fields’ property to define which fields I want the Details List to be able to access. Unlike a form, after adding these fields it doesn;t automatically show them all, we also will have to define the properties of the columns to display.

In order for our data to appear, we’ll have to define a Table on the ‘columns_items’ property of the Details List. Each column has certain definable properties like ‘Display Name’, ‘Width’, ‘Sortable’, etc. A full listing of these properties can be found here: https://learn.microsoft.com/en-us/power-platform/guidance/creator-kit/detailslist#columns-properties. In the case of our app, I have defined all of my columns to have an initial width of 200px and I also set them to be Resizable and Sortable.

So, I plug this table into the property and…. I only see 2 columns.

The reason for this is because I didn’t use the correct internal column names when I defined them in the Table. You must have the correct SharePoint Internal column names, and I forgot I had renamed some of these columns awhile back 😁😁😁. So, I went back, corrected those, and all my columns are now appearing!

(You’ll notice the “Assigned To” column looks extra wonky, but we’ll correct that with a bit of AddColumns magic in just a bit)

Step 3 – Adding Sort Functionality and fixing Column displays

Now that we have the Details list in place, we want to add Sort functionality, and fix up those messy columns. First, lets add in Sort functionality. Click on your Details List and navigate to the ‘OnChange’ property. For the formula, enter in:

If(
   Self.EventName = "Sort",
   UpdateContext(
        {
            ctxSortCol: Self.SortEventColumn,
            ctxSortAsc: !ctxSortAsc
        }
       )
)

Next, change the CurrentSortDirection property to:

If(ctxSortAsc, Ascending, Descending)

Then change the CurrentSortColumn property to:

"ctxSortCol"

Now, we’ll impement the Sort fucntionaility on the Items, as well as modify the display of the ‘Assigned To’ column. Chnage the Items property to:

SortByColumns(
  AddColumns(
       'Test List',
       "Person Assigned",
        'Assigned To'.DisplayName
    ),
 ctxSortCol,
If(
   ctxSortAsc, Ascending, Descending)
)

That will sort the columns based upon the context variables defined when you click on a column heading, and then sort the items by that variable. Also, we’ve now changed the ‘Assigned To’ column to be a column called “Person Assigned”, which is just the DisplayName from the ‘Assigned To’ column.

When you click away from the Formula, you may get an ‘Error loading Control’ error. To resolve this you will just need to Save, and the close and re-edit the App.

Now, when you re-edit the App, you will also need to redefine the field and column on the Details List to accommodate our new “Person Assigned” column. First, add the field to the details list, and then change the columns_items table to show the field instead of ‘Assigned To’

If all goes well, you should now have a fully sortable Details list:

Step 3 – Adding a Command Bar

Our next Step will be to add a Command bar, so that when we want to add, edit, or delete Items, we can do it from the same screen, and give it a user-friendly interface. So, click the ‘+’ button, navigate to ‘Code Components’, and add the ‘Fluent Command Bar’ to the screen. Position it just above the Details List as shown below:

Next we’ll need to define what the buttons are that we’ll be using. For this App, I have decided to have ‘New’, ‘Edit’, ‘Delete’, and ‘Refresh’ buttons. To define those buttons, we’ll need to create a table on the ‘Items’ property of the command bar. We’ll define three properties for each item: an ItemKey, and ItemDisplayName, and an ItemIconName. The ItemIconName property corresponds directly with eh Fluent UI Icon Names, so you can just use any of those icon names and the proper icon will automatically display on the command bar. All the icon names can be found here: https://uifabricicons.azurewebsites.net/

Once that table has been set, you should see a Command Bar like the one below now:

Next, I’m going to add 2 more controls to the app. a Panel, and a Form. The Panel you can add under ‘Library Components’, and the Form, is a simple Edit form that is standard in PowerApps. First Add the Panel, then add the form. Once the form has been added, choose your Data Source and Fields, then modify the ‘X’, ‘Y’, ‘Width’ and ‘Height Properties of the form to be the following (Note, you may need to change the Panel name to whatever you Panel name is when you add it:

Width – ‘Panel_1.ContentWidth

Height – ‘Panel_1.ContentHeight

X – Panel_1.ContentX

Y – Panel_1.ContentY

This will lock the Form to the content Area of your Panel, as shown below:

Next, I’m going to modify the ‘Title Property of the Panel so that if it is a NewForm, the Title will be “New Item”, otherwise it will be the Title of the Item Selected

Next, Change the OnCloseSelect property to update a context variable.

Then we’ll define the ‘Cancel’ and ‘Submit’ buttons on the Panel as shown in the next image

Then we’ll modify the OnButtonSelect property of the panel to Submit our Form when the Submit Button is pressed, and Update our context variable when it’s cancelled.

Also, go ahead a group these 2 controls together for easier Administration:

To finish off the Panel, we’ll change the Visible property to our conext variable.

Lastly, we’ll finish off the Command Bar, by changing the OnSelect property to Start a New Form when ‘New’ is selected, updating our Context variable to show the Panel, Editing the Form when Edit is selected, Removing the Item when Delete is selected, and Refreshing the DataSource when Refresh is selected, by using the formula below/

You can now take your new App for a Spin!!!!

In Conclusion

This hands-on just barely scratched the surface, and there are many other controls that may add more functionality to the apps you’re building.  Please check out some of my other articles to take a deeper dive into the products and as always, please feel free to reach out to me at jo.karnes@centricconsulting.com

Leave a Reply