Name: PPUG Presents: Power Platform AI Prompts
Uploaded: 2025-02-28T19:01:24.932Z
Duration: 1 h 30 min 8 s
Description: PPUG Presents: Power Platform AI Prompts

Transcript for "PPUG Presents: Power Platform AI Prompts": Hello, everyone, and a very warm welcome to Power Platform and AI user group. My name is Calvin. I'm the host out here, and we are here to present you with two exciting sessions. Session one will be done by Sunil Kumar. He is going to unlock the power of AI prompting. The session two, I will do it, will take the Power Apps component framework skills to the next level with advanced virtual code components, and we'll also use an SDK. Before we get into the actual sessions, I want to give a huge, huge shout out to Nutrien for sponsoring this event. So if you are new to Nutrien, I would like to quickly show you the website. So Nutrien goes ahead and provides you tools and building blocks that helps you accelerate digital transformation. I think that I got the website minimized, but here it's back. We go ahead and provide you building blocks that can accelerate digital transformation. We provide you with an SDK. We provide you with local tools. Local tools that integrate with Microsoft 365 and SharePoint. We have lots of products, but the main products that you can think about is the document converter, which helps you convert documents and do much more. The editor, it's a viewer in SharePoint. You don't need to download your files to edit your files. In fact, your PDF files and reupload it. You can do it right in your browser using the editor. Searchability. If you are struggling with search and if you have scanned documents or image based PDFs, this is the tool that you need. It can also help you get the audit reports. And finally, if you're working with millions of documents, document automation server is for you. You can convert documents at any scale, archive them, merge them, manipulate them, add stamps, and do much more using the document automation server. As for integrations, we provide integrations with SharePoint, Power Automate, Nintex, OneDrive, Teams, and the Windows Server. Before going ahead, I want to give a shout, for the workflow platform out here. I'll not call it a tool. It's a platform by itself. If you think that power platform falls short of something, the workflow platform is for you. Okay? The workflow platform is for you. It can help you create forms. It can help you build workflows. It can help you with reports and much more. So if you are trying to find a tool that does almost everything, then and it's a no code tool. Okay? Then the workflow platform is the one that you should look at. That being said, our site is PPUG.org. I'll, again, go to the website. This is our website. We'll have Sunil's picture coming up here real soon after this event. But here, if you see if you are interested in speaking, just go and fill up this particular form, submit a talk, and we will go ahead and give you the platform. That being said, I'm going to hand it over to Sunil so that he can start presenting. Sunil, over to you. Okay. Thank you so much. And I'm I'm excited for this. Just trying to figure out to share the screen, and then I will go ahead. Just a moment. I'm sharing my screen here. Let me know once it is visible. Okay. So first of all, thank you so much again, Clavin, for having me on this, podcast. This is, I have spoken about this topic earlier as well on other forums, and thank you so much for giving me this platform as well. This is, this is about AI prompts to be specific, and AI prompts is part of, AI hub within Power Platform. Before that, who am I? I am Sunil Kumar, also known as Power Trainer. What I do, I am a technical lead and a solution architect, which works on different solutions. Along with that, I have couple of other certain responsibilities as, managing a team, a sound team, technical team, and, working on to the power platform, governance, administration, and even the licensing. Yeah. I know licensing is a bit of a a a sad, Assar thing, but, yes, I I do take care of that as well for all the solutions which I work with the different organizations. Now coming back to the AI prompts, as I as I mentioned, it is part of AI Hub. Now within AI Hub, we have AI Builder and AI Prompts. So AI Builder takes care of all the use cases from document reading, from, the card readers, and all those things. Apart from this, AI Prompt is sort of a middleware which helps you taking, taking the data or the text as the input and then giving you the output based on the prompt which we have created. Now these prompts could be giving you one a couple of examples, like checking the grammar, correction of the spelling, or maybe giving a response back to the input text. So these are the prompts which are covered within AI prompts. Now taking a deep dive within AI prompts, we'll go through some of the basics, and then we will move towards the demo, which includes the demo with power apps and then, the demo with power automate as well. The beauty of power or AI prompt is that it can be utilized with Power Apps, Power Automate, and Copilot Studio as well, which I'll be talking about in a little bit more a couple of say a couple of slides. Sorry. Now coming back to the basic, what is AI prompt? So AI prompt is a combination of instruction and the context. Let me let me, give you an example for this. I always give this example because it is, very relevant to our current work as well regarding Power Platform. Now we are very much well aware of a word called delegation. Right? Now in general, English term, delegation means giving a task or assigning the task to another person. This is what the general English dictionary, language says. But now when it comes to power platform, delegation is handing over the process to the data source itself. Now let's take an example saying that, I want to understand. This is the particular text which I'm gonna send to the AI prompt saying that I want to understand what is delegation. Now the expected output out of this would be that delegation is handing over the task to another person. Now why is the output like this? Because I haven't defined the context of my, prompt or of my query here. Now when the query gets transformed in a way saying that I want to understand delegation with respect to PowerApps. At this time, we are giving a combination a combination. The first part of the the text is the instruction that I want to understand about delegation. The second part of the prompt or the the text is and the context which we are providing here. And the context here is that I want to understand about delegation with respect to PowerApps. Now as soon as we give this as the input text, automatically, we will be able to get the expected output as well. Right? So coming to the the basics of prompt, prompt is basically an art of creating, an art of creating a query, a text which has two major parts. One is the instruction and the second one is the context of it. Now coming to the Microsoft Power Platform AI prompts, Microsoft has already released couple of a prompts to the the tenant. Now these a prompts are which can help us in classifying the text classifying the text. We will also see the examples of these as well in the demo. Classification of the text, sentiment analysis, rewriting the content, summarizing the information, extracting some certain information from the paragraph or from the text, and then even drafting the response based on the query asked. Right? Now where can I find AI prompt? AI prompt, we can find in AI hub. But how do we go to AI hub? We click we come here. We click on more. So this is the make.powerappseditpowerapps.com screen. Very simple URL. Right? As soon as we log in into that, on on the only condition is we should be having a a well, defined login, created for us. Login account created for us. As soon as we click on more, we will be able to see discover all. When we click on discover all, at at the end, we will see AI. Within AI, we have AI models and AI prompts. And in on the top also within AI builder, you will see AI hub. Right? So it will also land land us in the same. So they are by, like, Microsoft is known for giving or providing multiple ways to land, into into certain screens. Right? So that's the same thing. Now if I click on see more prompts, I will be able to see all the prompts which are there. So these are the prompts which are already created, like AI classify, AI sentiment for sentiment analysis, AI apply for getting a response based on the input text. And in the similar way, there are two, a prompts which are created from my side. These are the manual ones which I have created, custom prompts which are being which are called. Taking a quick look at the one which I have created is the name goes with saying that check the grammar and spelling mistakes, spelling and corrected. Now this is the easiest or the simplest way how we can create a prompt. So what I'm I'm defining here in the natural language is please check and correct grammar and spelling of the input text. So this input text can be a variable in this particular case because this has to come either from power apps or from power automate or from Copilot Studio chatbots. Right? Once this is created, we can always have it tested also. Once we create add a text here, it will we click on test prompt. It will give us the result. It's like that. Right? So sample data, if I if I put it here, let's say, how are you? And I click on test the prompt. So if you see here, the spelling which I have written here is not correct. Right? And it understood the the very, not correct way which I have used here to write my sentence, and it gave me the correct response out of this. Now there are other texts also which have come part of it, but I can always go go to this particular, tag and we can use this one in in our in my, next set of outputs where from where I can define the the next processes. So now this is how it can be created. I'll quickly quickly click on cancel. The most important thing which I have to keep in mind is all these prompts which are, like, which are created by Microsoft and provided to us will be available throughout different environments also. So now right now, I'm in this environment, but it will be available on this environment also because it is, published by Microsoft. The only thing is that when I when I create any of the custom prompt, these will not be available on other environment unless I move those or I migrate those to the other environments. So always make sure that wherever you have created the custom prompt from your side, make sure your Power Apps, Power Automate, or other other components are in the similar environment. So this is the first and foremost thing which we need to take care of. Going back to the the other basics of Copilot of, AI prompt. As I mentioned, prompt engineering is an art of crafting an effective prompt to guide the AI behavior, which includes the instruction and context. Where I can use prompts, I can use it on Power Apps using Power FX, on Power Automate, using AI Builder actions, and even in Copilot Studio using plugins and even with, Power Automate. Then we talk about which model does it use. So it helps us use it helps us to use the the latest, model which is available, k, in the Azure OpenAI service. And along with that, whichever input text as a prompt you publish or you push it to the AI, it will not be available to other customers. It will not even be available to OpenAI. It will not help improving the OpenAI models as well. It will not be stored anywhere within Microsoft ecosystem as well. And on top of it, does not it will not be aligned towards, improving the Azure OpenAI models. So whatever stays with the whatever the prompts organization has put in, it stays with the organization from the security standpoint. Couple of things which we need to keep in mind is any of the AI prompt. Rather, I would say any of the the AI functionality within AI Hub consume AI service credits. So this is the common currency across Microsoft ecosystem, which gets utilized based on the number of runs which we have done to which utilizes the AI prompts as well as the AI capabilities. Okay? So this is the common currency. This this common currency can be acquired or can be procured as a package from Microsoft licensing, or, additionally, it also comes as part of the premium licenses, like PowerApps premium license, Power Automate premium licenses as well. Right? Now talking about the other, thing which you need to keep in mind is these prompts are shareable. What does this mean? This means that any of the prompt which is created from my side, I can share it with other users as well. The only thing is that they will not be able to edit the prompt. They will be very well able to use it. They'll be able to consume it in their applications, but they won't be able to edit or modify the the natural language which I have written down to by creating the a prompt. Third most important thing is these prompts which are created are solution aware. So any of the prompt which is created can be added as part of a solution, and then this particular solution can be moved or migrated from one environment to another environment manually or using any of the ALM practices, beat, Power Platform pipelines or Azure DevOps. Right? Now before moving ahead, I just wanna give a quick, brief introduction to solution as as well. Power platform solution is a logical package of all the components which are independent of any other solution. Okay? So this is, what actually the solution means. As we know, it consumes or it utilizes the Azure OpenAI models, even the latest models. And the data which we are in putting in in the prompts is always gonna be in the organization itself. Now coming to the couple of do's and don'ts. So when we when we say there is always the best practice to use any of the the the the tool, the product, the solution, which is created. So as part of that, there are defined do's and don'ts. It's it's always suggested, recommended to, be as close to those do's and be as far as away from those don'ts. Okay? So now the first one is be clear and specific. Which what what actually does this mean is what we want as an output. Right? First time in in most of the cases, we always know that what we need as an output. Right? There are some cases when we actually don't know what we need as an output, but that's okay. Let's let's keep giving the prompt or giving the instruction, explain the data, explain the context, and even the output formats. And it will help us reach near to the expected output even if it not in the first shot. If we keep doing that couple of times, we'll be able to reach to the expected output. Right? What the how what does this mean in in plain English, simple English? It means that whatever the output we need, we have to keep working along with AI to give the respective instruction and context, which can help near the or or reduce the gap between the expected output. Human oversight is the second, point, which is always required. And in any of the AI generated text or the image or the content, I would say, this is always declared that this is an AI generated content. Please verify this. Right? So it comes from this point of view. It's in that human oversight is always required. The simple reason behind that is that the the models are trained on a certain data. Right? That data could be could could go outdated maybe after a year. Right? So that is the reason that human oversight is required to understand the legitimacy of the response, to understand the authenticity of the response. Giving examples, the third point. Always give examples, to to give a better context to the instruction which you are giving or based on which AI will be able to understand or or will be able to pick a, a right direction from where it has to get where it from where it has to go and pick the relevant answer for you. For example, let's say I want to get the capital of UAE. Right? And I'm not able to understand. Like, what what I'm not able to get the term capital, or I don't want to don't understand that. Right? What do we call this? Sometimes we miss the words as well. Right? So there can be another example to get this as what is, Delhi to India? I want x to UAE. Right? So it will understand that, okay, you are looking for a capital of UAE. So this is like giving an giving an example. There could be multiple examples too. So it always depends on the query what you have. And based on that, if you want to give some examples, please feel free to give that. I'll also give you one of the interesting prompt which I did, last, month, and it helped me a lot. I I will talk about that as well. Defining the output format. So now what happens is, let us say there is a big paragraph which we want to summarize okay, for as an example. And this particular summarization, I want in a lesser than, let us say, hundred words, And even these hundred words should be in the bulleted points. As soon as I give the the the paragraph to some to get it to get it summarize, along with that, I can pass some more instructions like, please, take care of the format of the response. The format of the response should be the the the summarization of the paragraph should be less than hundred words, and then it should be in the bulleted points. And in in 99% of the cases, I have seen, I have observed that it respects the context, the instruction as well, and will provide you the output in that way. Test and iterate. So we always need to, keep testing the prompts which we have already created even though if those are in in published way, always testing is required. It's like any of the any of the, software which we create, any of the solution which we create, that's the general practice which we do is testing it. Right? To to to understand that it's a computer program. Right? So the the input the output is always dependent on input. Right? It cannot be that if if it always takes a same route, it will always this particular solution or a software is gonna take the same route always without any exceptions. Right? All of a sudden, it will not give you the output based on some other logic. Right? So that is what it is trying to, this point is trying trying to, say. Checking for the accuracy. This again comes back to the same point as human oversight that the accuracy will always be it is it is better to be checked by the human oversight itself. Transparency. We always have to create that transparency with the end user of the solution which we are creating, which has the AI prompt or AI hub, as part of component as part of the solution that these are AI generated content. Right? So always and we'll have the the the the biases also because the trained because of the trained the data on which these are trained. Right? So we have to have this transparency with the end user that it's not gonna do, magic for you. Like, it does magic, but it will not be able to do something out of the world. And definitely, that transparency should be aligned in in, in the in in both the parties, basically, in between the parties. So adhere to the terms of use. So now with any of the product solution tool which have been built, there is always, a certain terms of uses are there. Right? And, again, with this particular, technology tool as well, there are the terms of use, which are there always maintaining the code of conduct, always maintaining the the language, the the the the let's not we we should not be asking for some, some some information which is not socially acceptable as well in in the in those ways. Incorporating feedbacks. Right? So let's say if we have, started, started inputting the text and we are not able to get the right output, always give the feedback to it that, no. This is where you are wrong. Can you please recheck? Right? This document says in in that this license is not the proper one, and you are suggesting this license. Could you please share why you are suggesting this? Or which other license would be right in this approach? So always try and give that feedback. It's kind of a a communication which we have to keep rather than just a a text and then the output. If we keep it as a communication, engaging communication, it will help us in getting to the right output or the expected output output, I would say. There's nothing wrong and right in that. LLM drift. So it's it's one of the, nice concept, available out there in in the AI world, which is LLM drift. So what happens is every second, there is a lot of information getting added to the Internet. Okay? So what happens is over a period of time, the prompt which we have written, it might start giving us the output, which is very different from the output which was one year ago with the same prompt. Right? So why this happens? Because on the incoming data onto the Internet is, like, huge. It's humongous. Right? To keep the expected output always aligned to what we need, we always have to keep updating the prompt. How do we update the prompt? By giving more context, by giving more, by giving more examples, by giving more giving output format if required to be giving more feedbacks. So these are different ways how we can keep the prompt updated even if the data in the back end is is getting added on exponential basis. Okay. Now what are don'ts? Exactly opposite of what dos are. Don't be vague. Always give a a particular direction to the AI to help you solve the problem, to help you have the expected output. How we can do that is running run not to run-in different directions to find the answer. Give a a particular path. Give a proper, channel. For example, please find me an answer from, this particular documentation or these are the set of documentation from where I need this answer. This is one way not to request any appropriate, inappropriate and unethical content. Right? Not to use the slangs, jargons, and informal language. Why this is being emphasized, here is because there is a policy, which is a philosophical philosophy which says that what goes around that comes around. Right? What does this mean is that if we are gonna use the slangs, jargons, and the informal language, most probably, the response will not be informal. But at times, it could be informal as well. It could pick up the language which the which has been used and try and imitate that reciprocate in the same manner, same language to give back the response. Right? It's it's coming from that perspective that then we should not be using the slang's jargon and informal language. It will only give us the pain of writing another text or another prompt to make the AI understand what we actually, need as an output. So it's gonna be it's not gonna be helpful to us eventually. Giving the conflicting instructions, this is the same thing as being not being vague, over complicating it. Right? Simple things, we can explain it in a simple way. Right? How it can be explained in a simple way is if we are understanding it in the simple way. That's the only way. Right? So that is the only way, how it can be done. Assuming prior knowledge. Now this might sound like, contrary to, AI prompt, the capabilities, which at at one side, it says that it has a lot of information. And on the other hand, we are saying that don't assume that it has prior knowledge. No. It is actually saying that there is a data source available. It does not understand the prior context. So the the context is the main keyword here that assuming the prior context. So AI does not understand the context which you have unless you provide it. There is a lot of information. If you ask for delegation, it will give you delegation from all other way also. Right? From the English general dictionary language, from the power platform also, or from any other, any other where any other, tool or software or the general English term which where it is being used. It might give you the list of, all the delegations of where I'll where where all it has been used. Right? But it because it does not have the context. So that is what it meant. It means that do not assume that AI has that prior context, not the knowledge, I would say. Right. Now coming to the availability, right, of these particular feature, this particular feature. Now wherever you see the star, this is these particular features are available. The only thing is that there has to be the enablement done for the, data movement of cross region. This is the only thing which has to be done because not all the data center of Microsoft has all the capabilities in those data centers. So, like, if you see here, Australia has it. Right? India has this. India data center has this. It does not have to cross the Indian region to, get these particular, AI capabilities used. Along with that, UK has it. US has it. Unfortunately, UAE does not have it now, but the nearest, the data center is being approached for this. And we have to enable the data movement across region to utilize this. So this was, these were the couple of information which I wanted to share along with, alongside on the basics of AI prompting. Now we are gonna quickly go ahead and see the demo of, AI prompts. How does it work? Right? So now very simple, example which I have thought through and came up with. I have, input text on one side and the result on other side. And in between, I have different functions or different buttons which runs the the the different AI prompts in the back end. Okay? Let's take an example first, see it in in in running, and then I will show you how it has been created always. Also, what's how how does the skeleton of this looks like in the edit mode. Right. So I'm taking an example saying that, I have a new car now. Okay. So this is just a statement, which I am trying to understand the sentiment. So when I when we talk about the sentiment, any particular sentence, can have one of these three sentiments. Either it could be positive or it could be neutral or it could be negative. Right? Like, definitely, there is a different percentage to it, but we can always have that sentiment analysis done. So this particular function, simple function, simple AI prompt, which is the the the prompt prebuilt prompt, which is created by Microsoft, helps us in doing that. Now let if I click on AI sentiment, what it does is this sends this data to the AI prompt, gets back the result, and show the result here. Right? Now let's say I have a car now, but it's not good. Okay? Just taking the same example, adding a little bit more text to it, and understanding how the, the sentiment is. So the sent the overall sentiment of the statement comes as negative. Right? But it's not good. What should I do? I'm just trying to add a little bit more, text to this. Should I do? This I have prepared for my next, prompt, AI reply. Okay? So now let's let's try and see what it says. I'm sorry to hear you are not satisfied with your new car. So this is all being, created and as a result, given back to me. Right? So, if you see, there are multiple ways, multiple things which they have shared. Identify the issue, consult the dealership, check warranty, seek professional advice. Right? Now let's say I have another example, say that saying that I love the Canva software. Okay. Okay. Not software. I'll just not write software. Why? Because behind the AI classify prompt, I have given three categories, software, hardware, and network. Okay? Now I want to understand that does the AI understand that I am talking about Canva and it it belongs to a software category because it is a SaaS product. Let's see if it understands or not. So it has given me that, okay, there is something in this text input text, which is talking about a software. Now let's say I want to say something around Dell. Okay? So Dell is the the hardware. They they were they create laptops. So this is it all categorized it into a this text into a hardware. I will also share some of the applications, of of these prompts as well with you. Right now, I'm taking the same example. I have I have asked my, AI extract to help me extract the names from the text. Okay. So if I click on AI extract, it will help me in understand or getting the value the name value from this particular text. This is a JSON which it has provided. I can always drill down to the particular value of the, of the of the JSON and and utilize it in my next, set of processes. Now taking an example of, the summarization, I'll go to I'll just take one one, text from here. Okay. And put it here. Along with this, I'm gonna gonna give some instruction as well. Okay? That summarize this in three sentences and in bullet points in bullet points. Okay. So this is the instruction which I have given here. I'm clicking on a summarize. Let's see. So it has done it in three sentence. It has also, given me n bullets. So this is how we can provide some instructions as well, to our, our prompts, okay, to our input text. Now, this this example we already, saw. Right? How are you? Now let's say I want to add, something saying, let's take this only. Let's take this as the input now. I've changed some of the spellings. Okay. So I have changed some of the spellings and then I am running the grammar check. Let us see. So the first one is here, which it has corrected. The second one is here, which is corrected here. The third one is, this one, and this one is also corrected. The third sentence, which has essential spelling wrong, which has corrected this also, along with that, it has given me the corrections which it has made. How cool is that? Right? So how how how did we do this? Let's talk about that now. Okay? What I what I'm gonna do is I'm gonna go into my edit mode of the the application, the Power Apps application. I will talk about a couple of, things here. The data source which I have added are all the prompts from here, AI sentiment, AI builder. And how I have used it is in the next, slide. I will show you quickly. If I click on a sentiment, you will be able to see that, this is my input text. Right? This is my input text. And, where the input text will go, and this is the the output text, which is my label. Along with that, the input the the actual text property is the var result. The bad result comes from these, prompts. So if I the first line is the the designing class. You know that one. Let's focus on the second one. So I'm using the AI sentiment to predict the giving the input and the final property output property is the text, which I'm saving in the where result and giving the result here. In the similar way, I'm doing it for AI reply as well. Now quickly, how did so this is the same thing which I have done for the power automate as well. The only difference here is rather than running it within the power apps, what I have done is I have created the power automate. So I'll quickly go to the power automate one and show you the background, of that. Oh, I have worked on that. One second. So if I click on AI sentiment, you will be able to see that I'm running a AI prompts power automate and you giving the two inputs to it or two parameters. One is the AI sentiment and the the input text. And then I'm finally capturing the output text and storing it in where is it which shows here. This the flow which I have used here is the a prompt's power automate, and this is the same flow which I have created here and utilized. Now if I quickly click on the switch cases, so you will be able to see there are multiple switch cases which I have created here. Right? So as an input of this power out power automate, I am getting the what which button is clicked and what is the input text. Based on this, after this, I have created a a final result variable. This particular button switch criteria is to understand which button is clicked. Based on which button is clicked, it is, routing to the specific, case. Within this case, if you see, I have two, actions. One is create text with GPT. Within here, I am using the AI sentiment prompt. I do have other prompts as well, which I'm using and giving the input text to it. The output of this, I am storing in the variable, the first variable which I have created, and this is the variable which I am passing to the responding back to the power apps with. So this is how easy it is in doing it. In the similar way, it can be done for, Copilot studio as well. Going back to the the power platform, and here I wrap up the the session for EA prompts. I hope this is helpful. Any queries, feel free to reach, and I'll be more than happy to, answer it for you. Thank you so much. Handing it, over back to Clavin. Hey. Hi. Thank you, Sunil. An excellent session. Lots that I have learned as well. And, yeah, thank you for presenting. If anybody has question, do reach out to Sunil directly over LinkedIn, and he will share his social handles with you. So again, and, yeah, I hope that we'll host you again in the near future. Thank you. Thank you so much. Perfect. Perfect. So what I'll do is that I'll start with my session. I know that we have been, I think Sunil did fine. He did it on time. So I will just go ahead and start with my session, and let's go. So this is my customary introduction. Hello, everyone, and a very warm welcome to my session. Today, we are going to learn about PowerApps virtual react component. If you see, we have PowerApps. We are going to use an SDK. It's going to be the Nutrien SDK, and we are going to use React. Lots of stuff to learn. Okay? And it's going to be interesting. So if you are not a PowerApps developer, don't be demotivated. Okay? That's the first thing I'll say. I'm not a full fledged React developer, but I know to use prompts. And if you don't know to use prompt, you should go back to the previous session and look at Sunil's session because he spoke about using prompt. One golden rule that I'll tell you, ever since CHAD GPT came into my life okay. It's like a love story. Right? I'm telling, like, CHAD GPT came into my life. I started writing more code. Okay? I started writing more code. It empowers me, and I go ahead and create more code samples, etcetera, which helps. So that being said, I'll quickly introduce myself. My name is Clavin. I'm a leader at the PPUG. I'm a Power Platform superuser. I'm a Microsoft business applications MVP. And most importantly, I'm a solutions consultant at Nutrien. I go ahead and run my blog. It's clavinfernandez.wordpress.com. I also blog at nutrient.io. So you'll find my blogs there as well. I blog mainly on Power Platform, both the places, and I run my YouTube channel. So it's YouTube. And if you type in Clavin Fernandes, not Calvin, Clavin, you will find me there. Okay? I have been a power platform super user for, I don't know, how many years, maybe three or four as of now. Okay? That being said, what are we going to build? This is what we are going to build, but I'll show you actually in Power Apps how it will look like. So let me find my correct browser. Okay. This is my Power Apps. Right? This is the out of box PDF viewer. I click on it. Right? It will load a document in the PDF viewer. Boring. What can I do with it? I can only view the document. Such a pain. Such a pain. What I want to do is reduce the pain. Okay? When I say reduce the pain, let's let's look at something else. Let's look at something exciting. Right? What I'm going to show you is a PDF viewer out here. It's known it's a PCF component. We are going to build this together. We are going to build this component in such a way that when somebody gets into Power Apps, they can go ahead and, in fact, sign the document right in Power Apps. And what you can do is you can save the document back in the data source of your choice. Isn't that going to be interesting? We are going to use React. We are going to use the Nutrient SDK, and we are going to use the PCF tool, okay, or the PCF Power Apps component framework. So this is what we are going to build. If I go back to my slides real quick, what we are going to do, we are going to pass in a base 64 bit string. We are going to convert the base 64 bit string into an array buffer, render it using the Nutrient SDK or the Nutrient web stand alone, and output when somebody clicks on the save button, there will be a base 64 output. Right? That's what we are going to do. Now that being said, let's get back to I want to show you this. Let's get back to the component. So first and foremost, when I click on the component, these are the input parameters. Take a note of it. Base 64 PDF document, viewer height, and the viewer width. Right? And if I want to go ahead and have the output, I can reference. So let's go ahead and do that, by the way. So if I want to go ahead and have the output, what I can do is I can reference the name of the component, and we are going to build this. So it's known as u o two dot. And if you see, it will be PDF document. Right? We can go ahead and reference back. When I click on the play button and when I go and click on save, you see that it's outputting a base 64 bit string. So that's what we are going to build. Now that's that's what we are going to build. So let's get into the slides again, and let's look at the prerequisites. So the first prerequisite, if you want to do, is the Visual Studio Code. You need to have a code editor. I have one, so let me quickly pull up the code editor. What I'm going to do is I'm going to create a folder. Right? I'm going to give it a name, nutrient PCF viewer. Right? And I'm going to open this folder in Visual Studio Code. You can actually right click and just say open encode. Once you go ahead and open encode, the code editor is open, and I'll drag it down here. That's the first prerequisite. The second prerequisite is that you need to have power platform tools installed. So for the power platform tools, you can search for the extension. It's known as power platform tools. Go ahead and install it. I already have it. I'll click on the terminal, and what I'm going to do is I'm going to type a command out here. So just waiting for my terminal up and working. Till it's up and working, you also need the build tool. Right? I'll pray to the demo god because today, I think the demo gods are a bit sluggish with me, and they are actually I had to press enter enter enter, and it just went into so many things. Okay. But let's pray. Demo god, please help me, and let's see. I'll type in pack. Right? I'll type in pack. What does pack stands for? Power Apps CLI. Okay? That's what I think it stands for. If you think that it stands for something else, comment or let us know. Right? So here you see that I have pack, and these are the commands that you get with pack. Right? This is the Power Platform CLI. You also need the visual you need the build tools. Okay? I'll not say Visual Studio build tools. I usually tell that it's a developer prompt. Why do I say that? Because I have Visual Studio installed. At this point, I have Visual Studio community installed, and I can use this to go ahead and build my application. Right? Now that being said, you also need to have node installed. So just go ahead and install the version of node. So node dash dash version. You can install the latest version of node. I have 18.2. I think the minimum would be 16. That is what you need to go ahead and do the development. Now that you have this prerequisites in place, what I'm going to do, I'm going to save up some time out here. And what I'm going to do, I'm going to type in I'm going to type in. Let's say that I'm going to paste in a command. Right? It's Friday. I want to be very cautious about the time. Right? I'm going to type a command. If it's not visible, I'll read it out. It's pack p a c PCF. Initialize the component. My component name is the nutrient document editor, and n s stands for namespace. T stands for field. F w stands for framework. We are going to use React as a framework, and we are going to do an NPM install. Right? At this point, let Visual Studio code do its magic, magic, magic, magic. And what I'll do is that I will go back to the slides. Right? We spoke about all the prerequisites that are required. You need to have it. Go ahead and set it up if you are planning to do PCF development. So we said PCF, PCF, PCF. What's PCF stands for? PCF stands for power apps component framework. It's a framework which helps developer build power apps. Right? That's what it is. So code components are, as I told you, you write some code. We are going to write some code. We are going to use chat GPT. We are going to use AI. I'm not going to bluff that. I'm going to write the code all by my own. I am proud that we have AI, and we should use it. Right? If you are not using it, you're missing out on the fun. Use AI. So I think it's more about an AI session. That's right. I'm just praising AI AI, less about PCA. But, yeah, you can write code. You can help AI can help you. So code components are a type of components that you can import in your Power Apps as a solution. You can also export it to different environment. So you can create the component, however, use it for in multiple environments. This is how the standard code component used to look like. We are not going to build this. Why are we not going to build this? Because this is less performant. Okay? If you look at this, this is actually re like, every component will have its own copy of React and fluent UI. Do you want to do that? Nana. I'm not going to do that. Also, these code components were built in HTML. Right? And JavaScript and TypeScript, you know the world loves React. It is performant, and we are going to use React as well. This is how a standard code component would look like. We would create a container. Right? Create a container and then append the child to the container and then work out HTML. This is how the new React component looks like. React and Fluent UI is being shared between the components. They are more performant. They run quickly, and you write less code. If you know React, you know that React will help you write much less code if you are using a functional component. Right? So what does React component is made up of? What are the benefits? One of the benefit I told you, it's better performant. It manages memory better. It uses the React virtual DOM, and it is just fast rather than having each component having its own React version of Fluent UI and React. You will just be using a shared one. I would say this is my tips. It's more performant. It's easier to maintain, and it's scalable. Right? So that being said, let's go back and look at our component. So we all want to write code. Right? This is how it would look like. So when I create the component, the component is actually ready. What I'm going to do is I'm going to actually install another prerequisite. The prerequisite I need to find it. The prerequisite would be the nutrient SDK. Okay? We are using the nutrient SDK for this particular demo. I'm going to copy this. So what does the Nutrient do? It helps you with building a client side viewer. Right? It is secured. Documents are always on the client side, and it also supports office documents. We are going to focus on PDFs, but you can also render office documents. It's also customizable. If you look at this, it has got some basic code out here, but I'm going to take you to another article which will help us write more better code. I'm going to say npm I, stands for install, and I'm going to install the Nutrient. I'll go back out here, and we'll look at the project structure. Right? We'll look at the project structure. So while this is getting installed, I'll quickly take you to the project structure. So here you see that you have node modules. What are node modules? Node modules is basically used as a prerequisite. In this case, we just went ahead and installed the Nutrient SDK. We are going to use this. If you are using a third party SDK or a third party library, you will do an NPM install library name. In this case, I'm using the Nutrient SDK. You'll find other things out here which might be known to you such as babel, ESLint, CSS loader, etcetera, etcetera, which you might want to use in your project. So these are the prerequisite. The real magic happens in this folder, but we'll get back to this folder in a minute. Right? Git ignore, if you are using a code repository, if you want to ignore some things, this is where you will put your git ignore ES Lint file. Right? ES Lint file is basically a set of rules. Right? ESLint provides a set of coding rules, which helps you structure your code better. But at times, you might break some rules. And if you break these rules, what you can do is that you can turn the rules off. Right? You can do it out here. PCF project is used to build your project. Package dash log dot JSON is similar to package dot JSON. Package dot JSON tells you what dependencies your project has. Your project has got React dependencies. You have a nutrient dependency. Most importantly, if you see, it uses React 16 dot 14 dot o. The latest version is 19. PowerApps component framework is catching up with React. You have to use React 16. So if there's a component which is compatible with React 16 sorry, 19, so you might get some problems. Okay? Be bit cautious about it. And fluent UI, if you are using it, it is nine point forty six point two. So PCF config, it is the PCF configuration. There's not much. We just reference an out folder, and TS config is basically the TypeScript compiler rules. Now that being said, what I'm going to do is I'm going to do an NPM run build. Right? Let's build this project. Now coming back to the main particular folder, the first file that I want to talk about is none other than the manifest file. Right? The manifest file is the file which goes ahead and provides metadata about your control. What is the name of your metadata? Right? That's the display name here. What is the namespace that you're going to use? What is the description? What is the type of component? It's a virtual component. You can go ahead and reference external services. You can go ahead and use external domains. In our case, we are not going to do that. Okay? For now, we are not going to do that. You can have external domains, as I told you. Not going to do that. I'm trying to clean up the file. Now these are the properties in the property pane. Now if you remember, if I go back actually to the slides or not to the slides. Let let me go back to the component itself that I was showing you. When I clicked on this particular component, these are the input fields that we need to go ahead and provide. Right? Behind the scene, if you're guessing from where this base 64 comes in, I have a power automate, which goes ahead and converts the file into a base 64. Right? And I respond to Power Apps, and that response is hooked up here to the document. So if you are getting confused with that, that is where it is coming from. And it is hooked up in such a way that I have a button out here. It sets the variable. Okay? It's the response of the Power Automate out here. Now that being said, I want to reference I want to create some input parameters, these input parameters. Where do I create them? I create them here at this place. Okay? So let me quickly create some input parameters. I'm going to talk about this in a little bit more details because this is important. I'm going to remove this input parameter. I'm going to hit enter, and I'm going to paste these parameters. So each parameter will have a name. Right? Will have a type which can be single line of text. It can be a whole number. Right? If you see it's a whole number, it can be of single line of text dot email and much more. And then there are two type of parameters, input and output. Input are bound. Output is output. Output is the response when you process something in your Power Apps and you pass it back so that you can further use it. That's what output stands for. At this point, if I do an NPM run build, it will build it. And what we are going to do next is that we are going to go ahead and see it in the workbench. Yes. You can debug this locally. Power Apps goes ahead and provides that functionality for you. Okay? That's the most important bit. So it provides you a local workbench. Now that it is build, what I can do is I should stop using the up arrow as the NPM start watch. I want to watch my component. Right? Now when I do an npm start watch, okay, when I do this command, you will see something happening. Or you might not see something happening because it's it will happen on my different screen. But, yeah, luckily, it happened on the screen itself. Itself. If you see, I have my component. Right? And it created these properties, if you see the input properties. And we also have an output property. Right? We have these properties that are being created. It has been created in the control manifest dot input file. Now let's say that you want to know what other properties are supported. I'll do a control s. Right? And here, it gives me error. It's red. That red stands for error. Right? At least when you see it in the terminal. I freak out when I see red. I used to do PowerShell in the past. I used to think that I did something terribly wrong. But in this case, you didn't do something terribly wrong. What you have done is that you have introduced an error so that you can find the types out here. In this case, you will see that I have corrected the error. It started rendering again. You can have objects. You can have lookups. You can have emails. You can have tickers. You can have multiple things out here that you can use in type. Okay? You can have required, true or false. Right? If it's required, true or false. Similarly, you can have complex attributes which look like this. That's something that you can have. I'm going to remove this complex attribute. Let's keep it simple for this demo. Here, it tells you the order. So what will be the first file that it will load? It will load the index dot TX file. If you want to have custom CSS, you will have the custom CSS being loaded. You need to uncomment this, though. Then it will load the fluent UI. In this case, we don't want to load much. And finally, if you are working with dynamics, you might use web APIs. You might use utilities, etcetera, etcetera. If you want to learn more about this, you need to go ahead and let us know. Respond to my email or ping me on LinkedIn, and I can do another session on how we can create something relate with web API. In this case, let's keep it simple. So this is how our final file will look like. My computer is making some weird sounds. So I'm going to say, terminate, and let's say that let's keep the demo going. Right? Or let's say, I'm doing the demo and my computer burst. Right? That's not something that we want to happen. We want to complete the demo. So here, if you see, I have got the hello world dot ESX file. This is our main component. This is where the real magic will happen. We will write our React code in this file. However, another important file, which actually is very important, it's going to be the index dot t s file. The index dot t s file is the main heart or the core of the PCF component. It has got four important methods. Right? First and foremost, it is a class type React component. Don't be worried. You can create a functional component, and you can go ahead and reference it here. The first method, the most important one is initialization. What does initialization do? Any guesses? You should guess it. It is used to initialize the project. It kicks off your control. So this is the first thing that will load. Right? Notify output change. When the output changes, when something changes, notify it such that it we can go ahead and pass it back in the get outputs method. So the output is basically returning to the output parameter. That's the second thing. Update view method, very important. When something in the property bag changes I'll again repeat. When something in the property bag changes, this goes ahead and triggers. What do I mean by that? I mean okay. It's gone down. I I will have to go ahead and do an NPM start watch. I'll just quickly do that. When something in the property bag you remember we created properties when something there changes? What it will happen is that this will trigger. I told you about the get output. It's the output, and finally, NPM destroy, which came up. So something here changes, this will change. Okay? That's what I mean by changing when something when is the update view fires. Right? We can control that. And finally, the destroy method is the cleanup method. So if you want to clean up something, this is where you're going to go ahead and write your code. I want to quickly go back into none other than my slide just for a minute. I'll not go in more than a minute out here. We created the input components. Okay? We we can pass in the base 64 in Power Apps, how we are doing it. I showed you the Power Automate. That's how we are doing it. Now we need to go ahead and build the SDK, convert file from base 64 to array buffer, other way around, and pass it back. That's what we are going to achieve in the next five to ten minutes. So what I am going to do out here, I am going to seriously cheat. When I say seriously cheat, I'm going to copy some code. Because if I type this code, you'll be here till midnight. Or perhaps from where you're joining, it's already midnight. So it might be morning for you. Right? We'd I don't want to do that. I don't want to take away your Friday. Right? I I honor I think your Friday is important. So I created a nutrient.TSX file. So I'm going to copy paste some code out here, and this is how it is. So I'm going to first get the prerequisites. I'm going to have React and the Nutrient SDK imported. If you see, Copilot, my friend, has is starting to kick in. But, no, I'm not going to use Copilot as of now. We created these particular I would say, these particular let me actually do this. I get distracted because for some reason, when this is working in my background, my computer starts making noise. But here, if you see, I have created an interface, and I'm going ahead and importing these properties out here. Very important. This is how you go ahead and reference the properties interface, and these are the props. If I quickly go back to the slide, what we wanted to do is we wanted to go ahead and have two methods out here. One is to convert base 64 to array buffer and convert array buffer to base 64. How did I get this method? I asked ChatGPT. ChatGPT gave me the these lines of code. Right? I'm going to share this code with you, and this code is very simple. It converts the base 64 to array buffer. So if you are thinking, why is Clavin not explaining this code? Just copy this code, go back into chat GPT, and ask it to explain. It will do a better job than what I try to explain on this live demo. ChatGPT gave me this code. Okay? Now that being said, I do the other way around. I convert array buffer to base 64 using this method. Now that this has been created, right, I want to create it's telling me to go ahead and create a functional component. I can hit tab, and I can actually create that because I have got some code already, which I have tested. Right? And finally, I'll come back to that code and how I created it, but I'll finally export the nutrient tree. Now if you look at this code, the functional component. Right? Let me actually get some more real estate out here so that I can explain you. This is a functional component. What it does, it takes input parameters. It takes parameters such as the file content, the width, height, and the on save. On save is a callback. Right? We are going to when somebody clicks on the save button, it will go ahead and return me the base 64 bit string. That's what I'm doing. I'm going ahead and creating an HTML development. For a component to work, this is very, very, very important that you go ahead and have a development or a container and then append a child to the container. Similarly, our component or you can say that our viewer also needs a development where we are going to hook it up, and that development will be the place where it will load the document or the PDF. I'm using React Hooks such as use state to maintain the state of an instance. Now how do what's an instance? For example, when you load the document, it creates an instance. That means it you can work with the document. You can add annotations to it. You can add signatures to it, etcetera, etcetera. Right? So that's an instance, and I need to maintain the state of an state of an instance. I'm using the useEffect hook such that it is only changed when the base 64 bit is passed in. Right? That's the logic that I have written out here. If there is no development, just go back. If base 64 bit is empty, just unload it. You need to load an instance, and you need to also unload the instance. Always remember, you unload the instance out here. The reason is if there's an existing instance, it will give you an error if it's there. So you need to unload it. Finally, I'm using a try and a catch block such that I can load the file here. I'm loading the file out here. This is my container. This is the CDN. Now you'll say, Clavin, how do you know all of this? Right? How do you know all of this? I didn't know all of this. This guide helped me. Nutrient provides excellent guides. Okay. That's first thing that you need to understand. So if you know to read code, you'll be able to write code. I I just said that. Okay? As simple as that. If you know to read code, you can take this sample and make it your own. Right? The icing on the cake is that there's an ask AI thing as well on the right corner. So if I say, what is the CDN for web stand alone? Right, it will go ahead and give me responses. So this particular website is also AI enabled. Right? And if you see, it actually gives me the CD, and it tells me what CDN it is and how I can go ahead and use it. But that being said, I got this quote from their website. Right? I got this quote from their website. I am proficient in Nutrient. I'll not go ahead and say that I am new to Nutrient because I'm a solution engineer. If you get stuck with anything in this particular code, reach out to me. Right? Reach out to support. Reach out to our team. We are good people. Okay. Trust me. I am a good person. We will help you out. Okay. That's that's all I can say. And trust me, I'm telling this live, so I need to go ahead and be a good person as well. So I will help you as well. So here, if you see, I am creating a new instance, and I'm loading the document. I'm giving it a CDN path. And here, if you see, I am having a save button out here. I'm loading the viewer, and I'm returning this particular instance. Okay? That's what I'm doing. I'm going to go to the index file, and let's start copy pasting some code to the index file as well. So to the index file, the first thing that I need to do, I need to go ahead and import my component. Right? I'm going to import this component. That's what I'm going to do. I have the notify output change, but I also need to go ahead and hook up my container because this is going to be the starting point. Right? This is where my component would initialize. If I go back to the control manifest file, this is the first file that will load. That is the index file. So I have my HTML dev out here. I need to go ahead and return the PDF. So this is where I'm going to go ahead and return the PDF. Now that I have something hooked up here, what I want to do when my component first initializes, right, I first need to manage the state of my component, which is already out here. That's excellent. Second, I'm going to go ahead and have my container hooked up. Whenever it's initialized, the first thing that I need is my container. I have a void out here, so I'm going to go ahead and say this container is a close to container. Right? Now coming to the update view method. Right? I'm going to paste in some code out here. Okay? And then we'll talk about that. So first, the create element. I want to use my Nutrient element out here. Right? I want to use my Nutrient element. What I'm going to do is I'm going to x out of it, and I'm going to say, I want to use this particular element. It's giving me an error. Right? Because I have not imported. I don't have the base 64 bit string that I am referencing out here. So let me put that. I don't have an handle save method. I want to create and handle save method. What does it do? It saves the document, and it returns it back. So I'm going to paste it here. Right? So what does it do? It converts it notifies that my output has changed, and I will save it back. Understand this. If you are new to React component, this is where you need to go ahead and write your code. If you're starting with React components, if you don't understand React, I have a full fledged tutorial series which talks about a normal React component, which you can create with HTML and JavaScript. So I will point you to that. Just DM me. Finally, what I'm going to do is I'm going to paste in some more logic out here, which tells if the component is updated not updated. Right? What you do is that minus one stands for not. Don't rerender the component. That's what it is doing. Or else, even if something small changes, it will rerender the component. Right? That's not something that we want to happen. Now that being said, I have the handle save out here. I want to return the output. And where will we return the output? We will return the output out here. We'll return the PDF document, and we'll use this dot base 64 out here. And we will just try to run our code. Before we run our code, let me pray a hail Mary because what really happens, this is where things might go wrong. This is something that I don't want to happen. Right? Or else I will cry because it's nearly the end of our demo, and if something goes wrong, we have to debug. You know? I think I should have played two hail Marys, not one, two, because this broke. Okay. So when I say this broke, I broke rules. Right? That's what it is. If you look at these errors minutely, I broke rules. The rules are the ESLint rules. I broke rules, so I need to go ahead and bluff, puff, and go ahead and say, if there are ESLint rules, which are these, I should just turn off the errors. It just means turning off the errors. Right? So I'm going to go ahead and do that to do a control s, do an NPM run build again. So let's see if the demo gods are happy with me or maybe not. This is the place where time where I should be a bit silent. Come on. You can do it. ES Lint. It's at ES Lint. Let me see if there were any other errors. I didn't see any any other errors out here. It said collapsing, unsafe returns. That's fine. We'll get around it. So all the errors that were there were related to ESLint. So let it load. In the meantime, when it's trying to build itself, I'll go back here. And if you are new to Power Platform, admin.power platform, admin.power platform or the Power Platform admin center, you need to go ahead and enable custom code components. If you see, my computer is getting really, really slow right now, so let's hope that this works. So here it is, admin.powerplatform.com. So I'm going to the administration portal. Right? So if you're trying to use the code component in your Canvas apps, you need to make sure that you have this enabled. As this is getting built in the background, it is moving ahead, so it's good. It's gone to babble. And here, if you see what I want to show you, you need to select the environment where you want this to happen. I'll select my developer environment, not my actual environment. For example, I want to use this code component. To use this code component, you need to enable the feature which is by default turned off. It's under environment, settings, features. If I scroll down, you need to enable the Power Apps component framework feature. Right? This is where you need to go ahead and allow it. Once you allow it, you can go ahead and import your code components. You'll find this icon. When you click on this icon, you find another tab known as code. Right? You can use this. That's where you are going to go ahead and import the code component. And I'll say hallelujah because we didn't get an error. It took time, but it didn't give an error. So that's good. I can smile a little, I think. And I'm going to do an NPM start watch. If you want me to write code line by line, right, I think what you can do is send me a DM, or we are going to have this published on YouTube. Go ahead and write a comment, Clavin. Write this code line by line. I will write the code line by line for you. Okay? It will be a one and a half or a two hour session. Right? If you if you think we should do that, we will do that as well. I'm happy to do that. So now what I'm trying to do, I am going to go ahead and try to launch this particular component this particular component in my local workbench. Right? It's trying to launch it in the local workbench. So let me quickly go ahead and see that. If anybody has questions, please go ahead and put them in the chat. So let me see. I don't see any sessions as of such. We need to wrap up real quick, but we have we have a hard stop in seven minutes. That's what I can say. So, but I think we should be able to build our code, and we should be able to package our code, and I should be able to import this code as well. So NPM start watch is coming up. And if you see, it's trying to load the component and voila. Right? Now you know what I did last weekend. I went to Legoland with my kid. Right? I used the wrong example document, but here, I have passed in the value, and it has rendered the document in the Nutrient viewer. Mhmm. You learned something new. Right? You learned how to integrate an SDK into a PCF, and now you're going to learn much more. I how to be a little bit quick. We have to a hard stop. So here, I have created, my component. It renders. I didn't have to debug it. If you want to learn about debugging, you can add the debugger, add a breakpoint, and then debug code line by line. Okay? That's what you want to do. So what I'm going to do next is that I want to package this code and put it in my PowerApps solution. Right? I am going to type this. I am keeping on going up arrow up arrow, and I cannot find that particular thing. So I'm going to create a folder named as solutions. If you want, you can name your folder a little bit better. I'm going to CD it into a solution. Now next, what I'm going to do, I'm going to use the pack command. Why am I going to use the pack command? Because I want to go ahead and create a solution out of it. So if you see PAC command gives you solution, and the solution is used for working with Dataverse. If you want to use solutions, you should have Dataverse. Right? Because Dataverse is the back end of or you can say the data platform of Power Apps. What I'm going to do is I'm going to copy paste in one line of code out here. I'll say copy, and I'll paste. So here, I tell, create a solution, initialize it. The publisher name will be Clavin Fernandes. My name, I'm the publisher, and the publisher prefix will be Clav. Right? And next, what I'm going to do is I'm going to say reveal in file explorer. I'm going to copy this path. Keep it handy with me, and I'm going to add a reference. Now how do I add the reference? Again, using the pack solution command, I add a reference to this particular folder. So once I add the reference, if the demo gods are happy, which they are, it tells me project reference successfully added to the Dataverse project. At this point, I can use the MSBuild tools. I already have them here. So what I'm going to do is I'm going to copy this. Right? Going to c d, enter, and then go there. So I have to type in d. Now it's in there. I'm going to go ahead and say MS build t restore. Right? I will MS build it. So it will go ahead and build my project, and it build the project. So that's good. And then I'm going to hit the MS build such that it creates a solution package. Right? That's very important. If you see, it's creating an output directory with debug OBJ. This is not a managed solution as of now. It's an unmanaged solution. You can create your own managed solution if you want to avoid software drift. Right? And there's a different command for that. Again, it's going to the same build process behind the scene as checking for ESLint. Hopefully, we'll not get any errors because we have said ESLint ignore everything that we have done wrong as of now or the variables or the set of rules. It doesn't mean that our code is wrong. I've just added exceptions because I was copy pasting code, and at times, it creates some problems. Right? That's what it does. So it's building it. Right? Let it build it. Yes. Lint. And once it builds it, it should be good. We should have a package. We have around three to four minutes. I am cautious about the time, but it just seems that my computer is making sound. It's trying. It's trying to be fast. You do you know whenever we start a car, right, it's like sound. It's trying. It's it's eating a lot of resources, but I hope that we will be there. So let's wait. The only thing that we can do is wait and pray. Oh, okay. So it built itself. So if you see, the solution is in this particular folder. So if I go here into this particular folder, which I have revealed in Explorer. Right? Let's see the folder part. It's in solution bin debug and solution dot step. All I need to do is right click, copy as path, go into make dot power apps dot com. Right? Makes.powerapps.com. And I go into solutions. Solutions. Solutions. Solutions. Come on, my friend. Go into solutions, and I will have to import this particular solution like this. Right? I will have to import the solution. I can import the solution. After importing the solution, I need to publish the solution. Now this might take approximately one minute, two minutes or so. But once you have the solution, you will see the solution like this. Right? This is how the solution will look like. So once you have the solutions imported, what you can do is you can go into your Power Apps, create your Canvas app, and then what you can do is that you can click on this button. You'll see all your code components here. In fact, this is the code component which I created just before the demo. It's exactly the same code. I click on it, and I click on import. Once I click on import, you will find the code component out here. Click on it. It will be added to your screen like this. And then you need to wire up the base 64 bit string. And once you do that, you can use it in your Power Apps. Now this failed because there is a duplicate code component. I can get rid of this, and I can import it again. But I can tell you that it would work. I will share the code at the end of this not the end of this week. It's already the weekend. Early next week. Okay? Early next week, I will share the code. Feel free to play with the code sample. Feel free to give us feedback, and we are here to assist you. I'll stop sharing, and I would say thank you once again for whoever has attended. I hope that it worked well for you. I promise I'll share the code sample, and I'll also submit the same to the PCF gallery. Thank you once again for your time. And with this, we'll say happy weekend from Nutrient and PPUG. We love you, and see you in the next session. Bye.