Create a web application for NetSuite

11/07/2022
Jaime Requena
0

Introduction

I have created many custom applications using HTML, CSS, JQuery, and Bootstrap. A backend Suitelet is used to communicate with NetSuite. I will detail a basic web application which uses these technologies to create a vendor record in NetSuite.

Step 1: Download libraries.

Download Bootstrap:
https://getbootstrap.com

Download JQuery:
https://jquery.com

Step 2: Create an HTML page using the Bootstrap library where user can enter vendor details.

Code for WebApplication.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- CSS File bootstrap.min.css - UPDATE THIS LINK ONCE UPLOADED TO NETSUITE-->
    <link href="/core/media/media.nl?id=8761&c=TSTDRV2670723&h=T2hGKNOPEmYxfxGBHScCcbI30zXHNK32v9B2vBsM4WR-jJiC&_xt=.css" rel="stylesheet" />


	<style type="text/css">
	   .hidden { display: none; }
	   .form-inline > * {
    		margin:0px 5px !important;
		}
	</style>

    <title>Create Vendor</title>
  </head>
  <body>
    <div id="defaultMenu" class="container" style="margin-top:10px;">
			<div class="row align-items-center justify-content-center">
				<div class="col">
				<h4>Menu</h4>
		      		<div class="btn-group-vertical">
		  				<button id="createVendorMenuButton" type="button" class="btn btn-info btn-lg">Create Vendor</button>
					</div>
				</div>
	    	</div>
  </div>

  <!--------------------------------------------------------------------------------------->
  <!--  CREATE VENDOR SCREEN -->
  <!--------------------------------------------------------------------------------------->
  <div id="createVendorScreen" style="margin-top:10px;">
	  <div class="container">
	  <div class="row">
	    <div class="col-md-auto">
	      	<div class="form-group form-inline">
	      	<label for="vendorName">Vendor Name</label>
        		<input id="vendorName" type="text" value="" placeholder="Vendor Name" class="form-control">
    		</div>
	    </div>
	  </div>
	  <div class="row">
	    <div class="col-md-auto">
	      <button id="createVendorButton" type="button" class="btn btn-info btn-lg">Create Vendor Record</button>
	    </div>
	  </div>
	</div>
  </div>

<!-- jquery.3.2.1.min.js - UPDATE THIS LINK ONCE UPLOADED TO NETSUITE -->
<script src="/core/media/media.nl?id=8763&c=TSTDRV2670723&h=BVUHw_ThmPkbJRStRyxSHvfTTRH_ZQsa9NlJKkHOpRE4pbjm&_xt=.js" type="text/javascript"></script>

<!-- bootstrap.min.js - UPDATE THIS LINK ONCE UPLOADED TO NETSUITE-->
<script src="/core/media/media.nl?id=8762&c=TSTDRV2670723&h=3gEyhD-XUEG_DxY29qLZAHz6UmSEFUHu5vzMsjblGADNroFX&_xt=.js" type="text/javascript"></script>

<!--  WebApp_ClientScript.js - UPDATE THIS LINK ONCE UPLOADED TO NETSUITE-->
<script src="/core/media/media.nl?id=8758&c=TSTDRV2670723&h=Xii5wm_o6bZ54YYy503HpQQtjSwo26I0BN_efvHatvxgAYd-&_xt=.js" type="text/javascript"></script>
  </body>
</html>

Step 3: Create a client script for the HTML page which will contact the Suitelet using AJAX.

Code for WebApp_ClientScript.js:

/*
 * Name: WebApp_ClientScript.js
 */

var suitelet = '';  // PUT EXTERNAL LINK TO SUIELET HERE

$(document).ready(function(){
	hideScreens();
	$('#defaultMenu').show();

	// Show the menu
	$('#createVendorMenuButton').click(function(){
		hideScreens();
		// show create vendor screen
		$('#createVendorScreen').show();
		$(document).prop('title', 'Create Vendor');
		$('#vendorName').focus();
	});


	$('#createVendorButton').click(function(){
		var vendorName = $( "#vendorName" ).val();
		if (!vendorName) {
            alert('Vendor Name is required.');
		}
		else {
			vendorName = vendorName.trim();
			createVendor(vendorName);
		}
	});


function hideScreens() {
	$('#defaultMenu').hide();
    $('#createVendorScreen').hide();
}

function createVendor(name){
	$.ajax({
		url: suitelet+'&rf=createVendor&cb=_createvendor',
		dataType: 'jsonp',
		jsonpCallback:'_createvendor',
		type:'post',
		data:{
            name : name
		}
	})
	.done(function(data){
			console.log('data', data);
			if (data.error) {
                alert('Error : ' + data.error);
			}
			else {
                alert('Vendor ' + name + ' created successfully.  Internal ID is ' + data.recordId);
                hideScreens();
                $('#defaultMenu').show();
			}
	});
}

});

Step 4: Create the Suitelet.

Code for WebApp_CreateVendor_SL.js:

/**
 *@NApiVersion 2.1
 *@NScriptType Suitelet
 */

/* Name : WebApp_CreateVendor_SL.js
 *
 * Back end suitelet used to create vendor record.
 */

define([ 'N/record'], (record) => {

    onRequest = (context) => {
    	log.debug('rf', context.request.parameters.rf);
        const routingFunction = context.request.parameters.rf;
        const callback = context.request.parameters.cb || '';

        try {
			switch(routingFunction){
				case 'createVendor':
				data = createVendor(context);
			    break;
			 }
			 data = callback + '(' + JSON.stringify(data) + ')';
			 log.debug('data sending', data);
        }
        catch(e) {
        	 data = { error: 'Failed : ' + e.message };
			 data = callback + '(' + JSON.stringify(data) + ')';
			 log.debug('Error', JSON.stringify(e));
        }
        context.response.setHeader('Custom-Header-Content-Type', 'application/json');
		context.response.write(data);
    }

    createVendor = (context) => {
        const vendorRecord = record.create({
            type: 'vendor',
            isDynamic: true
        });
        vendorRecord.setValue('companyname', context.request.parameters.name);
        vendorRecord.setValue('subsidiary', 1);   // default the subsidiary
        const recordId = vendorRecord.save();

        return {
            recordId : recordId
        };
    }

    return {
        onRequest: onRequest
    }
});

Step 5: Upload all files to a directory. Your directory should look like this:

Step 6: Deploy the Suitelet in Released status and make sure to make it available without login.

Step 7: Open the Web Application HTML page in your browser and create your new Vendor.

The first page is simply a menu with button which when clicked takes you to another page to enter the vendor’s name. When creating a small application, I like to put all the HTML in one page separated by DIVs.

Landing Page:

Page where you enter a Vendor Name:

After successful creation of the vendor record you get an alert and are then taken back to the menu page.

Conclusion

Although this is a very simple application, it shows the power of being able to work outside the confines of a front end Suitelet. You have complete control over how the user interface looks and behaves using the many libraries available for free.

Do you need help building a custom application for NetSuite? Please Contact Suite Tooth Consulting here to set up a free consultation.

If you liked this article, please sign up for my newsletter to get these delivered to your inbox here.

Follow on

Jaime Requena Chief Executive Officer

Jaime Requena is a seasoned NetSuite Consultant and Solutions Architect, known for delivering WHITE GLOVE service to businesses. With 15+ years of experience and 3x certifications in ERP, Developer, and Admin, Jaime specializes in highly customized NetSuite accounts, transforming operations for 200+ satisfied customers all across the globe.

Create a web application for NetSuite