Single Page Application Client Script
The SPA client script is a regular JavaScript file. It defines a module that must return an object with a run(context)
member, which is the entry point function that is called when the SPA runs.
You can load SuiteScript modules from the SPA client script. For examples, see SPA Client Script Basic Examples using SuiteScript modules.
The SPA client script has the following structure:
-
It includes a
run(context)
entry point function in thereturn
statement. This function can return any type of data, including a promise.export const run = (context) => { // Add code here };
-
The entry point function can receive an object that provides access to data or methods. In this case, the
context
object has the following properties:-
baseUrl
– URL of the SPA. -
The
context
object also exposes two functions:-
context.setLayout(LayoutType)
– Sets theLayoutType
property of the Shell component. This method accepts the following values for theLayoutType
parameter:Parameter
Type
Accepted Values
Description
LayoutType
string
application
Makes the content fill the whole height of the window. For example, it enables you to place some things on the bottom of the window.
natural
Makes the content only as tall as it needs to be.
-
context.setContent(rootComponent)
– Attaches the root component to the appropriate element in the NetSuite user interface.Parameter
Type
Description
rootComponent
NetSuite UIF component
The root component for the SPA, represented as a NetSuite UIF component. The root component is defined in a separate script file.
-
In the following example, the layout type is set to
application
using thesetLayout(LayoutType)
method. The SPA client script imports the root component from theHelloWorld.js
file. To set the page context, thesetContent(rootComponent)
method is used to render the HTML element of theHelloWorld
component, which is defined in theHelloWorld.js
fileimport HelloWorld from './HelloWorld.js'; export const run = (context) => { context.setLayout('application'); // Make the application fill the entire viewport context.setContent(<HelloWorld />); // NetSuite UIF component };
-
-
The
HelloWorld.js
file is a separate script file that defines the root component that initializes the SPA using NetSuite UIF.import {ContentPanel, Heading} from '@uif-js/component'; export default function HelloWorld() { return ( <ContentPanel horizontalAlignment={ContentPanel.HorizontalAlignment.CENTER} verticalAlignment={ContentPanel.VerticalAlignment.CENTER} > <Heading>Hello World!</Heading> </ContentPanel> ); }