Popdock can be embedded on any NetSuite form using scripts. Below are the required steps to embed the widget.
Table of Contents
1. Create the Widget in Popdock
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.
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.