Creator Kit – May 2024 Update

Posted on 08/17/2024by Angelo

Hello! It has been released a new update of Creator Kit. If you’re not familiar with Creator Kit, you can learn more by reading this article before continue reading.

Bug Fixing

Has been fixed some bugs:

DetailList : ColHeaderPaddingLeft property does not work
Dialog & Panel: All dialogs and side panels in the kit are broken

New Controls

Donats Chart
Horizontal bar chart
Guage chart
Stacked bar
Masked TextField (Customizable text field)

Considerations

I hope these information can help you…Here you can find official release page on GitHub for this update.

Contact me for questions! Have a nice day!

Creator Kit Power Apps Power Platform

Creator Kit – July Update

Posted on 07/28/2023by Angelo

Hello, a new update of Creator Kit is availalbe. If you don’t know what Creator Kit is, you can read my article here.

Bug Fixing

Has benn fixed some bugs:

Breadcumbs in Custom Pages, when updates, shrinks
SearchBox 1.0.22 “undefined” text inside control
Breadcrumb problems with dynamic ItemDisplayName
DetailsList TotalRecords doesn’t count correctly
PeoplePicker.SelectedPeople JSON parsing error

New Features for Existing Components

Details List control – missing event to go to last page

Considerations

I hope these information can help you…Here you can find official release page on GitHub for this update.

Contact me for questions! Have a nice day!

Creator Kit Power Apps Power Platform

Creator Kit – Library Control Errors

Posted on 03/11/2023by Angelo

At the time of writing this article, when you add Library Component of Creator Kit, you may find some errors. If you don’t know what Creator Kit is, you can read my article here.

Add control to your App

Add one of Library control to your app. If you didn’t have installed Creator Kit in your environment, you can read this article to do it.

Let’s see how to use this control.

Errors

As you can see, now you have 10 errors on your app. All errors are relative to our Panel Control:

Our control should look like this:

How to fix it

To fix, you should follow these step:

Create a local copy of your control
Fix errors
Use copied control

Let’s start to create local copy. Click on Edit and then Create Copy:

Now you have local copy and you can fix errors:

In this case (But the errors will change depending on the control you have), I fixed:

Button:

If(ThisItem.ButtonType = Primary, ColorValue(Panel_2.Theme.palette.themePrimary))

If(ThisItem.ButtonType = 'Microsoft.CoreControls.Button.ButtonType'.Standard, ColorValue(Panel_2.Theme.palette.themeDark))

Font:

'Segoe UI'

Font.'Segoe UI'

Semibold

FontWeight.Semibold

Transparent

Color.Transparent

Now your control should work. You should see like this:

We can use our version of control:

Considerations

I hope these information can help you…Here you can find official documentations on GitHub for this control.

Contact me for questions! Have a nice day!

Creator Kit Power Apps Power Platform

Today , we’re introducing one of the “Surface” controls group of Creator Kit: “Panel Control“. Let’s see What is it and how it works. If you don’t know what Creator Kit is, you can read my article here.

Add control to your App

Before use it, you should add it to your app. If you didn’t have installed Creator Kit in your environment, you can read this article to do it.

Let’s see how to use this control.

Panel Control

This control is usefull to create complex creation, edit, or management experiences of items or settings. Let’s understand how can we use it. When you add it on your app, you should see something this:

At this time (16/04/2023) when you add Library component of Creator Kit you may find some errors. Use this link to understand how to fix it.

We should set some properties:

Items

Create Table with these attributes:

Title– The title of your panel
Subtitle– A short description under title
DialogWidth– (Default 400) Width of panel
Position– (Default Right”) You can write “Left” if you want left panel
Visible– True or False, to show or hide panel. I usually use a local variable to show or Hide it
Buttons– Table to define buttons of your panel
OnButtonSelect– Event to manage select event of your button
Theme : Property to set Json theme on controls, as you can see also in others controls of creator Kit. I usually set it when my application starts, and set it on all controls of Creator Kit who support it. You can create your theme here.

Try to put this on OnButtonSelect property:

Switch( Self.SelectedButton.Label,
  "Ok", Notify("Ok button");
);

// Closes the panel
UpdateContext({ showHideDialog: false })

Basically, if you click on “Ok” button, you’ll see Notify in this example and your then panel will hide.

Set “Visible” property:

showHideDialog

So, to show your panel, you must set true “showHideDialog” variable:

