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 = {
				entityNameSmiley Sader.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...

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 = {
				entityNameSmiley Sader.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...

Helpful resources

Announcements
firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

FirstImage

Power Platform World Tour

Coming to a city near you

thirdimage

PowerApps Community User Group Member Badge

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

FourthImage

Join PowerApps User Group!!

Connect, share, and learn with your peers year-round

SecondImage

Power Platform Summit North America

Register by September 5 to save $200

Users Online
Currently online: 133 members 4,556 guests
Please welcome our newest community members: