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:

• Execute JavaScript After ShortPoint Elements Render Event