https://netsuiteprofessionals.com logo
Join Slack
Powered by
how can I add a refresh button to our Suitelet for...
# suitescript
s
how can I add a refresh button to our Suitelet form for the response of a post request? FYI the the suitlet is used both for post and get
Copy code
if (method == "POST") {
      syncData(params);
    } else {
      widget(options);
    }
function syncData(params) {
      let type = params.selectfield;
      //// post take data from post params and get url form url  and display response

      let syncData = railsSync.getSyncObject(type, mainUrl);
      var form = serverWidget.createForm({
        title: syncData.title,
        hideNavBar: false,
      });
      var orderid = form.addField({
        id: "orderid",
        type: serverWidget.FieldType.INLINEHTML,
        label: "API Response",
      });........
var infoHTML =
        "<div class='info-container'>" +
        `<p style=color:${worker_status.color}><strong>API Code :</strong> ` +
        worker_status.code +
        "</p>" +
        `<p style=color:${worker_status.color}><strong>Response:</strong> ` +
        worker_status.body +
        "</p>" +
        "</div>" +
        `<style>.info-container {
    font-size: 20px;
  }</style > `;
      orderid.defaultValue = infoHTML;
  options.response.writePage(form);
n
If you refresh the post screen its going to resubmit the data you've already processed. Which i think you know and is why you are asking. Just wanted to get that out there first. What you could do is add a button that mimics a refresh, but actually just calls the GET stage with some parameter set. Then have a switch in your GET code, if that parameter is passed, load the POST form with your updated data. Instead of resubmitting the actual post request
You could also host your post request form inside an iframe and just refresh the frame instead of the page. I've used something similar before to create a progress bar on a POST screen that shows a Map/Reduce's progress.
s
no i stay away from iframe
😆 2
i can add the button but how do i add the functionalty
Copy code
form.addButton({
        id: "custom_refresh_button",
        label: "Refresh",
        functionName: "refreshPage",
      });
n
You'll need to attach a client script to the form with a function 'refreshPage' that redirects you back to the suitelet with the parameter you want
Here is a really terrible function i have to do something similar lol
Copy code
function reloadPageWithParams(paramsObj) {
    try {
      // get current url
      const currentUrl = document.location.href;

      // clear out any existing parameters from the url
      let url = currentUrl.split('?')[0] + '?';
      url += currentUrl.split('?')[1].split('&')[0] + '&' + currentUrl.split('&')[1] + '&';

      // add new parameters to the url
      Object.keys(paramsObj).forEach((param) => {
        url += `${param}=${paramsObj[param]}&`;
      });

      // stop page from asking to reload
      window.onbeforeunload = null;

      // reload page with url + params
      window.location.replace(url);
    } catch (e) {
      console.log(e);
    }
  }
should give you the idea though
r
Use the 
N/url
module's resolveDomain and resolveScript with window.location.replace or similar
☝🏻 1
Untitled.js
Untitled.js
FYI, you can use params like this ^
s
i have the URL my question is how to fire the function with out creating a whole additional script
r
you need a client script if you want to handle the button event
s
I tried adding a tag to the html
Copy code
var orderid = form.addField({
        id: "orderid",
        type: serverWidget.FieldType.INLINEHTML,
        label: "API Response",
      });
var infoHTML =
        "<div class='info-container'>" +
        `<p style=color:${worker_status.color}><strong>API Code :</strong> ` +
        worker_status.code +
        "</p>" +
        `<p style=color:${worker_status.color}><strong>Response:</strong> ` +
        worker_status.body +
        "</p>" +
        "</div>" +
        `<button type="button" id="refreshButton" style="background-color: blue; color: white;">Refresh</button>
        <style>.info-container {
    font-size: 20px;
  }</style ><script>
  // Adding a click event listener to the button
  document.getElementById('refreshButton').addEventListener('click', function() {
    window.location.href = ${href};
    console.log(${href});
  });
</script>
orderid.defaultValue = infoHTML
the script tag is saved to the page but seems "dead" and wont function
r
suitelets run on the server side. you need client side handling
s
I thought if isent this ver the wire it would work
im getting a error i have not seen before INVALID_API_VERSION_FOR_FORM","
Copy code
form.clientScriptModulePath = "../clientRefresh.js";
    form.addButton({
        id: "custom_refresh_button",
        label: "Refresh",
        functionName: "refreshPage()",
      });
r
It's complaining about your JSDoc tags (i.e. 
@NApiVersion
)
s
Copy code
/**
 * @NApiVersion 2.1
 * @NScriptType Suitelet
 */
r
how about the client script?
s
missing lol
👍 1
how can i pass parms from the suitelet button to the client script
r
I know that will work if 
someVar
is a string.
You need to return the function from 
functionName
as an entry point function in your client script. Accept a named variable in that function.
Alternately, you can use the form APIs from the client side.
s
what is the form api ?
r
s
I just realized let the client script just call
Copy code
history.back();
r
Ya, that's not going to be everything you hope. If you click submit more than once, weird things happen
You'll have to hit back over and over
Attaching client scripts and passing parameters and calling to / redirecting to back end services from the client side are essential skills. Best to pull that bandaid off now. NetSuite dev is "full stack"
ex. client script
Untitled.js
s
I have attached client scripts before, from my experience Netsuite has gotten very funking with passing params when calling function un button submit like this
Copy code
form.clientScriptModulePath = "../clientRefresh.js";
      form.addButton({
        id: "custom_refresh_button",
        label: "Refresh",
        functionName: "refreshPage()",
      });
r
is the client script function running? have you tested logging from the console?
in chrome you can access the console using CTRL-SHIFT-J and 
console.log('test')
from the client script
s
i know this is not my first rodio i am full stack dev i know how to console log
yes the client sciprt is working and console logging
you way throws this error , which I have seen before when passing params to function , since you giving it a string for the name of the function to call
Copy code
Uncaught SyntaxError: missing ) after argument list
r
Don't know what to tell you. I have done this successfully.
show your form.addButton. It sounds like there is no trailing parenthesis.
s
Copy code
form.clientScriptModulePath = "../clientRefresh.js";
      form.addButton({
        id: "custom_refresh_button",
        label: "Refresh",
        functionName: "refreshPage(" + href + ")",
      });
update: the syntax was wrong and that is what was throwing the error
Copy code
`refreshPage("${href}" )`,
💯 1
r
you could use the tick marks and just remove the quotation marks as well. remove that space too. not sure if that matters but it's not needed
s
enclosing the href in a sting makes sure it will be treated as a string and not JS trying to interpret it s
52 Views
Open in Slack
PreviousNext
Powered by