About 20 years ago I wrote my first Hello World Java program. I felt like the sky was the limit – literary as I was considering writing code for a rocket. Today I felt the same write my first PCF control.
In this post I’ll go over the 5 steps you need to know to write a very simple custom control header in PCF.
What does my control do?
Background
Whenever a UX expert with no Power Apps experience gives me advise on how to improve my forms, they always ask for a formatted header or description text to provide users with context.
In the past, we had a few awkward techniques to do that in model-driven apps. But then I thought why not make an out of the box control for it?
The control I built does exactly that, it simply displays pre-configured formatted text. It is meant to remain static similar to headers, tooltips, or description fields.
How to implement it?
Prerequisite
Before you start ensure you have the all prerequisites installed (npm, Power Apps CLI, VS code at least) as explained in https://docs.microsoft.com/en-us/powerapps/developer/component-framework/get-powerapps-cli
Steps
- In a folder called SimpleHeader I ran the following command using the VS Developer Command Prompt
pac pcf init --namespace XrmEnterprise --name SimpleHeader --template field
- Followed by
npm install
- I then launched VS code and opened the sub folder SimpleHeader\SimpleHeader and updated the ControlManifest.Input.xml where I replaced the default property with
<property name="info" display-name-key="InputText" description-key="Text to appear in header" usage="bound" of-type="SingleLine.Text" required="true" default-value="Header" /> <property name="headerText" display-name-key="Title Text" description-key="Text to appear in header" usage="input" of-type="SingleLine.Text" required="true" default-value="Header" />
- In the init method I added the following 4 lines code
var divHeader: HTMLDivElement;
divHeader = document.createElement("div");
divHeader.innerText = context.parameters.headerText.raw + "";
container.appendChild(divHeader);
- Finally I then ran the two commands in the same folder using VS Developer Command Prompt
npm run build
Npm start
At this stage the control is ready for testing on a local test harness. Easy, give it a try….
Simplification Explained
Notice how I did not follow the available online examples. As a strarter created my own static property called headerText of type input. In the index.ts I am not doing anything with the context so I did not bother storing it in a local variable. Instead in my init method I created a div with the headerText as inner text and attached it to a passed in container.
The update view remains empty as I only initialize the control and I do not update it later. It’s static right…
What next?
So far the text is not formatted. My next post will demonstrate how to enhance this example to also include formatting.
This code in available in my GitHub repository https://github.com/ramimounla/SimpleHeader