CODEWITHSUNDEEP
javascriptresponsive-designnetsuitesuitescript2.0
user3203356
user3203356

Reputation: 33

Netsuite suitelet responsive UI, sitebuilder bundling

I would like to know if anyone has an idea on how to make a suitelet responsive? I believe netsuite (not sitebulider and suitecommerce) does not have/support responsive UI. Is there a way to make it responsive without "hacking"? Another question is can you bundle the website that is created in sitebuilder?

Upvotes: 0

Views: 1119

Answers (1)

Mike Robbins
Mike Robbins

Reputation: 3287

You don't really have much control over the NetSuite CSS, but a Suitelet can output raw HTML/CSS and doesn't have to use the standard NetSuite UI. With this information you can go the extreme route of building a React or Angular application and running that from your Suitelet. Because it's running as a Suitelet, you can use RESTlets (in the same session, so not additional authentication needed) for all data fetches from the React application.

This gives you the best of both worlds, a completely custom (responsive) UI and all the benefits of storing your data in NetSuite.

/**
 * Suitelet for React frontend
 * @NApiVersion 2.1
 * @NModuleScope Public
 * @NScriptType Suitelet
 */
define([
    'N/log',
    'N/search',
], function (log, search) {
    function onRequest(context) {
        const appInfo = {
            title: 'Application Title',
            cssFile: getFileUrl('react.app.css'),
            jsFile: getFileUrl('react.app.js'),
        };

        const html = `<!doctype html>
                       <html lang="en">
                           <head>
                               <link rel="stylesheet" type="text/css" href="${appInfo.cssFile}">
                               <meta charset="utf-8">
                               <title>${appInfo.title}</title>
                               <script>window.appTitle = ${appInfo.title};</script>
                           </head>
                           <body id="body">
                               <div id="app-site"></div>
                           </body>
                           <script src="${appInfo.jsFile}"></script>
                       </html>`;

        context.response.write({ output: html });
    }

    //////////////////////////////////////////////////////////

    function getFileUrl(filename) {
        const results = search.create({
            type: 'file',
            filters: [['name', 'is', filename]],
            columns: ['url']
        }).run().getRange({ start: 0, end: 1 });

        if (results && results.length > 0) {
            return results[0].getValue({ name: 'url' });
        }

        return '#';
    }

    return {
        onRequest
    };
});

Upvotes: 4

Related Questions