За время работы с Netsuite я несколько раз слышал, что пользовательский интерфейс Suitelet не очень удобен для конечных пользователей. И я согласен, в настоящее время существуют мощные интерфейсные фреймворки, которые помогают нам в разработке SPA (одностраничных приложений).

Поэтому у меня возник вопрос, что мы можем сделать для этих пользователей?

Решение, которое я нашел, было Vuetify. А по данным сайта

Vuetify — это полная структура пользовательского интерфейса, построенная на основе Vue.js. Цель проекта — предоставить разработчикам инструменты, необходимые им для создания богатого и привлекательного пользовательского интерфейса. В отличие от других фреймворков, Vuetify с самого начала разработан так, чтобы его было легко освоить и освоить с сотнями тщательно созданных компонентов из спецификации Material Design.

В следующих абзацах я приведу пример того, как использовать его в Suitelet с помощью Suitescript 2.1.

Давай работать

Для этого примера нам понадобится 3 файла

  • Скрипт Suitelet
  • Файл HTML
  • Сценарий логики компонента

Создание скрипта Suitelet

Для этого скрипта нам понадобятся следующие модули

  • N/render: этот модуль помогает нам загрузить файл HTML в Suitelet.
  • N/поиск: если мы развертываем проект в разных учетных записях, поиск помогает нам определить идентификаторы файлов.
  • N/file: этот модуль загрузит содержимое файла HTML.

Первым делом создается файл Suitelet.

Номенклатура может быть полезна для идентификации ваших скриптов, например ‹компания›_‹описание›_‹script_type›.

Далее необходимо создать функции. Не стесняйтесь копировать и вставлять код. Я объясню это позже.

В первом разделе мы найдем теги JSDoc, которые требуются Netsuite для определения типа скрипта и версии Suitescript.

Внутри оператора определения функция getHtmlTemplate будет отвечать за получение идентификатора файла и URL-адреса с помощью поиска (URL-адрес понадобится позже).

Вторая функция — это точка входа скрипта. Где скрипт будет ловить все запросы. Поэтому он будет загружать файл HTML при получении запроса GET.

  • Первая строка создает объект TemplateRenderer и создает HTML.
  • Вторая строка вызывает нашу функцию для получения информации о файле vuetify_form.html.
  • Следующая строка загружает файл HTML и сохраняет его в константе htmlFile.
  • Затем он присваивает содержимое файла HTML атрибуту средства визуализации templateContent.
  • Наконец, ответ покажет страницу HTML.

Второй файл — это HTML-шаблон.

К счастью, Vuetify предоставляет пример использования с CDN. Возьмем шаблон.

Начните работу с Vuetify — Vuetify (vuetifyjs.com)

Как мы видим, это Hello World. Но было бы лучше, если бы мы заменили его компонентом «vкрасивый».

Мы выберем компонент, у которого нет раздела Script, чтобы убедиться, что все настроено правильно. Например, пример со значками может работать отлично.

Компонент значка — Vuetify (vuetifyjs.com)

На данный момент у нас есть все для развертывания нашего Suitelet со встроенным Vuetify.

Развертывание Suitelet на Netsuite

Во-первых, мы загружаем оба файла

  • Скрипт Suitelet
  • HTMLШаблон

Как только файлы окажутся в картотеке Netsuite. Мы создадим запись сценария

Затем запись развертывания

Перейдем по ссылке и посмотрим, как компонент Vuetify работает в Netsuite.

На данный момент все настроено правильно. Однако отсутствует файл Сценарий логики компонента. Чтобы добавить этот последний файл, нам нужно изменить предыдущий код.

Изменение сценария Suitelet

Мы добавим новый параметр в функцию getHtmlTemplate, который будет включен в фильтры. В результате функция будет выглядеть так.

Затем мы добавляем Логический компонент имя файла, когда скрипт вызывает функцию getHtmlTemplate.

После этого мы воспользуемся функцией визуализации addCustomDataSource, которая помогает включать данные в шаблон. В итоге функция будет выглядеть так.

Изменение HTML-шаблона

Во-первых, мы удалим все внутри элемента div и JS-код внутри последнего элемента скрипта.

Затем внутри body будет добавлен новый элемент скрипта, и мы дополним его, добавив v-app и v- элементы контейнера.

На данный момент нам требуется новый компонент Vuetify, поэтому я выберу компонент form.

Компонент формы — Vuetify (vuetifyjs.com)

Мы берем шаблон HTML и помещаем его в v-контейнер. Поэтому элемент будет похож на этот.

И последнее, но не менее важное: нам нужно включить источник данных, который мы назначили в средстве визуализации.

Третий файл Logic Component.

Это просто. Нам нужно поместить шаблон скрипта, который Vuetify предоставляет в пример компонента формы.

Почти готово.

Последний шаг — обновить файлы

  • Файл Suitelet
  • HTML-шаблон

И загрузите скрипт логического компонента.

Ты сделал это. Просто обновите Suitelet, и компонент будет работать без сбоев.

Надеюсь, вам понравилось читать эту статью, и дайте мне знать, если вы планируете использовать Vuetify в своем следующем проекте.

Оставайтесь с нами для части 2