The smart page app allows for advanced page display control by use of JavaScript to interact with the page content for completely custom functionality. The Smart Page app allows you to run snippets of JavaScript on any page to perform any sort of interaction you may require.

A basic understanding of HTML and JavaScript is required to use smart pages.

How Does It Work?

Web pages are loaded as normal, however once the page has fully loaded your custom code is injected into the page and executed.  This enables any number of powerful customizations to perform very specific actions.

The code is written in standard JavaScript and is passed down to the VuePilot player via the API

Why Would I Use This?

We are often asked how to perform some sort of action on a page once it loaded in order to change what’s being displayed, some examples may be

• Clicking on a link to open another section of the page
• Expanding a dropdown list to reveal more information
• Entering and submitting information into a form such as login details or session information
• Scrolling to a particular part of a page
• Injecting content into the page, maybe a custom banner or a footer

The Smart Page app aims to solve these requests and allows users to achieve results with a few simple lines of code.

The possibilities for what can be done with Smart Page are endless

How To Test Your Smart Page Code Before Using The App

When the code in a Smart Page app fails within the VuePilot software, it will do so silently. This can make it very difficult to debug when things don’t work as you won’t receive any feedback.

You can test your code directly from your JavaScript developer console in your browser locally before hand to ensure it works as expected.  Here’s how using Chrome

• Press CTRL-SHIFT-J to bring up the JavaScript console on any webpage.  (other browsers you may need to find it from the menu)
• From the “console” tab, enter in the Smart Page code you wish to test
• Hit enter
• If this does not work, then you’ll need to debug this code before it will work within a Smart Page app. Errors will be shown in this console which will help you develop and re-test your code rapidly before creating a Smart Page app.

Code Execution & Timing

The Smart Page app will inject the code onto the page and execute it as though the code was part of the web pages source code.

When the Smart Page code runs in the VuePilot software, it does so only after the page has fully loaded. This may be several seconds after the page appears the be loaded, depending on the website.  Some heavy dashboard products may take a long time to load or in some rare cases may never finish loading.

If you are experiencing issues with code execution, we recommend testing with a

You can simulate a similar event in your test environment using the DOMContentLoaded event.

In the following example a large TESTING banner will be placed at the top of the page only after the page has fully loaded

document.addEventListener("DOMContentLoaded", () => {
  const h1 = document.createElement("h1");
  h1.textContent = "TESTING VUEPILOT SMARTPAGE";
  h1.style.color = "white";
  h1.style.textAlign = "center";
  h1.style.backgroundColor = "red";
  h1.style.padding = "20px";
  document.body.insertBefore(h1, document.body.firstChild);
});

Alerts & Confirm

Please note that the VuePilot software disables all native alert and confirm browser functionality as it interferes with the rotation operation, so if you are attempting to test a smart page script, you will not be able to simply pop up an alert to test.

Regarding Smart Page Support

Please note that we do not provide software development support. We can provide basic assistance with regards to troubleshooting your Smart Apps but it is up to the customer to build, develop and debug your Smart Page apps source code. We cannot build your apps for you.

Code Examples

Scroll To Bottom Of The Page

You may wish to scroll to the bottom of a page, perhaps after a few seconds.  This can be done by simply using the window.scrollTo method and wrapping it within a setTimeout

In the following example we will scroll to the bottom of the page after 5 seconds (5000 milliseconds)

Code

setTimeout(function() {
  window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
}, 5000);

---

Scroll To Bottom Of The Page Slowly (100px At A time)

In this example, you may want to scroll to the bottom of a page but slowly so it is viewable on the way down. This can be done again by simply using the window.scrollTo method and wrapping it within a setInterval

In the following example we will scroll down 100px from the current position every 1 second until we reach the bottom of the page

Code

const height = document.body.scrollHeight;
let currentPos = document.documentElement.scrollTop;

setInterval(() => {
  if(currentPos >= height) return;

  window.scrollTo({ top: currentPos + 100, behavior: 'smooth' })
  currentPos =  document.documentElement.scrollTop;
}, 1000);

---

Inject Content Into The Page

You may wish to inject some form of content on the page, such as a banner or a heading. You can do this by using the insertBefore method

The following example will insert a H1 element, styled with a background color of red and a font color of white immediately after the body tag

Code

const h1 = document.createElement("h1");
h1.textContent = "TESTING VUEPILOT SMARTPAGE";
h1.style.color = "white";
h1.style.textAlign = "center";
h1.style.backgroundColor = "red";
h1.style.padding = "20px";
document.body.insertBefore(h1, document.body.firstChild);

---

Automatic User Login

User login can be performed by detecting if there are user login input elements on the page, then simply filling them in and submitting the form.

WARNING: Please be aware that you should create restricted READ ONLY user accounts if you wish to do this as the script will contain login credentials and will not be encrypted within our database. Do not use administrator accounts or personal accounts with elevated access. We suggest creating an account that only has access to view the required resources with no ability to WRITE or modify data.

In this example (taken from the Grafana login page), the user is directed to a login page displaying two input boxes named “user” and “password” with a login button that does not have a name, but is ARIA labelled. We first check if there is a “password” field on the page, and if so, then we will populate them and click the login button

Code

if (document.getElementsByName("password").length > 0) { 
  document.getElementsByName("user")[0].value = "demo"; 
  document.getElementsByName("password")[0].value = "password"; 
  document.querySelector('[aria-label="Login button"]').click(); 
}