A NetSuite Best Practice – Client JS in Suitelets

Often we need writing Suitelets in Netsuite that have conventional HTML UI elements rather than the objects provided by Netsuite’s UI Builder API. We normally use HTML within javascript string to be sent to client side. To write code against the elements in this HTML, client side javascript also goes within a string. Problems arise when we need to update the code within a string as we are not able to use the features of the IDE to its fullest. This post is all about solving these problems, exploiting the fact that the server-side code written for Suitelets is also in javascript.

The Technique

Good news is that each javascript function object has a toString() method, and a better news is that it works as expected in Netsuite ! :).

So the idea is to write client and server-side code alike and use the toString() method of the client-side functions to aggregate the client-side script.

Example

Lets take a simple scenario. We are creating a user registration form within a Suitelet using plain old HTML form elements.

  • When the user inputs first and last name fields we would like to suggest a user name.
  • When the user inputs a password, we would like to warn if it contains the first or last name.

Here goes the script:

function main(request,response)
{
    response.writeLine(getClientSideCode());
    response.writeLine(getHtml());
}
function getHtml()
{
    var h = '';
    h += 'First Name';
    h += '<input type="text" id="txtFName" onblur="setUserIdFromNames();"/>';
    h += 'Last Name';
    h += '<input type="text" id="txtLName" onblur="setUserIdFromNames();"/>';
    h += 'User Name';
    h += '<input type="text" id="txtUserName" />';
    h += 'Password';
    h += '<input type="password" id="txtPass" onblur="performPasswordSecurityCheck();"/>';
    return h;
}
function getClientSideCode()
{
    var s = '';
    s += '<script type="text/javascript">';
    s += 'function setUserIdFromNames()';
    s += '{';
    s += '  var firstName = document.getElementById("txtFirstName").value;';
    s += '  var lastName = document.getElementById("txtLastName").value;';
    s += '  var userName = firstName.toLowerCase() + \'.\' + lastName.toLowerCase();';
    s += '  document.getElementById("txtUserName").value = userName;';
    s += '}';
    s += 'function performPasswordSecurityCheck()';
    s += '{';
    s += '  var password = document.getElementById("txtPassword").value;';
    s += '  var firstName = document.getElementById("txtFirstName").value;';
    s += '  var lastName = document.getElementById("txtLastName").value;';
    s += '  if(password.indexOf(firstName)!=-1 || password.indexOf(lastName)!=-1)';
    s += '      alert("Using names in password makes it less secure!");';
    s += '}';
    s += '</script>';
    return s;
}

The highlighted lines contain the script that is problematic. Its difficult to read,  refactor and debug.

Here is the improved version of the code:

function getClientSideCode()
{
    var arrFunctions = [setUserIdFromNames,performPasswordSecurityCheck];
    var clientScript = '<script type="text/javascript">';
    for (var i = 0; i < arrFunctions.length; i++)
        clientScript += arrFunctions[i].toString();
    clientScript += '</script>';
    return clientScript;
}

function setUserIdFromNames()
{
    var firstName = document.getElementById('txtFirstName').value;
    var lastName = document.getElementById('txtLastName').value;
    var userName = firstName.toLowerCase() + '.' + lastName.toLowerCase();
    document.getElementById('txtUserName').value = userName;
}

function performPasswordSecurityCheck()
{
    var password = document.getElementById('txtPassword').value;
    var firstName = document.getElementById('txtFirstName').value;
    var lastName = document.getElementById('txtLastName').value;
    if(password.indexOf(firstName)!=-1 || password.indexOf(lastName)!=-1)
        alert('Using names in password makes it less secure!');
}

Notice the changes from the previous version:

  • All the client-side functions now coexist with the server-side code
  • The getClientSideCode() function  has the references of all client side functions. It iterates over all of these to append each to the client-side script.

Pros and Cons

The latter code is much better than the earlier version.

  • The client-side code is easier to maintain. Its free of noisy code/characters like extra semicolons, quotes and annoying escape sequences.
  • One can use the features provided by the IDE to make change in the code such as renaming identifiers and code formatting.

However there are a few limitations to this approach that must be taken care of .

  • The IDE has no means to discriminate between server and client-side functions so the developer has to be careful using intellisense/autocompletion to avoid calling client code in server-side and viceversa.
  • Every time you create/remove a client-side function you need to update the collection of functions(arrFunctions in the code example).
function main(request,response)
{
//response.writeLine(getClientSideCode());
response.writeLine(getHtml());
}function getHtml()
{
var html = ”;
//html += getClientSideCode();
html += ‘<script type=”text/javascript”>’;
html += ‘    function setUserIdFromNames()’;
html += ‘    {‘;
html += ‘        var firstName = document.getElementById(“txtFirstName”).value;’;
html += ‘        var lastName = document.getElementById(“txtLastName”).value;’;
html += ‘        var userName = firstName.toLowerCase() + “.” + lastName.toLowerCase();’;
html += ‘        document.getElementById(“txtUserName”).value = userName;’;
html += ‘    }’;
html += ‘    function performPasswordSecurityCheck()’;
html += ‘    {‘;
html += ‘        var password = document.getElementById(“txtPassword”).value;’;
html += ‘        var firstName = document.getElementById(“txtFirstName”).value;’;
html += ‘        var lastName = document.getElementById(“txtLastName”).value;’;
html += ‘        if(password.indexOf(firstName)!=-1 || password.indexOf(lastName)!=-1)’;
html += ‘            alert(“Using names in password makes it less secure!”);’;
html += ‘    }’;
html += ‘</script>’;
html += ‘<div>’;
html += ‘    First Name<input type=”text” id=”txtFirstName” onblur=”setUserIdFromNames();”/><br />’;
html += ‘    Last Name <input type=”text” id=”txtLastName” onblur=”setUserIdFromNames();”/><br />’;
html += ‘    User Name <input type=”text” id=”txtUserName” /><br />’;
html += ‘    Password  <input type=”password” id=”txtPassword” onblur=”performPasswordSecurityCheck();”/><br />’;
html += ‘    …’;
html += ‘</div>’;
return html;
}
Advertisements

, , , ,

  1. #1 by jwangkasa on September 13, 2011 - 8:19 pm

    Hi, I am a newbie in the programming within NS.

    I am having this issue and hope that you can give me some insights…

    Obj: To generate a pdf printout using Suitelet using nlapiXMLToPDF(xmlstring)

    I have a long xml document that I would like to incorporate into the javascript to be executed in Suitelet.

    Question is how do I import those xml file to my javascript?

    • #2 by Syed Muhammad Faraz on September 14, 2011 - 11:21 am

      Hi,
      If you have the XML doc stored in an in-memory string object then you can use nlapiXMLToPDF() to generate a PDF file. So for converting an XML file into PDF you need to read it using nlapiRequestURL() into a string variable then pass it onto the PDF API.

    • #3 by Syed Muhammad Faraz on September 14, 2011 - 11:28 am

      You can also check out the NetSuite Help Centre and search for ‘XML API’ and ‘Navigation API’ for the documentation of the functions I mentioned

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: