Creating Google Map Custom Portlets in NetSuite – a How-to Guide

I am sure everybody appreciates NetSuite’s Dashboards and its flexibility in relation to custom reports and other business-related key performance indicators (KPIs).

However, sometimes out-of-the-box functionality and numerous standard and custom KPIs in NetSuite are not enough. Frequently, there is a need to source external company information and feed it directly into NetSuite’s Dashboard, or perhaps create custom functionality that NetSuite does not offer out-of-the-box.

In order to bridge this gap, NetSuite gives us ‘Custom Portlets’ which are custom SuiteScript scripts that can be deployed directly on NetSuite’s Dashboard.

There are 4 different types of custom portlet scripts:

List: A list of user-defined column headers and rows. (i.e.: custom Saved Search result portlet)

Form: A basic data entry form which when submitted can create / modify records in NetSuite,

HTML: A HTML-based portlet - the most flexible presentation format used to display free-form HTML (images, Flash, custom HTML).

Links: This default portlet consists of rows of simple formatted content (for example an RSS portlet). Any XML type of feeds could be configured via the Links portlet.

In this article, I will demonstrate how to create and deploy a custom portlet in NetSuite. For the purposes of this blog I will use Google Maps Lookup based on Geocoding.

Please note that you can download the source code used in this blog here.

As defined by Google, “Geocoding is the process of converting addresses (like "1600 Amphitheatre Parkway, Mountain View, CA") into geographic coordinates” [source].

After determining the exact geographic coordinates Google Maps will pinpoint the exact queried location on the map.

Final look of the Google Maps Lookup portlet.

As everything that we want to embed in our portlet will need to be of secure content, I will have to create a Suitelet which I can later link to my portlet script. (’Suitelets’ are extensions of the SuiteScript API that give developers the ability to build custom NetSuite pages and backend logic.” [Source])

Important Tip: If you wish to source external content to your NetSuite Dashboard through Custom Portlets, your external webpages must be secure and their url must start with ‘https://’

Step 1: Create and deploy Google Maps Lookup SuiteLet

Environment Setup
In order to write SuiteScript code, you will need the following:

We recommend that you install SuiteCloud IDE. The following SuiteAnswer links will help you with the setup and configurations*:

1. https://netsuite.custhelp.com/app/answers/detail/a_id/23388/
   (Getting Started with Your SuiteScript Development)
2. https://netsuite.custhelp.com/app/answers/detail/a_id/10643
   (Installing SuiteCloud IDE)

Setup of Google Maps API ‘Client Id’ key for the use with your script*:

1. Detailed instructions are located here:
   [Click Here]

Administrator access to your NetSuite Instance.

Create the Suitelet
Since we cannot feature any content that is not secure in NetSuite’s dashboards, we will need to create a Suitelet that we will refer to in our custom portlet.

Create Suitelet file
In our SuiteCloud IDE we will create a new SuiteScript file.

• On the SuiteScript screen, pick ‘Suitelet Script’ in the ‘Script Type’ field.
• Choose your project where the file would be saved.
• Name the file appropriately. The following is the naming convention that I use. You may choose to name your files differently:
  • ‘FMT_’: Acronym for the company name – (optional)
  • ‘SSU_’: Acronym for SuiteScript Suitelet. I specify the SuiteScript type in my script names in order to differentiate between many different scripts I deploy in my NetSuite instance. This naming convention also makes it simple and easy to locate scripts within IDE.
  • ‘GoogleMapsLookup’: The actual logical name for your scripted solution.

1. Please note: As mentioned above, Suitelets operate on ‘send-respond’ model. You will refer to the main function (i.e.: ‘geoCodedGoogleMap’) in your script deployment record. We will discuss the deployment of your Suitelet shortly.
2. Detailed instructions and reference material on how to write Suitelet code can be found here*:
   https://netsuite.custhelp.com/app/answers/detail/a_id/10625
   https://netsuite.custhelp.com/app/answers/detail/a_id/21951

