[JohnCCole]

Now that NetSuite is supporting require I wanted to see if it’s possible to dynamically load CSS like a javascript file (using require) in the file cabinet.

I was thinking about creating a custom UI component that when required would add an element to the DOM. Adding the element to the DOM is easy but what if the UI component has a CSS file in the file cabinet. Since the sandbox change in 2017.2 or 2017.1 if I want a file to be available only while authenticated I can no longer have one url to that file in the file cabinet that works both on production and sandbox.

Is there a way to reference other resources like CSS, images etc in the file cabinet without making those resources available without login? I’m more or less thinking a require for a CSS File where I can load the file on the client side like a javascript file from the file cabinet

For example

Code:
require([‘/SuiteScripts/CSS/somestyles.css’], function (){});
Again, I know making the CSS file available without login will give me a solution and while I really don’t care that my CSS file would be accessible by anyone on a NetSuite server some where I was curious if this can be done without making the CSS file available without login and while still working on both production and on the sandbox.

Thanks,

John
This is a cached copy. Click here to see the original post.

[michoel]

What you could do is create a simple suitelet that serves files from your File Cabinet

You can use the relative URL to the script (i.e. /app/site/…. instead of https://system.netsuite.com/app/… so you know it’s using the correct data center

And you can use the script’s “scriptid” instead of internal id in the URL to avoid issues if that differs per account

/app/site/hosting/scriptlet.nl?script=customscript_scriptid&deploy=c ustomdeploy_deployid&file=style.css

Completely untested code ripped from a similar project

Code:
/**
*@NApiVersion 2.x
*@NScriptType Suitelet
*/
define([“N/search”, “N/file”], function(search, file) {
function onRequest(context) {
var folderId = 1234; // internal id of folder from which to serve files
var fileName = context.request.parameters.file;
var fileId;

search
.create({
type: “file”,
filters: [
[“folder”, search.Operator.ANYOF, folderId],
“AND”,
[“name”, search.Operator.IS, fileName]
]
})
.run()
.each(function(result) {
fileId = result.id;
return false;
});

if (!fileId) {
throw error.create({
name: “FILE_NOT_FOUND”,
message: “Could not find file”
});
}

var fileObj = file.load({ id: fileId });
fileObj.lines.iterator().each(function(line) {
context.response.writeLine({ output: line.value });
return true;
});
}

return { onRequest: onRequest };
});

[JohnCCole]

michoel Thanks for the reply. That reminded me I’ve done something similar a long time ago. Perhaps I was just hoping I still didn’t have to rely on a customization to download a file from the file cabinet.

[TheUsualSuspect]

I hate to be “that guy” but modding the UI usually won’t end well. In the short time span I’ve worked on NetSuite (~3 years) they overhauled the UI completely and are likely to do so again at some point. The SS 1.0 and 2.0 API’s are also just glorified query selectors so you can potentially mess up the API calls by changing thing the DOM. Realistically those won’t be too big of issues but adding CSS can be super dangerous. In my experience trying to add CSS styles would overwrite NetSuite UI component styles unless you were very specific with classes and Ids.

[michoel]

There is no question about it.. messing with the DOM is pretty high in the list of NetSuite bad practises.

And they are already talking about another UI refresh..

But on the other hand, I think creating your own “component” that lives inside an inline html field with targeted CSS is ok

[Author]

Posts