Step by Step – Create a very simple PowerApps Custom Component to show the GUID of the record


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/

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.

For reference à

  • After publishing the changes, we can see the GUID being displayed in the form.

  • To update the control, change the version for it in the ControlManifest.Input.xml

Followed by

  • npm run build
  • msbuild
  • Importing the new solution file generated

In a nutshell below are the high-level steps à

1. Install npm

2. Install PowerApps CLI

3. Install Visual Studio 2017 or later

4. Create a new folder for the project.

5. Navigate to the folder in Developer Command Prompt and run the following command to create the component project

pac pcf init –namespace <component namespace> –name <component name> –template <component type>

1

6. Install the project dependencies using below command

npm -install

7. Update ControlManifest.Input.xml

8. Update index.ts

9. Build the project

npm run build

10. Use the below command to test the component

npm start

11. Create a folder for holding the solution zip and related files. Navigate to that folder and run the below command.

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

2

12. Add reference of the custom component in the solution

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

3

13. To create the Solution Zip File

MSBUILD /t:restore

MSBUILD

4

14. Import the solution file and use it inside Dynamics 365 CE.

lastly – Don’t forget to check the wonderful PCF Gallery

https://pcf.gallery/

Hope it helps..

Author: Nishant Rana

I love working in and sharing everything about Microsoft.NET technology !

15 thoughts on “Step by Step – Create a very simple PowerApps Custom Component to show the GUID of the record”

  1. Hi Nishant,

    Awesome blog article. A quick question. I’ve taken an existing github repository files for multi-tagging which only had the manifest, css and index typescript files. I then followed your steps and created a proj file and did the npm install. I then updated the manifest and index with the code I got and then built it.

    It was when I went to build the solution in the SolutionPackage folder with:
    pac solution init – -publisherName [publisher name] – -customizationPrefix [publisher prefix]

    That I got this error:
    Error: A required argument –publisher-name is missing.

    Not sure what I’m doing wrong here. Any help would be greatly appreciated.

    Liked by 1 person

    1. Hi Michael, you need to give publisher name and prefix name- refer to my video for complete developing

      Like

  2. Hi Nishant,

    Thanks for wonderful article. I have followed all the steps till the end and when I deployed my control it is not working. Do we have steps to troubleshoot the control somehow . Please suggest.

    Thanks

    Like

  3. Hi Nishant – great work again, gave me the inspiration I needed.

    I have a Control working based on these suggestions.

    But when I am referencing the Xrm.* interface as you did to get data from the form the reference is not available to me. What am I doing wrong?

    Thank you again!

    Like

  4. I am new to PCF controls and struggled to lot to create a first PCF application, Finally I followed the steps available here, Thank Nishant it works fine for me. I got confident both creating and importing the PCF into D365. Love it..

    Like

  5. Hi Nishant, thank you so much for your instructions on creating a PCF control. I was following Microsoft’s docs on creating a PCF control and those instructions needed some updating. So I’m glad I found your instructions.

    Will you create instructions on using the PCF gallery? Thanks!

    Like

Please share your thoughts

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Clavin's Blog

Power Automate - Power Apps - SharePoint Online - Azure - Nintex - K2 - Artificial Intelligence

Sat Sangha Salon

An Inquiry in Being

The Indoencers

The Influencers & Influences of Indian Music

Monika Halan's blog

Hand's-free money management

D365 Demystified

A closer look at Microsoft Dynamics 365.

Microsoft Mate (msftmate) - Andrew Rogers

Experienced consultant primarily focused on Microsoft Dynamics 365 and the Power Platform

Knowhere365

Specific topics by Django Lohn on the whole Microsoft365 Stack

Manmit Rahevar's Blog

One Stop Destination for Microsoft Technology Solutions

RelatoCorto

Blog Fiction

MG

Naturally Curious

Brian Illand

Power Platform and Dynamics 365

Steve Mordue MVP

A Microsoft Business Applications MVP

Subwoofer 101

Bass defines your home theater

SQLTwins by Nakul Vachhrajani

SQL Server tips and experiences dedicated to my twin daughters.

Everything D365

Discovering Azure DevOps and D365 Business Applications

Tech Wizard

Lets do IT Spells

Two Bite Tips

Valuable Tips To Grow Your Business

XRM Tricks (Power Platform & Dynamics CRM )

Power Platform & Dynamics CRM

CRM TIPS BY PRM

Mail to crmtipsbyprm@gmail.com for queries and suggestions

nijos.dev

Giving back to the community what I have learned

xrm CRM Dynamics

Dynamics CRM Technical & Functional Info

Dynamics 365 Blogs - Explained in unique way

Sometimes you need to look at things from different perspective.

CRM Keeper

Dynamics 365 Customer Engagement, CRM, Microsoft CRM, Dynamics CRM

EVOLVED365

Step into the world of a Dynamics 365 Consultant

Dianamics PCF Lady

Diana & Dynamics 365 & Power Platform

Sara Lagerquist

No Code Customization Concepts

innovativeaj

developer, designer, writer, fun loving, patriotic, humble and a sweet person inside out :) love and respect people who have a great sense of humor.

Temmy Wahyu Raharjo

Dreaming to be a clean coder and TDD minded programmer.

Transform 365

We blog about problems we face and code we write to help others

Virendra Agrawal's Blog

Blogs, News and Insights of Dynamics 365 world

Jukka Niiranen

Thinking forward about Microsoft Power Platform

Amar Singh

Share your knowledge. It’s a way to achieve immortality.

Lokin Shah

Dynamics 365 - Sharing edge cases and ideas

%d bloggers like this: