CategoriesCreator KitPower AppsPower Platform

Creator Kit – Library Control Errors

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.

Import component
Add Panel Component
Component
Add Control To App

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:

Errors

Our control should look like this:

Error panel in your app
Panel

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:

Edit component
Create copy

Now you have local copy and you can fix errors:

Error panel
Control to fix

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))

To

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

Font:

'Segoe UI'

To

Font.'Segoe UI'
Semibold

To

FontWeight.Semibold
Transparent
Color.Transparent

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

Fixex Panel
Panel Control Fixel

We can use our version of control:

Local components

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!

CategoriesCreator KitPower AppsPower Platform

Creator Kit – Nav Control

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.

Add Control to your App
Add Control to your App
Add Fluent Nav Control
Add Fluent Nav Control

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:

Nav Control
Nav Control

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:

Nav menu with items
Nav menu with items

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:

Nav Menu

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!

CategoriesCreator KitPower AppsPower Platform

Creator Kit – November Update

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:

SubwayNav control

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:

Steps

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:

SpinButton

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:

Properties
Results

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!

CategoriesCreator KitPower AppsPower Platform

Creator Kit – Introduction

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:

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

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.
Nav Control
  • Dialog PopUp to show informations or confirm actions (For example Delete)
Modal PopUp

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!

CategoriesPower Apps

Try Power Apps – Free

If you want, you can try Microsoft Power Apps for free!

As usually…it very simple:

Open this url:

Power Apps – Developer Plan

You will get following benefits:

  •  Create & test unlimited apps, with premium connectors and dataverse also
  • You can use Power Automate
  •  You can create more then one environments

All informations here:

Details

That’s all.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

CategoriesPower AppsSharePoint Online

Build an app in a few minutes

There are two ways to build an app with Power Apps. “Canvas App” (My favourite) and “Model-driven app”. In this article , let’s see how we can build an app in less then ten minutes with Canvas App, starting from data.

The fastest way

1. Start from data

We should start from data using one of connectors available, such as Excel, SQL Server, Dataverse or SharePoint.

For this article, I created a SharePoint list , starting from template “Travel requests”. The Idea is create a mobile app to allow users create travel requests.

2. Build App

Let’s build 🙂 Go to https://make.powerapps.com/ , login with our account, on “Start on data”, click on “SharePoint”:

Then, choose “Connect Directly” (In my case , I use a list on SharePoint Online):

 

Click on “Create” button, and put url of SPO Site who host our list:

Click “Go” , then choose the list, click “connect” and wait….

Now? we have our app , ready to use or customize!

Our App, is ready to use with Add, edit, delete and search functions.

I spent more time to write this article then create app 🙂

In my opinion, this is the fastest way to create a Power Apps, If you don’t like it, you can use it as starting point to learn how to build and app, or to create a poc for your users or customer.

CategoriesPower Apps

Power Apps Introduction’s

Customer’s often ask me: “What is Power Apps? What can I do with it?

“Official” reply is : “Power Apps is a suite of apps, services, connectors and data platform that provides a rapid application development environment to build custom apps for your business needs. Using Power Apps, you can quickly build custom business apps that connect to your business data….” (Here official link)

In order to make it easier to understand, my reply is:

“With Power Apps, you can build applications without being developers, integrated with different services, usable through browsers, tablets and Android or iOS Smartphones.”

Mixed-Reality-Power-Apps

Does It appear cool? Yes it do 🙂

There are many other things you can do… for example the features of Mixed Reality, or AI Builder that allows you to take advantage of artificial intelligence to extract text from an image, perform sentiment analysis, process receipts etc…

I’ll write a series of tutorials that will bring you closer to this world with very little effort.

See you soon. Stay tuney!