OverView

NetSuite’s standard N/ui/dialog does not provide a dialog with input items.

In this article, we will show you how to create your own module to realize a dialog with input items.

1.Create input dialog module

/**
 * inputDialog.js
 * @NApiVersion 2.0
 */
define([],
  function () {
    function create(context,success) {
      var dialog = document.createElement("dialog");
      dialog.id = "inputDialog";
      var modal_header = document.createElement("div");
      modal_header.append(context.title);
      var form = document.createElement("form");
      form.method="dialog";
      var modal_body = document.createElement("div");
      var label_p = document.createElement("p");
      var label = document.createElement("label");
      label.for = "input";
      label.append(context.input);
      label_p.append(label);
      var textarea_p = document.createElement("p");
      var textarea = document.createElement("textarea");
      textarea.id = "input";
      textarea.name = "input";
      textarea.rows = "5";
      textarea.cols = "33";
      textarea_p.append(textarea);
      modal_body.append(label_p,textarea_p);
      var modal_footer = document.createElement("div");
      var submit = document.createElement("button");
      submit.id = "submit";
      submit.type="button";
      submit.append("Submit")
      var cancel = document.createElement("button");
      cancel.id="cancel";
      cancel.type="button";
      cancel.formmethod="dialog"
      cancel.append("Cancel")
      modal_footer.append(submit,cancel);
      form.append(modal_body, modal_footer);
      dialog.append(modal_header,form);
      document.getElementById("body").append(dialog);
      dialog.showModal();
      return new Promise(function(resolve,reject) {
        submit.addEventListener('click', function(event) {
          var closeDialog = this;
          submit.disabled = true;
          cancel.disabled = true;
          var result;
          successFunc(success,textarea.value)
          .then(function () {
            result = true;
          }).catch(function (error) {
            result = false;
          })
          .finally(function(){
            closeDialog.closest('dialog').close();
            dialog.remove();
            if(result) resolve(true);
            else reject();
          });
        }, false);
        cancel.addEventListener('click', function() {
          this.closest('dialog').close();
          dialog.remove();
          resolve(false);
        }, false);
      });
    }
    function successFunc(success,result) {
      return new Promise(function(resolve){
              resolve(success(result));
       });
    }
    return {
      create: create
    };
});

Note that NApiVersion can be 2.1, but in that case it cannot be called from scripts using 2.0.

If decoration is required, apply css as follows.

modal_header.style.cssText = [
    "padding: 1em"
    ,"margin: 0"
    ,"padding-bottom: 0.6em"
    ,"background-color: hsl(211, 90%, 93%)"
    ,"border-top-left-radius: 0.6rem"
    ,"border-top-right-radius: 0.6rem"
    ,"border-bottom: 1px solid hsl(211, 51%, 65%)"
    ,"font-weight: bold"
].join(";");

2.Examples of Use

Let’s take an example of a call from a button created with userEvent.

function onButtonClick(){
  const context = {
    title: 'Title',
    input: 'Input'
  }
  inputDialog.create(context,submitFunc)
  .then(function(result) {
    if(result) //result => true = submit,false = cancel 
  }).catch(function(error) {
    alert(error);
  });
  function submitFunc(input) {
    console.log(input);
  }
}

3.Notes

The module you create will be used on the client side.

As NetSuite developers with some experience may know, there is no fudging of permissions on the client side.

If the input dialog is used from a button created on the server side, it is possible to circumvent permission-related restrictions by passing the necessary data as parameters.