How can we help you today?

Execute Custom JavaScript on Specific Modern Pages

Introduction

By default, when adding Custom JavaScript in the Theme Builder, it will run on all site pages where ShortPoint is running.

If you would like to change that and make it so that the Custom JavaScript code only runs on certain pages, here's what you can do.



Before we start:

  • This article is for the Modern SharePoint Experience. For the Classic Experience, there is another article available.
  • You need to have ShortPoint SPFx installed in your environment.
  • You need to have some basic JavaScript knowledge.

Step 1. Prepare a list of pages

Put together a list of pages that will need to have the Custom JavaScript running on them. Use following format:

["My-Page", "Another-Page", "Custom-JS-Page"];


This is a JavaScript array, which is basically a list of items. In our case it is a list of strings containing page names.


 You can have just one item in the list, so this will work for single pages as well:

["My-Page"];


Step 2. Modify the JavaScript code

Here is the JavaScript code that you will need to modify to suit your needs. You will have to change the listOfPages variable and to replace the array with your own list of pages. You will also have to add your customized code in the area marked // put your code below this line.


shortpoint.$( document ).ready(function() {
  // you can use these libraries as well
  // var $ = shortpoint.base.libs.$; // jQuery
  // var _ = shortpoint.base.libs._; // Underscore
  // var moment = shortpoint.base.libs.moment; // Moment.js


  var listOfPages = ["My-Page", "Another-Page", "Custom-JS-Page"];
  var currentPageUrl = document.location.href;
  
  listOfPages.forEach(function(page, index) {
    if (currentPageUrl.indexOf(page) >= 0) {
      // put your code below this line
    }
  });
});

 Copy it to your clipboard after it's ready.


Step 3. Insert the code into ShortPoint Theme Builder

Now, please open the Modern Theme Builder (Site Contents > ShortPoint Dashboard > Theme Builder > Modern).


Go to Utilities > Custom JS.


Paste the code to the box:


Click Apply and Publish.

After the page is published, please refresh the page.


Related:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 15 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more