Egyéni widgetek áttekintése

Saját widgetek készítése a Tulipban HTML, CSS és JavaScript használatával

Egyéni widgetek áttekintése

HTML, CSS és JavaScript segítségével saját funkciókat építhet a Tulipban. A könyvtár widgetjei itt érhetők el: https://tulip.co/library/?query=Widgets.

Bevezetés

Azokat az elemeket, amelyeket az alkalmazásába húzva és eldobva helyez el, "Widgeteknek" nevezzük. Ezek lehetnek gombok, képek, beviteli mezők és bármi más, ami az eszköztárból elérhető.

Az egyéni widgetek lehetővé teszik, hogy saját kódot írjon, és saját widgeteket hozzon létre, amelyeket aztán az alkalmazásába húzva és eldobva interakcióba hozhat. Ez a képesség lehetővé teszi a Tulip felhasználók számára, hogy kitágítsák a Tulipban elérhető lehetőségek határait.

Ebben a cikkben gyors áttekintést adunk arról, hogyan működnek az egyéni widgetek.

Egyéni widgetek alapjai

Az egyéni widgetek kezelési képernyője a fiókbeállítások oldalon található. Itt hozhat létre és törölhet widgeteket. Az egyéni widgetszerkesztő lehetővé teszi a widget kódjának megírását, a kellékek és események létrehozását, valamint a widget előnézetét. Az alábbiakban egy ábra ismerteti, hogy mik azok a kellékek és események:

Kellékek: A kellékek olyan adatok, amelyeket az egyéni widgetek és a Tulip alkalmazások megosztanak egymással. A kellékek az alkalmazásszerkesztőben lesznek láthatóak, és lehetővé teszik az alkalmazásszerkesztők számára, hogy kiválasszák, hogy mely változókat, táblázatrekordokat vagy egyéb információkat társítsanak a kellékhez.

Események: Az események olyan jelek, amelyeket a widget küldhet az alkalmazásnak. Az események lehetővé teszik, hogy az alkalmazás egy kiváltó okkal válaszoljon, és információt hordozhatnak magukkal.

Az egyéni widgetek az alkalmazásszerkesztőben az Egyéni lefelé választón keresztül érhetők el.

Widget létrehozása

:::(Warning) (Figyelmeztetés) Csak a fiókbeállításokhoz hozzáféréssel rendelkező felhasználók (Account Owners) férhetnek hozzá az egyéni widget szerkesztőfelülethez :::

A Widget-szerkesztő képernyő négy részre oszlik. A bal alsó részbe írt kód a bal alsó részbe kattintva megjelenik az előnézeti részben. A prop értékek közvetlenül az előnézeti szakaszban módosíthatók tesztelési célokra.

Speciális funkciók a kellékekkel és eseményekkel való interakcióhoz.

A kellékek értékének lekérdezése

:::(Warning) (Figyelmeztetés) Nem garantált, hogy egy widget által használt kellék betöltődik, mielőtt a widget betöltődik, ezért minden olyan kelléknek, amely a táblázat rekordmezőihez, aggregációkhoz vagy bármilyen más dinamikus értékhez kapcsolódik, tartalmaznia kell olyan logikát, amely támogatja azokat az eseteket, amikor a widget betöltésekor nullás értékűek. Lásd ezt a szakaszt a logika kiváltására vonatkozó részletekért, amikor egy kellék megváltozik.
:::

//Egy prop értékének lekérdezése getValue('My Prop');``//A prop tárolása egy változóba let myVariable = getValue('My Prop');

Valamit csinálni, amikor egy prop megváltozik

//Teszünk valamit, ha egy prop értéke megváltozik getValue('My Prop', (internalVariable) => { doSomething(internalVariable); });

Egy prop értékének beállítása

//Szöveges prop értékének beállítása 'hello!' setValue('My Text Prop', 'hello!');


//Egy objektumban lévő elem értékének beállítása setValue('My Object Prop', { 'Key inside object': 'new value' }); ```


### **Esemény tüzelése**


```**Egy esemény tüzelése** fireEvent('event', *payload*); 


//gyújt egy eseményt payload nélkül fireEvent('My Event');


//gyújtsuk meg az eseményt hasznos teherrel fireEvent('My Event', myVariable); ````


## Példa widget építési videó


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




---


## **Alkalmazások importálása/exportálása**


**Exportálás**


1. Az egyéni widgetek áttekintéséből válassza ki az exportálni kívánt widget mellett a 3 pontot.


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


1. Válassza az "Exportálás" lehetőséget.


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


**Importálás**


1. Az egyéni widgetek áttekintő képernyőjén válassza ki a 3 pontot a tetején.


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


1. Válassza az "Importálás" lehetőséget.


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


1. Keresse meg az .json egyedi widget fájlt.


## **Külső könyvtárak engedélyezése**


A külső könyvtárak tovább bővítik az egyéni widgetek lehetőségeit. A külső könyvtárak sok olyan *piszkos* munkát végeznek el, amely a html írásából közvetlenül JavaScriptben adódik. A külső könyvtárakat minden olyan widgetnél engedélyezni kell, ahol használni szeretné őket.


1. Miközben a Widgetben van, kattintson a szalag 3 pontos menüjére.


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


1. Válassza ki a "Külső könyvtár engedélyezése" lehetőséget.


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


1. Válassza ki az engedélyezni kívánt bővítményt.


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


Itt van egy alapvető leírás arról, hogy mit csinálnak ezek mindegyike, sokan közülük sok területen jeleskednek, úgyhogy bátran fedezd fel őket. 


* **jQuery** - lehetővé teszi a html-elemek áramvonalasabb kiválasztását, valamint az elemek manipulálását.
* **D3 -** Az adatok vizualizációjának arany standardja, meredek tanulási görbe, de rengeteg rugalmasság.
* **Google Visualization -** Egy nagyszerű eszköz arra, amit a neve is sugall, a vizualizációra.
* **javaascript-Ip-solver -** Az Ip solver egy külső könyvtár, amely komplex számításokat tud kezelni az egyenletek megoldására.
* **Lodash -** A Lodash rengeteg olyan eszközt kínál, amelyek megkönnyítik a javascript adattípusokkal való munkát.
* **ChartJS -** Körülbelül a lehető legegyszerűbb grafikus könyvtár, rengeteg online forrással.
* **Moment -** A Moment rengeteg eszközt biztosít a dátumokkal és időpontokkal való munkához.