Przegląd niestandardowych widżetów

Tworzenie własnych widżetów w Tulip przy użyciu HTML, CSS i JavaScript

:::(Error) (Ograniczenie) Ta funkcja jest dostępna tylko dla planów Professional i wyższych :::

Elementy przeciągane i upuszczane do aplikacji nazywane są widżetami. Mogą to być przyciski, obrazy, pola wprowadzania i wszystko inne dostępne na pasku narzędzi.

Niestandardowe widżety umożliwiają pisanie własnego kodu i tworzenie własnych widżetów, które można następnie przeciągać i upuszczać w aplikacji i wchodzić z nimi w interakcje. Ta możliwość pozwala użytkownikom Tulip na rozszerzenie granic tego, co jest możliwe w Tulip.

Obejrzyj poniższy film przeglądowy, aby szybko zapoznać się z tą funkcją:

Sprawdź niestandardowe widżety w bibliotece Tulip!

Podstawy widżetów niestandardowych

Ekran zarządzania niestandardowymi widżetami można znaleźć na stronie ustawień konta. To tutaj można tworzyć i usuwać widżety. Edytor niestandardowych widżetów umożliwia pisanie kodu widżetu, tworzenie rekwizytów i zdarzeń oraz wyświetlanie podglądu widżetu. Poniżej znajduje się diagram opisujący, czym są rekwizyty i zdarzenia:

Rekwizyty: Rekwizyty to dane, które są współdzielone między niestandardowymi widżetami i aplikacjami Tulip. Rekwizyty będą dostępne w edytorze aplikacji i pozwolą edytorom aplikacji wybrać zmienne, rekordy tabeli lub inne informacje do powiązania z rekwizytem.

Zdarzenia: Zdarzenia to sygnały, które Widget może wysyłać do aplikacji. Zdarzenia pozwalają aplikacji reagować za pomocą wyzwalacza i mogą przenosić informacje wraz z nimi.

Niestandardowe widżety są dostępne poprzez selektor Custom w dół w App Editor.

Tworzenie widżetu

:::(Warning) (Ostrzeżenie) Tylko użytkownicy z dostępem do ustawień konta (właściciele kont) mogą uzyskać dostęp do niestandardowego interfejsu edycji widżetów :::

Ekran edytora widżetów jest podzielony na cztery sekcje. Kod wpisany w lewej dolnej sekcji pojawi się w sekcji podglądu po kliknięciu w sekcję podglądu. Wartości rekwizytów można zmieniać bezpośrednio w sekcji podglądu w celach testowych.

Specjalne funkcje do interakcji z rekwizytami i zdarzeniami.

Pobieranie wartości rekwizytów

:::(Warning) (Ostrzeżenie) Nie ma gwarancji, że rekwizyt używany przez widżet zostanie załadowany przed załadowaniem tego widżetu, więc wszystkie rekwizyty powiązane z polami rekordów tabeli, agregacjami lub innymi wartościami dynamicznymi powinny zawierać logikę obsługującą przypadki, w których są one zerowe w momencie załadowania widżetu. Zobacz tę sekcję, aby uzyskać szczegółowe informacje na temat wyzwalania logiki, gdy zmienia się właściwość.
:::

//Getting the Value of a Prop getValue(``'My Prop');``//Store prop to a variable let myVariable = getValue('My Prop');

Robienie czegoś, gdy zmienia się właściwość

//Do something anytime a prop value changes getValue('My Prop', (internalVariable) => { doSomething(internalVariable); });

Ustawianie wartości właściwości

//Ustawienie wartości rekwizytu tekstowego na "hello!" setValue("My Text Prop", "hello!");


//ustaw wartość elementu w obiekcie setValue('My Object Prop', { 'Key inside object': 'new value' }); ```


### **Wywołanie zdarzenia**


``` Wywołaj**zdarzenie** fireEvent('event', *payload*); 


//wywołanie zdarzenia bez ładunku fireEvent('My Event');


//wypal zdarzenie z ładunkiem fireEvent('My Event', myVariable); ```


## Przykładowe wideo tworzenia widżetu


![Video](https://www.youtube.com/embed/H08-W2M2Ypo?rel=0){height="576" width="1024"}




---


## **Importowanie/eksportowanie aplikacji**


**Eksport**


1. W przeglądzie widżetów niestandardowych wybierz 3 kropki obok widżetu, który chcesz wyeksportować.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477703991.png){height="" width=""}


1. Wybierz opcję "Eksportuj".


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477704053.png){height="" width="800"}


**Import**


1. Na ekranie przeglądu widżetów niestandardowych wybierz 3 kropki u góry.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477704175.png){height="" width="800"}


1. Wybierz "Importuj".


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477704228.png){height="" width="350"}


1. Znajdź plik .json niestandardowego widżetu.


## **Włączanie bibliotek zewnętrznych**


Biblioteki zewnętrzne dodatkowo rozszerzają możliwości widżetów niestandardowych. Biblioteki zewnętrzne wykonują wiele *brudnej* roboty związanej z pisaniem html bezpośrednio w JavaScript. Biblioteki zewnętrzne muszą być włączone dla każdego widżetu, w którym mają być używane.


1. W widżecie kliknij menu z 3 kropkami na wstążce.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477684182.png){height="" width=""}


1. Wybierz "Włącz bibliotekę zewnętrzną".


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477684247.png){height="" width="250"}


1. Wybierz rozszerzenie, które chcesz włączyć.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477684294.png){height="" width="450"}


Oto podstawowy opis działania każdego z nich, wiele z nich wyróżnia się w wielu obszarach, więc nie krępuj się odkrywać. 


* **jQuery** - umożliwia sprawniejsze wybieranie elementów html oraz manipulowanie nimi.
* **D3 -** złoty standard wizualizacji danych, stroma krzywa uczenia się, ale mnóstwo elastyczności.
* **Google Visualization -** świetne narzędzie do wizualizacji, jak sama nazwa wskazuje.
* **javaascript-Ip-solver -** Ip solver to zewnętrzna biblioteka, która może obsługiwać złożone obliczenia w celu rozwiązywania równań.
* **Lodash -** Lodash zapewnia mnóstwo narzędzi, które ułatwiają pracę z typami danych javascript.
* **ChartJS** - najprostsza możliwa biblioteka do tworzenia wykresów z mnóstwem zasobów online.
* **Moment** - Moment zapewnia mnóstwo narzędzi do pracy z datami i godzinami.