🧩 Custom Dashboard Portlets with External Data Integration (REST & API Feeds)

Introduction

Imagine seeing Shopify orders, Salesforce leads, or 3PL shipment statuses directly inside your NetSuite dashboard — all updated in real time.
That’s the power of Custom Dashboard Portlets with external API integration.

Using SuiteScript 2.1 Portlet scripts, you can securely fetch and display external data right within NetSuite, turning it into a unified command center for your business.

💡 Why Integrate External Data into Portlets?

⚙️ Key Components for Integration

🧱 Step-by-Step: Creating an External Data Portlet

Step 1: Enable REST Integration

1. Ensure Outbound HTTPS Requests are allowed.
2. Verify that the external system (e.g., Shopify API) supports CORS or basic auth.

Step 2: Create the SuiteScript Portlet

/**
 * @NApiVersion 2.1
 * @NScriptType Portlet
 */
define(['N/https', 'N/log'], (https, log) => {
    const render = (params) => {
        const portlet = params.portlet;
        portlet.title = 'Shopify Orders (Last 5)';

        try {
            // Call Shopify REST API
            const response = https.get({
                url: 'https://yourshop.myshopify.com/admin/api/2024-01/orders.json?limit=5',
                headers: {
                    'X-Shopify-Access-Token': 'your_api_token_here'
                }
            });

            const orders = JSON.parse(response.body).orders;
            let html = "<table style='width:100%; border-collapse:collapse;'>";
            html += "<tr style='background:#efefef'><th>Order #</th><th>Date</th><th>Total</th></tr>";

            orders.forEach(order => {
                html += `<tr>
                    <td>${order.name}</td>
                    <td>${order.created_at.substring(0,10)}</td>
                    <td>${order.total_price}</td>
                </tr>`;
            });

            html += "</table>";
            portlet.html = html;

        } catch (e) {
            log.error('Error Fetching API', e);
            portlet.html = `<p style='color:red;'>Error loading external data: ${e.message}</p>`;
        }
    };
    return { render };
});

✅ Result:
A dynamic dashboard table that displays the latest orders from Shopify inside NetSuite.

Step 3: Deploy the Script

• Go to Customization → Scripting → Scripts → New → Portlet
• Upload the script file.
• Under Deployments, assign to roles (e.g., Sales Manager).
• Save and add portlet to your dashboard.

Step 4: Add to Dashboard

1. On your Home Dashboard, click Personalize.
2. Select Custom Portlet → choose your script name.
3. Refresh dashboard — external data will appear in real time.

🔄 Example: Display Salesforce Opportunities

You can use Salesforce REST API (via OAuth token) to fetch pipeline metrics:

const response = https.get({
    url: 'https://yourinstance.salesforce.com/services/data/v57.0/query?q=SELECT+Name,StageName,Amount+FROM+Opportunity+LIMIT+5',
    headers: { Authorization: 'Bearer your_access_token' }
});

Then parse response.body.records and display it in your table or chart.

📈 Visualizing with Chart.js (Optional)

To make your portlet interactive:

portlet.html = `
    <canvas id="oppChart"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        new Chart(document.getElementById('oppChart'), {
            type: 'bar',
            data: {
                labels: ['Q1','Q2','Q3','Q4'],
                datasets: [{ label: 'Revenue ($)', data: [30000, 40000, 50000, 60000], backgroundColor: '#0066cc' }]
            }
        });
    </script>
`;

✅ Perfect for management dashboards or KPI overviews.

🔐 Securing External API Calls

Example with caching:

if (cache.get({ key: 'shopify_data' })) {
    // Use cached data
} else {
    // Fetch new data and store in cache
}

🧠 Advanced Use Cases

🧩 Common Issues & Fixes

⚡ Best Practices

✅ Use N/https for secure external communication.
✅ Keep API keys encrypted using the Credential module.
✅ Minimize dashboard load time — fetch only necessary data.
✅ Cache responses in N/cache to prevent repeated calls.
✅ Log only summary data (not sensitive API responses).

📚 Related Tutorials

• 👉 Custom Portlets in NetSuite
• 👉 SuiteScript Security & Governance Best Practices
• 👉 SuiteAnalytics Workbook for Dashboards

❓ FAQ

Q1. Can I make POST requests to APIs?
Yes — use https.post() and include headers and body payload in JSON format.

Q2. How often can I refresh external data?
Portlets load on dashboard refresh; you can also add a “Refresh Data” button using JavaScript.

Q3. Can I use OAuth 2.0 with Portlets?
Yes, but you must handle token storage securely (using N/credential).

Q4. Can I show images or charts from external APIs?
Yes, but only if the content is HTTPS and accessible publicly or through secure URLs.

🧭 Summary

Custom Dashboard Portlets with external data integration bridge the gap between NetSuite and other business systems.
They empower users to see live data — from sales to logistics — without switching tabs or exporting reports.

With SuiteScript and secure REST integration, you can turn NetSuite into a unified business intelligence hub — personalized for every department and role.