Create the Client SuiteScript Script File Step by Step

To create the script file:

  1. Open a new file in your favorite text editor.

  2. Add two JSDoc tags:

    • @NApiVersion – This is the version of SuiteScript you're using.

    • @NScriptType – This is the script type you're using.

    After each JSDoc tag, add the right value, like you see in the following snippet.

                    /**
     *@NApiVersion 2.0              
     *@NScriptType ClientScript     
     */
    
    ... 
    
                  

    Every SuiteScript 2.x entry point script needs to have these tags, and you can only use one value for each. For more details and a list of valid values, check out SuiteScript 2.x JSDoc Tags.

  3. Add the define Object. Every entry point script needs to use it.

    Use [‘N/ui/dialog’] as the define function’s first argument for the define function. This argument is an array of string values for the modules you want to load.

                    ...
    define(['N/ui/dialog'],
    
        // In Step 4, you will add additional code here.
    
    ); 
    
                  

    The N/ui/dialog Module has methods for showing different types of dialogs. You load it so your script can use one of those methods.

  4. Declare a callback function as the second argument for the define function, and give it one argument called dialog.

                    ...     
        function(dialog) { 
    
            // In Step 5, you will add additional code here.
    
        } 
    ... 
    
                  

    If you’re not familiar with callback functions, know that this function will hold all the other logic for your script. Also, the number of arguments in your callback function has to match the number of modules you load with the define function. Each argument is an object that lets you access its module, so it’s a good idea to name each argument after its module.

    In this example, the define function loads one module, so the callback function only needs one argument.

  5. Inside the callback function, declare a function named helloWorld.

                    ...
            function helloWorld() {
    
                // In steps 6-10, you will add additional code here.
    
            }
    ... 
    
                  

    Later, you’ll set the helloWorld function as the script’s entry point function. Every entry point script needs to have one.

    A function only counts as an entry point function if it’s linked to an entry point. You’ll make that link in Step 11.

  6. Inside the entry point function, create an object called options.

    Many SuiteScript 2.x methods need or can take a plain JavaScript object as their argument. The method you use to create the “Hello, World!” dialog is one of them. This method takes an object with two parameters: title and message.

                    ... 
                var options = {
                    title: 'Hello!',
                    message: 'Hello, World!'
                };
    ... 
    
                  
  7. Add a try/catch statement. You don’t have to, but it helps your script handle errors gracefully. If an error happens and your try/catch handles it, your script—and any others on the page—can keep running. Try/catch can also help you figure out why something went wrong. Keep in mind, try/catch is a JavaScript feature, not something specific to SuiteScript 2.x.

    A basic try/catch has two parts: the try block holds the code you want to run, and the catch block runs if there’s a JavaScript error in the try block.

    Add the try/catch statement after the object you created in Step 6.

                    ...
                try {
    
                    // In steps 8 and 9, you will add additional code here.
    
                } catch (e) {
    
                    // In Step 10, you will add additional code here.
    
                }
    ... 
    
                  
  8. For the first action in the try block, call the N/ui/dialog Module alert() method. This method pops up a dialog with a title, a message, and an OK button.

    You call this method using the dialog object you set up in Step 4, along with the method name alert. To set the dialog’s title and message, pass in the options object.

                    ...
                    dialog.alert(options);
    ... 
    
                  

    For more details about this method, check out the dialog.alert(options) reference page. The page title matches the code you’ve added to your script, but keep in mind that reference pages for standard module methods might not always match your naming conventions. For example, if you named your callback argument message, you’d call the alert method with message.alert(options).

    Also, in the documentation, each method’s argument is usually called options, but in your script, you can name the object whatever you want. You can even create the object right when you call the method.

  9. Add some logic to create a log entry when the dialog shows up successfully. You can do this with the globally available log.debug(options) method.

    The debug() method is called on the log object. Unlike the dialog object, which you had to load, the log object is always available in every script. That’s why you don’t give it a name—you can always write log.debug to use this method.

    This method takes an object with two properties: a title and a detailed message. This time, create the object right in the method call. That’s different from what you did in Step 4, where you made the object first and then passed it by name to alert().

                    ...
                    log.debug ({
                        title: 'Success',
                        details: 'Alert displayed successfully'
                    });
    ... 
    
                  

    The log entry shows up in the UI when someone triggers the dialog alert. You’ll find out how to view the log in Test the Hello World Script.

  10. In the catch block, add some logic to create a log entry if there’s an error. You can use the globally available log.error(options) method for this. The log.error() method works a lot like log.debug(), but the log entry is marked as an error instead of a debug message.

                    ...
                    log.error ({ 
                        title: e.name,
                        details: e.message
                    });           
    ... 
    
                  
  11. Right after the entry point function, add a return statement. In every SuiteScript 2.x entry point script, your return statement needs at least one line with two parts:

                    ...
            return {
                pageInit: helloWorld
            };
    ... 
    
                  

    Because of this reference, helloWorld counts as an entry point function.

    Even though this script uses only one entry point, your return statement can include more if you want. You can use multiple entry points if they all match the script type set by the @NScriptType tag at the top of your file. For example, besides pageInit(scriptContext), the client script type also has saveRecord(scriptContext). So if you want the script to do one thing when the page loads and something else when the user clicks Save, you can use both entry points. For an example of a script with multiple entry points, check SuiteScript Client Script Sample.

  12. Save the file and name it helloWorld.js.

Related Topics

General Notices