Learn PCF Power Apps Component Code Component in 1 Hour | Installation, Demo and Use in Dataverse

[Music] hello everyone welcome to this series of power up space uf this is sanjay prakash and today in this video we will start with pca project which are used in powerapps powerapps component framework empowers professional developers and app makers to create core components for power apps like model driven apps and canvas apps you know that right so these code components can be used to enhance the user experience for users working with data on forms views dashboards and canvas of screens so normally to create custom visuals we use pcf right we have also web resources right but pcf has its own advantages so that it interacts without you know it interacts with form components or form data without any issue right so here we will see how to install required components to build powerapps component framework pcf and we will create a sample pcf control in this session so let us get started you will see my screen here in the screen i have created a slide to follow step by step right the first step is installing node.js in the journey of pcf creation the first step is installing node.js so let's follow step by step i have given the url here you can go to the url and in the url you have to hear the url now it will load the node.js right you can click on windows installer which will download in your machine right and let's say i am saving this but if you see here it is now downloading the node.js you have to install the node.js in your machine i have already installed if i will install it will ask you to remove or replace right or modify so installing a software is not a new thing for you right you can install it is exe file or msi file microsoft installer file which will install uh step by step right if you click on next it will uh go it will install the node.js in your machine right now it is checking in my machine that whether it is installed or not if it is installed it will tell me to remove a repair forever right so this is the first step installing nodejs is very very important in the pcf development journey right so i don't want to install so i will just cancel it because i have already installed right the next step is to install powerapps cli right powerapps cli command line interface is a set of commands that helps creating pca projects and other related commands that are available in the powerapps cli package so this is the url you can go through this is important right if you do not install all these steps if you do not follow you cannot start pgf so here the url i have mentioned in the slide and you have to download if you download it will download this and if you click this msi dot msi it will try to install right see when i am creating clicking the next button it is telling me either repair or remove because i have already installed this so you have to install this so there is no difficult task installing softwares right so install this msi and finish this once it is installed what is the next step follow step by step so that you can understand install visual studio code it's not required visual studio code is not required but as a developer i always recommend visual studio code which is a free software available for you to download so that you can edit and run some terminal to execute some commands right so install visual studio code i have already given the link here right if you go here in this url you will find the windows installer if you click this it will give you the direct link otherwise it will set up here right so if you save it the installer will download the vs code setup and you can double click to execute now once it is successfully uh installed downloaded and installed you can find out your app here visual studio code right you see if you search you should uh get this visual studio code app in your start menu right so this is the three step that you need to you must follow right installing node.js installing a powerapp cli and installing visual studio code next thing is create folder for pca project we need to create a folder so that we can create a pca project in that folder so you can go to any folder any local drive of your choice in your machine i will go to the c drive and here i want to create a new folder click on new i want to give a name let's say pcf mobile validator okay so i have given the name pcf mobile validator in this folder this folder will be used to contain the pca project necessary files right so this is the step we have done what is the next step the next step is create pca project so you have to create a pcf project using some commands using uh bs developer command visual shooter developer command prompt right so open visual studio command prompt run here just search cmd you will find there is a developer command prompt for vs 2019 right if you if it is not available you have to install the community edition of visual studio or if you have any visual studio you will find this developer command prompt open this developer command prompt here we need to navigate we need to navigate to the folder that we have created which folder we have created we have created c drive pcf mobile validator so just type down cd slash which will directly navigate or redirect to c drive then i can write down cd command cd pcf mobile validator because this is my folder that i have created to have to contain all the pca files right now this folder is required for us to create the project now we have to type a command right which command to create pca project this is the command right i will explain you about the command you will see pac stands for powerapps component pcf init then then hyphen hyphen nh ns stands for namespace give a namespace name after space mobile validator then hyphen hyphen n stands for name of the control i have given mobile number validator then hyphen hyphen t stands for template you can create pc projects with field template or data set template i am using field template so so uh hyphen hyphen t stands for template field you can also specify template instead of n names so instead of n you can specify name instead of ns you can specify nam space but i have used the sort form once i pasted this and enter it creates the pca project inside my folder right it is telling that namespace is missing you see here that means there is some issue so let me type down sometimes that problem happens pac-pcf in it i'm typed and i'm typing down namespace so instead of n also you can specify namespace let's say mobile validator name mobile number validator okay then template template is filled and hit enter once you hit enter it will create the project let us check if the project is created or not you can see here this is the pcf mobile validator folder and inside that this control is created right now this is the control that will be used in later on right now it is telling one thing be sure to run npm install or equivalent in the directory to install project dependency every powerapps component framework project requires dependencies right which is available in npm node package manager so you have to run a command npm install to install all the necessary dependencies which are part of pca project and available in npm node package manager now at this stage i don't want to use command prompt i will stop the stop using command prompt the next step is i want to open pca project in visual studio code right so open visual studio code i have visual studio code installed this one i can open this now once i open visual studio code i can open the folder pcf folder that i have created right so that it will load all necessary uh files which are part of the folder so it will take some couple of seconds to open because visual studio is a you know it's an editor right now it is open for me now i have to point visual studio code to the folder that contains my pca project so maximize this click on open folder if you click on open folder option you can choose which folder you want to open i want to open c drive and pcf mobile validator click on select folder once you click on select folder the necessary files which are part of the folder will be loaded here right and this is the control and these are the helper files now the next important thing is to install npm so go to the next step npm install run terminal open the terminal of visual studio code and execute the command npm install right so i'll go here and click on any file index.js i will tell you about index.ts but right now i need to go to terminal and click on new terminal here we can write our commands and in the terminal i can write down i can click on this plus icon and choose command prompt and here i want to write down a command npm install and hit enter so you have to specify the npm install command here and hit enter so that all necessary uh packages of this node package manager which are helpful for our pc project will be installed in the local directory right so we have to wait it is still running okay so once the npm install is success we will proceed to the next step right sometimes npm install keep some error right if you scroll down you'll find the errors so this type of errors will get let me go up what is that one okay this type of errors you may get right in you know when you install npm now to resolve this i have already created a created some blocks to fix this running some commands go to shopchip.com and here you will find a blog here the first one so if this type of error you are getting or while installing npm you can scroll down and type down this run these commands first you have to run npm cache clean force npm install legacy pure tips then and help npm install force so all these npm installs will install the phrase packages from the repository and the errors will go away right anyway so once the npm npm install is done next we will do npm build right so do npm run build command this command sorry guys i have to in no package manage manager npm run build this will build the project pc project that we just created right what is the next stage the next stage is we will edit the pcf code now we will do some sample code which will uh which will use as a pcf code right so we will go here although the mobile validation i will do later on but first we will do a sample thing right so regarding the explanation of these functions that are available what what is the project directory menu what is manifest file what is inductor index dot ds this thing i will explain later on but let us first run some sample projects so that you can understand yes this is what we can do so here in the index.ts file you will find many methods init method update view method gate output method then destroy method right so init method is used to initialize the component right and there is a construct also and here you can declare the global variable this is the class mobile number validator and this is the control whose name is mobile number validator right and in the control manifest you will find the control specific properties let me click on word wrap so this is the control specific information and if you go down you will find a property so the sample property is the property which is connected to a field or it can be connected to a data set right so i want to connect to a field of single line text regarding this off type usage everything we will discuss later on right this is the get started video so we don't want to make it uh long so here you can define a specific name of the property let me give a name of the property edge mobile number and here the display key when the display key is used i will tell you just note down mobile number display key and the description you can define let's say mobile number description or validator you can specify and this is of type single text right so we we are defining properties of the control so that the value will be passed from the dynamics 365 or powerapps then by taking this value of the field we can process the pcf right usage is bound required true right now regarding the style sheet and all other things i will tell you later now save it next go to the terminal and write down npm rom build why i am running this npm run build every time because when you change anything in the manifest file control manifest input.xml file you have to build it otherwise the references will not be available in index.tx go to index.ps as a global variable i want to define a container so how to define a private variable of container type so you have to use private then you can use underscore container so you have to learn typescript for this right container html development semicolon now this is a private and global variable whose name is container which type is html development this development can be rendered on the pcf control for different purposes right now in this container i want to display some value right so what i will do i will go to init function and here i want to initialize the control first we need to initialize the control using this dot underscore container equal to container here we will find let me work up in the init command init function you will find there are three parameters one is context another is notify output changed and the third one is the state and fourth one is container this container should be assigned to this variable so i'll use container equal to container so this is the private variable and this is the parameter of this init function now i want to write down this dot underscore container dot inner html equal to i want to read the mobile number property to here right so i can use context how to read the properties using context context dot input parameters or parameters dot mobile you will see it is telling sample property but i have already already changed the name of the sample property you will see here mobile number but still it is displaying here sample property that means it is not updated yet so save this and go to here to define npm rom build which will rebuild the bishop project for you so that the references will be properly handled right now let me define some styles of the container dot style dot background color equal to yellow right and i just want to display some value in the container dot inner html equal to context dot parameters dot okay it is still saying sample property anyway keep it sample property dot raw sometimes it is uh is the issue so once it is done i can save it and again run npm run build so what it will do in the initialization method i have created i have assigned the container as a div element i am changing the container status edge there is one error guys let me check that uh let me change this to mobile number sometimes because of that only it is showing that i index dot this let me build it [Music] so mobile number okay the control manifest i've changed but it is not updating let us do one thing let me change keep it a sample property for now okay sometimes this is the error so let me go to manifest file and here you will see the property name is sample property single line text save it go to index and for the time being delete and try to run the npm build and primron build it will build the project we should not find any error otherwise it will not run properly now it is successfully built now i want to write down let us see how it works dot inner html equal to context dot parameters dot sample property dot raw right now this will assign the value of the sample property to this container div container right and in the next proper next update con update view i have to write down the same thing this dot container in a red html equal to context parameter sample property draw so whenever you assign some value to the sample property input parameter the division will display the value of the sample property in the inner html and the style has been implemented like this background color yellow now again do the wrong build npm run build and now we will do npm start to test so what is the next step we see we have edited the p shape code i have updated index ds and other codes next build the bishop code using npm round build we have done this next step is test and run using and can start so once it is done what is the error type string knowledge notation okay so this error type string is not assignable to a string it's because of this issue so what you will do you will do or blank write down this or in blank this is a typescript issue make it or blank save it and build it and before that i will also tell you one thing you have to go to extension and uh install the power platform tools this will help you working with your project you'll see here if you click this it is already installed right so if it is not installed you can install which will help you now the build is succeeded now i will write down npm start now this npm start will open the pcf control in browser so that i can test it but control i have created the control i have created to display a division or a container division which background is yellow color you'll see this is yellow color and the value of this division will be same as the value of the sample property now whatever you type down here that's that will ascend to the the division screen division element type down something can you see that whatever i am writing in the sample property it is mentioning here in the division right so ultimately we are taking the property value and processing using pcf control isn't it right now let us go here now the we will follow the next step right we have done the sample step sample control for other things we will how to validate and other things we will continue with next class next session but here we will follow the next stage what is the next step we have to package the pcf right how to package the pcf you have to run this command i will tell you how to run this command so this is bishop mobile validator so to stop the testing you have to type down ctrl c and click on y press enter now here you have to write down pac solution init publisher name you can give a publisher name it should be unique and the publisher prefix also unique but it is telling cts project creation file the current directory already contains a project already contains what is the error let me check cds project creation file the current directory already contains a project please create a new directory and retry the operation okay that means we will create a new folder let me create a new folder mk dir solution and cd solution will navigate to the solution and paste the command now once we have pasted the command to create a solution project you will see here inside solution we will find the solution project right so this is the folder which created and uh inside the solution the project is available for me now what is the next step follow step by step so that you can understand next is add references right so we have to add references copy this and go to the project here you need to pass pac solution add reference and path we have to give c drive and your control your pca project folder you will see project reference successfully added to the database solution project you can check here if you go to c drive and the folder will see that so here are the references is added automatically right what is the next step the next step is once the project is added you want to generate the g file how to generate g file you have to run this code ms build build restore so i'll go here and write down the command no not this one i think that is not copied yet guys so go here and copy this and press enter ms build t build restore it is telling that ms build is not recognized as an internal and external command okay so once the in npm install it success we will proceed to the next step right sometimes npm install keep some error right if you scroll down you'll find the errors so this type of errors will get let me go up what is that one error error okay this type of errors you may get right in you know when you install npm now to resolve this i have already created a created some blogs to fix this running some commands go to subchip.com and here you will find a blog here the first one so if this type of error you are getting for while installing npm you can scroll down and type down this run these commands first you have to run npm cache clean force npm install legacy pure dips then and help npm install force so all these npm installs will install the phrase packages from the repository and the errors will go away right anyway so once the npf in npm install is done next we will do npm build right so do npm run build command this command sorry guys i have to in no package man manager npm run build this will build the project pca project that we just created right what is the next stage the next stage is we will edit the pcf code now we will do some sample code which will uh which will use as a pcf code right so we will go here although the mobile validation i will do later on but first we will do a sample thing right so regarding the explanation of this functions that are available what what is the project directory menu what is manifest file what is inductor index.ds this thing i will explain later on but let us first run some sample projects so that you can understand yes this is what we can do so here in the index.ts file you will find many methods init method update view method gate output method then destroy method right so init method is used to initialize the component right and there is a construct also and here you can declare the global variable this is the class mobile number validator and this is the control which name is mobile number validator right and in the control manifest you will find the control specific properties let me click on word wrap so this is the control specific information and if you go down you will find a property so the sample property is the property which is connected to a field or it can be connected to a data set right so i want to connect to a field of single line text regarding this of type usage everything we will discuss later on right this is the get started video so we don't want to make it long so here you can define a specific name of the property let me give a name of the property age mobile number and here the display key when the display key is used i will tell you just note down mobile number display key and the description you can define let's say mobile number description or validator you can specify and this is of type single text right so we are defining properties of the control so that the value will be passed from the dynamics 365 or powerapps then by taking this value of the field we can process the pcf right usage is bound required true right now regarding the style sheet and all other things i will tell you later now save it next go to the terminal and write down npm rom build why i am running this npm run build every time because when you change anything in the manifest file control manifest input.xml file you have to build it otherwise the references will not be available in index.tx go to index.ps as a global variable i want to define a container so how to define a private variable of container type so you have to use private then you can use underscore container so you have to learn typescript for this right container html development semicolon now this is a private and global variable whose name is container which type is html development this development can be rendered on the pcf control for different purposes right now in this container i want to display some value right so what i will do i will go to init function and here i want to initialize the control first we need to initialize the control using this dot underscore container equal to container here you will find let me overlap in the init command init function you will find there are three parameters one is context another is notify output changed and the third one is the state and fourth one is container this container should be assigned to this variable so i'll use container equal to container so this is the private variable and this is the parameter of this init function now i want to write down this dot underscore container dot inner html equal to i want to read the mobile number property to here right so i can use context how to read the properties using context context dot input parameters or parameters dot mobile you will see it is telling sample property but i have already already changed the name of the sample property you'll see here mobile number but still it is displaying here sample property that means it is not updated yet so save this and go to here to define npm rom build which will rebuild the bishop project for you so that the references will be properly handled right now let me define some styles of the container dot style dot background color equal to yellow right and i just want to display some value in the container dot inner html equal to context dot parameters dot okay it is still saying sample property anyway keep it sample property dot raw sometimes it is uh is the issue so once it is done i can save it and i can run npm run build so what it will do in the initialization method i have created a i have assigned the container as a development i am changing the container status edge there is one error guys let me check that let me change this to mobile number sometimes because of that only it is showing that i index dot this let me build it [Music] mobile number okay the control manifest i've changed but it is not updating let us do one thing let me change keep it a sample property for now okay sometimes this is the error so let me go to manifest file and here you will see the property name is sample property single line text save it go to index and for the time being delete and try to run the npm build npm run build it will build the project we should not find any error otherwise it will not run properly now it is successfully built now i want to write down let us see how it works style dot inner html equal to context dot parameters dot sample property dot raw right now this will assign the value of the sample property to this container div container right and in the next proper next update con update view i have to write down the same thing this dot container in html equal to context parameter sample property dot draw so whenever you assign some value to this sample property input parameter the division will display the value of the sample property in the inner html and the style has been implemented like this background color yellow now again do the wrong build and pm round build and now we will do npm start to test so what is the next step you see we have edited the p shape code i have updated index ds and other codes next build the bishop code using npm round build we have done this next step is test and run using and can start so once it is done what is the error type string knowledge notation okay so this error type string is not assignable to a string it's because of this issue so what you will do you will do or blank write down this or in blank this is a typescript issue make it or blank save it and build it and before that i will also tell you one thing you have to go to extension and install the power platform tools this will help you uh working with your project you'll see here if you click this it is already installed right so if it is not installed you can install which will help you now the build is succeeded now i will write down npm start now this npm start will open the pcf control in browser so that i can test it but control i have created the controller i have created to display a division or a container division which background is yellow color you'll see this is yellow color and the value of this division will be same as the value of the sample property now whatever you type down here that that will ascend to the the division screen division element type down something can you see that whatever i'm writing in that sample property it is mentioning here in the division right so ultimately we are taking the property value and processing using pcf control isn't it right now let us go here now the we will follow the next step right we have done the sample step sample control for other things we will how to validate and other things we will continue with next class next session but here we will follow the next stage what is the next step we have to package the pcf right how to package the pcf you have to run this command i will tell you how to run this command so this is visual mobile validator so to stop the testing you have to type down ctrl c and click on y press enter now here you have to write down pac solution init publisher name you can give a publisher name it should be unique and the publisher prefix also unique but it is telling cts project creation file the current directory already contains a project already contains what is the error let me check cds project creation file the current directory already contains a project please create a new directory and retry the operation okay that means we will create a new folder let me create a new folder mk dir solution and cd solution will navigate to the solution and paste the command now once we have pasted the command to create a solution project you will see here inside solution we will find the solution project right so this is the folder which created and uh inside the solution the project is available for me now what is the next step follow step by step so that you can understand next is add references right so we have to add references copy this and go to the project here you need to pass pac solution add reference and path we have to give c drive and your control uh your pca project folder you will see project reference successfully added to the database solution project you can check here you go to c drive and the folder will see that so here or the references is added automatically right what is the next step the next step is once the project is added you want to generate the g file how to generate g file you have to run this code ms build build restore so i'll go here and write down the command no not this one i think that is not copied yet guys so go here and copy this and press enter ms build t build restore it is telling that ms build is not recognized as an internal and external command so while running the uh ms build if you are facing an error then you can go here i have written a blog here ms build you might get ms build is not recognized as an internal or external command so this is because of the environment variable path is not set properly for your visual studio so follow these steps you will get to know i have already set this variable to point to visual studio 2019 community edition using ms build so follow this step then reopen or restart your visual studio code then type the command ms build then it will work fine right anyway so uh where we were okay we are in the uh stage of ms build right last time it was throwing error but as i have done the ms build sorry path creation using that block it works fine right you can see here i have created a solution folder uh inside this special validator so i am using cd solution so that i will go to the solution folder if you check the folder you can you can understand this is my pca project inside that i have created a solution in this solution i am storing this g file so what i am typing ms build slash d build then restore this will create a g file of your solution in the bin folder inside that solution if you go to bin debug you will find the solution so this is the g file solution that will import in database right once you hit this command it will create your g file automatically and the build is success right build is succeeded what is the next stage we will go here to check the next stage the next stage is manually import the solution into database using the web portal or you can automate using microsoft power platform build tools right you can use devops for ci cd concept which will extract the solution and import the solution right but you can skip right now otherwise you can import it manually or you can set up some devops devops integration is not right now in the coverage of this video i will just import manually so i'll go to dataverse and click on solutions and insert solution i will import this click on import solution browse [Music] i will go to the path where my project is there my solution is there so this is the location i have to double click the solution click on next now once you click on next it will try to import the pcf solution into database right click it is unmanaged click on import now it is trying to import this solution it will take some couple of seconds let us wait now the solution is imported you will see here so this is the solution pcf solution that has been imported now i want to use this solution components pcf component for my mobile number right so i'll go to uh let me publish this first click on this and click on publish or you can open this solution to see the components inside that solution solution is imported successfully the message is displaying at the top and you can click on publish all customization you will see here this is the pcf control that is available here which type is custom control i can click on publish all customization so that the custom control will be published in my database now i want to call this specific control against a mobile number field right because this pcf control is having a template associated with it to a field not a data set so i can connect to a field to call this custom validator now how to do that once it is published i will go to the entity where i want to use that bishop component or attribute where i want to use this component i'll go to mac dot powerapps and go to the solution where my entity attribute is there so i have a student entity i'll go to choose the correct environment first it is always mandatory to choose correct environment in the in the solution you have to go to the solution i have a solution called school solution uh where is that one this one in the school solution i will directly navigate to the attribute table then school and we have column you can directly go to the form but i want to associate the custom control to the mobile number field i can open main form edit in new tab so it will open the form so once the form will open you have to click on switch to classic so switch to classic will open the form designer in classic mode and in the classic mode you have to associate the control with the field let us wait till the form loads you have to add necessary fields on the form so that the pcf control will render against that field right so it is loading let us wait i want to associate the uh control with mobile number right so what i will do i will put the mobile number here and this control i want to associate with pca so i'll double click and i will click on control tab and the controls tab will find add control option and the add controller will find your control listed in the list so go to here and check the name called as mobile number validator if you go down you will see uh sorry this one mobile number validator this is the control that we have created right and this is the single line text and this is the mobile number validator description we will see the it see it it's matching with the control manifest right property you can see here let me see here description key mobile number later description and you will see here it is matching right now it is your control so click on add once you click on add it is asking which value you want to associate with the key right the value is associated already with the key now you can choose on which device you want to enable this pcf control early enabled click on ok now click on save and publish now the mobile number field will render the custom pcf control instead of the dynamics or powerapps text box it will render as a pcf let us understand how it renders once it is published let me close this i can also use the previous uh preview form here click on create form which will open the create student create form this is the student form where i have the mobile number so i want to check how it looks like in the create of student form when i have associated the pcf with mobile number otherwise you can directly go to the model driven app to open this let me go to model driven app so i'll go to app and open the school application i have created where is the school hub so in the school hub if you go to student entity and create a new student you will see the pcf control let me open an existing uh so let me go go to the student for student view let me open any uh student which is having so all the student has mobile number right let me just go to add mobile number field on the view you will see all these students having different mobile numbers some are having 10 digit and some are having not right so it not necessary my requirement is my pc control is it will display whatever value it is available here in yellow color right background so let me open this ajay kumar if you see here in the mobile number it is displaying this right so how it is displaying this is because of the division we have taken and the yellow color we have taken in the indexed yes the background of division should be yellow color as we have mentioned here this one and it is displaying the bound uh filled mobile numbers value inside this if you open any other field or any other student also will see this the point here is it's because this is a bound field that's why it only works with the existing value and renders it with a custom controller custom style but if you want to provide an input to a field and that pcf controller will respond or render according to the value input value you have to change the usage edge instead of bound it should be input right so that it will render properly now in my next session i will tell you how we can change this as input value input usage so that you can we can provide a value user can provide a value here and according to the value it will update okay so thank you for your time i hope we have followed all the steps starting from installation to using the demo using the pc controller in our dataverse model driven app so stay tuned for the next series of pcf [Music] you

Channel: Softchief Learn

Views: 30,322

Keywords: Dynamics 365, Power Apps, d365, dynamics 365 tutorials, dynamics crm training, power apps pcf tutorial, pcf training, pcf getstrated, pfc learn in one hour, how to develop PCF power apps, pcf tutorials, use pcf in datraverse, use custom component pcf in model driven app, powerapps pcf, learn pcf in power apps, pcf tutorials for begineers, pcf tutorial for crm developers, easy step by step pcf tutorials, pcf step by step, be an expert in pcf, pcf and power apps

Id: 5rHsKKOOUvQ

Length: 57min 9sec (3429 seconds)

Published: Sat Jun 11 2022