Embedding HTML in Suitelets
The examples below show how to embed HTML in Suitelet code to add custom elements to a form. Embedding HTML in Suitelets is useful for adding components that are not available through the SuiteScript N/ui/serverWidget module.
Embedding Inline HTML in a Field
In a Suitelet, you can use Form.addField(options) to add inline HTML as a field on a form. Set the type to INLINEHTML and use the Field.defaultValue property to set the HTML value. For more information, see N/ui/serverWidget Module.
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='Oracle NetSuite logo'>";
The following screenshot shows a form with an INLINEHTML field containing an image field.
Embedding HTML from a Linked HTML Page in a Suitelet
In a Suitelet, you can use https.get(options) from the N/https Module module to embed HTML from a linked HTML page in the form created by the Suitelet. The Suitelet handles any data users submit to the HTML page. When you use a linked HTML page, you manage HTML code through strings, so it can be harder to manipulate data than it's with components created with N/ui/serverWidget Module methods. To pass data in the HTML string, your Suitelet code has to update values inside that string. As you add more values, the string gets more complicated.
The example below shows a simple volunteer sign-up sheet with two parts: the Suitelet code and the HTML. This Suitelet code uses the https.get(options) method from the N/https module to access the content from the HTML page. It uses methods from the N/record Module, N/email Module, and N/search Module to collect, process, and respond to user-submitted 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" // see the next snippet
});
var contentDocument = contentRequest.body;
var sponsorid = context.request.parameters.sponsorid;
if (sponsorid && sponsorid != "" && sponsorid != null) {
contentDocument = contentDocument.replace("{{sponsorid}}", sponsorid);
log.debug("Setting Sponsor", sponsorid)
}
var projectid = context.request.parameters.projectid;
if (projectid && projectid != "" && projectid != null) {
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"] && params["project"] !== "" && params["project"] != null && params
["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
};
});
The following HTML, contained in the LinkToFormPage.html file (see above snippet), creates the form that the Suitelet links to.
<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>
The following screenshot illustrates the form that is created by the linked HTML page.
