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


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>

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]

12. Add reference of the custom component in the solution

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

13. To create the Solution Zip File

MSBUILD /t:restore

MSBUILD

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 !

8 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

  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

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.