Category: Power Apps#

Run PCF Code Components in browser, deploy to Dataverse easily – Quick Recap

Hi Folks,

In this blog post, I would detail about how you can you work with Code Components, it just takes only few minutes of your valuable time. Now-a -days everyone is moving from traditional HTML Webresources to PCF Code components. I used to be a pro-HTML Developer where I always want to always know how my code is running in browser. Usually every developer wants to try out how their code is working in local before proceeding further. So here we will see how you can run your component locally…and once tested we can deploy them to Dataverse.

So without any further due, let’s get into it…

Firstly you can download these code components from this link, now let’s see how we can use these components in our Apps. Follow with me with few simple steps as below..

1.Install Microsoft Power Platform CLI.

2. Navigate to the folder and extract the zip file.

3. Open Visual Studio Code and navigate to that folder location(Many people suggest to use Visual Studio Developer Command Prompt, but believe me this is a lot easier)

The component’s run time can be found by navigating to the respective folder of the component..

4. Open a new Terminal and execute npm install command(I am assuming that you have node installed in your machine for working with this), this will add all the dependencies to the component folder, it should look something like below..

5. As this control is a prebuilt one, no need to execute build command.

6.Create a new folder using the command mkdir <folder name> inside the sample component folder and navigate into the folder using the command cd <folder name>, something like below…here I have named the component folder as IncrementComponent.

7. Now we will proceed with next steps of creating a new solution project inside the same folder using the following command:pac solution init --publisher-name <Name of the publisher> --publisher-prefix <Publisher prefix>

It should look as below

You should see solution folder components being updated as below

8.After the new solution project is created, refer to the location where the sample component is located. You can add the reference using the following command:pac solution add-reference --path <Path to the root of the sample component>

It should look as below

10. Now you have to generate a zip file from your solution project by building the project using the following command:msbuild /t:restore

Oops, you get an error as below…in order to resolve

If you just try to reverse engineer, the above error says that ‘msbuild’ is not recognized and instructs to check the path variable.

Inorder to fix this, I have followed blog and with minor tweaks, able to resolve the issue, i.e. if you have 64 bit Visual Studio 2022 version, you have to use the below path for environment variable instead of the one specified in the above blog.

Path: %ProgramFiles%\Microsoft Visual Studio\2022\Community\MSBuild\Current\Bin

Then you should be able to overcome the above error…and you should see a screen something same as below

The next step is to run your Code component in local test harness and see how if behaves before actually pushing to dataverse…so use the following command npm start while making sure terminal points to the exact folder location…

Now the code has been run in your browser, you just need to verify by going to the mentioned URL in the local machine.

http://localhost:8181

There it was, you can see your component running in your local browser window….

These code components can be used in Canvas Apps, Model Driven Apps, Power Portals and adds much more flexibility than customizing with HTML Webresources.

Now you can use msbuild /t:restore command to create a zip file, we are good to use the PCF control by importing it to CDS.

Limitations:

  1. Microsoft Dataverse dependent APIs, including WebAPI, are not available for Power Apps canvas applications yet.
  2. Code components should bundle all the code including external library content into the primary code bundle. To see an example of how the Power Apps command line interface can help with bundling your external library content into a component-specific bundle, see Angular flip component example. 
  3. Code components should not use the HTML web storage objects, like window.localStorage and window.sessionStorage, to store data. Data stored locally on the user’s browser or mobile client is not secure and not guaranteed to be available reliably.

You can learn more about PCF Here…hope this helps….

Additional Resources to try out Code Components

Cheers,

PMDY

What is Solution Checker and App Checker in Power Apps – Quick recap

Hi Folks,

While its been quite sometime since Microsoft shipped the Solution checker and App checker, these tools can help a developer to validate all the solutions that was being built before moving to higher environments. It is always advisable to run solution checker once your solution is developed so this can help you achieve better performance following the Power Platform best practices. Previously we used to send for Code review to senior folks but now with this tool, even the junior developer working at the ground level can easily understand and can make the necessary tweaks in the solution.

Solution Checker serves as a static analysis tool for the developers to check any platform related issues.

The solution checker analyzes these solution components:

  • Dataverse custom workflow activities
  • Dataverse web resources (HTML and JavaScript)
  • Dataverse configurations, such as SDK message steps

Note: Solution checker won’t analyze plugins in solutions. Plugin validations are modernized and will eventually the focus is on the native plugin authoring time, which will help you detect and fix issues earlier. So if you were looking for improvements in Plugin code, this will not help you.

Once solution checker starts running, it will be shown as below with a loading symbol on solution checker

It would take a few minutes to complete the process and will be based on the size of the solution. Once this process is complete, you should be able to download the results or view the results like below

If we open the results file, it shows the potential issues or improvements along with their severity which helps us to prioritize the issues which we need to work upon.

The report can also be downloadable excel file with analysis shipped in Zip format.

Now that we have seen what is solution checker, let’s see what App checker is and its pro’s and con’s.

App Checker:

  1. The App checker is now available to help provide a clear list of formula issues in your app, and to provide items to fix to make your app accessible
  2. This helps to make debugging, performance and best practice decisions an easier and more guided experience.  
  3. This is an ideal way to check the formulas you wrote for your Canvas Apps.
  4. There isn’t any possibility to download the app checker results but you can analyze the results on the fly in canvas apps.

To conclude you can think of Solution checker is a tool to check Model Driven Apps and App checker is a tool for Canvas Apps. Hope you will use this great features to improve your solutions and design according to best practices.

Reference:

Solution checker from MS Learn

Apps checker from MS Learn

Cheers,

PMDY

Top Picks for Power Apps

Top Picks for Power Automate

Top Picks for Microsoft Azure