Follow my blog for more interesting topics on Dynamics 365, Portals and Power Platform. For training and consulting, write to us at info@xrmforyou.com
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.
For this, navigate to the folder where you have set up your component project. In my case it is – “C:\Debajit\Blog\PowerControls”.
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. There 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.
Let’s start to deep dive here. And the first thing you need to understand is the control tag. I have already explained Namespace and constructor. 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
And below 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” />
Sp 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.
- 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>
You will also like the below posts
- How to build a multilingual canvas app using the new AITranslate function
- How to display a single delimited string as HTML table in Power Apps canvas apps.
- Substring in Power Apps canvas apps
- How to get last day of a month in Power Apps using EOMonth
- How to call a Power automate flows from Power Pages portal? Exploring the new integration of cloud flows with Power Pages.
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 ?
Hi Erdi,
Thanks for reading my blog. In the list of supported types for the current release, I don’t find the lookup value type.
https://docs.microsoft.com/en-us/powerapps/developer/component-framework/manifest-schema-reference/type
I will cross check and let you know if I find anything on this.
Cheers!
Debajit
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.
Hi Brigit. Yes it is possible. In fact it has support for both optionset and enum types
check for this in supported types – https://docs.microsoft.com/en-us/powerapps/developer/component-framework/manifest-schema-reference/type