cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
AshBose1
New Member

Reload and refresh Custom pcf control

Hi,

 

I have develop one custom PCF control for Dataset. My PCF control loads with dataset records and i can play around with control.

 

After playing with control, I want to refresh and reload the same PCF control by pragmatically from the control itself.

 

Thanks,

Ash

1 ACCEPTED SOLUTION

Accepted Solutions
carfup
Helper III
Helper III

Hi,

 

Basically you can do it where you want in your PCF control code.
By that I mean that as soon as you want to refresh / reload the control, you simply have to call again the rendering function of your pcf.
If you properly build it, the existing instance of the control will be cleaned and the new one will be there.

 

As sample, in my Quick Edit Form PCF control, as soon as we click on the refresh button i'm performing the following :

/**
	 * Function to refresh the content of the PCF
	 */
	private async refreshQEF(){
		this.unmountComponents();

		//disabling save button
		this._buttonsComponnent.setState({disabled : true});

		this.queryQuickViewFormData(this._quickViewFormId);
	}



Clément

View solution in original post

6 REPLIES 6
carfup
Helper III
Helper III

Hi,

 

Basically you can do it where you want in your PCF control code.
By that I mean that as soon as you want to refresh / reload the control, you simply have to call again the rendering function of your pcf.
If you properly build it, the existing instance of the control will be cleaned and the new one will be there.

 

As sample, in my Quick Edit Form PCF control, as soon as we click on the refresh button i'm performing the following :

/**
	 * Function to refresh the content of the PCF
	 */
	private async refreshQEF(){
		this.unmountComponents();

		//disabling save button
		this._buttonsComponnent.setState({disabled : true});

		this.queryQuickViewFormData(this._quickViewFormId);
	}



Clément

Hi @AshBose1 , 

 

I agree with Clément, you have the full control of the code, and can rerender anytime.

In case you need to refresh the control because your data in dataset changed, you can simply call the dataset.refresh() method.

That will call your updateView function (with the new data), and there you need to rerender anyway.

Hope this helps.

 

Kind regards,

Diana

 

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."
Anonymous
Not applicable

Hi Diana,

 

Thank you for suggestion.

 

I added and checked this in my PCF control, it called updateView function which reload my data only. I want to reload my whole PCF control with the HTML. 

 

For example if search anything in entity homegrid advanced search or advanced filter, it rerender the whole PCF control.

 

Thanks

Hi @Anonymous , 

 

If you use pure TS/JS approach, you basically need to empty the "container" that you've got as parameter in the "init" function, and you need to render the grid each time the "updateView" is called.
Here is an example from sdk for a dataset pcf: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/sample-controls/data-set-grid-control

 

Usually, for a grid control I use react, since it would take too much work to make it from scratch. Here we need to call the ReactDOM.render everytime the updateView is called, letting react decide what it needs to refresh.
My code looks something like this:

public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
	{
		this._container = container;			
		context.mode.trackContainerResize(true);
	}

public updateView(context: ComponentFramework.Context<IInputs>): void
	{	console.log(context.updatedProperties);
		this.renderGrid(context);
	}

My "renderGrid" function sets only the props, and calls

ReactDOM.render(React.createElement(ColorfulGrid, props ), this._container);

For the complete code, have a look to my github Repository:  https://github.com/brasov2de/ColorfulOptionsetGrid/tree/master/ColorfulOptionsetGrid

 

Hope it helps!

 

Kind regards,

Diana

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."
SteveRist
New Member

Hi - I came across the thread and found it really useful. However, I have a different problem.

I am developing  a PCF control that consumes a JSON payload from SharePoint and renders it as two vertical stacks. 1 for Folders and one for files in that folder. My users are unwilling to use SharePoint natively so this control mimics the behavior of a legacy system.

We query all of the SharePoint Document Library at the outset and the JSON is therefore static.

The desired behavior is for a user to click on button for the named folder then see the folders in the “drilled-down” folder.

I can render as desired and the OnClick events fire as expected.

However, I can’t seem to use the requestrender method as I control call defined in the tsx file doesn’t seem to have a valid context.

Am I using the wrong pattern altogether, or is it “just” a case of getting the context into my react class and the subclasses that I use for the folder menu?

 

 

You might develop it for a MdA ?
You could check here : Bring Microsoft 365 collaboration to your model-driven apps | Microsoft Power Apps what's coming in with the new release, the new control could answer your special needs.

Clément

Helpful resources

Announcements
Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Super User 2 - 2022 Congratulations

Welcome Super Users

The Super User program for 2022 - Season 2 has kicked off!

September Events 2022

Check out all of these events

Attend in person or online, there are incredible conferences and events happening all throughout the month of September.

Government Carousel

New forum: GCC, GCCH, DoD - Federal App Makers (FAM)

In response to the unique and evolving requirements of the United States public sector, Microsoft has created Power Apps US Government.

Users online (2,419)