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.
/**
*@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
}
});Code for WebApp_CreateVendor_SL.js:
Step 5: Upload all files to a directory. Your directory should look like this:
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.
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.
Backed by its functional features and proven applications, NetSuite can elevate your enterprise process and accelerate business functions to a great extent! One of the main reasons why you should consider NetSuite customization for your business is because it can boost operational efficiency and make your business more process-centric by optimizing your fragmented enterprise actions in just a single cloud platform.
Just like any other robust software solution, NetSuite customization holds the capacity to address and solve your business pain point – be it a small problem or a complex issue! A reliable and reputed team of NetSuite consultants like us can help you come up with the best strategies and plan to make ERP unleash its full potential to solve your specific business problems.
The design, implementation, and customization strategies of NetSuite might be developed solely on the basis of the specific industry an organization is dealing with. This is dependent on the operational process and size, which comply with every business operation.
Every company has its own unique and distinct business processes, workflows, personalized software needs, and the likes. One of the most remarkable perks of NetSuite is that it’s extremely customizable. If your company requirements are unique or specific, you require trusted NetSuite consultants who hold extensive experience and expertise with robust software development and architecture for making the solution suitable to your requirements.
At Suite Tooth Consulting, we emphasize building a full-fledged strategy to ideate on a plan on action right from the inception until the “go-live” as well as “post-implementation” rescue timetable. Implementing and customizing a robust ERP like NetSuite is a complex and detailed procedure. It can potentially entail a few days or even a few months for more complex builds. As your top-trusted team of consultants, we shall provide you with a detailed forecast or a breakdown of timeline to give you a heads-up on how long our team can potentially take to wrap the entire process.
We aim to bring unmatched expertise and professionalism to your NetSuite initiatives. Let’s talk about how our NetSuite consultancy can make a difference!
We can help you achieve as your dedicated Lead NetSuite Consultant. My team and I are experts in tailoring the NetSuite platform to meet the unique challenges of your business in this fast-paced digital era.
">
">
">
">
">
">
">
">
">