cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
indikaa
Level: Powered On

Can we use PCF component to replace embedded PowerApp

Hi Everyone, 

Just to give you all a background of the issue, one of the projects that we have at the moment uses multiple PowerApps on the Contact form, this is super slow, takes ages to load PowerApp and the data. these PowerApps are calling 3rd party API to fetch data. 

 

We have used simple PCF control to replace one of the PowerApp which was loading an image from a 3rd party api, when we placed it side by side we noticed a huge performance difference and the PCF control was way faster than the embedded AowerApp.

 

So the question to you guys is can we use PCF control to build something similar to below. Capture.PNG

I know that we can build table components, (https://docs.microsoft.com/en-us/powerapps/developer/component-framework/sample-controls/table-grid-...). Can have a link to open a CRM record? without the react support how difficult this would be. Before we go down this path, just wanted to get a idea from the community.

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
ben-thompson
Level 8

Re: Can we use PCF component to replace embedded PowerApp

IYou can do everything you want using Javascript - in 3 bits.

 

Firstly you need a Javascript function that you call when the user clicks on the div / td / image which will take the user to the sub form.

 

 
private onDivClick(event: Event): void {
			let rowRecordId = (event.currentTarget as HTMLTableRowElement).getAttribute(RowRecordId);
			if (rowRecordId===null){
				return;
			}
			let er:ERef=JSON.parse(rowRecordId);
			if (er.entityName===null){
				return;
			}
			if (er.id===null){
				return;
			}			
			let entityFormOptions = {
				entityName:(er.entityName===undefined)? "":er.entityName,
				entityId: (er.id===undefined)?"":er.id,
			}
			this.contextObj.navigation.openForm(entityFormOptions);
			
		}
 
You also need something like the following to add the javascript command to the Div which the user will click on.
 
let er=new ERef();		
er.entityName=??.entityType;					
er.id=??.id;
div.addEventListener("click", this.onDivClick.bind(this));
div.setAttribute(RowRecordId,  er.toString());		

 

Finally as you will see in the code we use a simple class to pass the entity references around - it works but probably doesn't meet any best practice

 

class ERef {
	entityName?: string   
    id?: string
    public toString():string{
        return "{\"entityName\":\""+this.entityName+"\",\"id\":\""+this.id+"\"}";
    }

I hope that helps...

View solution in original post

1 REPLY 1
Highlighted
ben-thompson
Level 8

Re: Can we use PCF component to replace embedded PowerApp

IYou can do everything you want using Javascript - in 3 bits.

 

Firstly you need a Javascript function that you call when the user clicks on the div / td / image which will take the user to the sub form.

 

 
private onDivClick(event: Event): void {
			let rowRecordId = (event.currentTarget as HTMLTableRowElement).getAttribute(RowRecordId);
			if (rowRecordId===null){
				return;
			}
			let er:ERef=JSON.parse(rowRecordId);
			if (er.entityName===null){
				return;
			}
			if (er.id===null){
				return;
			}			
			let entityFormOptions = {
				entityName:(er.entityName===undefined)? "":er.entityName,
				entityId: (er.id===undefined)?"":er.id,
			}
			this.contextObj.navigation.openForm(entityFormOptions);
			
		}
 
You also need something like the following to add the javascript command to the Div which the user will click on.
 
let er=new ERef();		
er.entityName=??.entityType;					
er.id=??.id;
div.addEventListener("click", this.onDivClick.bind(this));
div.setAttribute(RowRecordId,  er.toString());		

 

Finally as you will see in the code we use a simple class to pass the entity references around - it works but probably doesn't meet any best practice

 

class ERef {
	entityName?: string   
    id?: string
    public toString():string{
        return "{\"entityName\":\""+this.entityName+"\",\"id\":\""+this.id+"\"}";
    }

I hope that helps...

View solution in original post

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors
Users Online
Currently online: 329 members 6,379 guests
Please welcome our newest community members: