First of all, let’s understand that PCF(PowerApps Component Framework) custom control is just an abstraction above your PowerApps fields or dataset. So to make things clear Let’s start from the control manifest file.

The ControlManifest file is considered as the metadata file where you will be able to add configuration for your custom control

I have added the sample ControlManifest.Input.Xml file content at the bottom for reference.  

The manifest file is basically an XML file. It has a schema of one big manifest node under which it has child control nodes.

The four basic child elements are control, property, data-set, resources, feature-usage.

control element

Control Elements defines a component’s name, version, display, and description information. It is the parent node for the rest of the elements.

  • namespace – It is used to organize the components. The PowerApps CLI takes care of creating your namespace and constructor when you create a PCF project, behind the hood for you but be sure to use only letters or numbers. The namespace is a required attribute of the control element.
  • constructor – For better understanding just think of this as a normal method for initializing the object, will explain the process below.
  • version – version of your custom component. Make sure to change this for each and every build or else your changes would not reflect in PowerApps.
  • display-name-key & description-key – Name and description that gets displayed when you import your custom control in PowerApps. Take a look at the above image you would get a clear picture.
  • control-type – Is a standard
  • preview-image – You can configure custom image for your control using the preview-image attribute which takes a type of string (path) as input but make sure to add the image path also to the resources element.
 <control namespace="PCFControls" 
   constructor="AudioAttachmentControl" 
   version="0.0.7" 
   preview-image ="img/audioattachmentlogo.png"
   display-name-key="365spartan_AudioAttachmentControl" 
   description-key="Use this control to add audio files with live preview" 
   control-type="standard"> 

property element

The property node defines a specific, configurable piece of data(field) that the control expects from the Common Data Service(CDS).

To get values or post value to a field in CRM you need to configure your field with the property. We can imagine a property as a mediator between our custom component and a CRM field.

The control element can have n-number of property nodes(you can get information from different fields from PowerApps and use the data to create a custom control out of it)

  • name – Name of the property. It will help us get the configured field value into our PCF custom control component.
  • display-name-key & description-key – Name and description that gets displayed when you import your field in powerApps.
  • of-type – Represents a property of single data type (To which PowerApps field type you want the property to be configured ). Eg: SingleLine.Text – represents a PowerApps text field.
  • of-type-group – In some cases, we will need to configure a property that may be of different types (Eg: You need to configure a property with a Decimal or whole number CRM field in such cases you can use type-group).
  • usage – The attribute identifies if the property is meant to represent an entity attribute that the component can change (bound) or read-only values (input).
  • required – We can set if the property is mandatory. Set it to false if you do not wish to configure your property with any of the fields.
 <property name="AudioAttachmentProperty" 
    display-name-key="UrlOfAudio" 
    description-key="Add an url of an audio to get live preview" 
    of-type="SingleLine.Text"
    usage="bound" 
    required="true" />

     <property name="AttachmentProperty" 
    display-name-key="AudioplayerSort" 
    description-key="Add sorting to the audio player" 
    usage="input" 
    required="false"
    of-type-group="numbers" />

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

The list of property types that can be created are

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

data-set element

The data-set node defines a specific, configurable set of entity records. It used when developing a custom control for views.

  • name – Name of the data-set. Which will help us to get dataset value into PCF custom control component.
  • display-name-key & description-key – Name and description that gets displayed when importing a dataset in PowerApps.

The data-set node has a child node named “property-set” which allows you to configure a column of data-set against an attribute of a given type from the entity against which the data-set is configured.

resources element

The resources node refers to the resource files that are required for your custom component to implement its visualization (css, resx, img). Only the files you have added under the resources will load into your control.

  • order attribute – The order in which the files must load
  • css – To add CSS files
  • resx – It refers to a file that can be used to store and handle static string contents.
  • img – To add images to your project.
   <resources>
      <code path="index.ts" order="1"/>
       <css path="css/audio-attachment.css" order="1" />
       <img path="img/audioattachmentlogo.png" />
       <resx path="strings/audioPlayer.1033.resx" version="1.0.0" />
    </resources> 

feature-usage element

The feature-usage node is used to enable the default features exposed by custom components framework such as WebAPI, utils, device, etc

 <feature-usage>
      <uses-feature name="Device.captureAudio" required="true" />
      <uses-feature name="Device.captureImage" required="true" />
      <uses-feature name="Device.captureVideo" required="true" />
      <uses-feature name="Device.getBarcodeValue" required="true" />
      <uses-feature name="Device.getCurrentPosition" required="true" />
      <uses-feature name="Device.pickFile" required="true" />
      <uses-feature name="Utility" required="true" />
      <uses-feature name="WebAPI" required="true" />
 </feature-usage>

Tada, there you go, amazing, isn’t it?

Hope It helped you. Add your comments if you have any challenges in configuring your ControlManifst file feel free to reach me out. I’ll respond as soon as possible.

Let me know your feedback in the comments section. Also, kindly don’t forget to like and share.

Happy Learning!!!

References

You can refer the below link to get started with setting up your environment and creating your first powerApps component framework project.

PCF – Where do I start with?

ControlManifest.Input.xml File

 <?xml version="1.0" encoding="utf-8" ?>
<manifest>
  <control namespace="PCFControls" 
   constructor="AudioAttachmentControl" 
   version="0.0.7" 
   preview-image ="img/audioattachmentlogo.png"
   display-name-key="365spartan_AudioAttachmentControl" 
   description-key="Use this control to add audio files with live preview" 
   control-type="standard">
<!-- configurable piece of data that the control expects from CDS -->
    <property name="AudioAttachmentProperty" 
    display-name-key="UrlOfAudio" 
    description-key="Add an url of an audio to get live preview" 
    of-type="SingleLine.Text"
    usage="bound" 
    required="true" />
    
    <property name="AttachmentProperty" 
    display-name-key="AudioplayerSort" 
    description-key="Add sorting to the audio player" 
    usage="input" 
    required="false"
    of-type-group="numbers" />

      <type-group name="numbers">
        <type>Whole.None</type>
        <type>Currency</type>
        <type>FP</type>
        <type>Decimal</type>
      </type-group>
      
    <resources>
      <code path="index.ts" order="1"/>
       <css path="css/audio-attachment.css" order="1" />
       <img path="img/audioattachmentlogo.png" />
       <resx path="strings/audioPlayer.1033.resx" version="1.0.0" />
    </resources>

    <feature-usage>
      <uses-feature name="Device.captureAudio" required="true" />
      <uses-feature name="Device.captureImage" required="true" />
      <uses-feature name="Device.captureVideo" required="true" />
      <uses-feature name="Device.getBarcodeValue" required="true" />
      <uses-feature name="Device.getCurrentPosition" required="true" />
      <uses-feature name="Device.pickFile" required="true" />
      <uses-feature name="Utility" required="true" />
      <uses-feature name="WebAPI" required="true" />
    </feature-usage>
  </control>
</manifest>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s