Vision blog

Defining custom JS in OnApp

Zack Grindall

Zack Grindall
Cloud Architect

In OnApp v5.5 you can now define custom JavaScript and jQuery code – and we’ve also back ported this for use in OnApp 5.0. Here’s a quick guide to custom JS in OnApp, and some example use cases – removing menu items, and adding live chat support.

 

 

 

Let’s test this out

Let’s test the concept by using custom JS to create an alert message. Note: We don’t recommend running this test on a production system, as your clients or users will see the message!

First, you’ll need to create a ‘custom.js’ file in /onapp/interface/public/themes.

Add the following code into the custom.js file:

$(document).ready(function() {
 alert("This is a test.");
});

There is no need to restart the httpd or onapp services. Here’s the result:

Important things to consider

OnApp will call the custom.js file first, so it’s important that any custom JS is loaded correctly. There are a few different methods depending on the situation:

1. If you want to run custom JS first, before the page loads:

$(document).ready(function() {

});

2. If you want to run custom JS after the page loads:

$(window).ready(function() {

});

3. If you want to run custom JS on pages that update every few seconds (for example; the virtual server page):

$(document).ajaxComplete(function() {

});

 

Use cases

Removing a menu item

Let’s use custom JS to remove the ‘Billing Statistics’ option from the ‘Overview’ tab of a Virtual Machine:

$(document).ajaxComplete(function() {

/* Hide Billing Statistics */
 $('.tab-nav li').filter(function() {
 return $(this).text() === 'Billing Statistics';
 }).remove();

});

We’ve used ‘$(document).ajaxComplete(function() {‘ because the virtual server page updates every few seconds. Using ‘$(window).ready(function() {’ would result in the ‘Billing Statistics’ item re-appearing after a few seconds.

 

Adding live chat support

In this example, we’ll be using a free Olark account (https://www.olark.com) – but it’s the same setup process for most live chat services.

You’ll usually be provided with some code encased in <script type=”text/javascript”> … </script>. You’ll need to wrap that in a (window).ready(function() {’ and a $(‘body’).append($(`.

$(window).ready(function(){
 $('body').append($(`
 `));
});

You’ll need to add the vendor’s code inside of the append, like so:

$(window).ready(function(){
$('body').append($(`<!-- begin olark code -->
<script type="text/javascript" async> ;(function(o,l,a,r,k,y){if(o.olark)return; r="script";y=l.createElement(r);r=l.getElementsByTagName(r)[0]; y.async=1;y.src="//"+a;r.parentNode.insertBefore(y,r); y=o.olark=function(){k.s.push(arguments);k.t.push(+new Date)}; y.extend=function(i,j){y("extend",i,j)}; y.identify=function(i){y("identify",k.i=i)}; y.configure=function(i,j){y("configure",i,j);k.c[i]=j}; k=y._={s:[],t:[+new Date],c:{},l:a}; })(window,document,"static.olark.com/jsclient/loader.js");
/* custom configuration goes here (www.olark.com/documentation) */
olark.identify(‘XXXX-XXX-XX-XXXX’);</script>
<!-- end olark code -->
`));
});

 

And there you have it:

 

If you have any questions or need general guidance on using the custom.js feature, please feel free to reach out to support@onapp.com. Thanks!