Page Script Walkthrough

Overview

You can add your own client-side scripts to pages in the Sage Intacct UI.

This applies to all Platform Services pages and any page where you have the Edit this page option. You can make Sage Intacct API calls using the AJAX SDK for Javascript inside your scripts. In addition, scripts can utilize the full JavaScript library and can even include calls to external libraries.

As an introduction to the AJAX SDK for JavaScript, let’s look at an example that adds a script to a page in the Sage Intacct UI. Let’s assume we want to provide a way for users to add new customers to the system.

Set up Platform Services preferences

If you haven’t already done so, configure your preferences (in the UI) so that you can use syntax highlighting, auto completion, and script component debugging when working on scripts in Platform Services.

Set the Layout type to Action UI and make sure Script component debug all scripts is On:

preferences UI options

Platform Services uses the CodeMirror® library to provide syntax highlighting, for example:

Platform syntax highlights

Understand the example

Let’s first look at the example (below) and note some key points. At the top, you see that two text entry fields (CUSTOMER ID and CUSTOMER Name) are provided inside a div tag whose ID is newCustomer. A Create Customer button that calls a createCustomer JavaScript function is also provided in the div.

example script with callouts

After the div tag, an inline style is provided for it according to its ID. This is a best practice as it helps avoid unwanted restyling of page elements. (This is especially true on standard object pages where standard elements may not have id attributes rigorously assigned.)

Consider the createCustomer function implemented in the script. After logging a status message, the function populates an array with name/value pairs. The name is the parameter name for the create XML API call, and the corresponding value is accessed from the text entry field using jQuery (js).

The API_session constructor is used to instantiate the SDK class and start a session (using the credentials of the current user).

A callback is then defined to capture the server response via the AJAX responseText property, then print that response to the console.

The SDK’s ip_create call provides the name of the object, the array of field values, and the callback as parameters.

Note the use of //# sourceURL=MyInlineScript.js. This is useful when debugging your JavaScript .

Add the script to a page

Now lets add the script to a custom menu/page in a Platform Services app.

If you don’t have a Platform Services app, you can add the script to an existing page, such as a standard object page. Note that this approach creates a one-off script, which will not be available when a Platform Services app is exported/installed.

  1. From Platform Services, add a new menu:
    • Name the menu myTestMenu.
    • Choose the Generic Menu Type.
    • Add the menu to your application.
    • Save your changes.

    See the Sage Intacct product help for more information about creating menus and pages.

  2. Add the script to the associated page:

    • List the menus from Platform Services and click your menu name.

    • Click Edit Page to open the Page Editor.

      Edit page link

    • Drag a New <Script Component> onto the default fields section of the editor.
    • Edit the script component and paste in the code below.
    • Add a name and a description in the Script Component Info section below the code.
    • Scroll to the bottom and save your changes, then save again at the top of the page editor.

  3. Give yourself permissions for the new menu using Company > Users > Subscriptions.

  4. Test your script by creating a test customer.

    form with customer ID, name, and create customer button

    The callback in the script prints the response from the server to console. For example, here’s a sample response shown in Chrome:

    XML response indicating success

    Note: You can ignore messages about Content-length and Connection headers.

    Don’t forget to delete the test customer when finished.

Example

<div id="newCustomer">
    <p><label for="MY_CUSTID">CUSTOMER ID</label> <input type="text" name="MY_CUSTID" id="MY_CUSTID" value="" size="15"/></p>
    <p><label for="MY_NAME">CUSTOMER Name</label> <input type="text" name="MY_NAME" id="MY_NAME" value="" size="30"/></p>
    <p><button type="button" onclick="createCustomer()">Create CUSTOMER</button></p>
</div>
<style>
#newCustomer{
    width:75%;
    padding:20px;
    margin:20px;
    background: #CCCCCC;
}
</style>
<script>
function createCustomer(){
    console.log("In createCustomer function");
    var fieldsArray = {
        'CUSTOMERID': jq('#MY_CUSTID').val(),
        'NAME': jq('#MY_NAME').val()
    };
    var api = new API_Session();
    var callback = function(responseText){
        console.log(responseText)
    }
    api.ip_create('CUSTOMER', fieldsArray, callback);
}
</script>

Debug inline page scripts

Assuming you configured your preferences (above), any page script will automatically have a file name that you can use for debugging purposes.

The debug file name follows the naming conventions pt_script_<originalId>_<scriptIndex>.js. If there are multiple scripts on a page, the index number increments.

When debugging your JavaScript in a browser, you can easily locate your scripts and place breakpoints (example below shown in Chrome browser):

Chrome debugger with script selected

As an alternative, you can disable the preference for script component debugging on all scripts, then manually insert a debug file name using a comment in your script code, for example:

//# sourceURL=MyInlineScript.js

This name is only available when the preference for script component debugging is turned off.

Use record-in-scope data

On Platform Services pages, you can use merge fields in your scripts to access data from the record in scope. The script editor within the page element has a built-in merge field tool to look up merge fields for the object you are working with. Merge fields here follow the same format they would in any other Platform Services script.

{!object.field!}

Because the merge field is evaluated before the page is created, you don’t need to worry about merge field characters interfering with the JavaScript. Be sure to put quotes around merge fields that resolve to strings.

Provide feedback