Written by Luke Pirtle
NetSuite has a new UI and has done it the right way. The ERP system has had scant updates to its look since a major style update in 2015. Several pages are starting to receive this new UI, and you might have already noticed a few. The newer, sleeker interface on the analytics page allows seamless searching and filtering; the new timesheet allows faster and more detailed time entry; even the project record has this enhancement, making the Work Breakdown Structure and other aspects of its page easier to work with. NetSuite will also be releasing the new Redwood theme soon which will add these enhancements to the entire system and make every component faster, more responsive, and modern.
This time around, NetSuite has not just updated the appearance but also the core of their UI and has done so by adopting React.
Why React?
React has been the de facto king of front-end development for quite a while now, and NetSuite used it as a base before adding their own twist. Simply put, the Meta-powered framework allows for very complicated logic and operations to be done on your local machine instead of the server; this makes the UI much more manageable and performant. The sluggish and awkward UI for select boxes and inputs is now lightning fast, and the constant page refreshes on dropdown select have been replaced by instantaneous updates and seamless changes. A great comparison is to think of going to a webpage as going to a grocery store. React makes a list and goes once, while NetSuite’s old UI doesn’t have a list and keeps going when it realizes it doesn’t have what it needs.
New Script Type
While this is good news for all NetSuite users, this is also a huge boon for developers and solution architects in the ecosystem. The new UI is paired with a new script type—The Single Page Application, or SPA. SPAs have existed since AngularJS released in 2010 and denotes a single webpage that updates dynamically as the user interacts with it. This is a much better user experience that feels smooth and seamless and blows the server-side rendering of the old NetSuite UI out of the water. You can see this today as we’ve used it to power our Bulk Deletion SuiteApp in its 3.0.0 release to give it a sleek new interface which is available in the marketplace now for you to try out.
Components
This new script type is a heel turn from previous script types and has a learning curve. To get started, it would make sense to take a quick crash course on React if you are not familiar and create a quick application. After that, the new script type will make much more sense. Once you’ve gotten comfortable, you’ll notice it has a litany of JSX-esque components to choose from, making Suitelets obsolete and giving countless possibilities in terms of customizations and enhancements. There are tables, grids, cards, panels, date pickers, scheduling tools, and more that used to require third-party libraries. Now, it’s a native application. The image below is using their own dog food and is constructed with navigation panels, cards, lists, and links.
In addition to their own JSX components above, they also have a JSX module that allows you to use traditional HTML to create vanilla JSX components should you choose to go that route. This makes the framework just as extensible as vanilla React.
Examples
Each component has amazingly detailed documentation and example code. Each feature is shown with every option in a showcase that makes development feel more like cheating on your homework. A developer can now construct expanding editable sub lists with adjustable header widths and drag and drop columns, and there are code examples you can copy and paste it into your IDE.
What You See is What You Get
If this were not enough of a god send, there is also a WYSIWYG editor that allows you to drag and drop components. When you get something you like, you can export working JSX code. This allows you to visualize and prototype your efforts before you even open WebStorm. While somewhat limited, it also lets you update the properties of these components, which then updates in real time on the page.
All of this comes with a somewhat disappointing “Release Date To Be Determined.” Currently SPAs are only available for SuiteApp development for NetSuite SDN partners. We’re hopeful for a 2025.1 or 2025.2 release for use in general development.
Despite this, the amount of effort and care put into this new UI Framework (UIF) and SPA script type is nothing short of astonishing. Having seen the release of numerous features in NetSuite, this is the most impressive release I’ve seen in my ten-year career.
Congratulations NetSuite, you knocked it out of the park!
