Hi! My name is Diana Birkelbach and I’m a developer, working at ORBIS SE . Together with the team we develop generic components and accelerators for Dynamics 365 and Power Platform.
One of the biggest accomplishments are the Microsoft Most Valuable Professional Award (MVP) in Business Applications for 2021.
You can also find me in the Power Platform Community Forum, where I’m part of the Power Platform Community Super User Program (Appstronaut) .
I started with web development with ASP (VB) in the old days before the .NET was there. For better performance I used a lot of JavaScript and TSQL. Later on I moved to ASP.NET and C#.
I developed for Dynamics 365 from the beginning, starting with the version 1.1 (back then Microsoft CRM). In that old days we had to use triggers on the SQL (since there were no PlugIns, or Callouts as they were called in CRM 3) and starting with CRM 3.0 I worked to our first generic Editable Grid. In CRM 4.0 times I made a new generic and this time pure HTML-based Editable Grid, together with a Core-Library for working with the Dynamics 365. I think it was that time when I started to become “Miss Metadata”, since I tried to work around the performance Issues with Metadata as came up with several solutions for caching it for the client script.
I worked also with Azure (connected to Dynamics 365), but lately I focus on front end development: I love working with HTML, CSS, JavaScript ES6+, Typescript, React & Redux & React Hooks.
I’ve got to know a little about the Power Platform in Spring 2019, and as soon the PowerApps Component Framework (PCF) preview was released, it become my new love. Since then I try to get it to know better, write blogs to help others to understand it. When I have some time , I try to make some open-source PCFs.
Follow me:
- Twitter: https://twitter.com/DianaBirkelbach
- LinkedIn: https://www.linkedin.com/in/diana-birkelbach/
- YouTube: https://youtube.com/@PCFLady
- GitHub: https://github.com/brasov2de
Dianamics PCF Lady 
Hi Diana
I have been reading your blog for a while now and your knowledge is amazing.
I don’t know if you can help but I have a web resource I need to either remake into a PCF or update its code so that it will continue to work in the future.
is this something you might be able to give me some advice on doing?
Thank you for the nice words! 🙂
If I would need to remake a HTMLWebResource I would go with a PCF. Maybe a lot can be reused. But also a design containing a combination of Custom Pages and PCFs could reduce the complexity while keeping it flexible. But of course it depends on the WebResource and how complex it is.
hi – this is am amazing resource as I don;’t find teh Microsoft documentation good for “how to” problems.
I’ve posted to you on the PowerApps Community about an issue that I’m having and hope you can help./
keep up the great work, it makes huge difference to people like me.
Thank you so much! 🙂
Sure, I’ll do my best to answer there.
We now have basic PCF working. What we were interested in doing was using the SharePoint Search API so that our users can search SharePoint without having to open a SharePoint browser window. I have been told that Dynamics 365 Search searches the Dataverse, but not SharePoint.
So, a PCF that takes a search string and then displays the returned DataSet from SharePoint.
I think there are a few ways to think about. Usually a PCF is only showing/editing the data. Of course is technically possible to make your own requests right inside the PCF, but usually you have to think about protecting data / user rights and psswords, and it’s better to have a backend component too.
You can also have a Virtual Table for the SharePoint data. Actually the following announcement is telling us that we now get Virtual Tables for SharePoint out-of-the-box: https://powerapps.microsoft.com/en-us/blog/bring-microsoft-365-collaboration-to-your-model-driven-apps/
Virtual Tables look interesting, but are read-only. I was thinking of wrapping the SharePoint API in a Custom Connector to allow for full CRUD and Search. This would make the UX clean. That said, the standard D365 Document Grid must be calling an API as the documents aren’t in the data verse, only the locations are.
Virtual Tables are not read-only anymore. Have a look: https://docs.microsoft.com/en-us/power-apps/maker/data-platform/create-edit-virtual-entities?WT.mc_id=BA-MVP-5004107
That’s excellent news. I was looking at out-of-date documentation.
Hi Diana,
I am following your example, for Single Line of Text, it is working fine. But for Multiple Line of Text, it is not working at all. Do you mind if I get some paid help from you. Please, ping me as soon as possible
Hi Mohamed, what example do you mean?
CellRendererOverrides.tsx
for [Text] is working fine, but I am trying to override [Multiple] and the Grid does not respond with any changes at all.
If “Multiple” and “TextArea” doesn’t work, please send me your implementation (maybe in a LinkedIn message: https://www.linkedin.com/in/diana-birkelbach/). I’ll have a look
Hi Diana. Very Impressive Work
One of our JavaScript web resources are outdated and no longer supported. We are interested in deploying PCF for the first time and need some guidance. Very similar to what you were able to accomplish with the whole number & choice fields, however our main requirement is based an condition. The condition statement is supposed to evaluate the whole number field against a range and highlight the choice field accordingly. There are multiple conditions actually and I can share the outdated JavaScript file for more details.
looking forward to hearing from you!
Regards,
Arslan A.
Hi Arslan,
I guess this is about the Power Apps Grid customizer control.
It depends on your use case. One way would be to calculate the optionset (choice) using form-scripting or Dataverse formula column. Then you would have the data availabe everywhere, and the Grid would show the color without a PCF.
If you want to show that colors only on the Grid, than would be similar with this example from the SDK samples: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/sample-controls/customized-editable-grid-control?WT.mc_id=BA-MVP-5004107#code, where the color for a money field is calculated based on a condition. You can also color the choice field based on the number field if you want to. That would work similar with the calculated column example: https://dianabirkelbach.wordpress.com/2022/09/19/implement-calculated-columns-with-power-apps-grid-control/ (the GitHub repository with the example is linked there)
Hope this helps!
Thank You for sharing your ideas. So the Calculated column method is very interesting but unfortunately it is not available in our region (US Eastern & Central). Same applies for form scripting, it is not supported for our environment. For the PowerApps Control, the one you shared applies to the editable grid so I am not sure if that will also work on the PowerApps read only grid? The SDK Sample you shared is close to what we are looking for except that the condition will be based on multiple numerical ranges. For example. function OE_RF(rowData, userLCID) {
var str = JSON.parse(rowData);
var createdOn = str.createdon.Value;
var coldata = str.new_customerservicetime_Value;
var imgName = “”;
var tooltip = “”;
if(!coldata){
imgName = “”;
}
if(coldata >300) {
imgName = “rbc_dot_red”; }
if(coldata >240 && coldata <= 300) {
imgName = "rbc_dot_yellow"; }
if(coldata <= 240) {
imgName = "rbc_dot_green"; }
if(!coldata) {
imgName = "rbc_dot_red"; }
var resultarray = [imgName, tooltip];
return resultarray;
}
Let me share the links to what I mean:
– the Dataverse formula column announcement was made in july 2022, so it should be everywhere. But it’s true that it’s a preview, so shouldn’t be used in production: https://powerapps.microsoft.com/en-us/blog/boost-maker-productivity-inside-dataverse-using-formula-columns/
– by “form scripting” I mean this one: https://learn.microsoft.com/en-us/power-apps/developer/model-driven-apps/clientapi/reference/attributes/setvalue?WT.mc_id=BA-MVP-5004107. It’s available in all moder-driven apps.
– The Power Apps Grid which host controls is not the Read Only Grid, and not the Editable Grid. It’s the “(Preview) Power Apps Grid control”.It’s a preview which will eventually replace all the grid controls in the future: https://learn.microsoft.com/en-us/power-apps/maker/model-driven-apps/the-power-apps-grid-control?WT.mc_id=BA-MVP-5004107
But you are right, except form scripting, the rest are still preview features.
Right now you could use the form-scripting to calculate the optionset values, and based on the color assigned to the option you could use my ColorfulOptionsetGrid PCF: https://pcf.gallery/colorful-optionset-grid/
Hmm…I know PCF is the best solution for our business need but Form Scripting and PCF development are out of the scope of my capabilities. Not sure if you would be open to coming on board for this project but I would like to setup some time and discuss the possibility if you would willing. I think our requirements are simple and easy for an experienced PCF developer. Please email me if you would be interested in such a opportunity and I can share more information accordingly. Please let me know if you cannot access my email for any reason. Regards
Hello Diana,
Thank you so much for posts. I am junior woman developer who just started to work. My first mission is to create dataset subgrid pcf with react/fluentui. it needs more features though. Every item needs to have checkbox next to it and when its selected it needs to disappear from list and should go regarding list. and this list also needs to be filtered according to phonecall, email, whatsapp call activity. I am lost.
Hi Alya, not sure if I got all the details. But it could be a PCF with two datasets inside.
– the first is for the records where you need the checkboxes.
– the second dataset is for the records generated in the second list.
Each time a record is selected, you could use webAPI to create a record in the second list, and then you can refresh the second dataset property.
If you find the records in the second dataset, you don’t show them in the first one.
The filter could be the one you have on the subgrid (so the platform filter). That will filter the data for you.
If you need more help, maybe you can post your question (maybe with a screenshot for better understanding) in the community form. Could be easiert to explain: https://powerusers.microsoft.com/t5/Power-Apps-Pro-Dev-ISV/bd-p/pa_component_framework
Hope it helps!
Diana
Hello again Diana. Thank you for swift reply. I reread my message and I noticed I worded so badly. I was asked to create a subgrid pcf just under regarding lookup field on activity form(email, phonecall etc). Pcf needs to show related cases to that particular activity. Every item in the list must be selectable with their checkbox(and only one item can be selected. when one selected other one’s checkboxes needs be cleared). Selected item needs to be placed in regarding lookup filed.
Right now thanks to one of your videos(dataset with react/fluentui) I was able to list the all cases just under the regarding lookup field but that is it. I am not sure about the next step.
Hi @Alya,
So you basically need to implement some kind of custom Lookup PCF?
I think the single selection part can implemented by using the DetailsList “selectionMode” property, by setting it on “single”. The hard part would be to set the regardingid after the selection. Unfortunatelly you cannot combine a lookup and a dataset property in the same PCF. I think for now you would need to use webAPI to set the lookup on the parent record.
Not very sure if I’ve understood the whole requirement, but I have the feeling that you could implement it without a PCF.
– Maybe with a Form Component Control for showing the related cases for the regarding (so the FCC bound to the regardingid. I have a blog on that here: https://dianabirkelbach.wordpress.com/2021/03/12/the-form-component-control-promotes-the-pcfs-to-the-next-level/). The action of replacing the regarding could be made using form-scripting or webAPI. Refreshing of the main form could be a little tricky.
– Or maybe by building a CustomPage which could be shown as a Dialog, embeeded Page or a SidePane.
Hello again Ms. Diana.
Hope you are well. I deployed the Coloroptionsetgrid in our Sandbox environment and it looks very nice overall. It works perfectly as expected on the Read-Only Grid. I didn’t find any documentation on configuring the component on the Dashboard views but I thought I would give it a try and surprisingly it worked somewhat, although the option set field on the view does show in color but the Lookup hyperlinks on the same record are greyed out.? So for example if user wants to navigate to a Case (which is a lookup on the same record), the linked is greyed but some of the other functionality doesn’t appear. I don’t believe the component was originally developed to support views on native CRM Dashboards.?
Can you please verify and confirm.? Or maybe there is a way to configure for Dashboards that I may have missed.?
Thank you again?
Regards,
Arslan
Hi Arslan,
To implement a dataset PCF, you need to implement all the details. You don’t get anything from the platform except the data/ribbon interaction.
I didn’t implement the Lookup-Navigation in the ColorfulOptionsetGrid. That feature doesn’t work in SiteMap Grid or Subgrid nether.
If I find a spare minute I could try to do that, but I’m sure the new Power Apps Grid (Microsoft out-of-the-box control) offers all the needed features, including the colors. That grid combined with the cell-renderer feature, will probably make the ColorfulOptionsetGrid obsolete. Have a look to this blog for more details: https://dianabirkelbach.wordpress.com/2022/07/27/power-apps-grid-control-first-glimpse-to-the-cell-renderer-and-editors/
Ms. Diana, Thank you for the helpful lead information.
I revisited the OOB components and compared each one including your custom colorful component. Here’s what I have learned so far, The Default Read-Only Grid is most mature with full ribbon functionality but does not include any custom properties for color option set. The PowerApps Grid-Only Grid does not have ribbon functionality or color option set customization. The new (Preview) PowerApps grid control Does have option for option set color as you pointed out, but unfortunately it also renders the Dashboard views useless because all of the ribbon functionality is missing. Lastly, while your custom component is perfect for Model-Driven App grid, it also disables the Dashboard Views and ribbon buttons like (Create button, Email, See all records, Collaborate, Flow, Run Report, Excel Templates, Export to Excel..etc). I wish there was a way to combine functionality of all components because the Dashboard views are what end users mostly use on a day-to-day basis. In this scenario, what would you advise as next steps for me as this project completion is a must for me.? I look forward to your response and thank you for your continued contributions. Regards
Hello Diana,
Thanks for the previous replies also you blog post. I used you suggestion and helped me to solve many problem in my PCF. Recently, I created a field pcf and setting Regarding field with on change of this pcf on form onload. The problem is when user creates or opens create new activity or existing activity from Regarding is setted with previous output value of field pcf. I clear on form onload but when updateView runs, it is getting last value of this filed output set to field pcf. I am blocked and there is nobody around me to solve this issue.
Hi Alya,
The “clear on form load” doesn’t sound very common.
It’s hard to say something … maybe you can post a question in the community forum, and give us more details: https://powerusers.microsoft.com/t5/Power-Apps-Pro-Dev-ISV/bd-p/pa_component_framework
Hello Diana!
I love the work you have put in for all the different PCF components. I am new to pcf and the power platform. I was tasked to create a simple grid view to display a list of dataverse entries and have it auto-refresh every 15 seconds. I was hoping that you could help me figure out what I am doing wrong.
– I have a setInterval that is inside a useEffect that is cleaned up and triggered again after a 15 second delay.
– Next I have a simple table dynamically generated from the initial dataset that is passed in from the grid view which initializes a grid component that generates a simple table.
– The grid props are the columns, records, sortedRecordIds, and the callback to call a retrieveMultipleRecords webapi call.
– I was able to get a simple countdown timer rendering / refreshing on the screen and see the fetchXML call being called but when the fetchXML comes back I am not sure how to update the grid props / table with it.
Any help is greatly appreciated! Keep up the fantastic blog!
-Eric
Hi Eric,
if I get it right, you have a dataset PCF, where you already have your initial data.
In order to refresh the dataset, you don’t need a fetchXML request. You just need to call a dataset.refresh() : https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/dataset/refresh?WT.mc_id=BA-MVP-5004107
That will trigger an updateView for you, where you can rerender your grid.
I use to pass the complete dataset property to my react component; no need to transform it to something else.
I have a video about making a simple dataset component. I’ve posted there more links in the description: https://www.youtube.com/watch?v=vy94ZRJepo4&t=25s&ab_channel=DianaBirkelbachakaDianamicsPCFLady
Hope it helps.
Thank you Diana!!
I will give that a try and see if I can get it working! Thanks again!
Hi Diana,
Thanks for this wonderful resource you have created for the community! We have an on-premise V9.x system and I’m looking into converting an angular app/web resource that’s launched via a site map sub area to a PCF control. I come across your goodbye-html-web-resources article but that is not applicable to our on-premise system. Do you have any suggestion if a PCF control could be hosted inside a web resource? We don’t have any entity for this angular app and we have our own webapi that we use to work with the data, so the only thing we need to figure out is how to convert this angular app to PCF control that’s launched via a sub area in a site map that ends up taking most of the page.
Thanks!
Hi @Saqid,
Unfortunatelly I don’t think that PCFs can be used in On-Premise Environments. As far as I know, you would need to stay with a HTMLWebResource.
Hi Diana,
Happy New Year! I’m investigating having a PCF control to manage the presentation of data from SharePoint to the user. We are trying to make our UX look like a legacy system to reduce teh training need for our users.
We’re thinking of querying SharePoint Online via Graph from the PCF control.
We’d like to avoid our users having to log in again having logged into Dynamics so do you have a view on the right authorisation flows to use?
Hi Steve,
I’m not an SharePoint expert, but to avoid authentication issues, I try to avoid making the external requests from inside the PCF.
1. It could be an option to use a Custom API (Custom Action) which you can call from the PCF.
2. The solution which I would prefer: using the Power Platform ways. Like making a Custom Page where we can use a Custom Connector (or a Flow) to get the data from SharePoint, and pass that data to your PCF (or maybe use a Gallery to show the data?). The Custom Page could be shown in the home area, in a dialog or in a Side Pane, depending on your needs.
Maybe this blog might help in this direction: https://sharepains.com/2023/01/03/microsoft-graph-api-the-power-platform/
3. Another good way would be to use a Virtual Table for SharePoint. You could implement your own, or use the new feature “create table from external data”, which allows you to easily define a Virtual Table: https://www.youtube.com/watch?v=ttw4bF1mT3g&t=1s&ab_channel=MicrosoftPowerPlatform.
Then you could show the data like any table from Dataverse, or you could use the PCF only to show the data already surfaced inside Dataverse (but not duplicated)
Hope this helps!
Thanks Diana – I’ll try these out.
I agree that if we can just pass a re-read dataset down into the PCF control that would be much cleaner.
Cheers,
Steve
Thank you.
With your help, I was able to modify the disclosed PCF to the form I wanted.
(https://powerusers.microsoft.com/t5/Power-Apps-Pro-Dev-ISV/PCF-Lookup-record-Question/m-p/2114625#M8586)
(https://github.com/nanenchanga53/pcf-universal-gantt-chart)
It was hard to modify the PCF because there was little information with MS Learn alone, but I was able to solve it with your help.
I want to study by translating into Korean through this blog and your github fork.
Which one should I start with? (I think I will mainly change DataSet because I used Javascript for records.)
Glad to hear I could help!
I love to hear that you’ll study by translating into Korean. I’m a fan of the Korean culture.
Please mention my blog in your translations. I’d love to connect to Korean developers.
It’s a little hard to say where to start. It depends… I would say
– if you want to start with absolute dataset basics, you could start with this series of 3 blogs: https://dianabirkelbach.wordpress.com/2020/06/14/features-of-a-dataset-pcf-1/
– if you want to describe the implementation details of a dataset PCF, this blog is the starting point for a log of other blogs: https://dianabirkelbach.wordpress.com/2020/08/19/my-checklist-for-a-dataset-pcf-using-fluent-ui/
There are some more deep-dive blogs too. You find all the dataset blogs if you switch to the dataset category: https://dianabirkelbach.wordpress.com/category/pcf/dataset/