Power Platform Community Forum Thread Details

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.

I know that we can build table components, (https://docs.microsoft.com/en-us/powerapps/developer/component-framework/sample-controls/table-grid-control). 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.

Categories:

Power Apps Pro Dev & ISV

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...