Decoding Manifest File in PCF – Power Platform

As the talk of the hour in Dynamics community, I am sure you will be well aware of Power Apps Component Framework aka PCF. Today in this blog we are trying to decode the different sections of a manifest file in the PCF project. Just to introduce you to manifest file which defines the properties that are available for use by the application hosting the component. These properties allow the application and component to communicate about data without the app having to understand the implementation of the component. This acts like an interface between the application and the component.

Technically, this manifest is in the form of an XML file which holds the metadata of the component which the app maker is creating. This also defines the behavior of the component. In general, the predefined manifest which gets created contains mainly three nodes namely, Control, Property and Resources. Each of these nodes have different information as part of it. Lets look at each of these section in detail.

Control Element

This is the node which defines the namespace, version display name and similar information about the code component. Below is the list of definitions which is part of this node.

• namespace: We can define the namespace of the code component here.
• Constructor: Constructor of the code component is defined in this tag.
• Version: Version of the component. When we have to update the component, this is where we will update the version to see the latest changes in runtime.
• display-name-key: Name of the component which will be displayed on the UI.
• description-name-key: This is going to be the detailed information about the component which will be displayed on the UI. Here we can give a short description about the component for the end user.
• control-type: (do not change this) This is the type of the code component. Generally only the standard types of the code components are supported. At this time, we have only two components – Field and Dataset.

Property Element

Property node defines the properties of the code component like defining the data type of the column/attribute. This is a child element of the control element. Below is the list of property node elements.

• name: Name of the property.
• display-name-key: Display name of the property which will be displayed to the end user.
• description-name-key: Description of the property which will be displayed to the end user. This will give the end user some details about the column.
• of-type-group: This is used when we want to have more than two data type columns. This will be added as a sibling to the property element in the manifest. This specifies the component value and can contain, whole, currency, floating point or decimal values.
• of-type: If our control is supporting only single data type then we will use this. Valid values are,
  • Currency
  • DateAndTime.DateAndTime
  • DateAndTime.DateOnly
  • Decimal
  • Enum
  • FP
  • Multiple
  • Optionset
  • SingleLine.Email
  • SingleLine.Phone
  • SingleLine.Text
  • SingleLine.TextArea
  • SingleLine.Ticker
  • SingleLine.URL
  • TwoOptions
  • Whole.None
• usage: This has two properties associated with it, bound and input or output. Bound properties are bound only to the value of the attribute/column and input properties are either bound to an attribute or allow a static value (read only).
• required: defines whether this property is required or not.

Resources Element

Resources node defines the visualization of the component along with all the resources that are used for the visualization and styling of the code component. Each of them comes as the child of resource element and each of them represent one or the other component used inside the component we are building.

This is how a manifest looks for all our reference.

<?xml version="1.0" encoding="utf-8" ?>
<manifest>
<control namespace="SampleNamespace" constructor="TSLinearInputComponent" version="1.0.0" display-name-key="TSLinearInputComponent_Display_Key" description-key="TSLinearInputComponent_Desc_Key" control-type="standard">
   <type-group name="numbers">
     <type>Whole.None</type>
     <type>Currency</type>
     <type>FP</type>
     <type>Decimal</type>
    </type-group>
   <property name="sliderValue" display-name-key="sliderValue_Display_Key" description-key="sliderValue_Desc_Key" of-type-group="numbers" usage="bound" required="true" />
  <resources>
    <code path="index.ts" order="1" />
    <css path="css/TS_LinearInputComponent.css" order="1" />
  </resources>
</control>
</manifest>

Make sure you are aligning your manifest file as per your requirement. For example, whether you want the template to be a field or dataset. What all resources you want to use, like a css file, a web api, and so on. It also needs to be adjusted to align with the type of data and control you are going to handle with. Hope by now you got a grab of manifest file and should be comfortable with handling these files as per our needs. Stay tuned for more blogs regarding PCF components and how to create them. Thanks for your time reading this blog and hope it helped you to understand manifest file.