Developing code components in Power Apps

In last week’s post I introduced code components and the process of building them. in this post it is all about developing code components. 

Code components and TypeScript

The files that were generated in my previous post are TypeScript. TypeScript is a programming language that looks a bit like c# and a bit like JavaScript and a bit like lots of other programming languages.

In the project that we generated I would like to first focus on two files

• index.ts
• ControlManifest.Input.xml

As your project gets larger you might want to consider splitting this file into logical blocks of code across more files. But as you get started it might be easier to keep all code together.

Create properties

In the ControlManifest.input.xml you can add properties. You will find that the template created a sample property.

<property name="sampleProperty" 
          display-name-key="Property_Display_Key" 
          description-key="Property_Desc_Key" 
          of-type="SingleLine.Text" 
          usage="bound" 
          required="true" />

This is where you can specify the name of the property, the type of the property and if it is required or not.

The type of the property is slightly more complicated.

You can choose from the following options:

• Singleline.Text
• Whole.None
• Currency
• DateAndTime.DateAndTime
• DateAndTime.DateOnly
• Decimal
• Enum
• FP
• Multiple
• OptionSet
• SingleLine.Email
• SingleLine.Ticker
• SingleLine.URL
• TwoOptions

There are still quite a few unsupported types as well. These types you might know from other elements in Dynamics 365/Power platform however these are not supported in code components.

Type Groups

Next to the above mentioned types you can also use type groups. This means that you can have a single name to refer to multiple property types.

The following lines can be included in the generated ControlManifest.input.xml, however it has been commented out by default.

 <type-group name="numbers">
        <type>Whole.None</type>
        <type>Currency</type>
        <type>FP</type>
        <type>Decimal</type>
      </type-group>

Once the above has been included it is possible to user the numbers type group.

<property name="sliderValue" 
          display-name-key="sliderValue_Display_Key" 
          description-key="sliderValue_Desc_Key" 
          of-type-group="numbers" 
          usage="bound" 
          required="true" />

So for multiple data types you can now refer to them as numbers.

index.ts

I took all the comments out of the code and then I ended up with the following code.

import {IInputs, IOutputs} from "./generated/ManifestTypes";

export class MyCustomComponent implements ComponentFramework.StandardControl<IInputs, IOutputs> {

	constructor()
	{
	}

	public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
	{
	}

	public updateView(context: ComponentFramework.Context<IInputs>): void
	{
	}

	public getOutputs(): IOutputs
	{
		return {};
	}

	public destroy(): void
	{
	}
}

When you start developing code you should of course leave in all the comments that are useful.

There are 4 sections that are important to understand when you start developing new code components.

• init
• updateView
• getOutputs
• destroy

The above 4 sections of code are methods. These methods will need to contain code that will define the behaviour of our code component.

Next to the 4 methods mentioned above, the index.ts typically also holds properties of the control.

To specify a number property you could use code as shown below

// Value of the field is stored and used inside the component
private _value: number;

But you can also use more complicated property types like HTMLDivElement that is part of TypeScript.

private _container: HTMLDivElement;

Slider example

Within the Microsoft documentation an example of code is provided to make a slider control.

To create this example yourself, all you will need to do is update the two files mentioned in this post, index.ts and ControlManifest.Input.xml with the code supplied.

using the npm start command it is possible to check what that example looks like. once you are happy with the control you can use the steps mentioned in my previous post about code components to build and deploy your code components.

Do you have ideas for new controls? Let me know how you are getting on with it. Or do you have ideas fro new controls, but you don’t know where to get started with code components, feel free to leave a comment below.

Custom Date control for Power Apps

Or how about replacing that date control that so many people don’t like.

To create this example all you would have to do is make some small adjustments to the above slider example.