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

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

:::(Error) (Ограничение) Эта функция доступна только для тарифных планов Professional и выше. :::

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

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

Посмотрите следующее обзорное видео для быстрого погружения в эту функцию:

Проверьте пользовательские виджеты в библиотеке Tulip!

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

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

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

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

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

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

:::(Warning) (Внимание) Только пользователи с доступом к настройкам учетной записи (владельцы учетных записей) могут получить доступ к пользовательскому интерфейсу редактирования виджетов. :::

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

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

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

:::(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 предоставляет множество инструментов для работы с датами и временем.