React vs NetSuite Native

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.

SuiteletScreen

The Suitelet code…

SuiteletCode.png

The non-AMD library file. I’m leveraging jquery-cookie to save client-side state.

NonAMDlibraryFile

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.

PartFinder

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 />

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s