A couple of days ago I set out to see if React in a NetSuite page was a good idea. My conclusion, NO. I guess you can stop reading now.
Seriously, there are good reasons for using React. However, managing the back and forth of server-side and client-side became more trouble than it was worth. The NetSuite native code was much simpler and more easily maintained.
If you check out my last post and compare the code, I think you’ll find this much improved. Also, this code picks up where the last example left off, it actually hits the SuiteCommerce Advanced API and delivers results.
Programmer’s note: I simply adapted my previous example. All references to React in file names remain. I’m sure you can get past that.
Here’s the Suitelet we are building.
The Suitelet code…
The non-AMD library file. I’m leveraging jquery-cookie to save client-side state.
This file contains client-side HTML and JavaScript which is simply fetched and delivered to the browser by the loadFileByName method in the above library.
You’ll need some method to save state. I’ve chosen cookies since it was easy!
And finally, you’ll need the ReactLibConfig.json file, which I’ve included in the previous post. Don’t forget it!
Here is the code in a format you can easily cut and paste.
/**
*@NApiVersion 2.x
*@NScriptType Suitelet
*@NAmdConfig ./ReactLibConfig.json
*/
define([‘N/ui/serverWidget’, ‘N/file’, ‘N/http’, ‘react_lib’],
function (serverWidget, file, http, react_lib) {
function onRequest(context) {
// Only process GET and POST requests. Ignore PUT and DELETE
if (context.request.method != ‘GET’ && context.request.method != ‘POST’) return;
// Add a form
var form = serverWidget.createForm({
title: ‘Non-React Suitelet Demo’
});
// Add an inline HTML field
var field = form.addField({
id: ‘custom_inline’,
type: serverWidget.FieldType.INLINEHTML,
label: ‘Inline’
});
/*****************************************
*** GET REQUEST
******************************************/
if (context.request.method === ‘GET’) {
field.defaultValue = react_lib.getIncludes() +
react_lib.getComponentScript(‘logic_react_PartFinder.html’, file);
}
/*****************************************
*** POST REQUEST
******************************************/
else if (context.request.method == ‘POST’) {
var parameters = context.request.parameters;
field.defaultValue = react_lib.getIncludes() +
react_lib.getComponentScript(‘logic_react_PartFinder.html’, file) +
react_lib.getComponentResult(parameters, http);
}
form.addSubmitButton({
label: ‘Submit’
});
context.response.writePage(form);
}
return {
onRequest: onRequest
};
}
);
/**
* @NApiVersion 2.0
* @NModuleScope public
*/
var logic_react_lib = {
getIncludes: function () {
return [
”,
”,
”,
].join(“\n”);
}
,
getComponentScript: function (fileName, fileObject) {
return [
”,
this.loadFileByName(fileName, fileObject),
”].join(“\n”);
}
,
getComponentResult: function (parameters, http) {
try {
var objResult = http.get({
headers: {
‘Accept’: ‘*/*’
, ‘User-Agent’: ‘request’
}
});
var body = JSON.parse(objResult.body);
var items = body.items;
var html = new Array();
html.push(‘<p>Results are from SCA SOLR search.</p>’)
html.push(‘<br />’);
html.push(‘<table border=”1″ cellpadding=”0″ cellspacing=”0″>’);
html.push(‘<thead>’);
html.push(‘<tr><th>Internal ID</th><th>Item Name</th><th>Display Name</th></tr>’);
html.push(‘</thead>’);
html.push(‘<tbody>’);
for (var i=0; i<items.length; i++) {
html.push(‘<tr>’);
html.push(‘<tr><td>’ + items[i].internalid + ‘</td><td>’ + items[i].itemid+ ‘</td><td>’ + items[i].displayname + ‘</td></tr>’);
html.push(‘</tr>’);
}
html.push(‘</tbody>’);
html.push(‘</table>’);
return html.join(“\n”);
}
catch (err) {
return err.message;
}
}
,
loadFileByName: function (fileName, fileObject) {
var file =
fileObject.load({
id: ‘SuiteScripts/Logic/’ + fileName
});
return file.getContents();
}
}
var PartFinder = {
partName: null
,
vendorName: null
,
SaveState: function() {
jQuery.cookie(‘PartFinder.partName’, this.partName);
jQuery.cookie(‘PartFinder.vendorName’, this.vendorName);
}
}
// Save state in cookies on form submit
jQuery(‘form’).submit(
function() {
PartFinder.SaveState();
}
);
// Restore state from cookies on form reload from server
jQuery(document).ready(
function() {
PartFinder.partName = jQuery.cookie(‘PartFinder.partName’);
PartFinder.vendorName = jQuery.cookie(‘PartFinder.vendorName’);
jQuery(‘#partName’).val(PartFinder.partName);
jQuery(‘#vendorName’).val(PartFinder.vendorName);
}
);
<label for=”partName”>Part Name:</label><br />
<input type=”text”
id=”partName”
name=”partName”
onchange=”PartFinder.partName = this.value;” /><br />
<br />
<label for=”vendorName”>Vendor Name:</label><br />
<input type=”text”
id=”vendorName”
name=”vendorName”
onchange=”PartFinder.vendorName = this.value;” /><br />
<br />
NetSuite Experiences 