Обзор пользовательских виджетов

Создание собственных виджетов в Tulip с помощью HTML, CSS и JavaScript

Обзор пользовательских виджетов

Создание собственных функций в Tulip с помощью HTML, CSS и JavaScript. Библиотека виджетов доступна здесь: https://tulip.co/library/?query=Widgets

Введение

Элементы, которые вы перетаскиваете в свое приложение, называются "виджетами". Это могут быть кнопки, изображения, поля ввода и все остальное, доступное на панели инструментов.

Пользовательские виджеты позволяют писать собственный код и создавать собственные виджеты, которые затем можно перетаскивать в приложение и взаимодействовать с ними. Эта возможность позволяет пользователям Tulip расширить границы возможного в Tulip.

В этой статье мы дадим краткий обзор того, как работают пользовательские виджеты.

Основы работы с пользовательскими виджетами

Окно управления пользовательскими виджетами находится на странице настроек учетной записи. Здесь можно создавать и удалять виджеты. Редактор пользовательских виджетов позволяет писать код виджета, создавать реквизиты и события, а также осуществлять предварительный просмотр виджета. Ниже приведена схема, описывающая реквизиты и события:

Реквизиты: Реквизиты - это данные, которыми обмениваются пользовательские виджеты и приложения Tulip. Реквизиты отображаются в редакторе приложений и позволяют редакторам приложений выбирать, какие переменные, записи таблицы или другую информацию связать с реквизитом.

События: События - это сигналы, которые ваш виджет может посылать приложению. События позволяют приложению реагировать на них с помощью триггера и могут нести в себе информацию.

Пользовательские виджеты доступны через селектор Custom down в редакторе приложений.

Создание виджета

:::(Warning) (Внимание) Только пользователи, имеющие доступ к настройкам учетной записи (Account Owners), могут получить доступ к пользовательскому интерфейсу редактирования виджетов. :::

Окно редактора виджетов состоит из четырех разделов. Код, который вы пишете в левой нижней секции, появится в секции предварительного просмотра после того, как вы нажмете кнопку мыши в секции предварительного просмотра. Значения параметров могут быть изменены непосредственно в секции предварительного просмотра для целей тестирования.

Специальные функции для взаимодействия с реквизитами и событиями.

Получение значений реквизитов

:::(Warning) (Предупреждение) Не гарантируется, что реквизит, используемый виджетом, загрузится до загрузки виджета, поэтому все реквизиты, связанные с полями записей таблицы, агрегатами или любыми другими динамическими значениями, должны содержать логику для поддержки случаев, когда в момент загрузки виджета они равны нулю. Подробнее о запуске логики при изменении реквизита см. в этом разделе.
:::

//Получение значения реквизита getValue('My Prop');``//Сохранение реквизита в переменной let myVariable = getValue('My Prop');

Действия при изменении реквизита

//Делаем что-нибудь при изменении значения реквизита getValue('My Prop', (internalVariable) => { doSomething(internalVariable); });

Установка значения реквизита

```Установка значения реквизита setValue('My Prop', value_to_set);

//Устанавливаем значение текстового реквизита в 'hello!' setValue('My Text Prop', 'hello!');

//Установить значение элемента в объекте setValue('My Object Prop', { 'Key inside object': 'new value' }); ```

Вызов события

```Вызов события fireEvent('event', payload);

//выполнение события без полезной нагрузки fireEvent('My Event');

//выполнение события с полезной нагрузкой fireEvent('My Event', myVariable); ```

Видео с примером сборки виджета

Импорт/экспорт приложений

Экспорт

1. В окне обзора пользовательских виджетов выберите 3 точки рядом с виджетом, который необходимо экспортировать.

1. Выберите "Экспорт".

Импорт

1. На экране обзора пользовательских виджетов выберите 3 точки в верхней части экрана.

1. Выберите "Импорт".

1. Найдите файл пользовательского виджета в формате .json.

Включение внешних библиотек

Внешние библиотеки позволяют расширить возможности пользовательских виджетов. Внешние библиотеки выполняют большую часть грязной работы по написанию html непосредственно на JavaScript. Внешние библиотеки должны быть включены для каждого виджета, в котором вы хотите их использовать.

1. Находясь в своем виджете, щелкните на меню с тремя точками на ленте.

1. Выберите пункт "Включить внешнюю библиотеку".

1. Выберите расширение, которое вы хотите включить.

Здесь приведено основное описание того, что делает каждое из них, многие из них превосходят друг друга во многих областях, поэтому не стесняйтесь исследовать их.

• jQuery - позволяет более рационально выбирать html-элементы, а также манипулировать ими.
• D3 - золотой стандарт визуализации данных, сложная кривая обучения, но огромная гибкость.
• Google Visualization - отличный инструмент для визуализации, как следует из названия.
• javaascript-Ip-solver - Ip solver - это внешняя библиотека, которая может выполнять сложные вычисления для решения уравнений.
• Lodash - Lodash предоставляет множество инструментов, облегчающих работу с типами данных javascript.
• ChartJS - Простейшая библиотека для построения графиков с множеством онлайн-ресурсов.
• Moment - Moment предоставляет множество инструментов для работы с датами и временем.