UpdateContext({ showHideDialog: true })

How to put controls inside your panel

You can’t put controls inside your Panel control, but you can use a container. Let’s se an example with Vertical container.

To align container to panel, we must set these properies , to same properties of panel:

Container Properties	Panel Properties
`X`	`myPanel.ContentX`
`Y`	`myPanel.ContentY`
`Width`	`myPanel.ContentWidth`
`Height`	`myPanel.ContentHeight`
`Visible`	`myPanel.Visible`

Just to show you result, I set different background color:

Now you can put others controls inside container and use your panel.

Considerations

I hope these information can help you…Here you can find official documentations for this control.

Contact me for questions! Have a nice day!

Creator Kit Power Apps Power Platform

Creator Kit – Nav Control

Posted on 01/14/2023by Angelo

Today , we’re introducing one of the menu & nav controls group of Creator Kit: “Nav Control“. Let’s see What is it and how it works. If you don’t know what Creator Kit is, you can read my article here.

Add control to your App

Before use it, you should add it to your app. If you didn’t have installed Creator Kit in your environment, you can read this article to do it.

Let’s see how to use this control.

Nav Control

You can use this control to create a navigation menu in your app. Let’s understand how can we use it. When you add it on your app, you should see something this:

We should set some properties:

Items

Create Table with these attributes:

ItemDisplayName – The Display Name of the menu item
ItemKey – The key of item (must be unique)
ItemEnabled – (Default true) Set to false to disabled
ItemVisible – (Default true) Set to false to hide
ItemIconName – The Fluent UI icon to use (here you can find icons)
ItemIconColor – The color to render the icon as (e.g. named, rgb or hex value)
ItemIconOnly – (Default false) set true to hide text label
ItemParentKey – Render the option as child item of another option
ItemExpanded – Set to false or true if the group should remain collapsed or expanded respectively.

Accourding to documentation, try to put this on Items properties:

Table(
  {
      ItemKey: "1",
      ItemDisplayName: "Home",
      ItemIconName: "Home",
      ItemIconColor: "Green"
  },
  {
      ItemKey: "2",
      ItemDisplayName: "Customer",
      ItemIconName: "People",
      ItemIconColor: "Red"
  },
  {
      ItemKey: "3",
      ItemDisplayName: "Documents",
         ItemIconName: "People",
      ItemIconColor: "Grey"
  },
  {
      ItemKey: "4",
      ItemDisplayName: "Others",
         ItemIconName: "DocumentSet",
      ItemIconColor: "Grey"
  },
  {
      ItemKey: "5",
      ItemDisplayName: "Quick Reference Guide",
      ItemParentKey: "4",
      ItemIconName: "Info",
      ItemIconColor: "Grey"
  }
)

You should see this result:

OnSelect

You can use OnSelect to get selected item and do some actions like change page. As usual, Just to understand , I show selected item display name in a label:

NavMenu.Selected.ItemDisplayName

Results:

Others useful properties are:

Theme : Property to set Json theme on controls, as you can see also in others controls of creator Kit. I usually set it when my application starts, and set it on all controls of Creator Kit who support it. You can create your theme here.
CollapseByDefault: You can set to True or False. Nav remain collapsed or expanded respectively. Individual Item level expand property is respected.

Considerations

I hope these information can help you…Here you can find official documentations on GitHub for this control.

Contact me for questions! Have a nice day!

Creator Kit Power Apps Power Platform

Creator Kit – November Update

Posted on 12/17/2022by Angelo

Let’s see what news are introduced with november update of creator kit. If you don’t know what Creator Kit is, you can read my article here.

New Features

Have been introduced 2 new (in preview) components, SubwayNav and SpinButton:

SubwayNav Control

SpinButton Control

Let’s see a basic introduction to use these controls.

SubwayNav

You can use this control to show a wizard steps in our application. Let’s understand how can we use it. When you add it on your app, you should see something this:

We should set some properties:

Items

Set a Table , with these attributes:

ItemKey: Key of item
ItemLabel: A Display Name of item
ItemState: Icon of the step, it could be one of: “Current”, “Completed”, “Unsaved”, “ViewedNotCompleted”, “Error” , “WizardComplete”

Accourding to source code, try to put this on Items propertie:

