Web Development

When building a suitelet in NetSuite you can either inject HTML, CSS and Javascript in a field, or generate a full HTML page and render it into the suitelet. No matter which method you use, you normally have to write line after line of SuiteScript code where you build the HTML using string concatenation. This is not only difficult and tedious to write, making sure you match all the single and double quotes and semi colons, it also makes the code much harder to maintain. What if you could just create a regular HTML file, put it in the File Cabinet and then render it into a suitelet? And what if you could use one line of code to inject values from NetSuite in the correct place in the HTML? This could be search results from the use of my search function. That is what the function looks like: /** * Load file from NetSuite File Cabinet and replace placeholders with actual values * * Version Date Author Remarks * 1.00 07 Nov 2016 kmartinsson Created class/function * 1.01 08 Nov 2016 kmartinsson Consolidated setValue and setHTML into * one method and added noEscape parameter */ // ***** Read and process external file, replacing placeholders with proper values ***** function ExternalFile(filename) { //Get the file by path/name, can also be internal id var fileId = filename; // Load file content and store data var file = nlapiLoadFile(fileId); var data = file.getValue(); this.content = data; this.setValue = function(placeholder, value, noEscape) { // Check if noEscape is passed, if it is and if true then don't escape value. // This is needed when value contains HTML code. if (typeof noEscape == "undefined") { this.content = this.content.replace(new RegExp(placeholder, 'g'), nlapiEscapeXML(value)); } else { if (noEscape == true) { this.content = this.content.replace(new RegExp(placeholder, 'g'), value); } else { this.content = this.content.replace(new RegExp(placeholder, 'g'), nlapiEscapeXML(value)); } } } this.getContent = function() { return this.content; } } Reference this function in your Suitescript 1.0 code like this: // Load extrenal HTML file var html = new ExternalFile("SuiteScripts/BinTransfer.html"); // Insert NetSuite URL for CSS files var cssFileName = nlapiLoadFile("SuiteScripts/css/drop-shadow.css").getURL(); html.setValue("%cssDropShadow%", cssFileName, true); cssFileName = nlapiLoadFile("SuiteScripts/css/animate.css").getURL(); html.setValue("%cssAnimate%", cssFileName, true); // Insert array returned from a search html.setValue("%binarray%", JSON.stringify(binArray), true); // Replace placeholders with values html.setValue("%showAll%", "false"); html.setValue("%company%", companyName); The last (optional) argument "noEscape" decides if the value should be URL encoded (false/omitted) or not (true) using the function nlapiEscapeXML(). In most cases you don't need to specify this argument, but if you need to pass HTML or other code into the function you need to set it to true to avoid the code being modified. As you can see in my example above, I get the NetSuite URL for my CSS files as well. Instead of hard coding the NetSuite URL into the HTML page, I calculate it and insert it when the page is loaded. Not only does it make the page easier to read the code, it also makes it much easier to maintain. This is…