How to refresh SPFX webpart

Copper Contributor

I am developing webpart with new SharePoint Framework. I notice when user changed any value in property it refresh/reload the webpart. I want to refresh/reload the web part when user click on a button on the webpart. I did not find any solutionhow to do this. Please share ideas if anybody have.

13 Replies
Thanks for your reply but sorry to say you miss understand me. My objective, there will be a button in web part not in property pane. When user will click on the button from webpart it will refresh the webpart.

I'm sorry I misunderstood...

 

Regarding your question then I think it all comes down to attaching an event handler to the button's click event, perform whatever logic needed to refresh and ultimately making sure your HTML is updated. 

 

Maybe the information in the following article helps you out

https://www.w3schools.com/jsref/event_onclick.asp

 

Hope this helps!

 

I am able to fire the click event and execute my custom code. Here need to fire a sharepoint framework method to refresh the webpart, so i need the sample code of SPFX webpart refresh method.

I don't think there's a specific method to refresh the webpart itself. Are you using ReactJS in the webpart? in that case, if you follow ReactJS component lifecycle, the component re-renders when the state is updated. If you are using just JavaScript, and you say you're able to catch the event, then you need to refresh the DOM setting the new values.

So what you want to achieve is to update a property through the rendered Web Part instead of through its Property Pane and refresh the Web Part after update to reflect the property change? 

Hi Paul,
In my post i raised the property as example it is not my target. My target is refresh the webpart progmatically when user click on the button. The button will be render in initial loading.

Hi Luis,
I am not using any javascript framwork. I am able to manage the change DOM. But it would nice if framwork expose any interface to refresh the webpart programatically.

Each SPFx Web Part implements a "Render" function. Couldn't you just call this Render() function from your event handler to perform the refresh?

Hi Paul,
I have tried this but it says Render function undefine. Gulp serve command bundle all type script in its own way. For this reason i wanted something from framwork so that i can invoke this method in proper channel. But I am able to change the DOM without refresh the webpart.

Were you able to get the answer to your Original question ?

I want to refresh/reload the web part when user click on a button on the webpart

Did you get this resolved?

 


@Samaresh Das wrote:
Hi Paul,
I have tried this but it says Render function undefine. 

It appears this doesn't have the proper reference. By chance are you calling it from within an event handler? If so, the challenge is that this within the handler (such as clicking a button) is tied to the thing that triggered the event... in this case a button. You want to bind the event handler function to the web part itself.

 

Assuming you have something like: 

 

<button onClick="this._buttonClickHandler"></button>

 

You can fix that by changing your function declaration:

 

private _buttonClickHandler = (): void => {
  this.render();
}
component.forceUpdate(callback)

By default, when your component’s state or props change, your component will re-render. If your render() method depends on some other data, you can tell React that the component needs re-rendering by calling forceUpdate().

 

Calling forceUpdate() will cause render() to be called on the component, skipping shouldComponentUpdate(). This will trigger the normal lifecycle methods for child components, including the shouldComponentUpdate() method of each child. React will still only update the DOM if the markup changes.

 

Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render().

 

 

@Samaresh Das