How to Vuetify your Suitelet on Netsuite. Part 1

During my time working with Netsuite, I have heard several times that the Suitelet UI is not pretty for the end-users. And I agree, nowadays there powerful front-end frameworks that assist us in developing SPA (Single Page Applications).

Therefore, I had a question, what can we do for those users?

The solution that I found was Vuetify. And according to the website

Vuetify is a complete UI framework built on top of Vue.js. The goal of the project is to provide developers with the tools they need to build rich and engaging user experiences. Unlike other frameworks, Vuetify is designed from the ground up to be easy to learn and rewarding to master with hundreds of carefully crafted components from the Material Design specification.

In the following paragraphs, I will provide an example of how to use it in a Suitelet using Suitescript 2.1.

Let’s work

For this example, we will need 3 files

• The Suitelet Script
• The HTML file
• The Component Logic Script

Creating the Suitelet Script

For this script, we will need the following modules

• N/render: This module assists us in loading the HTML file in a Suitelet.
• N/search: If we deploy the project in different accounts, a search helps us identify the files’ IDs.
• N/file: This module will load the content of a HTML file.

First thing first, creates the Suitelet file.

A nomenclature can be helpful to identify your scripts, such as <company>_<description>_<script_type>.

The next is to create the functions. Feel free to copy and paste the code. I will explain it later.

In the first section, we will find the JSDoc tags that Netsuite requires to identify the Script Type and the Suitescript Version.

Inside the define statement, the getHtmlTemplate function will be in charge of getting the file ID and URL using a search (the URL will be necessary later).

The second function is the entry point of the script. Where, the script will catch all requests. Therefore, it will load the HTML file when the GET request is received.

• The first line creates a TemplateRenderer object, and it will produce the HTML.
• The second line calls our function to get the information of the file vuetify_form.html
• The next line loads the HTML file and stores it in the htmlFile constant.
• Then, it assigns the content of the HTML file to the templateContent renderer attribute.
• Finally, the response will show the HTML page.

The second file is the HTML template

Lucky us, Vuetify provides an example to use it with CDN. Let’s take the boilerplate.

Get started with Vuetify — Vuetify (vuetifyjs.com)

As we can notice, it is a Hello World. But it would be nicer if we replaced it with a “veautiful” component.

We will choose a component that does not have any Script section to verify that everything was set up correctly. For instance, the badges example can work perfectly.

Badge component — Vuetify (vuetifyjs.com)

So far, we have everything to deploy our Suitelet with Vuetify embedded.

Deploying the Suitelet on Netsuite

Firstly, we upload both files

• Suitelet Script
• HTML Template

Once the files are in the Netsuite file cabinet. We will create the Script Record

Then, the deployment record

Let’s hit the link and observe the Vuetify component running on Netsuite.

At this point, everything was set up correctly. However, there is a missing file, the Component Logic Script. To add this last file, we need to modify the previous code.

Modifying Suitelet Script

We will add a new parameter in the getHtmlTemplate function, which will be included in the filters. As a result, the function will look like this.

Then, we add the Logic Component file name when the script calls the getHtmlTemplate function.

After that, we will use the renderer function addCustomDataSource which assists in including data in the template. Finally, the function will look like this.

Modifying HTML Template

First, we will remove everything inside the div element and JS code inside the last script element.

Then, a new script element will be added inside of the body, and we complement it by adding v-app and v-container elements.

At this point, we require a new Vuetify component, so I will choose the form component.

Form component — Vuetify (vuetifyjs.com)

We take the HTML boilerplate and put it inside the v-container. Therefore, the element will be similar to this.

Last but not least, we need to include the data source that we assigned in the renderer.

The third file the Logic Component.

This is straightforward. We need to put the Script boilerplate that Vuetify provides in the form component example.

Almost done.

The final step is to update the files

• Suitelet File
• HTML template

And upload the Logic Component script.

You did it. Just refresh the Suitelet, and the component will be running smoothly.

I hope you enjoyed reading this article, and let me know if you plan to use Vuetify in your next project.

Stay tuned for part 2