JavaScript and Activesoftswitch CMS

Introduction

JavaScript is a web development language which affects the DOM (Document Object Model) of a web page. It allows you to control and style the client-side HTML.

There are two ways you can use JavaScript within AS. The first is to use "vanilla" (original) JavaScript and the second is to use a library/extension of JavaScript called JQuery. Through this article, there will be a mixture of both vanilla JavaScript and JQuery. JQuery makes it easier to write JavaScript(JS) as it allows you to call methods with a single line of code. This means something that could have taken 4 or 5 lines in JS is now brought down to just a single line by using JQuery, however, it is not always applicable and sometimes, a mixture of both JS and Jquery is needed. JQuery is pre-included in AS, version 3.1 is the version included as of writing

To include Javascript or JQuery at a page level you would first navigate to the page or widget which needs the code applying from there you find the box which is labelled `JavaScript`

To include JavaScript/JQuery at a global level you would go to Themes -> Theme Override and then input the code under the necessary box (Header/Footer Scripts).

An example of where AS provided JS to a customer is when on of our partner's wanted to allow balance-top up with custom amounts instead of preselected as it is by default. This was opened as a feature request however, instead of waiting for the feature to be developed (feature requests aren't subject to deadlines) we provided some JS which converted the input box for them. The code was as follows:

$("#amount").replaceWith('<input class="input-medium form-control" type="text" id="amount" name="viewModel.SelectedBalance">');

The above example can be broken into the following:

$('#amount') ::  finds the element with the ID amount

replaceWith :: tells the DOM (The DOM is the objects you see in your browser and how they are modelled) to replace the element with the string that follows in this case it replaces it with a text box (). If you are replacing something like this, you need to make sure you copy over the id and name of the original element otherwise the function will not work.

This code is applied at a page level so doesn't need to be validated as the code below does.

Another noteable use of javascript is to change the Login Error Message which is displayed when a user's credentials are incorrect. To change it you can use the following code:

var string = $("#content").text();
if(window.location.pathname == '/LogOn' && string.includes("Login Error")) {
$("#content")
.replaceWith('<h2>Incorrect Login details, please try again.</h2>'); 
}

The above code can be broken down into the following:

var string = $("#content").text(); :: gets the content of all the content boxes on the current page and declare them into a variable

if(window.location.pathname == '/LogOn' && string.includes("Login Error")) :: this checks that the URL is the log in error url and that the content it gathered in the first line contains the words "Login Error" this is done to prevent the wrong content from being changed 

.replaceWith :: replaces the content with something you specify in this case it is a simple heading element

Instead of replacing the content you could do something like below which would redirect the user to your signup page instead:

var string = $("#content").text();
if(window.location.pathname == '/LogOn' && string.includes("Login Error")) {
window.location.href = "http://url-to-login.com/";
}

This is just a small amount of what can be achieved through JS and CSS it can be used to achieve a lot more, and if you require any assistance with CSS and JS or have any questions regarding this then feel free to email support@iccnetworks.com

As a side note, this can be break in-between ActiveSoftswitch updates and so backups should be taken