- 1 jul. 2022

Challenge 007 | Summer camp 2022 - part 1

Do you love the functionality Canvas Apps bring, but you get fed up with the time-consuming exercise of making it look nice? Then I got you covered all summer! You can think of it as 🏕️ summer camp 🏕️ for Canvas App creators. In the following 3 months, we will dive into some tips and tricks to make Canvas Apps look a bit better. The start of summer is always a chill vibe, so we will also start off fairly easily. As temperatures rise and you already get sweaty by outside temperatures, there is no reason to hold back on more challenging aspects, right?

Challenge Objectives

🎯 Install Creator Kit

🎯 Use Library Components

🎯 Use Code Component

🎯 Understand how to use the reference app in combination with Microsoft documentation

🤓 Creator Kit

If you ever created an app for Dataverse for Teams, you probably wondered why those controls look way more modern compared to the classic Power Apps controls. The Dataverse for Teams controls are based on the FLUENT UI framework, just like SharePoint, OneDrive, and other products use this framework. Why the regular Canvas App editor hasn’t implemented these controls remains to be a mystery. However, recently the beloved Power CAT team released a preview version of the Creator Kit 🎉🎉. This is a solution with reusable components based on that Fluent UI framework. We will install this solution and dive into the functionality it has to offer.

Note that at the moment of writing, the Creator Kit is still in PREVIEW. Implementing it to a production solution is not advised. There is a good and a bad thing to this. The bad is that we still have to wait for a bit before we really start implementing it. The good this is that after this challenge, you know exactly what is coming! Another good thing is that the Power CAT team uses GitHub, so you can actually see what they are working on. If you are missing components, you search for them on their backlog and upvote it. That way you can give your input to the development team. If you cannot find it, you can share your idea on their discussion board.

📥 Install Creator Kit

You can download the Creator Kit here
If you haven’t got a developer environment, please get it
Go to the admin center
Go to Environments > Select your just created developer environment > Settings > Products > Features
Make sure that the Power Apps component framework for canvas apps is enabled
Go to make.powerapps.com
Select the developer environment
Go to solutions and import the just downloaded Creator Kit zip file

The solution will be installed now. Once ready, you are ready to proceed.

🚀 Copy The Template App

Before we dive into the functionality of the Creator Kit, we need to copy the template app. Some of the components are already loaded in the application, which speeds up the process a bit. The recommended steps for this are as follows.

Create a new unmanaged solution. I call it Challenge 007
Open the solution > select Add existing > Apps > Canvas.
Select the Canvas Template app, and then select Add.
Edit the Canvas Template.
In the studio ribbon, select File > Save As and enter a new name for the copy. The copy will appear in the same solution.
Remove the original canvas app template from the solution.

For model-driven apps, there is a custom page template available. We will focus on the Canvas App version, but everything you will do during this challenge can be implemented on a custom page.

🎓 Learn The Different Components

Let’s see what all the components we just installed look like. Based on that we know what we want to implement. Go to make.powerapps.com > select the Apps section in the left navigation panel > play the Creator Kit Reference App. Just browse through this reference app, see what is available and play a bit with the different components. A lot of the components probably look familiar. Hopefully, you like what you see, because these are the components you will be working with.

On this Microsoft docs page all components you just browsed through are documented. We will use the combination of the reference app and the documentation page quite a lot, as this gives us all the required information on the capabilities and how to use it.

🎓 Use Components In Canvas App

Now that you know a bit about what the components look like, it is time to start building an application that uses these components. We’ve already copied the template, so that our starting position.

Add A Header Component

The header component is not part of the code components but is a Library component. This is why using the template is convenient.

Open the template app
Create a new blank screen
On the left navigation pane, select the Insert tab (+). Note that there are two added sections called Code components and Library components.
Expand the Library components
Double-click the Header component to add it to your canvas
Adjust the Width of the component to App.Width
Turn off the left and right button
Make sure the component is named Header_1
Enter AppTheme at the Theme field. This theme is created at app OnStart. Later this summer camp we will dive into theming, so for now, just enter it.

Add A Navigation Component

The Nav component is a nice component for tree view functionality. This is quite complex to add with classic controls, so here we can realize a significant time reduction.

On the left navigation pane, expand the Code components
Double-click the Nav component to add it to your canvas
Adjust the Y value of the component to Header_1.Y + Header_1.Height
Adjust the Height value of the component to App.Height - Self.Y
Enter AppThemeJson in the Theme field.
Make sure the component is named Nav2

You now have a Fluent UI Navigation section in your app. I think it looks pretty good, but it has some predefined options. Now let’s wire it to what we want.

Adjust The Navigation Component

