How to embed a widget on a NetSuite form

Published: May 31, 2024

How to embed a widget on a NetSuite form

Published: May 31, 2024

Popdock can be embedded on any NetSuite form using scripts. Below are the required steps to embed the widget.

A Popdock widget will need to be created prior to following these steps. Click here to learn how to create a Popdock widget.

Table of Contents

1. Create the Widget in Popdock

2. Create the Widget Script

3. Create new Script File

4. Testing and Review

Create the Widget in Popdock

1. Navigate to the Edit widget page of the widget you would like to display inside NetSuite.

2. Click Parameters under the left Settings menu.

3. Click on Click here to add a parameter.

4. Provide a Name for the URL parameter and select the field that will be used as the filter.

5. Click Add.

6. Click Embed Codes under the left Settings menu.

7. Save the Link value for the next step.

Create the Widget Script

1. Copy the code below to a local file.

2. Edit the file in the following places:

  • widgetUrl: The widget URL generated by Popdock in the previous step.
  • parameterName: This is the name of the parameter you declared in the previous section.
  • parameterField: This is the NetSuite field you will be using as your filter.
  • title: Replace this with the name you want the new tab on the form to use.
/**
 * @NApiVersion 2.x
 * @NScriptType UserEventScript
 * @description Popdock Widget on Customer Form
 */

define(['N/record', 'N/log', 'N/ui/serverWidget', 'N/config'], function (record, log, serverWidget, config) {

  var widgetUrl = "https://widget.popdock.com/embed/xxxxxxxxxxxxxxxx"; // widget url
  var parameterName = "customerId"; // Popdock widget parameter name
  var parameterField = "id"; // netsuite filter field name
  var title = "PD Sales Transactions"; // name for tab on the form

  function beforeLoad(context) {
    try {
      if (context.type == context.UserEventType.VIEW || context.type == context.UserEventType.EDIT) {
        var form = context.form;

        var existingTabs = form.getTabs();
        if (existingTabs.length > 0) {
          var recordId = context.newRecord.id || '';
          var recordType = context.newRecord.type || '';
          var recordObj = record.load({
            type: recordType,
            id: recordId,
            isDynamic: true,
          });

          var widgetTab = form.addTab({
            id: "custpage_popdock_widget_tab",
            label: title
          });
          var widgetField = form.addField({
            id: "custpage_popdock_widget_frame",
            type: serverWidget.FieldType.INLINEHTML,
            label: "Popdock Widget",
            container: "custpage_popdock_widget_tab"
          });
          var parameterValues =
            "?theme=netsuite" + getLocaleParameter() + "&" + parameterName + "=" + recordObj.getValue({
              fieldId: parameterField
            });
          var fullWidgetUrl = widgetUrl + parameterValues;

          var content =
            '<iframe id="custpage_popdock_widget_frame" src="' +
            fullWidgetUrl +
            '" align="center" style="width: 100%; height:800px; margin:0; border:0; padding:0" frameborder="0"></iframe>';

          widgetField.defaultValue = content;
        }
      }
    } catch (e) {
      // Log the error details to the NetSuite Execution Log
      log.error({
        title: 'Error in beforeLoad',
        details: e.toString()
      });
    }
  }

  // Function to get the locale parameter
  function getLocaleParameter() {
    var userPreferences = config.load({
      type: config.Type.USER_PREFERENCES
    });
    var localeParameter = userPreferences.getValue({
      fieldId: 'LANGUAGE'
    });

    if (localeParameter) {
      return "&locale_id=" + localeParameter.replace("_", "-");
    } else {
      // Provide a default value if LANGUAGE is undefined
      return "&locale_id=en-US";
    }
  }
  return {
    beforeLoad: beforeLoad
  };
});

Create new Script File

1. In NetSuite, navigate to Customization > Scripting > Scripts.

2. Click New Script.

3. Click (+) to add a new Script File.

a. Choose ATTACH FROM Computer.

b. Enter a recognizable FILE NAME.

c. Select a FOLDER.

d. Upload the JavaScript file.

e. Click Save.

4. Click Create Script Record.

5. Configure the Script record.

a. Provide a NAME.

b. Provide an ID.

c. Enter a DESCRIPTION.

d. Click Save.

6. Click Deploy Script.

7. Configure the Script Deployment.

a. Set APPLIES TO as the entity where you are embedding the widget.

b. Set STATUS to Testing.

c. Set the Audience that will see this widget.

  • Selecting ALL ROLES will show it to all users.

d. Click Save.

Testing and Review

Now that the script is deployed, we will need to make sure it is modifying the page correctly.

When the script is in the Testing status only the user the deployed the widget will be able to see it on the form in NetSuite.

1. Open a new NetSuite tab in your browser.

2. Open the Record Type that has your new field.

  • In this example we modifying the customer form.

3. Check if you can see your tab.

4. Switch to the tab with your widget.

5. Make sure your widget is displayed.

6. If the widget is returning no records, check the filter is correct.

  • Right-click anywhere in the white space on the widget.
  • Click Inspect.
  • Ensure the filter parameter is being added correctly. (if it isn’t doublecheck the SuiteScript code)

7. If the widget isn’t working, you can check the execution logs.

  • Navigate to Customization > Scripting > Script Deployments.
  • Filter for API VERSION 2.0.
  • Click View on your deployment.
  • Open the Execution Log.

8. Once you have verified the widget is displaying correctly, Edit the deployment.

9. Change the STATUS to Released.

If you have questions regarding embedding your widget within NetSuite, contact support@eonesolutions.com.

Content
Table of Contents Create the Widget in Popdock Create the Widget Script Create new Script File Testing and Review

Feeling stuck? Get the support and guidance you need to help you power through any data challenge

Reset Filters