Working with PCF - Build a Text Character Counter Control and Use it in Dynamics 365 Power Apps

[Music] hello everyone welcome to another video in this video we will discuss another concept of power component framework powerapps component framework right in my previous video if you have you have not watched the previous video where i have explained the pcf concept step by step where if you are a beginner in power up component framework then how you can proceed step by step in building pcf component if you have not watched please watch that then you can understand properly this video right so this video will tell you about how to build a custom code component for a rich text box not for a rich text text box a word counter a word counter for a or character counter for a text box for example normally if you check any text area you will see normally it looks like a simple text box right but if you want to implement like this you see here in the comment box so here you can write something then there is a shadow here at the outside of the text area and you can also see here the maximum limit is 500 remaining 473 right so it counts the number of characters that you are entering in the box right and when you enter in the box and if it exceeds 500 or it meets the 500 is reached then it will show some it will stop typing in the text box right so the most importantly how this can be implemented to display a label with maximum character and the remaining value should be decremented as per the value as for the character that you are providing here you see now you cannot type anything now because the remaining is zero so how you can display label according to the value of the uh field and this field is not a field of dynamics 365 or powerapps this is a field of text area that is available in our pcf code and whatever you provide value here that also assigned to the comment field and it saves in the database right so let us understand how this label and rich text box can be integrated as a part of pcf component so if you have not watched those fundamental steps of creating pcf you can go to this video and watch that first then come to this tutorial right so i have created a tutorial here i have created a project uh pcf project and given the name edge word counter namespace and here i have given the description something like what counter control counts maximum length of a field restricted to control type is standard always this is the control manifest input xml file right here i have taken two properties one property is bound property another is input property bound property is always bound to a field of dynamics 365 form right as this is bound to the comment field so this this property is bound to the comment field right so one is bound field so you cannot change the value and here this is another property which is of type input input type means someone can provide a value to this property so that the power of component or pcf will take this value and take action i have declared here the default value 500 right word limit 500 this is the default value but you can overwrite this value default value or you can override the word limit of this property while calling the pcf from the field whenever you are calling that pcf against a field in form design i'll tell you that so then there you can overwrite this value but by default i have assigned 500 for the word limit so this is the two property you have to define for this nothing else here now i will go to index.x index ts is the typescript file which stores everything right every powerup component framework is having the general skeleton right one is the class implements component framework then we have a constructor then we have init function in it very init method which initializes the component so what is the init method in it whatever you write in the unit method that actually initialize your component so initially whenever the form will load how your uh controller pcf control look like that's it so that happens in the init function then we have object view okay whenever uh you want to update the pcf control you can fill you have to use this object view method get output method is used whenever you want to send the data send the pcf control data back to the source and here our source is dynamic 365 form field next we have a destroy if you want to destroy or you know unmount the objects you can use destroy and i have created a one key event here one key function custom function to call it okay so let us see how i have designed so first i have taken three html elements the first is container as a global variable so you have to define these things as global variable container as html development now it is always a best practice or i always recommend you guys to learn typescript uh syntaxes otherwise you cannot understand correctly so go to w3schools and compute the type scripting how the syntax is written so here private container colon html development means i am declaring a container variable of private type which type is html development this is a div element right division in html like that i have taken another variable for text area another variable for label to display the text what is the maximum character allowed and what is the remaining character allowed then i have taken a global private variable called as remaining count which is number type and next is private context this is the context variable globally i have declared of type component framework context type and the private notify output changed which is powered initial so notify output change is required whenever you want to update the view update the pcf control that something has been changed in the pcf control data set right in the in the field or data sheet now then cost was constructor i don't want constructor right now but in the initialization method i need to initialize the component so this set of code displays or shows a text box control a text area control and label control let us see how it is designed now first this context all the global variables that i have defined should be initialized here like this dot context equal to the context that we are passing here in the init container equal to container notify changed equal to notify changed so i have assigned global variables with the parameters that is passed in the init next i am trying to create a text area element so this dot input text the input text is a text area right you see here it is defined here so i want to define a text area element next with the container i want to append child this text area right so this is the text here so that the text area will display here now i want to add some styles to this text area what are what are the styles width hundred percent border one pixel and block shadow is this so you can see here the box editor is showing something here you see this is because of this style attribute of the input text area next this dot input text set attribute rows equal to five so initially when the form loads it expands up to five rows okay if you want to expand it you can expand it by changing this value now it is five rows right one two three four five right so maximum five rows it is displaying now what is the next properties next what value you want to assign do you want to assign some value to this field what is the value and question the value should be equal to the command field context.parameters.commandfield commandfield.raw what does it mean it means that the value that is passed in this comment field property should be assigned to this field input text area if it is blank then i want to assign blank text blank empty text right next this dot input add event listener why i'm adding this event listener because i want to update this label whenever someone type some uh and type type some character and remove or release the key so whenever release the key it should be updated that's why i'm calling an event of the input text key op event and i have created a on key of event here on key op and here i am calculating the remaining count equal to context parameter dot world limit word limit is already available here past is 500 or 600 whatever that is from the front end it is fast the total world limit minus subtracted input text dot value length that means total wall limit minus total length of the input text so now this value is assigned next this value i need to use in the label text to display so this dot label text dot inner html equal to maximum limit is the word limit row then after space it will display remaining is remaining count this is the variable that is assigned here which is calculated by subtracting the maximum limit and subtracted uh from that the in total uh character count available in the text box right and next i have a dot i have written a condition if the remaining count equal to zero this dot input text at attribute max length equal 500 that means if you are keep typing and the remaining count becomes zero the maximum length of the reach text box uh the text area will be 500 that means after 500 you cannot type anything right as you have already tested this okay now next this dot notify output change why this notify our output change is required because whenever you call this notify output change function it will call the get output method so that you can pass the updated value to the source so what you need to pass in the source so source field is the common query which is the boundary you see here this is the common field and this is the bound field to the command field or any text area field of your dynamics 365 form field now you have written command field equal to this dot input text or value so this way you can return the your return the pcf control value to the bound field so that it will ascend to the dynamics field from the picture control now what is the next thing we have done upgrade view in the update view also we are doing the same thing we are calculating the remaining count by subtracting the input text from the word limit and displaying the message in the level right this is the simple thing right so init function to initialize the component upgrade view to update the pcf control with the values and get output is used to return the pcf control values to the source bound field and on key press on key of event i have created this is a user defined function i have created so that it will calculate the remaining count and notify output changed now once it is done you have to upload the solution file in the dynamics 365 or powerapps solution i have already displayed last time how you can upload solution using this uh video now once it is done you have to go to the solution and bind this visual component for the comment field let me show you that let me go to mac.powerapps to show you how it is bound it's because i want to bind this pcf control with the comment field let us understand how it is bound and go to development and go to dataverse tables [Music] now in this tutorial i will not tell you uh how it is uploaded how the pcf is uploaded in dynamics 365 server right you have to read you have to watch my old video so that you can understand now here i can go to the forms because i have used account main form to use that pcf control so i will open this account page account from mainform and most importantly i will open in classic mode right so click on the classic mode button sometimes the formula takes time so click on switch to classic and open the pop-up if it is blocking [Music] now it will open the classic mode uh classic mode form editor where you can double click the field and you can attach the pcf control as per your choice so this is the comment field right double click this comment field go to the control this is already have explained in my previous video how to attach go to control here you can see how i have associated you see word counter control and i have enabled web phone and tablet and here you see this is the first property which is bound to the comment field and this is the word limit display key which is defaulted as 500 if you want to edit the 500 you can edit here so that maximum it will be taken as 2000 click on ok and click ok so this is how you can associate pcf controls and it will act as per your need right so pcf is a you know best way to define to design your custom control as per your choice you can extend it using react fluent ui you know jquery bootstrap many things you can add as external file so i will show you in next videos how you can create this i will also show you another thing uh to another thing in my next video i will show you in the contact i have created a choice field right this is a choice for you see how it is displayed how this type of check boxes can be radio buttons can be created using 20 ui right you can also design this in pcf right i'll show you that in my next tutorial thank you guys i will also upload this uh control upload this uh word counter control in pcf gallery so that i can download and i will also share the code in github so that you can download and practice thank you for your time guys i hope it will help you to design your own code you practice yourself so that you can understand but remember init function is for initialization and object view is for updating the pcf control parameters get output is for sending the pc control data to dynamics bound data and if you want to have any custom function you can write down here right you can also use test unless if you if you want to test your control in your test harness you can just type the command npm start once you click on npm start it will open the test harness window which can be used to test the vcf control right so before before uploading this solution pcf solution in your database or in your powerapps you can test in your visual studio code so that it will open the test harness in a browser and you can interact with your pcf control to test this now let us wait it is opening the test harness for me now it is validating the manifest evaluating the control then it will start the browser and load my control so it is trying to compile and building the control so that it will open in the browser [Music] now once it is done you will see it the control opens in the browser and here you can paste your control when you type it is changing the remaining value is changing and also the value is assigned to the output value comment field right and this is the common field value and this is the word limit you can change it here this is for testing purposes this is that's why it is called as test harness so that before uploading your controller in dynamics you can test it to stop this testing you can press ctrl c and press y to continue right okay thank you guys so try this uh code in your pc control in your form and let me know in the comment thank you guys [Music]

Channel: Softchief Learn

Views: 4,910

Keywords: Dynamics, CRM, Dynamics 365, Power Apps, d365, power platform, dynamics 365 tutorials, dynamics crm training, pcf power apps, pcf tutorial, pcf for begineers, power apps pcf tutorials free, complete pcf tutorial, power apps custom control, power apps pcf training, learn about pcf power apps, pcf in details, pcf power apps demo, learn pcf, pcf a2z, how to build powerapps pcf

Id: rVY7Uppf3Q0

Length: 21min 30sec (1290 seconds)

Published: Wed Jun 22 2022