As mentioned, the Microsoft docs page gives more technical details on how to configure the components. The code snippet below is from that page. It is an example that you can copy and paste in the Items parameter.

Table(
  {
      ItemKey: "1",
      ItemDisplayName: "Home with Icon & Custom color",
      ItemIconName: "Home",
      ItemIconColor: "Green"
  },
  {
      ItemKey: "2",
      ItemDisplayName: "Documents",
      ItemExpanded: true
  },
  {
      ItemKey: "3",
      ItemDisplayName: "Contents"
  },
  {
      ItemKey: "4",
      ItemDisplayName: "Item Invisible",
      ItemVisible: false
  },
  {
      ItemKey: "5",
      ItemDisplayName: "Quick Reference Guide",
      ItemParentKey: "3",
      ItemIconName: "Document"
  }
)

As you can see in your app, the Navigation components have changed based on your input. The table below shows the possible input parameters for each item to change functionality. Some things I want to point out in the code.

Item 1 has a ItemIconName parameter. If specified, an icon will be rendered. You can use the Creator Kit Reference App to search for other icons and find the corresponding name. That way you can easily adjust the icon.
Item 1 has a ItemIconColor parameter. You can specify a color name or a hex value. If not specified, it will use the primary theme color. Specifying thus means deviating from the app theme.
Item 5 has a ItemParentKey parameter. Specifying a parent creates the dropdown functionality. This is what you will need for the tree view functionality.
The ItemVisible parameter can be used to make specific functionality only visible for specific roles (i.e. Role-based Access).

Name	Description
ItemKey	Arbitrary unique string associated with the breadcrumb item.
ItemDisplayName	Text to display in the breadcrumb item.
ItemIconName	Name of the Fluent UI icon for the item
ItemIconColor	Color of the item icon
ItemExpanded	Whether the item is expanded by default, if there are child items
ItemVisible	Whether the item is rendered
ItemParentKey	ItemKey of the parent the item is nested under

You can go all out on this, but I will leave that to your creativity. The goal is to familiarize yourself with these components in combination with the documentation, so you can start creating whatever you can imagine.

For the next steps we will show how we can nicely display some SharePoint data. You can basically bring in any data source, but the plan was to keep it simple. We will use the document library and a list, so let’s copy-paste the snippet below before we move on.

Table(
    {
        ItemKey: "1",
        ItemDisplayName: "Documents",
        ItemIconName: "Document"
    },
    {
        ItemKey: "2",
        ItemDisplayName: "List",
        ItemIconName: "List"
    }
  )

Your App should now look like the image below.

Create A SharePoint Site

As mentioned, we will proceed with some SharePoint data because most of us are familiar with that.

Create a new SharePoint Site
Name it Challenge 007
Create a new list. Pick the Gift ideas from the templates section
Add 2 items to that list. I added an Apple and a Pear with a random price and occasion, and I selected myself as the recipient.

Now let’s add this to our app.

Add List To Your App

On the left navigation pane, select the Data tab
Select Add data and select the SharePoint connector
Enter the site URL of the SharePoint site we just created
Select the Gift ideas list

The data is now connected, so we only need to add a component and hook it all up.

Double-click the Fluent Details List component from the left menu bar to add it to your app
Set the Y value to Header_1.Y + Header_1.Height
Set the X value to Nav3.X + Nav3.Width
Set the Height value to App.Height - Self.Y
Set the Width value to App.Width - Self.X
Set the Items value to 'Gift ideas'. The Field should be automatically added
Set the Theme value to AppThemeJson
Set the Visibility value to Nav2.Selected.ItemKey = "2"
Make sure the component is named FluentDetailsList1

You are almost there, but you still cannot see any data in your component. Let’s have a look at the Microsoft docs page to get an understanding of what is needed.

As you can read, we have to map the data source columns to the component. As mentioned, the fields are added automatically by selecting the data source. We only have to add a table to the Columns parameter. There is an example in the documentation, but that is used for the Dataverse Accounts table. You can try that out for yourself if you want later, but we created our own SharePoint list. Just copy the snippet I created for you. It is still just the beginning of summer camp, so we take it easy on you. The only thing I want to explain is that the ColName is the system name. In our case, the Gift column shown on SharePoint has Title as the system name. You can rename it any way you want by entering a ColDisplayName.

Table(
    {
        ColName: "Title",
        ColDisplayName: "Gift",
        ColWidth: 200,
        ColSortable: true,
        ColResizable: true
    },{
        ColName: "Price",
        ColDisplayName: "Price",
        ColWidth: 200,
        ColSortable: true,
        ColResizable: true
    }
)

At this moment, the two earlier created records should be visible. I hope you already like the look and feel of it. Notice how you can resize the width of the column. Pretty helpful stuff that is not available with classic controls. Another thing that I really miss in classic controls is sorting mechanisms. With these Fluent UI components that is easily done. Let’s check it out!

Add Sort Functionality

As you can see in the code snippet, the component comes with sorting capabilities. In combination with the reference app we can quite easily make this thing work.

Run the Creator Kit Reference App
Select the Basic DetailsList
In the Usage section, see how you can click a column header and the files are sorted accordingly. This is what we will be implementing. Select the Code button in the Usage section to view how the creators made this thing work.
Focus on the OnChange part of the code. See how there is an EventName called Sort. It basically saves the Sort column and the sort direction to two distinct variables. I’ve cleaned it up for you so you can copy-paste the snippet below into the OnChange parameter of the component.

If(
    Self.EventName = "Sort",
    Set(
        varSortFiles,
        Self.SortEventColumn
    );
    Set(
        varSortFilesAsc,
        Self.SortEventDirection = 'PowerCAT.FluentDetailsList.SortEventDirection'.Ascending
    )
)

Just above the OnChange code, you can find the Items code. We have selected the Gift ideas as our items. We only have to make sure that it sorts according to the variables we create during an OnChange event. You can see from the Creator Kit Reference App example that they embed a Search() function within the SortByColumns() function. In the example they also have a search field. We skip that for now so that’s why you will not find that in the snippet below. You can copy paste it to the Items parameter.

SortByColumns(
    'Gift ideas',
    varSortFiles,
    If(
        varSortFilesAsc,
        SortOrder.Descending,
        SortOrder.Ascending
    )
)

Make sure that the CurrentSortColumn parameter is set to varSortFiles and the CurrentSortDirection to If(varSortFilesAsc, 'PowerCAT.FluentDetailsList.CurrentSortDirection'.Ascending, 'PowerCAT.FluentDetailsList.CurrentSortDirection'.Descending).

You can now click on the headers to sort the items in your list. Furthermore, you now only have 3 components on your screen, which eases the maintainability of your app, you have added really powerful functionality that your app users will definitely appreciate. We will not go into detail about each component. But now that we have this, maybe we want to create, edit and delete items from the app. That will be the last step in this challenge.

Add A Command Bar

Double-click the Fluent Command Bar component from the left menu bar to add it to your app. If this is not available in the list, Click on Getmore components in the bottom and search for the code component. It should be there because we installed the Creator Kit.
Set the Y value to Header_1.Y + Header_1.Height
Set the X value to Nav2.X + Nav2.Width
Set the Height value to 32
Set the Width value to App.Width - Self.X
Make sure to name it CommandBar3
Update the Y of the Details List component to CommandBar3.Y + CommandBar3.Height
Set the Theme value to AppThemeJson
Set the Visibility value to Nav2.Selected.ItemKey = "2"

That’s how easy it is to add a command bar to your app. Now let’s make the buttons look like we want it to.

Delete Function

Go to the Microsoft docs page for the Command Bar. Inspect the example they created for the items. For now we will focus on new, edit, and delete, so the example is slightly adjusted into the snippet below. Copy-paste it into the Items parameter. Note how I added the ItemEnabled parameter to indicate if the button should be enabled.

Table(
    {
        ItemKey: "new",
        ItemDisplayName: "New",
        ItemIconName: "Add",
        ItemEnabled: IsBlank(FluentDetailsList1.Selected)
    },
    {
        ItemKey: "edit",
        ItemDisplayName: "Edit",
        ItemIconName: "Edit",
        ItemEnabled: Not(IsBlank(FluentDetailsList1.Selected))
    },{
        ItemKey: "delete",
        ItemDisplayName: "Delete",
        ItemIconName: "Delete",
        ItemEnabled: Not(IsBlank(FluentDetailsList1.Selected))
    }
)

We will first focus on deleting items from the list. Add the following snippet to the OnSelect parameter of the Command Bar. As you can see, depending on the ItemKey, you can adjust the functionality. For now, we only add a function to the delete ItemKey. Later we will add new and edit too.

Switch(
    Self.Selected.ItemKey,
    /* Action for ItemKey 'new' (e.g., Patch function) */
    "new",
    false,
    /* Action for 'edit' (e.g., Patch function) */
    "edit",
    false,
    /* Action for 'delete' (e.g., Remove function ) */
    "delete",
    UpdateContext({DialogVisible: true}),
    /* Default action */
    false
)

As you can see, the code creates a variable called DialogVisible. So, we probably need a dialog to pop up. We can simply add it.

