How to Automatically Refresh the Page After Certain Period of Time

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
  • In Live Mode
  • In Grid Mode
  • In legacy Page Builder
• Step 2. Prepare the JavaScript code
• Step 3. Update the Code Design Element
  • In Live Mode
  • In Grid Mode and Legacy Page Builder
• 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;
}

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.

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:

• Introducing ShortPoint Code Design Element
• Execute Custom JavaScript on Specific Modern Pages