In case of having some data on the SharePoint page, that updates in real time, you might want to set a refresh rate to make it refresh without manual page reload.
In this article, we will show you how you can make a SharePoint page automatically refresh after certain period of time, for example, every 2 minutes or 30 seconds.
Here is how it may look like:
Note: ShortPoint Page Builder Live Mode was formerly known as Visual Builder and Grid Mode was formerly known as Wireframe Builder. Also, ShortPoint Page Builder version 7 and below are now referred to as Legacy Page Builder.
TABLE OF CONTENTS
- This article is for you if
- Step 1. Add Code Design Element to the page
- Step 2. Prepare the JavaScript code
- Step 3. Update the Code Design Element
- Result
This article is for you if
- You use Office 365 or SharePoint 2019 environment.
- You have ShortPoint installed on your SharePoint sites(s).
- You are a ShortPoint user with an active license.
Step 1. Add Code Design Element to the page
In the page edit mode, edit the ShortPoint web part.
In Live Mode
Within the Section, Row, Column or content-holder Design Element, select the Add Design Element gray button:
In the opened Insert an Element popup window, choose Code:
Info: You can also use the search input and start typing Code.
In Grid Mode
Within the Section, Row, Column or content-holder Design Element, select the gray Insert button:
Then, select the Code Design Element from the grid:
In legacy Page Builder
Click the big blue Insert button:
Select the Code Design Element from the ShortPoint Page Builder grid:
Step 2. Prepare the JavaScript code
Here is the JavaScript code that will force your page auto-refresh after a certain period of time:
setTimeout( function() { window.location.reload() }, seconds(2) // <= only change this line, possible values are the following // seconds(number) // minutes(number) // hours(number) // days(number) // example: minutes(15) will make the browser refresh every 15 minutes ) /** * do not touch beyond this point * utility methods */ function seconds(digit) { return digit * 1000; } function minutes(digit) { return seconds(digit) * 60; } function hours(digit) { return minutes(digit) * 60; } function days(digit) { return hours(digit) * 24; }
Update the time in the code according to your needs.
Notes: 1. Make sure to set the time properly, so you will have enough time for editing the page before it automatically refreshes. 2. Pay your special attention that the code example is currently set to 2 seconds (line 4 of the code). If you wish to change it, you can use other expressions of time indicated in the code comments, and indicate the exact number. That is all you need to change.
After setting the required time period, copy the updated JavaScript code to the clipboard.
Step 3. Update the Code Design Element
In Live Mode
1. Paste the obtained code in step 2 to the JavaScript field of the Code Design Element.
2. Click the check-mark button to save your changes.
In Grid Mode and Legacy Page Builder
1. Paste the obtained code in step 2 to the JavaScript field of the Code Design Element.
2. Click Insert/Update to save your changes.
Finally, save or publish your page.
Result
That's it. Now your page will automatically refresh after the set time period:
Related articles: