netsuitesuitescript2.0

How do I get a relative path to a css file for a suitelet's client script?


the basic backstory/issue here is my customization (suitelet) works great in one environment but breaks in others because of a hardcoded link to the css file.

I have a suitelet with a serverWidget form where I add several fields and an inline HTML field.

var form = serverWidget.createForm({
                title: 'Customer Locations'
            });

The HTML is basically adding a div and the client script adds content into that div.

I attach the client script like so:

form.clientScriptModulePath = "./Customer Map geostored.js";

Everything works well. But the module I'm using (leaflet) has it's own css file to render the map. In the client script I am doing this:

var head  = document.getElementsByTagName('head')[0];
            var link  = document.createElement('link');
            link.id   = 'customCSS';
            link.rel  = 'stylesheet';
            link.type = 'text/css';
            link.href = 'https://xxxx.app.netsuite.com/core/media/media.nl?id=4949949&c=3903104&h=oGKTyQwF9Hg1BOaex_GWREN9IQGxFKIOB_f26Sh7eStm2l8S&_xt=.css';
            link.media = 'all';

            var link2  = document.createElement('link');
            link2.id   = 'LeafletCSS';
            link2.rel  = 'stylesheet';
            link2.type = 'text/css';
            link2.href = 'https://xxxx.app.netsuite.com/core/media/media.nl?id=4949967&c=3903104&h=LwHy6rO0fXmyEIIr_PINP38vQ5n5R7Ga_LSTtYwUKo32naWH&_xt=.css';
            link2.media = 'all';

            head.insertBefore(link, head.firstChild);
            head.insertBefore(link2, head.firstChild);

As you can see the href is a direct path to our production account, so the URL is different in sandbox or relase preview. I would love to somehow get the relative path using something like N/file but support says it isn't possible and they are creating an enhancement request. So I'm wondering how others handle this situation, do you pass the path as an argument from the suitelet?

I saw I could do a DOM hack like here: https://ursuscode.com/netsuite-tips/loading-custom-html-and-bootstrap-within-a-suitelet-form/ but would prefer to avoid that if possible.

Thanks!


Solution

  • It's true that the N/file module is not supported in client scripts - it seems that is the question "support" were answering when they said it's not possible. However, you can use the N/search module to retrieve the URL of a file, given the file name.

        let theURL;
        search.create({
            type: 'file',
            filters: [
                ['name', 'is', {{theFileName}}]
            ],
            columns: [
                'url'
            ]
        }).run().each( r => {
            theURL = r.getValue({
                name: 'url'
            });
            return false;
        });
        return theURL;
    

    (You will need to declare the N/search module as search at the top of your file, of course)