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.
Add Panel 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:
Our control should look like this:
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:
Control to fix
In this case (But the errors will change depending on the control you have), I fixed:
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.
Add Control to your App
Add Panel Component
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:
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.
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 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
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
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.
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:
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:
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.
This website uses technical and profiling cookies. Clicking on "Accept" authorises all profiling cookies. Clicking on "Refuse" or the X will refuse all profiling cookies. By clicking on "Customise" you can select which profiling cookies to activate.
Google Analytics is a web analytics service provided by Google Ireland Limited (“Google”). Google uses the Personal Data collected to track and examine the use of this Application, compile reports on its activities and share them with other services developed by Google. Google may use your Personal Data to contextualize and personalize ads in its advertising network. This Google Analytics integration anonymizes your IP address. The anonymization works by shortening the IP address of the Users within the borders of the member states of the European Union or other countries that are members of the Agreement on the European Economic Area. Only in exceptional cases, the IP address will be sent to Google's servers and shortened within the United States.
Google reCAPTCHA is a SPAM protection service provided by Google Ireland Limited. The use of reCAPTCHA is subject to the Google privacy policy and terms of use.
Personal information processed: Tracker; Usage Data; answers to questions; clicks; keypress events; motion sensor events; mouse movements; scroll position; touch events