Skip to content
Skip to content
Menu
A cup of dev
  • Home
  • About
  • Contact
  • Books and ink
A cup of dev

A comprehensive guide to Power Apps Component framework (PCF): Part 3 – Working with PCF components and Dataverse solutions

By Eli H. Schei on Monday, 20 June 2022, 9:59Wednesday, 13 November 2024, 10:42

In the two previous blogposts in this series I’ve covered how to get started with PCF components, how to add React to it, and how to test it in a canvas app. In this blogpost I will cover how work with PCF components and Dataverse solutions for different environments.

Blogposts in this series

Note, the other posts will be published in the next couple of weeks. The links will be updated – if the link is not active it is because the post is not published yet.

  • 1
    Getting started with Power Apps Component Framework
  • 2
    Adding React to your PCF component and testing the component in a canvas app
  • 3
    Working with PCF components and Dataverse solutions (this blogpost)
  • 4
    Using environment variables in a PCF component
Prerequesites: In this blogpost I’ll assume you allready have some knowledge about creating a basic PCF component. If you don’t, or if you haven’t set up your developer environment yet take a look at the first blogpost in this series.

I’ll also assume that you know basic React and TypeScript.

Table of content

  • Application Lifecycle Management (ALM) and Dataverse solutions
  • How to create a solution, add PCF components, and deploy it
  • Import the solution to Dataverse
  • Summary
  • Resources

Application Lifecycle Management (ALM) and Dataverse solutions

If you are new to development you might not be familiar with Application Lifecycle management so I thought I’d give a very short introduction. I’ve also added some links about this topic in the resource section if you want to read more about it.

Application Lifecycle Management (ALM) is the process in which we control the application through development, testing and release, and then maintenance. When developing applications we typically have different environments for different uses. There’s the developer environment where the developer test their app continuously while they’re creating it. Then there is typically a test/QA environment where the product owner/testers can test the application before it is released to the Production environment. The Production environment is where the app lives when it is available for the intended end users.

Application Lifecycle management is a set of processes and tools that we use to manage our application(s) in the different stages of its life.

What is Dataverse solutions?

Dataverse solutions, or Power Platform solutions (same thing – different name), is a way to maintain the application lifecycle management in Power Apps (and power automate). Simplified a solution is a collection of resources that can be deployed together.

Solutions and PCF components

In the previous part of this blogpost I showed you how you can use the command pac pcf push to deploy a temporary solution (containing your PCF component) to Dataverse. This is great for testing and developing, but you have to do the command for every one of your PCF components. So if you want to deploy more than one PCF component at once its easier (and faster) to use a solution. It is also not recomended to use the temporary solution for Production environments.

Managed vs unmanaged solutions, and how to use them in different environments

There are two types of Dataverse solutions, managed and unmanaged.

Unmanaged solutions

  • Can be exported (as umnanaged or managed).
  • If you delete it only the solution (the container) is deleted – not the content of the solution.
  • Should be used for developer and test environments.

Managed solutions

  • Can not be exported.
  • When deleted all coztumiations inside the solution is also deleted. (If a managed solution have dependensies these have to be deleted before the solution can be deleted).
  • Should be created from an unmanaged solution and concidered a build artifact.
  • Should be used in production environments.

Read more about the different types of solutions in Microsoft documentation.

How to create a Dataverse solution, add PCF components and deploy it

Now that we have covered the basics about AML and solutions, lets get to the practical part of the blogpost – how to actually create a solution, add PCF components, and then how you build and deploy it to different environments. You can find the full democode used in this blogpost on github.

Create solution

First you need to create a new folder that will hold your solution. In my example I named the folder DataverseSolutionDemo. Navigate inside of this folder from your prefered CLI, and use the below command to initialize the solution.

pac solution init --publisher-name <your name> --publisher-prefix <prefix>

This will generate a folder structure and some files.

Shows an screenshot of the folder structure. It has two subfolders ".vs" and "src\Other". And two files in root ".gitignore" and the solution file "DataverseSolutionDemo.cdsproj"

There are two files you should take a look at; the solution file, thats the file that ends with .cdsproj and the solution.xml file (you’ll find this in the src/Other folder).

The solution.xml file

Screenshot of parts of the solution.xml file. Shows the solutions Unique Name, Version and Managed-type (2). Important when working with PCF components and Dataverse solutions

This file describes your solution. What name it has, current version, and if it is managed(1), unmanaged(0) or both (2 – can be deployd as either). It also has a section about the solution publisher (not displayed in the above image). For this demo you can ignore this file, but you should know where to find it.

The .cdsproj file

This file will contain the references to your components, so we will take a look at it after the references has been added.

Add PCF components to the solution

When the solution is created it is time to add the references to your PCF components. From the folder of your solution, run the command

pac solution add-reference --path "path-to-PCF-component-pcfproj-file"

The path can be absolute, or relative to the solution folder. For the DataverseSolutionDemo the path is "..\PCF-React-demo-component\PCF-React-demo-component.pcfproj".

When the reference is added it will show up in the .cdsproj file. In the below image you can see that I have added both my PCF components to the solution.

Shows screenshot of "itemGroup" with two "Project references" included

Build and deploy your solution

When you have added the references it is time to build your solution. Note, to be able to run msbuild you need to add it to your global path, or run the command from visual studio command promt.

The first time you build the solution you run msbuild with /t:build and /restore. This will both build the solution and restore the dependencies it needs.

msbuild /t:build /restore

When you have made changes in your component and need to rebuild the solution you can use /t:rebuild.

msbuild /t:rebuild

Both the above commands will build a unmanagaed solution for you. And the built solution can be found in the bin/Debug folder that is created the first time you build.

Screenshot of the DataverseSolutionDemo.zip file inside of bin/Debug folder

Building for production

When you are ready to build for production you add the release flag to your command like shown below.

msbuild /t:rebuild /p:configuration=Release

This will build a managed solution that will be created in the bin/Release folder of your project.

Importing the solution into Dataverse

Use CLI with unmanaged solution

First you need to create a connection to your environment

pac auth create --url https://myenvironment.crm4.dynamics.com

If you have multiple auth connections set up you can see which one is active by running pac auth list, and change to a different connection by using pac auth select --index <number>.

When you have your connection run the pac solution import command to start the import.

pac solution import --path "./bin/...." -pc

The -pc flag stands for “publish changes” and when working with unmanaged solutions you need to add this flag for the PCF components to update. Note, if you try to import the without this flag, or you do it manually, the solution import will work – but the changes in your PCF component won’t show up.

You can use the same command to import managed solutions as well.

Import manually

When working with managed solutions you can also import it through the user interface. Note, this will not work with unmanaged solutions – that to say, the import will work but your PCF components will not be updated. As far as I can tell from talking to other developers this is a known bug – but I was not able to find any sources on it.

Navigate to Solutions and select “Import solution”. Select the solution you would like to import and click next – after the solution is verified click import.

Summary

In this blogpost you learned that working with solutions is a way to manage your applications lifecycle. And that there are two different types of solutions (unmanaged/managed) that should be used for different scenarios.

You also learned that you can use add-reference to add your PCF components to a solution, and how to build your solution for different environments.

Lastly we covered how to import solutions from your CLI (works for both types of solutions) and that you can import managed solution manually and the PCF components will update (this will not work for unmanaged solutions).

Resources

  • Power App Component Framwork overview (Microsoft docs)
  • Introduction to Solutions (Microsoft docs)
  • Application Lifecycle Management with Microsoft Power Platform (Microsoft docs)
  • Best practices for code components created using Power Apps Component Framework (PCF) (Microsoft docs)
  • Code component Lifecycle Management (Microsoft docs)
  • Package and deploy code components (Microsoft docs)
  • pac pcf push FAQ (Power apps comminity)

If you are interested in Microsoft 365 Development you might also like my other blogposts in this category.

Also, if you have any feedback or questions, please let me know in the comments below. ðŸ™‚

Thank you for reading, and happy coding!

/Eli

If you want to support my content you can

Share this:

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on X (Opens in new window) X

Post navigation

What is a Microsoft 365 Developer, and how to get started
How to upgrade your SPfx project to the latest version, and how to fix/avoid common issues

2 thoughts on “A comprehensive guide to Power Apps Component framework (PCF): Part 3 – Working with PCF components and Dataverse solutions”

  1. Naren says:
    Wednesday, 7 August 2024, 0:59 at 12:59 am

    Hi, It is a nice content,
    I tried to build something with this example and but when I try to add reference using following getting error “”, Any idea why, tq

    PS C:\Narendra\PCFNew> pac solution add-reference –path C:\Narendra\PCFNew
    Microsoft PowerPlatform CLI
    Version: 1.32.8+gf89d946
    Online documentation: https://aka.ms/PowerPlatformCLI
    Feedback, Suggestions, Issues: https://github.com/microsoft/powerplatform-build-tools/discussions

    Error: Dataverse solution project file with extension ‘.cdsproj’ was not found in the directory.

    Regards,
    Naren

    Loading...
    Reply
    1. Eli H. Schei says:
      Wednesday, 7 August 2024, 10:30 at 10:30 am

      Hi! Like the error sais “Dataverse solution project file with extension ‘.cdsproj’ was not found in the directory.” Its asking about the .cdsproj which is for the entire solution. And from your example it looks like you are inside of your PCFNews component folder (C:\Narendra\PCFNew>) – which is the same as the component you are trying to add.
      You should navigate inside the *solution* folder and add the pcf reference from there 🙂

      Loading...
      Reply

Leave a ReplyCancel reply

Eli H. Schei

I'm a front-end developer who mainly work in the Microsoft 365-sphere. As a developer I read a lot of blogs. And in my experience I can read multiple different blogposts about exactly the same topic, and only one of them makes sense to me. Therefore I’m adding my voice to the mix, and hopefully one of my blogposts will be the one that makes sense of a topic for you. You can learn more about me here.

Recent Posts

  • Give your app granular permissions to a specific site or list in SharePoint
  • Microsoft Graph Magic: Simplifying User Removal from teams in Microsoft Teams
  • How to leverage teams-js in your Teams app; Working with user context and SharePoint site context
  • Building a ‘My Tools’ Web Part for SharePoint: Using SPfx and PnPjs
  • My top 3 most read blogpost of 2023

Categories

  • Azure
    • Azure functions
  • Level
    • Beginner
    • Intermediate
  • Microsoft 365 Development
    • Microsoft Authentication Library
    • Microsoft Graph
    • Microsoft Teams
    • PNP powershell
    • PowerApps
      • PowerApps Component Framework
    • SharePoint Framework
    • SharePoint Online
  • Tech Lead
  • Web development
    • Accessibility
    • Soft skills
    • Tips and tricks

Tags

accessibility app permissions ARIA azure Azure CLI azure functions Content creation custom themes favorites git github M365 CLI M365 development MS Graph PCF PnPjs PnP powershell power apps PowerApps Component Framework quicktip react resources SharePoint Online Sideloading SPfx Teams teams app dev Teams apps Tech lead tools wcag webdev Windows terminal
©2025 A cup of dev | WordPress Theme by SuperbThemes.com
%d