Przegląd niestandardowych widżetów
  • 23 Jan 2025
  • 3 Minuty do przeczytania
  • Współtwórcy

Przegląd niestandardowych widżetów


Streszczenie artykułu

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

Restriction

This feature is only available for Professional plans and above.

Elementy przeciągane i upuszczane do aplikacji nazywane są widżetami. Mogą to być przyciski, obrazy, pola wejściowe i wszystko inne dostępne z paska narzędzi.

Niestandardowe widgety umożliwiają pisanie własnego kodu i tworzenie własnych widgetó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 zagłębić się w 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, które mają być powiązane 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 za pośrednictwem selektora Custom w edytorze aplikacji.


Tworzenie widżetu

Warning

Only users with access to account settings (Account Owners) can access the custom widget editing UI.

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

Istnieją specjalne funkcje do interakcji z rekwizytami i zdarzeniami.

Pobieranie wartości rekwizytów

Warning

It is not guaranteed that the prop being used by a widget will load before that widget loads, so all props associated with Table record fields, Aggregations, or any other dynamic value should include logic to support cases where they are null at the point the widget is loaded. See this section for details on triggering logic when a prop changes.

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

Robienie czegoś, gdy rekwizyt się zmienia

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

Ustawianie wartości właściwości

``Ustawianiewartości właściwości setValue('My Prop', value_to_set);

/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łajzdarzenie fireEvent('event', payload);

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

//wypal zdarzenie z payloadfireEvent('My Event', myVariable); ```

Poniższy diagram ilustruje przepływ informacji przez niestandardowy widżet w aplikacji. Dane zmiennej wejściowej są przechowywane w rekwizycie. Zmiana wartości sygnalizuje zdarzenie, w którym wyzwalacz zapisuje dane do zmiennej wyjściowej.

Custom Widget App Setup Diagram

Przykładowy film z budową widżetu


Importowanie/eksportowanie aplikacji

Eksport

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

  1. Wybierz opcję "Eksportuj".

Import

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

  1. Wybierz "Importuj".

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

Włączanie bibliotek zewnętrznych

Biblioteki zewnętrzne dodatkowo rozszerzają możliwości niestandardowych widżetów. 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 trzema kropkami na wstążce.

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

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

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 sprawniejszy wybór elementów html, wraz z manipulacją elementami.
  • 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.

Czy ten artykuł był pomocny?