In this exercise, I’m going to write in SuiteScript 2.0. I need the practice! I’ll split up the code into separate files that isolate functionality.
Let’s pretend I’m going to build a library of React components and include them in Suitelets. In my example, I’m serving a component called PartFinder. It doesn’t actually do anything, but imagine it calling the SuiteCommerce Advanced SOLR search engine to find parts based on SCA’s facets (attributes like height, width, weight, vendor, color, price, etc). If you skip ahead to the second to the last image, you’ll see what the component actually looks like.
Imagine being able to drop this component into any Suitelet or add it to existing NetSuite pages as needed with just a couple of lines of code.
Here’s my schematic.
There are 4 files that make up this example. The logic_react_other(s).js represent other React components.
- logic_suitelet_react.js – This creates a page, adds a form. In the form it adds an inline HTML element which consists of several parts:
- The included react and babel libraries required by React.
- A div element with an id of dynHTML. This is where the React component is rendered.
3. A config file which is required for non-AMD compliant libraries.
4. A static file which is the React PartFinder component. This could live in logic_react_lib.js, but I chose to split it out. Nice and tidy!
This is what the component looks like in the rendered Suitelet.
And here is my example code in a format you can cut and paste into your IDE. Use this at your own peril (my attorney made me say that!).