Intro
In the first part of this series of articles about the Power Platform Creator Kit, we learned what is this kit, what we can use it for, and how to install it.
In the second part, we learned about the applications that are part of the package, and how to use them as a learning and reference tool.
In this part, you will learn how to create a responsive Canvas App from scratch, using the Power Apps Creator Kit, step by step. And here you are a YouTube video with the main steps: Creator Kit Accounts Management App.
The app will have a screen with a ribbon at the top and a grid with Accounts from Dataverse. You will be able to search records and see the results. You will learn how to set the Themes for your controls.
App Creation
1. Create a solution and give it any name you want. Within the solution, create a new Canvas App and give it any name you want.
2. Update the new app settings. Make sure the Scale to fit option is off.
3. Go to the Tree view panel on the left, select the App node, then search for the Formulas property, and paste the code below:
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"
}
};
AppThemeJson = JSON(
AppTheme,
JSONFormat.IndentFour
);
This is setting the colours of the app in an object called the AppTheme. This object is a JSON representation that will be used across the entire app to configure the look and feel of your app.
If you want to learn how to configure the Theme of your App, check the previous article in the series: Power Apps Creator Kit – Reference Apps
4. Go to the Tree View panel, select Screen1, then Insert a Vertical Container.
Rename it to cntMain.
Set the With property to Parent.Width and Height to Parent.Height, and the X and Y to 0. This will allow the control to use the entire space available on the screen.
5. In the left panel, click on the Insert button (1), then click on Get more components (2), and a panel will be shown on the right. Change to the Code tab (3), in the search bar type “bar” (4), then select the Fluent Command Bar control (5), and click on Import (6).
6. In the central area of the the screen, select the ctnMain container you added before, then click on the Insert menu, and click on the Fluent Command Bar control available under the Code Components section.
You will see how the control is added under the cntMain container.
Rename the control to cmbBarMain.
7. Change the Width and Height properties of cmbBarMain, to Parent.Width and 50 respectively.
Change the positions X and Y to 0 and 0 respectively.
This will make the bar appear at the top of the screen and correctly dimensioned.
Set the Theme property to AppThemeJson.
Set the Items property to the following formula:
Table(
{
ItemKey: "newItem",
ItemDisplayName: "New",
ItemIconName: "Add"
},
{
ItemKey: "edit",
ItemDisplayName: "Edit",
ItemIconName: "Edit"
},
{
ItemKey: "delete",
ItemDisplayName: "Delete",
ItemIconName: "Delete"
},
// Far Items
{
ItemKey: "tile",
ItemDisplayName: "Grid view",
ItemIconName: "Tiles",
ItemIconOnly: true,
ItemFarItem: true
},
{
ItemKey: "info",
ItemDisplayName: "Info",
ItemIconName: "Info",
ItemIconOnly: true,
ItemFarItem: true
}
)The Items property configures the buttons and the options associated with each button in the Command Bar. Check all the options available here.
You should see your command bar with buttons aligned at the top.
7. In the left panel, click on the Insert button (1), then click on Get more components (2), and a panel will be shown on the right. Then change to the Code tab (3), in the search field type “search” (4), then select the Fluent SearchBox control, and click on Import (5).
In the central area of the the screen, select the ctnMain container you added before, then click on the Insert menu, and click on the Fluent SearchBox control available under the Code Components section.
You will see how the control is added under the cntMain container.
Rename the control to sbSearchMain.
8. Change the Height property of the new Search Box control to 35.
Update the Align in container property to Right.
Set the Theme property to AppThemeJson.
This will make the Search Box appear at the top right of the screen and correctly dimensioned.
9. In the left panel, click on the Insert button (1), then click on Get more components (2), and a panel will be shown on the right. Then change to the Code tab (3), in the search field type “detail” (4), select the Fluent Details List control (5), and click on Import (6).
In the central area of the the screen, select the ctnMain container you added before, then click on the Insert menu, and click on the Fluent Detail List control available under the Code Components section.
You will see how the control is added under the cntMain container.
Rename the control to dlAccounts.
10. Change the Width property of the new Detail List control, to Parent.Width.
Turn the toggle on in the Flexible height property and make sure the fill portions are set to 1 of 1.
This will make the grid appear at the centre of the screen and correctly dimensioned to automatically use all the available space.
Set the Theme property to AppThemeJson.
Set the RecordKey to name
11. Go to the Data panel (1) on the left, then click on Add data (2), and select the Accounts (3) table.
This will make the Accounts table available as a data source. Now we can use it in our formulas.
12. In the Tree view panel, select the dlAccounts control. Set the Records(Items) property to the formula:
If(
IsBlank(sbSearchMain.SearchText),
Accounts,
Filter(
Accounts,
StartsWith(
'Account Name',
sbSearchMain.SearchText
)
)
)This formula checks if there is something typed in in the Search field. If there isn’t, it returns all the records in the Accounts table. If there is something typed, then it filters the table using the Search Text typed by the user.
Click on the Edit property next to the Fields property, then click on Add fields, then make sure you add the name, address1_city and telephone1 fields.
13. Set the Columns property of the Details List to the following formula:
Table(
{
ColName: "name",
ColDisplayName: "Name",
ColWidth: 200,
ColSortable: true,
ColIsBold: true,
ColResizable: true,
ColCellType: "link"
},
{
ColName: "address1_city",
ColDisplayName: "City",
ColWidth: 200,
ColSortable: true,
ColResizable: true
},
{
ColName: "telephone1",
ColDisplayName: "Telephone",
ColWidth: 200,
ColSortable: true,
ColResizable: true
}
)This formula configures the columns that will be available in the grid. This property allows you to set aspects like the size, label or the field the column is bound to.
You can check all the configuration options available for each column here.
Bonus Power Apps Creator Kit – Step by Step
The main functionality has been completed. To take it one step further, let’s add a panel on the right that will help see the details of the selected account.
1. In the left panel, click on the Insert button (1), then click on Get more components (2), and then a panel will be shown on the right. Then change to the Canvas tab (3). Select the Power CAT Component Library Dialog and Panel components (4), then click on Import (5).
2. Go to the Tree view panel (1), then select Screen1 (2) then click on Insert (3).
3. In the Insert menu (1), select the Panel component (2) under the Library Components group.
You will see how the component is added under Screen1.
Rename the component to panDetails.
4. In the Tree view select the panDetails component recently added, and set the following properties:
Width and Height to Parent.Width and Parent.Height respectively.
Theme to AppTheme.
Visible to panDetailsVisible. This will make the panel visibility dependent on the value of the panDetailsVisible context variable.
OnButtonSelect to the formula UpdateContext({panDetailsVisible:false}). This will hide the panel when the button is clicked.
5. In the Tree view panel, select Screen1, the set the property OnVisible to UpdateContext({panDetailsVisible:false})
This will make the default value of the panDetailsVisible variable, which controls the panDetails visibility, hidden by default.
6. In the Tree view panel, select the dlAccounts Details List, and set the OnChange property to the formula:
If(
Self.EventName = "CellAction",
UpdateContext(
{
panDetailsVisible: true,
selectedAccount: First(
Filter(
Accounts,
'Account Name' = Self.EventRowKey
)
)
}
)
)This formula will make the panDetails visible when the user clicks on an account in the grid. It will also set a variable with the value of the selected account.
7. In the Tree view panel, select Screen1. Then click on the Insert menu, and select Display form under the Input category.
Rename the newly added component to fromAccountDetails. Set the following properties:
Datasource to Account. This will make the control display data from the Accounts table in Dataverse.
Visible to panDetailsVisible. This will hide the panel when the variable is set to false.
Layout and Columns to Vertical and 1 respectively.
Position X and Y to Parent.Width - panDetails.ContentWidth - 20 and 100.
Width and Height to panDetails.ContentWidth and Parent.Height-Self.Y-50 respectively.
Item to selectedAccount. This will make the form display the account selected on the grid.
Second Bonus
Lest’s improve our app by adding the delete function. Before we can delete any accounts, a confirmation dialogue will be displayed.
1. In the Tree view panel, select Screen1. Then click on the Insert menu, and select Dialog under the Library components category.
Rename the component to dlgDelete.
Set its Position X and Y to 0 and 0 respectively.
Set the Width and Height to Parent.Width and Parent.Height.
Set the Visible property to dlgDeleteVisible.
Set the Theme property to AppTheme.
Set the Title to “Delete“
Set the Sub Title to $"Are you sure you want to delete account {dlAccounts.Selected.'Account Name'} ?"
Set the OnButtonSelect to the Formula
If(
Self.SelectedButton.Label = "Ok",
Remove(
Accounts,
dlAccounts.Selected
)
);
UpdateContext({dlgDeleteVisible: false})This code will check if the user clicked on the OK button before deleting the account record. Then it will hide the dialogue.
2. In the Tree view panel, select Screen1, the set the property OnVisible to UpdateContext({panDetailsVisible:false, dlgDeleteVisible:false})
This will make the default value of the panDetailsVisible and ldgDeleteVisible variables false, which controls the panel and dialogue visibility.
3. In the Tree view panel, select cmbBarMain, and set the OnSelect property to the formula:
Switch(
Self.Selected.ItemKey,
"delete",
UpdateContext({dlgDeleteVisible: true})
)More Info
- Creator KIT Components reference: Full list of all the controls, with detailed documentation.
https://learn.microsoft.com/en-us/power-platform/guidance/creator-kit/components - Dialog Control reference
https://learn.microsoft.com/en-us/power-platform/guidance/creator-kit/dialog - Command Bar reference
https://learn.microsoft.com/en-us/power-platform/guidance/creator-kit/commandbar - Detail List reference
https://learn.microsoft.com/en-us/power-platform/guidance/creator-kit/detailslist - Fluent UI Controls: Full reference of the controls included in the Fluent UI library.
https://developer.microsoft.com/en-us/fluentui#/controls/
Conclusion Power Apps Creator Kit
In this final article on the Creator Kit series, we explored how we can use some of the controls and components included in the Power Platform Creator Kit. We learnt how easy it is to use them, and how it speeds up the development process of our apps.
We hope you enjoyed reading it. Feel free to leave any feedback or comments below.
You can download the completed App from the Samples galleries in the Power Platform forums.
If you have any questions, or you need help customizing your Power Platform apps, don’t hesitate to let us know at Creativity Spark we turn your ideas into brilliant apps, we are Power Platform Consulting.