PCF – Nishant Rana's Weblog

Kindly refer the previous post, here we will be adding style to the component created in the post.

https://nishantrana.me/2019/06/06/step-by-step-create-a-very-simple-powerapps-custom-component-to-show-the-guid-of-the-record/

Let us continue with our previous sample component and try adding style to it.

Open ControlManfiest.Input.xml and specify the CSS file to be referred.

Uncomment the CSS tag in the manifest and create a new folder named CSS and place the CSS file there.

Edit the index.ts file and add the class to the label

Edit the CSS file

Edit the version number in case of updating the existing control in ControlManifest.Input.xml

Followed by the build command
npm run build

After the successful build, we can see the CSS added in the out folder for the component

Run the MSBuild command to generate the new solution zip files

Import the managed solution.
Open any of the existing contact records, we can see the style is applied to the control.

Hope it helps..

Advertisements

Update – use context instead of Xrm.Page

https://nishantrana.me/2019/10/22/using-pcf-custom-control-builder-xrmtoolbox-plugin-to-update-existing-control-in-dynamics-365-powerapps/

Also,

https://nishantrana.me/2020/01/20/best-resources-to-start-with-power-apps-code-component-pcf/

Go through below articles to get a better understanding

Below is the quick step by step guide to get started (sort of Hello World example)

Install NPM (that comes with Node.js)

https://nodejs.org/en/

Install Microsoft PowerApps Command Line Interface CLI

http://download.microsoft.com/download/D/B/E/DBE69906-B4DA-471C-8960-092AB955C681/powerapps-cli-0.1.51.msi

Install Visual Studio 2017 or later or Download .NET Core 2.2 along with Visual Studio Code.
Create the new folder for the project, and in Developer Command Prompt for VS 2017 navigate to the folder and run the below command to create a new component project

pac pcf init

– -namespace <namespace for the component>

– -name <name of the component>

– -template <component type>

It adds the following files in the folder.

Next run npm install command to install the project dependencies.

Open the ControlManifest.Input.xml file created inside the folder created with the control’s name.

Here we have opened it in Visual Studio Code, for this simple example purpose let us not change the default values.
Open the index.ts which wherein we’d be writing code for our custom control

Add the following line of code to add a label control that will display that GUID of the record.

Run npm run build command to build the control

To test the control run npm start command

*Use ctrl + c è to terminate the job.

Create a new folder to hold the solution

Run the below command to define the publisher name and prefix and initialize the solution files creation

pac solution init – -publisherName [publisher name] – -customizationPrefix [publisher prefix]

Run the below command to add reference to our custom control in the solution

pac solution add-reference – -path [path to pcfproj file]

i.e. reference of the below path.

This creates the file with extension cdsproj

To generate Zip File run the below command in the Developer Command Prompt for Visual Studio 2017
- MSBUILD /t:restore
- MSBUILD

This adds the Solution zip in the bin Debug folder.

To get both managed and unmanaged solution, update the cdsproj file

We can see both managed and unmanaged solution created.

Import the solution in Dynamics 365 CE and open any of the entity’s form. Here we have created a new text field named GUID in the Contact form and have set our custom control for that field.