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

If you just want to show some data, use render module to render your custom Html page. — Mohammad Mattour, Jan 11 '22 at 01:44

score 1 · Accepted Answer · answered Jan 07 '22 at 00:18

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,
  };
});

answered Jan 07 '22 at 00:18

Nathan Sutherland

1,191
7
9

Thanks for the suggestion Nathan. I have edited the code to incorporate your suggested structure. I am getting the following error message note: Notice (SuiteScript) org.mozilla.javascript.EcmaError: ReferenceError: "html" is not defined. (/SuiteScripts/sdf_ignore/freemarker suitelet.js#95) I have tried to include the var html field definition before the format issues function return line though that doesn't give me any results either (the page loads with just a header) – Vernita Jan 09 '22 at 04:40
Can you post your updated code in an edit? – Nathan Sutherland Jan 09 '22 at 20:59
I had edited my original post with the new code...is that what you mean? – Vernita Jan 10 '22 at 06:01
2

@Lefemmenikita Isn't this due to ```var htmlField = html.addField({``` - which should have been ```form.addField```? – cjs1978 Jan 10 '22 at 15:21
2

yes @cjs1978, that is correct. – Nathan Sutherland Jan 10 '22 at 15:30
@Lefemmenikita, the "freemarker suitelet.js#95" tells you the line# where your error was encountered. – Nathan Sutherland Jan 10 '22 at 15:39
Thank you cjs1978 and Nathan Sutherland! This worked. I thought maybe I needed to declare the 'add field' earlier in the script but it was the use of 'html' instead of 'form' This had been driving me nuts so thank you for your help – Vernita Jan 11 '22 at 08:59

score 0 · Answer 2 · answered Jan 06 '22 at 15:59

0

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.

answered Jan 06 '22 at 15:59

Pierre Plourde

708
4
12

I have tried this though that doesn't hold the html mark up that is created from the getIssues function – Vernita Jan 07 '22 at 21:19

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

2 Answers2