Double-click the Dialog component from the left menu bar to add it to your app.
Set the Height value to App.Height
Set the Width value to App.Width
Set the Theme value to AppTheme
Set the Visibility value to DialogVisible
Set the Title to Delete Gift idea
Set the SubTitle to Are you sure you want to delete the Gift idea?
Set the Buttons to Table({Label: "Cancel", ButtonType:'Microsoft.CoreControls.Button.ButtonType'.Standard } ,{Label: "Delete", ButtonType:'Microsoft.CoreControls.Button.ButtonType'.Primary})
Set the OnCloseSelect to UpdateContext({DialogVisible: false})
Set the OnButtonSelect to If(Self.SelectedButton.Label = "Cancel", UpdateContext({DialogVisible:false}), Self.SelectedButton.Label = "Delete", Remove('Gift ideas', FluentDetailsList1.Selected); UpdateContext({DialogVisible:false}))

Now try to select an item and delete it. The dialog show pops up before you really delete the item.

New and Edit Function

Now that we can delete an item, we also want the other two buttons to work. Update the OnSelect of the command bar with to the snippet below.

Switch(
    Self.Selected.ItemKey,
    /* Action for ItemKey 'new' (e.g., Patch function) */
    "new",
    UpdateContext({PanelVisible: true}),
    /* Action for 'edit' (e.g., Patch function) */
    "edit",
    UpdateContext({PanelVisible: true}),
    /* Action for 'delete' (e.g., Remove function ) */
    "delete",
    UpdateContext({DialogVisible: true}),
    /* Default action */
    false
)

Where the delete button will pup op a dialog, the new and edit buttons will make a panel visible. Let’s add that too.

Double-click the Panel component from the left menu bar to add it to your app.
Set the Height value to App.Height
Set the Width value to App.Width
Set the Theme value to AppTheme
Set the Visibility value to PanelVisible
Set the Title to Gift idea
Set the SubTitle to Details of the Gift Idea.
Set the Buttons to Table({Label: "Cancel", ButtonType:'Microsoft.CoreControls.Button.ButtonType'.Standard } ,{Label: "Save", ButtonType:'Microsoft.CoreControls.Button.ButtonType'.Primary})
Set the OnCloseSelect to UpdateContext({PanelVisible: false})
Set the OnButtonSelect to If(Self.SelectedButton.Label = "Cancel", UpdateContext({PanelVisible:false}))
Make sure the Panel is named Panel_2

We now get to see the panel if the New or Edit button is pressed, and make it go away by clicking the Cancel button or the right-top cross. In this panel, we will add a form where we can enter new information or the required adjustments. If you are not a fan of default forms and prefer creating a Patch form, feel free to do that instead.

Add a Form to your app named Form_2
Set the Height value to App.Height - Self.Y - 50
Set the Width value to Panel_2.DialogWidth
Set the Y value to 100
Set the X value to App.Width - Self.Width
Set the Visibility value to Panel_2.Visible
Set the Data source value to 'Gift ideas'
Set the count of Columns value to 1
Set the Item value to FluentDetailsList1.Selected
Set the OnSuccess value to UpdateContext({PanelVisible:false})
Update the panel OnButtonSelect value to If(Self.SelectedButton.Label = "Cancel", UpdateContext({PanelVisible:false}),Self.SelectedButton.Label = "Save", SubmitForm(Form2))
Update the command bar OnSelect value to the snippet below

Switch(
    Self.Selected.ItemKey,
    /* Action for ItemKey 'new' (e.g., Patch function) */
    "new",
    UpdateContext({PanelVisible: true});
    NewForm(Form2),
    /* Action for 'edit' (e.g., Patch function) */
    "edit",
    UpdateContext({PanelVisible: true});
    EditForm(Form2),
    /* Action for 'delete' (e.g., Remove function ) */
    "delete",
    UpdateContext({DialogVisible: true}),
    /* Default action */
    false
)

The only thing that has been added to the snippet above is that we indicate if we are dealing with a form for new items, or if we want to edit the selected item.

That’s it for this challenge. I hope you got amazed by all the functionality we able to put into the app with these Creator Kit components. I encourage you to dive into in deeper and see what other components can bring to your apps. You now know how to deal with the reference app and the documentation, so again it is just up to your creativity.

Additional Info

If you are interested in more components to make your app look great, you should follow @kristinekk94 for great UI/UX tips and go to her GitHub repo to find amazing components to download.

🎒 Key takeaways

👉🏻 Fluent UI is the framework for modern controls

👉🏻 The Creator Kit brings reusable components into canvas apps

👉🏻 the combination of the reference app and the documentation will make you invincible

👉🏻 The Power CAT team who created and shared this are living legends