Table(
    {
        ItemKey: "1",
        ItemLabel: "Step 1",
        ItemState: "Current"
    },
    {
        ItemKey: "2",
        ItemLabel: "Step 2",
        ItemState: "Completed"
    },
    {
        ItemKey: "3",
        ItemLabel: "Step 3",
        ItemState: "Unsaved"
    },
    {
        ItemKey: "4",
        ItemLabel: "Step 4",
        ItemState: "ViewedNotCompleted"
    },
    {
        ItemKey: "5",
        ItemLabel: "Step 5",
        ItemState: "Error"
    },
    {
        ItemKey: "6",
        ItemLabel: "Step 6",
        ItemState: "WizardComplete"
    }
)

You should see this result:

If you don’t want specify ItemState , you can set empty string (ItemState: “”) , and you’ll see an empty white dot.

OnSelect

You can use OnSelect to get selected item and change page to show next step of your wizard. Just to understand , in this case I saved selected step on variable (Is just an example, you can use Controlname.Selected insted):

UpdateContext({SeletectStep: Self.Selected})

And on label:

SeletectStep.ItemLabel

Results:

Other useful properties are:

Theme : Property to set Json theme on controls, as you can see also in others controls of creator Kit. I usually set it when my application starts, and set it on all controls of Creator Kit who support it.
Subway Nav State: Property to set state on entire controls. You can choose from: “None”, “Errors”, “WizardComplete”

Example of set Subway Nave state property to “WizardComplete”

SpinButton

A spin button is control to allow to add number in small steps. When you add control you should see this:

Principal properties:

Label: Usefull to show a label of control.
Suffix: To add suffix after value.
Theme: As usual, Json theme.
Min: Minimal value to set.
Max: Maximun value to set.
Step: Value to add or Subtracts.

Le’t see an example, I set these properties:

New Features for Existing Components

About esixting control, have been added:

Tooltip for Icon component.
DelayOutput for SearchBox component.

Considerations

I hope these information can help you…Here you can find official release page on GitHub for this update.

Contact me for questions! Have a nice day!

Creator Kit Power Apps Power Platform

Creator Kit – Introduction

Posted on 12/07/2022by Angelo

Today, we’re going to speak about Creator Kit. With this fantastic tool, we have possibility to create Canvas App, with professional look & feel with “Microsoft 365” Style.

What is “Cretor Kit” ?

According to Microsoft , Creator Kit consist in a series of controls , utility and templates , created to increase developer productivity.

All controls are base on Fluent UI Framework , here official documentations.
Is included Template Starter apps , to help you to explore components.

Set Up (Manually)

Follow these Steps:

Download CreatorKit Core Solution from here.
Go to your Environment Settings and Enable “Enable the Power Apps component framework feature”

Enable Power App component Framework Feature — Enable the Power Apps component framework feature

Import Solutions: Go to your Environment and Import Solution (CreatorKit Core Solution)
Optionally, but I suggest you to do it, download CreatorKitCanvas solution and Import It in your environment. You’ll get Template

Utilization

Create new Canvas App
Click on Insert to add controls, and click on “Get more components”

Constrols List — Get more components at bottom

Now you can choose new component from Creator Kit and add them to your App.

Add new components — Controls of Creator Kit

Now you can see new control on control list under “Code components” group.

Flient Tag List component — Fluent Tag List control inside “Code components” group.

Some intresting components

Creator Kit contains around 24 components. You can start study from here. Most intresting component in my opinion are:

AutoWidthLabel is label who expand dynamically his with. You can customize his style by set this properties.
CommandBar classic command bar.

Command Bar

Nav control control to buil navigations menu for your app.

Dialog PopUp to show informations or confirm actions (For example Delete)

As I told you, there are more component and more will added every month. I’m going to create a post every month with description on new comonents.

Contact me for questions! Have a nice day!

Microsoft 365 Power Apps SharePoint Online

Power Apps – Improve performance

Posted on 05/21/2022by Angelo

Hello, Today I want to explain how to improve performance of yours Canvas App. Any comments, integrations or suggestions are welcome 🙂

Cache local data

Does your data chanche during session of your app? If you reply “No”, you should store your data into local variable and get record from it, instead always ask to database.

ClearCollect(CollProject,Projects_1)

PS: Keep mind delegation problem.

ClearCollect Function more informations here.

You should also cache for user data. Example, if you you email of connected user:

User().Email

Consider:

Set(UserEmail,User().Email)

Optimize OnStart Event – Concurrent

