Using HTML
Using HTML in a Suitelet lets you add elements that aren’t available in the NetSuite UI components. With HTML, you can customize and style your pages to match your organization’s brand.
Inline HTML
Use HTML to define a custom field on pages generated by Suitelets. For more information, see SuiteScript 2.x Suitelet Script Type.
To add HTML to your Suitelet form, use Form.addField(options) to add a field, set the field type to INLINEHTML, and use Field.defaultValue to set the HTML value.
HTML input is supported only in inline HTML fields.
var htmlImage = form.addField({
id: 'custpage_htmlfield',
type: serverWidget.FieldType.INLINEHTML,
label: 'HTML Image'
});
htmlImage.defaultValue = "<img src='https://<accountID>.app.netsuite.com/images/logos/netsuite-oracle.svg' alt='NetSuite-Oracle logo'>"
NetSuite Forms and SuiteScript don't support direct access to the NetSuite UI through the Document Object Model (DOM). You should access the NetSuite UI only through SuiteScript APIs. Inline HTML fields on Form pages, except Suitelet Forms, will be deprecated in a future release. If you need to load content from external sources in Inline HTML fields, you must implement Subresource Integrity. For more information, see Subresource Integrity.
HTML Suitelets
HTML Suitelets use HTML elements to build a UI rather than NetSuite UI components. The HTML is embedded in the Suitelet with the https.get(options) method from the N/https Module, and the Suitelet manages the data returned from the form. Unlike a custom form, which returns prebuilt UI objects, an HTML Suitelet returns a string with the HTML code, so manipulating and passing data is difficult. Because HTML is stored as a string, to pass data to or from an HTML Suitelet, you need to modify and update values in the string. The more values you use, the more complex the string manipulation will be.
The following example shows a simple volunteer sign-up sheet using an HTML Suitelet. You can look at this example in two parts.
UI Built in HTML
The UI is managed entirely by HTML and uses standard HTML form elements instead of NetSuite UI components.
The following code sample and screenshot illustrate the form UI built in HTML.
<form method="post" class="form-horizontal" action="https://LinkToSuitelet.js">
<table>
<tbody><tr>
<td>First Name</td>
<td class="col-md-8"><input class="form-control" id="firstname" placeholder="First Name" name="firstname" required="" type="text"></td>
</tr>
<tr>
<td>Last Name</td>
<td class="col-md-8"><input class="form-control" id="lastname" placeholder="Last Name" name="lastname" required="" type="text"></td>
</tr>
<tr>
<td>Email</td>
<td class="col-md-8"><input class="form-control" id="email" placeholder="email" name="email" required="" type="email"></td>
</tr>
<tr>
<td>Facebook URL</td>
<td class="col-md-8"><input class="form-control" id="custentity_fb_url" placeholder="Facebook" name="custentity_fb_url" required="" type="text"></td>
</tr>
<input name="company" value="{{sponsorid}}" type="hidden">
<input name="project" value="{{projectid}}" type="hidden">
</tbody></table>
<br>
<button type="submit" class="btn btn-inverse">Sign Up as a Volunteer</button>
</form>
Form Processing Managed by the Suitelet
The Suitelet manages the information collected from the HTML form. This Suitelet uses the https.get(options) method from the N/https Module to get the content from the HTML page, and uses methods from the N/record Module, N/email Module, and N/search Module to collect, process, and respond to user data.
/**
*
* @NApiVersion 2.x
* @NScriptType Suitelet
*
*/
define(['N/https', 'N/record', 'N/email', 'N/search'],
function callbackFunction(https, record, email, search) {
function getFunction(context) {
var contentRequest = https.get({
url: "https://LinkToFormPage.html"
});
var contentDocument = contentRequest.body;
var sponsorid = context.request.parameters.sponsorid;
if (sponsorid) {
contentDocument = contentDocument.replace("{{sponsorid}}", sponsorid);
log.debug("Setting Sponsor", sponsorid)
}
var projectid = context.request.parameters.projectid;
if (projectid) {
contentDocument = contentDocument.replace("{{projectid}}", projectid);
log.debug("Setting Project", projectid);
}
context.response.write(contentDocument);
}
function postFunction(context) {
var params = context.request.parameters;
var emailString = "First Name: {{firstname}}\nLast Name: {{lastname}}\nEmail: {{email}}\nFacebook URL: {{custentity_fb_url}}"
var contactRecord = record.create({
type: "contact",
isDynamic: true
});
for (param in params) {
if (param === "company") {
if (params[param] !== "{{sponsorid}}") {
contactRecord.setValue({
fieldId: param,
value: params[param]
});
var lkpfld = search.lookupFields({
type: "vendor",
id: params["company"],
columns: ["entityid"]
});
emailString += "\nSponsor: " + lkpfld.entityid;
}
else {
contactRecord.setValue({
fieldId: "custentity_sv_shn_isindi",
value: true
})
}
}
else {
if (param !== "project") {
contactRecord.setValue({
fieldId: param,
value: params[param]
});
var replacer = "{{" + param + "}}";
emailString = emailString.replace(replacer, params[param]);
}
}
}
var contactId = contactRecord.save({
ignoreMandatoryFields: true,
enableSourcing: true
});
log.debug("Record ID", contactId);
if (params["project"]
["project"] !== "{{projectid}}") {
var lkpfld = search.lookupFields({
type: "job",
id: params["project"],
columns: ["companyname"]
});
emailString += "\nProject Name: " + lkpfld.companyname;
var participationRec = record.create({
type: "customrecord_project_participants",
isDynamic: true
});
participationRec.setValue({
fieldId: "custrecord_participants_volunteer",
value: contactId
})
participationRec.setValue({
fieldId: "custrecord_participants_project",
value: params["project"]
})
var participationId = participationRec.save({
enableSourcing: true,
ignoreMandatoryFields: true
})
}
log.debug("Email String", emailString);
email.send({
author: -5,
recipients: 256,
subject: "New Volunteer Signed Up",
body: "A new volunteer has joined:\n\n" + emailString
});
email.send({
author: -5,
recipients: params["email"],
subject: "Thank you!",
body: "Thank you for volunteering:\n\n" + emailString
});
var contentRequest = https.get({
url: "https://LinkToFormCompletePage.html"
});
var contentDocument = contentRequest.body;
context.response.write(contentDocument);
}
function onRequestFxn(context) {
if (context.request.method === "GET") {
getFunction(context)
}
else {
postFunction(context)
}
}
return {
onRequest: onRequestFxn
};
});
You can simplify creating HTML Suitelets by using an HTML templating engine. NetSuite servers run FreeMarker, a Java library that generates text outputs from templates, to create dynamic pages and forms. For more information about FreeMarker, see http://freemarker.org/docs/index.html