Deploy the SuiteLet
Now that you have written your Suitelet code you will need to create a SuiteScript record in NetSuite and associate your code to this record.

Creating a ScuiteScript Record

1. Go to Customization >> Scripting >> Scripts >> New
2. In the ‘Select Type’ Screen Choose Suitelet
   
3. On the ‘New Script’ page, complete the Mandatory fields:
   1. Name: For consistency, ‘Name’ field should match the file name you created in Step 1 > B (you do not need to add ‘.js’ at the end of your name)
   2. ID: Best practice is to write the script id in the following manner:
      ‘_fmt_gm_lookup’ (all lower case).
      Note: When you save the script record, NetSuite will add the ‘customscript’ prefix to the id
      (i.e.: ‘customscript_fmt _gm_lookup’).
   3. • • Click on a double arrow and click on ‘New’Script File: This field refers to the file you created in Step 1 > B.
   4. Add your file to NetSuite by clicking on the [Browse] button in the new dialogue box.
   5. Select your file and click on [Save] button in the same dialogue box.
   6. You will now see the reference in SuiteScript record to your code.
      Note: the ‘JS’ file was transferred to your NetSuite file cabinet:
      Documents >> Files >> File Cabinet >> SuiteScripts
   7. Function: In this field you will need to specify the main function in your script. In our case this is ‘geoCodedGoogleMap’. When the script is deployed it will call this function to execute your code.
4. Save your script record.

Script Deployment
It is time to deploy your script

1. If your script record is still open, click on [Deploy Script] button.
2. On the new page:
   1. Title: set the same title you used to name your script record
   2. ID: using the same logic that was described above during the script record setup, create a deployment id
      (‘customdeploy_fmt_sp_ gmlookup_d’).
      Note: I added ‘_d’ to my id name so that I can differentiate it from script record’s id.
   3. Status: Select Released as Suitelet will not work in test mode.
   4. Audience Tab:
      • Roles: Check ‘Select All’
   5. Execute as Role: Select Administrator
3. Save your script deployment record. Your Suitelet is now deployed

Step 2: Create and deploy Google Maps Lookup Portlet

We are almost there! The last piece of the puzzle is to create a custom portlet that will source your Suitelet and show it on NetSuite’s Dashboard.

1. Create Portlet SuiteScript file
   • Very much like in Step 1 > B, you will create SuiteScript file in NetSuite’s IDE
   • This time however your script type will be of the type: ‘Portlet’
2. Create SuiteScript Code
   • Your code can be very simple. In my example I created an iFrame that will source the URL of my Suitelet.

   

   • To obtain the URL that the iFrame will point to, you will need to re-open your Suitelet.
     • Go to your SuiteScript deployment: Customization >> Scripting >> Script Deployments >> Locate your Script (By title / id)
     • Click on ‘Edit / View’ when you locate your script deployment
     • Copy the value in the External URL link. You will reference this URL in your portlet code (i.e.:

• Configure your Portlet on NetSuite’s Dashboard
  1. We are almost done! In your NetSuite UI, click on the Home tab.
     
  2. In the top right of your screen click on Personalize Dashboard Link
  3. A new pane will open up on the left side of your screen. Click on the ‘Custom Portlet’ link
     
  4. Click on the inversed triangle on the new portlet and in the source field select the custom portlet you deployed earlier.
     
  5. Click on the [Save] button.
  6. You are done, congratulations!
     

There are 3 other type of custom portlets that you can build and show on your dashboard. If you'd like to learn more about these other types, you have any questions, or need further clarification regarding any of the steps outlined above, do not hesitate to contact us using the form below.

Click here to download the source code for the examples used in this article.

Good luck (Suite)Scripting!

Feel free to contact FMT consultants for assistance with NetSuite.

Written by Ilija Budimir, Senior NetSuite Consultant
FMT Consultants

* In Order to access the links referenced in this document you will need to be logged in to NetSuite and SuiteAnswers Site. http://www.netsuite.com/portal/services/suiteanswers.shtml