Introduction to Single Page Applications
The Single Page Application feature is available by request only. Currently, this feature can be enabled only for SDN partners with a publisher ID. SPA development requires the use of SuiteCloud Development Framework (SDF) SuiteApp projects and SuiteScript 2.1. For information about the requirements to use this feature and how to request access, see Requesting Access to the Single Page Application Feature.
Single page applications (SPAs) are web applications used in many websites to provide a way to interact with the page without the need to reload it. When you interact with SPAs, notice that the majority of the page content does not change, and only specific sections are updated.
To learn more about SPAs and how to use them in NetSuite, see the following topics:
How a Single Page Application Works
SPAs load the application code (HTML, CSS, JavaScript) only one time: the first time you access the page. Because JavaScript intercepts all browser events, each subsequent request consists only of the specific information needed to update the page.
In contrast, in multi-page applications, every request for new information returns a new version of the whole page to the browser instead of only those portions that require updating.
SPAs convert data to HTML on the client instead of converting data on the server and sending it back to the client.
Advantages of Single Page Applications
The main advantages of SPAs are:
-
More dynamic and seamless user experience — users get real-time updates without reloading the page or resubmitting the form.
-
Faster loading and less bandwidth consumption compared to HTML.
-
Easier to debug and maintain because of the separation between presentation and application.
-
Built-in NetSuite look and feel.
Single Page Applications in NetSuite
You can use SPAs instead of Suitelets to build a customized user interface in NetSuite.
To create an SPA, you must have access to the following tools in your NetSuite account:
-
NetSuite User Interface Framework (UIF) – Provides a library of UI components you can use to build SPAs with NetSuite look and feel. You can access NetSuite UIF through an account-specific URL: https://
<AccountID>.app.netsuite.com/ui/apps/catalog.nl. For more information, see NetSuite User Interface Framework for Single Page Applications. -
SuiteScript – Enables the use of client scripts and server scripts, which are required to create an SPA. You can also load SuiteScript modules from the SPA client and server scripts.
-
SuiteCloud Development Framework – Enables the creation of SuiteApp projects, which are used to develop and deploy SPAs to target NetSuite accounts.
The SPA feature in NetSuite is available by request only. For information about how to request access, see Requesting Access to the Single Page Application Feature.
For information about the setup requirements for developing SPAs in NetSuite, see Single Page Application Creation And Development.
Single Page Application Terminology
To understand how single page applications in NetSuite work, you should be familiar with the following term definitions.
-
NetSuite User Interface Framework (UIF) – The NetSuite frontend framework for building user interfaces, written in JavaScript. It is a UI library in NetSuite that is loaded by default when running an SPA. You can use it in SPAs to get the NetSuite look and feel. NetSuite UIF uses features such as JSX syntax and ECMAScript module management.
-
Single Page Application (SPA) – A web application that dynamically updates the page when the user interacts with it, without fully reloading the page.
In NetSuite, SPAs are built as part of an SDF SuiteApp project and have the following components:
-
SPA client script – A script that runs the application in the browser. The client script loads the components and can also load SuiteScript modules and custom modules.
-
SPA server script – A script that acts as the entry point for the application and has an API that can modify the response (add scripts, perform validations, and so on). For example, the application can display an error if the current user does not have a specific role.
-
Assets folder – A folder that contains all assets needed for the SPA (images, stylesheets, subfolders, etc.).
-
SPA object definition – The XML definition for the SPA object in the SDF SuiteApp project. This file is used to define the elements of the SPA such as the SPA name, URL, and references to the location of the SPA folder and SPA script files. SPAs are defined in SDF as a singlepageapp SDF custom object. For more information, see Single Page Applications as XML Definitions.
-
-
SPA URL – The URL used to execute the SPA. This URL is formed by the following:
-
Base URL – The URL where you access your NetSuite account.
-
Application ID – The SuiteApp application ID, which consists of the publisher ID and project ID used when creating the SDF SuiteApp project for the SPA.
-
Custom URL – The custom URL specified in the SPA object definition XML file.
The following URL is an example of an SPA URL: https:
<AccountID>.app.netsuite.com/spa-app/<ApplicationID>/<CustomURL>. -
-
SuiteApps – Applications or bundles that extend NetSuite for specific industry and business needs. SuiteApp projects created with SDF are used to develop and deploy SPAs in NetSuite. For more information, see NetSuite SuiteApps.
-
SuiteCloud Development Framework (SDF) – A development framework that you can use to create SuiteApps or to customize NetSuite accounts using SuiteCloud projects. For information, see SuiteCloud Development Framework.
-
SuiteCloud projects – Projects created using SDF. You can create two types of SuiteCloud projects with SDF: account customization projects and SuiteApp projects. For information, see SuiteCloud Project Types.