https://netsuiteprofessionals.com logo
Join Slack
Powered by
so this is a more general question , i have a su...
# suitescript
s
so this is a more general question , i have a sutlet that displays a table i was wondering were do i add all the client-side code like function that should execute on click etc
to my understanding suit let is server-side rendering
b
what does the suitelet look like
s
an html table
i used Tim Dietrich idea suite frame
b
dont know what that is
there are too many ways to implement an html table with a suitelet
you need to narrow it down
s
Copy code
var htmlField = form.addField({
      id: "custpage_field_html",
      type: serverWidget.FieldType.INLINEHTML,
      label: "HTML",
    });
    htmlField.defaultValue = html;
    context.response.writePage(form);
this is server side rendinering
b
still not enough code, the boring answer is you modify whatever the html variable is getting its value from
or you add another inline html field with your script element
s
i dont want a page refersh onclick
b
nothing you shared or i shared has anything to do with refresh
s
Copy code
tbody += `<td><a href="#" data-value=\"${main.sku}\" onclick="myFunction(this)">Click Me</a></td>`;
Copy code
function myFunction(data, element) {
        var value = element.getAttribute("data-value");
        console.log(value);}
the first is server side on get request is builing the page
the 2nd is client do this onclick
b
you still havent shared enough
i have to make the assumption that tbody goes somewhere into the html variable at some point
s
yes html += tbody
b
in the same way, you need to make a script element that goes into the html variable
s
i could add script tag then it would not have acccsees to any netsuite modules or secrets
b
you probably want to take a look at how netsuite makes its button work
go make a form suitelet, attach a client script to it and add a button that uses a function in that client script, and then inspect the button's onclick
s
i think you missing the point
b
the short answer is that it uses the require Function
e
You potentially want to attach a Client Script to your 
Form
instance via its clientScriptModulePath property, then all your client side code goes there.
s
thank you all i just want to make sure im not missing something
Copy code
form.clientScriptModulePath = "./client-side-sutefarame.js";
do i need to create a script record or the fact it is insde the file cabinet
c
You don't need to create a script record no
As long as it's in the file cabinet, in the case of the snipped you posted, it needs to be in the same folder as the suitelet.
s
thank you
the onclikc doesnt seem to be working
Copy code
define(["N/https"], function (https) {
  function initPage(scriptContext) {
    // Add your initialization logic here
    console.log("Suitelet page initialized.");

    // Add event handlers, manipulate the DOM, or perform any other necessary actions
  }
  function myFunction(element) {
    var value = element.getAttribute("data-value");
    alert("Button clicked!");
  }
  return {
    initPage: initPage,
    myFunction: myFunction,
  };
});
this is the a tag
Copy code
<td><a href="#" data-value=\"${main.sku}\" onclick="myFunction(this)">Click Me</a></td>
c
So attaching a client script to suitelet doesn't work the same way as deploying a client script - I don't believe the usual entry points will work. The script will run the callback function when the page is loaded.
s
I want to call myFunction only onclick
c
hopefully someone corrects me if I'm wrong here, but you'd have to ditch the initPage function and return statement, and do something more like this:
Copy code
define(["N/https"], function (https) {

  // Add your initialization logic here
  console.log("Suitelet page initialized.");

  // Add event handlers, manipulate the DOM, or perform any other necessary actions
  element.addEventListener('click', myFunction)

  function myFunction(element) {
    var value = element.getAttribute("data-value");
    alert("Button clicked!");
  }
});
s
so the onclick attr of the <a> tag wont work I have to add an event listener
c
From my experience, yes
You might be able to use jQuery, I just don't know jQuery, haha
s
outside of netsuite this is very simple
which i could do via a script tag but im trying to make ajax request and need auth token which is stored inside netsuite
b
the amd modules used by suitescript are designed so that they dont add to the global scope
Copy code
onclick="myFunction(this)
relies on myFunction being in the global scope
if you wish to use the onclick attribute, then you need to modify your client script to add myFunction to the global scope, usually via the window variable
@Corey Schwoebel provided an alternative, which was to use an event handler function instead
thats favored in general since mixing your javascript with your html is generally frowned upon
his example misses one of the key things you need to do, which is to select your element, which is fairly easily to do using document.getElementById
my alternative was to just use a script element, like the example you are working from
which you rejected since you didnt know how to use suitescript 2 modules using that method
the answer for that is to use the require function to access suitescript modules, and i directed you to see how netsuite uses the require function to see how it work, or alternatively the documentation that netsuite provides for it
in general knowing how to use the require function is how you quickly run suitescript code in netsuite, both in the suitescript debugger or in the ui
any of the methods shared with you are capable of working, with the one you choose primarily being chosen by how your suitelet works
you dont really want to use multiple different methods of attaching code, so be consistent and do whatever your suitelet is currently doing
s
First document.getElementById when the id is being set dynamically it is button on every row of a table
"my alternative was to just use a script element, like the example you are working from" do you mean to require event custom netsuite client scripts ?
"which you rejected since you didnt know how to use suitescript 2 modules using that method " never rejected wasnt sure how inside a script tag i could require even my custom cleint script for example we have a client script for auth to an external APi
@battk
b
you can use document.getElementById multiple times, or document.querySelectorAll, or you can find the actual table instead to iterate through its rows to find the anchor elements
there are lots of options for finding elements in html
if you want to use a script element instead, then you need to learn how to use require to use the suitescript 2 api
s
the first option doesn't work as each row could have multiple a tags
that being said, yes i have never import netsuite modules using 
require()
instead of 
define()   ,does this require() work differently then let's say a normal require module in node.js ?? It seems yes AMD / NETSUITE require() takes a callback function vs commanjs doesn't
Also @battk I wasn't born yesterday I know what query selector are
b
same answers as before, nothings stops you from using document.getElementById multiple times, or using any of the other query selectors
and you need to experiment with require function, its the amd require, not the common js require
s
Copy code
<script> function  myrailsrequest(element){
        require(["./client-side-suitefarame.js", "../amazonFBa /auth.js"], function (module,railsAuth) {
            let token = module.myFunction(element);
            railsAuth.rails_api_call_post(url, response_token, payload)
            // existing code here
          })
        }
    </script>
does it need an absolute path? the module is undefinded
b
you can use a relative path if you use the multiple versions of require to get a require that uses a different baseUrl
you actually have to follow the rules for module ids to avoid it skipping the baseUrl path logic
that includes no ending in .js
its usually easier to use absolute paths, or as netsuite does it, use a top level module with an absolute path and the dependencies of that top level module can use relative paths
6 Views
Open in Slack
PreviousNext
Powered by