I generally put my raw HTML in the File Cabinet wi...
# suitescript
e
I generally put my raw HTML in the File Cabinet with any placeholders where data or other injections will go (similar to any templating syntax like handlebars et al), then my Suitelet can load the file, replace any placeholders or otherwise manipulate the file contents before rendering.
w
What you say makes sense but I'm not quite sure how to go about loading the HTML file back in as a variable or using the place holders. Would you be able to share a small example? Thanks
e
Copy code
<!-- /SuiteScripts/my-project/main.html -->
<!DOCTYPE html>
<html>
<head>
  <style>MP_STYLE</style> <!-- I have found link tags can be unreliable -->
</head>
<body>
  <h1>My name is MP_NAME</h1>
</body>
</html>

/* /SuiteScripts/my-project/main.css */
h1 {
  color: green;
  font-weight: bold;
}

// /SuiteScripts/my-project/suitelet.js
define(["N/file"], function (f) {
  function onRequest(context) {
    var cssContents = f.load({id: "SuiteScripts/my-project/main.css"}).getContents();
    var myName = "Eric";
    var htmlContents = f.load({id: "SuiteScripts/my-project/main.html"}).getContents()
      .replace(/MP_STYLE/, cssContents)
      .replace(/MP_NAME/, myName);

    context.response.write(htmlContents);
  }

  return { onRequest: onRequest };
});
^ off the top of my head, so untested, but should give you an idea
w
Awesome.. I found some stuff in SuiteAnswers and starting to read about Handlebars also.. thank you very much.
Thanks again.. I was able to get this to work and it has cleared out my error and gave me an easy to read/edit HTML file.
👍 1
e
+👍 That's what I like about the approach; has a nice separation of concerns without an elaborate framework
Although if it is warranted, by all means use an elaborate framework 🙂
w
I'm still learning.. so simple works.. and to be able to split the files off so I can easily read them just makes sense. I already do it for my Advanced PDFs and it's so simple now to edit one file and it essentially updates 4 templates. 🙂