How do I add an inline HTML field to a Suitelet to hold html markup?

Question

Edit: code updated I am trying to follow along with this blogpost which shows how to create a Suitelet which has a formatted table https://followingnetsuite.com/2020/10/16/skip-freemarker-by-delivering-saved-search-results-in-a-suitelet/

The blog post references adding a inline html field to hold the html mark up. I have tried to add this to the code though I know I am way off:

    /**
     *@NApiVersion 2.x
     *@NScriptType Suitelet
     */

define(["N/search", "N/ui/serverWidget"], function (search, ui) {
  function onRequest(context) {
    if (context.request.method === "GET") {
      var form = ui.createForm({ title: "freemarker test" });

      function getIssues() {
        var issues = new Array();

        var mySearch = search.load({
          id: "customsearchcustomerallview",
        });

        var myPages = mySearch.runPaged({ pageSize: 1000 });

        for (var i = 0; i < myPages.pageRanges.length; i++) {
          var myPage = myPages.fetch({ index: i });
          myPage.data.forEach(function (result) {
            var issue = {};
            mySearch.columns.forEach(function (col, index) {
              issue["column_" + index] = {
                label: col.label,
                text: result.getText(col),
                value: result.getValue(col),
              };
            });
            issues.push(issue);
          });
        }
        return issues;
      }
      function formatIssues(issues) {
        var html = new Array();

        html.push('<table class="RPT">');
        html.push("<thead>");

        if (issues.length > 0) {
          var issue = issues[0];

          html.push("<tr>");
          for (var i = 0; i < 20; i++) {
            if (issue.hasOwnProperty("column_" + i)) {
              var sortType = isNaN(
                issue["column_" + i].text || issue["column_" + i].value
              )
                ? "string"
                : "float";
              html.push(
                '<th data-sort="' +
                  sortType +
                  '">' +
                  issue["column_" + i].label +
                  "</th>"
              );
            }
          }
          html.push("</tr>");
        }

        html.push("</thead>");
        html.push("<tbody>");

        issues.forEach(function (issue) {
          html.push("<tr>");
          for (var i = 0; i < 20; i++) {
            if (issue.hasOwnProperty("column_" + i)) {
              var vAlign = isNaN(
                issue["column_" + i].text || issue["column_" + i].value
              )
                ? "left"
                : "right";
              html.push(
                '<td align="' +
                  vAlign +
                  '">' +
                  (issue["column_" + i].text || issue["column_" + i].value) +
                  "</td>"
              );
            } else {
              break;
            }
          }
          html.push("</tr>");
        });

        html.push("</tbody>");
        html.push("</table>");

        return html.join("\n");
      }
      var htmlField = html.addField({
        id: "custpage_html",
        label: "html",
        type: ui.FieldType.INLINEHTML,
      });
      htmlField.defaultValue = formatIssues(getIssues());
      context.response.writePage(form);
    }
  }

  return {
    onRequest: onRequest,
  };
});

I can't see the correct way to add this though. Where do I add the inline html field?

For a Suitelet, does the 'context.response.writePage(form)' need to be at the end of the rest of the code? (i.e. after the function that relates to the html markup?

Thanks

Answer 1

Add your HTML via the defaultValue property of the Inline HTML Field. Structure your script as follows:

    /**
    *@NApiVersion 2.x
     *@NScriptType Suitelet
     */
define(["N/search", "N/ui/serverWidget"], function (search, ui) {
  function onRequest(context) {
    if (context.request.method === "GET") {
      var form = ui.createForm({ title: "freemarker test" });

      function getIssues() {
        var issues = [];
        return issues;
      }

      function formatIssues(issues) {
        var html = [];
        return html.join("\n");
      }

      var htmlField = form.addField({
        id: "custpage_html",
        label: "html",
        type: ui.FieldType.INLINEHTML,
      });
      htmlField.defaultValue = formatIssues(getIssues());
      context.response.writePage(form);

    }
  }

  return {
    onRequest: onRequest,
  };
});

or, if you don't need any other NetSuite Form elements:

    /**
    *@NApiVersion 2.x
     *@NScriptType Suitelet
     */
define(["N/search"], function (search) {
  function onRequest(context) {
    if (context.request.method === "GET") {

      function getIssues() {
        var issues = [];
        return issues;
      }

      function formatIssues(issues) {
        var html = [];
        return html.join("\n");
      }

      context.response.write(formatIssues(getIssues()));

    }
  }

  return {
    onRequest: onRequest,
  };
});

Answer 2

You add the field to your form by calling Form.addField from your form object:

var field = html.addField({
    id : 'custpage_inlineresults',
    type : serverWidget.FieldType.INLINEHTML,
    label : 'Search Results'
});

See SuiteAnswer #43669.