Loading custom HTML and bootstrap within a Suitelet Form

Loading custom HTML and bootstrap within a Suitelet Form

Comments 141 comments

I want to share this nice hack I created to allow to run custom HTML within a Netsuite form. I am using it to load bootstrap and sweet alert, but it can be used for a lot more! In this example I am loading a basic bootstrap template, it can be tweaked to send POST messages to the suitelet and load more jQuery plugins and scripts.

The end result:

SuiteletHackBootstrap

 

Note: This is a hack, so beware.

Leave a comment if you liked it or think it can be improved!

Suitescript 2.x version

 

Suitescript 2.1 version

 

  • Mo

    Hey, Just wondering what’s the benefit of this VS creating your own form on a custom domain and passing along the variables to a netsuite form? (aside from security?)

  • shweta

    hi can you tell me what is suitetax api

    • Sorry, I’ve never heard of it or worked with it.

  • shweta

    i have a suitelet and one script parameter html page i m creating one hidden filed and store some value when we write this page in response then some line of code in javascript are having error like document.getElementById(‘lblTotal3′).innerHTML=’Total:$540.00′;
    in the response this line is break in two line and invalid token error will come can you tell how can i remove this error and is this error because of space or other region.
    thanks

  • Remove all line breaks maybe? It’s hard to say without looking at the code and debugging in console. Post your code in pastebin.com and reply if you need further assistance.

    • shweta

      its solved.one morq question can you tell me what is customer center and how can we run our script on that.

      • Customer center is a feature in Netsuite that allows customer to login to your Netsuite account and find their related transactions such as returns, orders, cases and whatnot. Those customer’s won’t be using a Netsuite license. You can make any Suitelet available to those users but it gets complex depending on the scenario, but it’s doable. More info here: https://www.youtube.com/watch?v=dIyK53ok8PY

        BTW, there’s also a partner center and a vendor center with similar functionalities.

        One cool trick to avoid using Netsuite licenses for people who only login to check certain records is to use one of these centers and then making a Suitelet to bypass the restriction making it run as Admin. This is a hack, but hell I love hacks. LOL.

        • shweta

          thanks

  • Esau Grover Ocrospoma Callupe

    Hi adolfo, i try to replicated in a suitelet this http://jsfiddle.net/k4rkd82o/ but no have idea to do, I import the library but no work the function Highchart. Please Help me.

    • Hey, I was able to make it work. Here’s the script: https://pastebin.com/V0CA7tN5
      Pay special attention to lines 75 (Div creation),92 (runCustomFunctions call), 106,107(header script declaration) and 130 (runCustomFunctions where Highcharts.chart is located).
      Screenshot: https://imgur.com/a/sWgeh

      • Esau Ocrospoma Callupe

        you are the best, i use this example and create a new things. thank you

  • Nikhil Gangji

    Hey Adolfo,

    I have created a suitelet within Netsuite. I have added some buttons and dropdowns in the Suitelet. I want to arrange this button and dropdown at a particular position. I tried using setlayout function from Netsuite but it wont bring a dropdown and a button together. I want a button and sublist to appear at a same line. Is it possible?

    Thanks,
    Nikhil G.

    • Not that I know of. Using Netsuite forms give you very limited capabilities to customize it. You could inject some javascript to hack the DOM to achieve this but it would be prone to breaking if Netsuite changes the UI.

  • Mike Canniff

    Hey Adolfo – I know this is an older issue, but I’m facing the same issue on using bootstrap framework. My question is how do I get data back from input fields that are displayed in HTML bootstrap. This would be the post back to the Suitelet. I’ve tried using the request parameters and request body and trying to retrieve the inline html field. Nothing seems to work. I need that data to create transactions within Netsuite. Thanks in advance!

    • Make sure your fields have a name and id like:

      And your submit button is like:

      • Mike Canniff

        Thanks for getting back to me quickly Adolfo. So you recommend to not use the standard NS button, but an HTML button. But once the Suitelet is called back on the post, what is the syntax to access the fields? I’ve tried using the document DOM and the context.request.parameters.

        • Yeah, just use an HTML button and to access the data inspect the request body/parameters and you will find it there.

  • Ibrahim

    can load oracle Jet

  • santhoumusx

    Your Information is Valueable
    We are large, information technologies and webroot antivirus services provider with a successful managed services division. Since they start offering layered cybersecurity solutions from Webroot Help desk.
    Call:- 877-301-0214

  • krup

    Thanks for this! Question – I’m trying to do POST requests through event listeners, how would i go about doing that?

    • Sorry, I am not following. Care to elaborate?

      • krup

        Yes so for example I have an HTML button on the form. When i press the button, i want to send a POST request to NetSuite to update a record.

  • Dev Ezio

    Hello Adolfo,

    I am trying to write a simple html in a suitelet, but when I compile the html it gives me without any problem but when I run it in Netsuite it does not load. (I added the library that use in my environment), share the html : https://github.com/EsauOcrospomaCallupe/IntegracionesNS/blob/master/umlClass and suitelet: https://github.com/EsauOcrospomaCallupe/IntegracionesNS/blob/master/UmlClassNS , do you have any idea what happened?

    • When you are converting the HTML into Javascript the whole code is being linearized and the comments are breaking the code. Give it a try in base64 or remove the comments.

      • Dev Ezio

        Thanks Eng. Adolfo

  • yangjian huang

    https://uploads.disquscdn.com/images/0241ae1928dece7ac9b6f7a7e59b98144a45508718d33d2c268509862aa28337.png https://uploads.disquscdn.com/images/fa0c89e2cddbe04bf0856341f812e54dbfb71189ef0e2cf998a5a2845398e9fe.jpg

    Hey Adolfo:
    I tried your script in my NetSuite Account and i failed in it,but its not completely failure,
    Firstly i copy your script and i deploy it in my account,it works as the first picture without ‘whatEver’;

    Then i tried to do something in it and i made some fault in my script,then i give up and i restore it,i refresh this page and i got the effect like the second picture as you showed to us,but its early to be happy,i refresh the page again and it turns back to the first picture.

    i’m quite confused about what factor influence it,and i’m have no idea about debug it.so i’m here to ask for some advice or experience sharing.

    thank you!

    • It’s hard to tell without looking at the modified code but something is probably breaking the HTML, that’s why the elements are not loading. Make sure the HTML is valid.

      • yangjian huang

        I think my expression is bad that you misunderstood me.
        i just copy your script completely and deploy it,i mostly failed in it by chrome,sometimes it works well.and today i invite my workmates to have a try,he did the same thing and it works well,at the same time,he visit the deployed url from my deployment,it works.
        and then i invite more mates to try this two url,someone succeed like second picture shows,most faield as the first picture shows.
        so i turned to other developer for help,and they offered one resultful solution.

        ‘//*********** After DOM loads run this: ***********
        $(function() {
        injectHeaderScripts(); //Loads Libraries that will be placed on header (Optional)
        // $(window).bind(‘load’, injectHTML); //Replaces Suitelet’s body with custom HTML once the window has fully loaded(Required)
        waitForLibraries([‘swal’], runCustomFunctions); //Runs additional logic after required libraries have loaded (Optional)
        });
        $(window).bind(‘load’, injectHTML); //Replaces Suitelet’s body with custom HTML once the window has fully loaded(Required)’

        we tried to move ‘$(window).bind()’ to the bottom of ‘ $(function() {})’,and it works well amons my mates with different navigation,at least i don’t get white html anymore.
        ps:if you wanna try to get the white html like the first picture shows,you may open the page by visitor model in chrome.
        anyway,thank you! for your reply and sharing.

        • Thanks man. I’ll check it out. I am glad you were able to debug it.

  • Lefemmenikita

    The results look awesome!

    I am only just getting my head around how to use Suitescript so I am some way away from working out how to modify this code for my purposes.

    It’s still great being able to see what is possible so thanks

  • iunsdev

    It works. But can I get the html on the file cabinet instead of adding the html line on the suitelet?

    • Yeah, that’s totally doable, just load the HTML file in the file cabinet in a variable and use it to output the html, you might need to make a couple of tweaks to the sample code.

      • dev7cooks

        Hi Adolfo – I have a scenario where the HTML POST is running to completion before I click submit on my Suitelet. Immediately after the suitelet popsup POST runs and returns my text val as undefined- this happens before submit button on the Suitelet is clicked. Any suggestions here?

  • dev7cooks

    Hi Adolfo I have a scenario where the HTML POST is running to completion before I click submit on my Suitelet. Immediately after the suitelet popsup POST runs and returns my text val as undefined- this happens before submit button on the Suitelet is clicked. Any suggestions here?

    • Looks like you are running into Ajax problems, see if your code works on other platforms. Also see if Netsuite is getting the request and responding by adding some log lines. Anyways, good luck!

  • Arnold

    Hi Adolfo,

    I have a scenario where I am displaying usernames with special characters in it like “Rühl” but after conversion from UTF_8 to BASE_64 with the function toBase64 it will be displayed like “Rühl”.
    Do you have a solution how to prevent that special characters gets corrupted like this?

    Thanks

    • Hmmmm… that’s odd cause UTF8 should support those characters so something else must be corrupting the string. You may want to try to use a custom base64 function you from other source and see if the problem persists, here’s one for example: http://www.webtoolkit.info/javascript-base64.html