If you create and load collection on “OnStart” event (or on visibile), consider use of Concurrent Function. People tipically write this:

ClearCollect(CollProject,Projects_1);
ClearCollect(CollManager,Manager)

In this case, formula loads each tables one at a time. If you want optimize, you should write this:

Concurrent(
ClearCollect(CollProject,Projects_1),
ClearCollect(CollManager,Manager))

Now your app fetches the tables in parallel.

Use delegations

You shouden’t retrieve all data and then filter locally. Delegate data processing to data source (If is possible). See connectors documentation to learn about delegable formula.

For SharePoint check this link.

For SQL Server:

Use Indexes Column

Simple, but people sometimes forgot to set indexes on column. For SQL Server and SharePoint, check wich columns you’re using to filter, and set Index on these columns.

How to set index on SharePoint columns.

How to set index on SQL Server and Azure SQL.

Replace Defaults() with Variable

When you want to create new record in your table you , tipically you use Default() function. When you use it, there is a call to your datasource …

Defaults(Projects_1)

And Idea is store result of this function on variable, and use it instead call Default() every time:

Set(
    newProject,
    Defaults(Projects_1)
);

Debug – Monitoring Time

If you want to understand what happens “behind the scenes”, you should start a debugging session. From Power Apps portal, select your app and click Monitor:

Now you can understand durations and respons size of your function to prevent performance issue.

Considerations

Check this official link for other tips .I hope this post was usefull for you.Leave me comment if you has appreciate it.

Contact me for questions! Have a nice day!

Microsoft 365 Power Apps

Power Apps – Query String Parameter

Posted on 02/04/2022by Angelo

Let’s learn how can we passing parameter to our Canvas Apps.

QUERY STRING PARAMETER

In this Example, I built a simple app to write a ticket in SharePoint List. In this case , I need to pass (from “external”) a parameter to our App, to set Ticket Type. My choose are:

Infrastructure
Software
Services

To achievement this, we should use “Query String” and Param Function. Query String is part of url , used to passing data to application.

Step 1 – Get query string from App

To get query string, I used param function in OnVisible event of my Screen to get date and store it on local variable. I can’t use “On Start” event of app because UpdateContext is only available while you are currently on a screen. When the OnStart code is executed no screen has loaded yet.

Code to copy:

If(
Param(“TicketType”) <> Blank(),
UpdateContext({selectedTicketType: Param(“TicketType”)}),
UpdateContext({selectedTicketType: “Infrastructure”})
);

Step 2 – Set Default Value to control

In my Example, I used a Form with SharePooint list as Datasource . My field “Ticket Type” is Choose field. To set value as default, I set Default property of datacard, only if the form is in “insert mode”. Why? because if we are in view or in edit, we need to see data of item, not our parameter. So:

Code to copy:

If(
frmCreateTicket.Mode = FormMode.New,
{
‘@odata.type’: “#Microsoft.Azure.Connectors.SharePoint.SPListExpandedReference”,
Id: 0,
Value: selectedTicketType
},
ThisItem.TicketType
)

Finally

You should call your app with query string, in my case:

https://apps.powerapps.com/play/xxx-xxx-xxx-xxx?tenantId=xxxx-xxx-xxx-xxxx&TicketType=Services

(xxxx are guid of your app and tenant id, you see it when you run an app in browser)

Have a nice day!

Power Apps

Power Apps Co-Authoring

Posted on 01/21/2022by Angelo

New usefull feature! One of Power Apps limitation was we unable to build app more than people a time. Now, we can work togheter!

Enable Co-Authoring

So how can we do that? Really simple, as I usually write into my blog… “One” minute 🙂 I suppose you’re know what is source control and you know github or Azure DevOps. In this case, I’ll you Git repo on my Azure DevOps account. If you don’t know where terms, please read here.

Let’s start!

Create news project on Azure DevOps or git repo. Create or open you existing App , and go to settings, Upcoming Features and go to Experimental tab:

Enable-git-control

Then, enable “Show the Git version control setting”. Then you can see a new Section “Git version control” , click on Connect.

git-control

And configure settings:

git-repo-configuration

Then, it ask you your credentials. Keep mind, if you’re using DevOps, in password sections, you don’t put password, but you must put your personal access token. Now it create folder for you on your git repo and push your source:

powerapp-source-control

Now you can build app with your collegue! It’s experimental but cool!

More info here.

Have a nice day