Apr 04 2017 03:35 AM
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.
Apr 04 2017 03:45 AM
I think wat you're looking for is described in this great blog by @Waldek Mastykarz
https://blog.mastykarz.nl/sharepoint-framework-client-side-web-parts-non-reactive-property-pane/
Apr 04 2017 05:47 AM
Apr 04 2017 05:59 AM
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!
Apr 04 2017 08:46 AM
Apr 04 2017 11:58 PM
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.
Apr 05 2017 12:30 AM - edited Apr 05 2017 12:31 AM
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?
Apr 05 2017 04:03 AM - edited Apr 05 2017 04:06 AM
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.
Apr 05 2017 04:05 AM
Apr 05 2017 04:26 AM
Each SPFx Web Part implements a "Render" function. Couldn't you just call this Render() function from your event handler to perform the refresh?
Apr 05 2017 07:09 AM
Apr 05 2018 11:45 AM
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
Dec 13 2018 12:04 PM
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(); }
Feb 04 2020 11:18 AM
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().