За время работы с 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