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 executes.

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:

1. It includes a run(context) entry point function in the return statement. This function can return any type of data, including a promise.

                 export const run = (context) => {
       // Add code here
   }; 
   
               

2. 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 the LayoutType property of the Shell component. This method accepts the following values for the LayoutType 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 the setLayout(LayoutType) method. The SPA client script imports the root component from the HelloWorld.js file. To set the page context, the setContent(rootComponent) method is used to render the HTML element of the HelloWorld component, which is defined in the HelloWorld.js file

                 import HelloWorld from './HelloWorld.js';
    
   export const run = (context) => {
       context.setLayout('application'); // Make the application fill the entire viewport
       context.setContent(<HelloWorld />); // NetSuite UIF component
   }; 
   
               

3. 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>
      );
   } 
   
               

Related Topics:

Single Page Application Creation And Development

Developing Single Page Applications

Single Page Application Server Script

NetSuite User Interface Framework for Single Page Applications

General Notices