Part 3- Set-up Manifest file for your custom control

The article is a part of series of blog posts on Custom component framework topic. In order to get the context I would suggest to get started from beginning.

As I explained in the previous article we are going to develop a file control with a submit button. So we need to prepare the Manifest file. As I explained earlier, manifest file defines the field properties and including the data types for which the control is supported.

Navigate to the folder where you have set up your component project. In my case it is – “C:\Debajit\Blog\PowerControls”.

image

As you can see, a folder has been created with the same name we provided in the earlier article for component name – “FileControl”. Navigate inside the folder. You will find two file which are of importance to us.

1. ControlManifest.Input.xml

2. index.ts

Open ControlManifest.Input.xml in suitable xml editor of your choice. I open it with Visual studio 2017.

You will find the namespace and constructor having the same values we provided while creating the component framework project.

image

Let’s start to deep dive here. The first thing you need to understand is the control tag. Namespace and constructor I have just explained. The other two control attributes are

  • display-name-key – The display as would appear for the control in CRM UI. I put it as – XrmForYouControls.FileControl
  • description-key – The description for control as would show up in CRM UI. Input it as – File control from Xrmforyou

This is what my control tag looks like after I put in the above values.

<control namespace="XrmforyouControls" constructor="FileControl" version="0.0.1" display-name-key="XrmForYouControls.FileControl" description-key="File control from Xrmforyou" control-type="standard">

The next thing you need to set-up are the properties of the control. Since we are building a HTML file control with submit button here, we will create three properties

  • FileName
  • FileSize
  • Content

<control namespace="XrmforyouControls" constructor="FileControl" version="0.0.1" display-name-key="FileControl_Display_Key" description-key="FileControl_Desc_Key" control-type="standard">
   <!– property node identifies a specific, configurable piece of data that the control expects from CDS –>
   <property name="FileName" display-name-key="FileControl_FileName" description-key="The name of the file uploaded" of-type="SingleLine.Text" usage="bound" required="true" />
  <property name="FileSize" display-name-key="FileControl_FileSize" description-key="The size of the file in bytes" of-type="Whole.None" usage="bound" required="true" />
  <property name="Content" display-name-key="FileControl_Content" description-key="The base64 content of the file" of-type="SingleLine.TextArea" usage="bound" required="true" />

Let’s analyze the attributes of property here

  • name – the name of the property
  • display-name-key – the name of the property as it would appear in the CRM UI when you configure this control.
  • description-key – Description for the property that would appear in CRM UI
  • usage – can have three values. bound, input or output. The usage attribute identifies if the property is meant to represent an entity attribute that the component can change (bound) or read-only values (input)
  • of-type – This one is important and denotes the data-types for each property. If the usage is specified as bound, then for each of the properties you can only bind it to the corresponding field type as specified here. For details of types supported by Power Apps component framework, refer here – https://docs.microsoft.com/en-us/powerapps/developer/component-framework/manifest-schema-reference/type

Next is “type-group”. So what it type-group. Suppose you want to insert this control only for Single Line of Text fields and Whole Number fields of format – “none”. Using type-group, I can specify these two data types so that in CRM UI, while configuring this control, it would only show up for Single Line of text field and Whole Number field of format – “none”.

Assume I want this control to be available for these two type of fields only. This is what I put as my “type-group”.

<type-group name="filetypes">
        <type>Whole.None</type>
        <type>SingleLine.Text</type>
  </type-group>

I name the type-group as “filetypes” (can be anything). And then I put in the appropriate types for which the control is supported.

We are almost towards the end of Manifest file. The next tag in resources. By default you would see the below XML.

<resources>
      <code path="index.ts" order="1"/>
      <!– UNCOMMENT TO ADD MORE RESOURCES
      < css path="css/FileControl.css" order="1" />
      < resx path="strings/FileControl.1033.resx" version="1.0.0" />
      –>
< /resources>

The resources tag has primarily three child tags

  • code – This contains the path of the file where we would write code to develop our custom control. This is where we would construct the HTML UI for our control, register dynamic behaviors for our control like – “onchange”, “onclick” etc. As you can observe, index.ts (typescript) file is already specified. It’s created by default whenever you create custom component project.

image

  • css – Very simple I guess. The css file to style your control
  • resx – The resource file to contain localized strings you define. As you can see, suggested file name for english (1033) is provided

I will keep this simple. I will just deal with the code part here. Styling has got no surprises. All you need to make sure that these paths are all relative to where your manifest file is located.

So that completes our manifest file. Full manifest file content pasted below. Refer to the next article to see how you can develop your custom control UI with events

<?xml version="1.0" encoding="utf-8" ?>
< manifest>
  <control namespace="XrmforyouControls" constructor="FileControl" version="0.0.1" display-name-key="XrmForYouControls.FileControl" description-key="File control from Xrmforyou" control-type="standard">
    <!– property node identifies a specific, configurable piece of data that the control expects from CDS –>
    <property name="FileName" display-name-key="FileControl_FileName" description-key="The name of the file uploaded" of-type="SingleLine.Text" usage="bound" required="true" />
   <property name="FileSize" display-name-key="FileControl_FileSize" description-key="The size of the file in bytes" of-type="Whole.None" usage="bound" required="true" />
   <property name="Content" display-name-key="FileControl_Content" description-key="The base64 content of the file" of-type="SingleLine.TextArea" usage="bound" required="true" />
    <type-group name="filetypes">
         <type>Whole.None</type>
         <type>SingleLine.Text</type>
   </type-group>
    <resources>
      <code path="index.ts" order="1"/>
     </resources>
  </control>
< /manifest>

Advertisements

4 thoughts on “Part 3- Set-up Manifest file for your custom control

  1. Do you know that how to create a PCF component for lookup value ? I know that useable types are Whole.None, Currency, FP, Decimal. Can you help to me about this ?

  2. Hi,
    If I want to use of-type enum for a property, is it possible to define a list of options?
    Example I want the user to be able to choose a color.
    I don’t find an example in the Microsoft documentation.

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