Panoramica dei widget personalizzati

Costruire i propri widget in Tulip utilizzando HTML, CSS e JavaScript

Panoramica dei widget personalizzati

Costruite le vostre funzionalità personalizzate in Tulip usando HTML, CSS e JavaScript. Widget di libreria disponibili qui: https://tulip.co/library/?query=Widgets

Introduzione

Gli elementi che vengono trascinati nella vostra applicazione sono chiamati "widget". Possono essere pulsanti, immagini, caselle di input e qualsiasi altra cosa disponibile nella barra degli strumenti.

I widget personalizzati consentono di scrivere il proprio codice e di creare widget personalizzati che possono essere trascinati nell'applicazione e con i quali interagire. Questa funzionalità consente agli utenti di Tulip di ampliare i confini di ciò che è possibile fare con Tulip.

In questo articolo vi daremo una rapida panoramica di come funzionano i widget personalizzati.

Nozioni di base sui widget personalizzati

La schermata di gestione dei widget personalizzati si trova nella pagina delle impostazioni dell'account. Qui è possibile creare e cancellare i widget. L'editor dei widget personalizzati consente di scrivere il codice del widget, creare oggetti di scena ed eventi e visualizzare l'anteprima del widget. Di seguito è riportato un diagramma che descrive cosa sono gli oggetti di scena e gli eventi:

Puntelli: Gli oggetti sono dati condivisi tra i widget personalizzati e le applicazioni Tulip. Gli oggetti saranno esposti nell'editor dell'applicazione e consentiranno agli editor dell'applicazione di selezionare quali variabili, record di tabella o altre informazioni associare all'oggetto.

Eventi: Gli eventi sono segnali che il widget può inviare all'applicazione. Gli eventi consentono all'applicazione di rispondere con un trigger e possono contenere informazioni.

I widget personalizzati sono accessibili attraverso il selettore Custom down nell'Editor delle applicazioni.

Creare un widget

:::(Warning) (Attenzione) Solo gli utenti con accesso alle impostazioni dell'account (Proprietari di account) possono accedere all'interfaccia di modifica dei widget personalizzati:

La schermata dell'editor di widget è suddivisa in quattro sezioni. Il codice scritto nella sezione in basso a sinistra apparirà nella sezione di anteprima una volta fatto clic su di essa. I valori degli oggetti di scena possono essere modificati direttamente nella sezione di anteprima a scopo di test.

Funzioni speciali per interagire con oggetti di scena ed eventi.

Ottenere il valore degli oggetti di scena

:::(Warning) (Attenzione) Non è garantito che il puntello utilizzato da un widget venga caricato prima del caricamento del widget stesso, pertanto tutti i puntelli associati a campi di record di tabelle, aggregazioni o qualsiasi altro valore dinamico devono includere una logica per supportare i casi in cui sono nulli al momento del caricamento del widget. Vedere questa sezione per i dettagli sull'attivazione della logica quando un oggetto cambia.
:::

//ottenere il valore di un oggetto getValue('My Prop');``//salvare l'oggetto in una variabile let myVariable = getValue('My Prop');

Fare qualcosa quando un oggetto cambia

/Fare qualcosa ogni volta che il valore di una variabile cambia getValue('My Prop', (internalVariable) => { doSomething(internalVariable); });

Impostare il valore di un oggetto

```Impostare il valore di un oggetto setValue('My Prop', value_to_set);

//Impostare il valore di un oggetto di testo a 'ciao!' setValue('My Text Prop', 'ciao!');

//imposta il valore di un elemento in un oggetto setValue('My Object Prop', {'Key inside object': 'new value' }); ````

Lanciare un evento

```Incendiare un evento fireEvent('event', payload);

/incendia un evento senza payload fireEvent('My Event');

//incendia un evento con carico utile fireEvent('My Event', myVariable); ````

Video di esempio per la creazione di un widget

Importare/esportare applicazioni

Esportazione

1. Nella panoramica dei widget personalizzati, selezionare i 3 puntini accanto al widget che si desidera esportare.

1. Selezionare "Esporta".

Importazione

1. Dalla schermata di panoramica dei widget personalizzati, selezionare i 3 puntini in alto.

1. Selezionare "Importa".

1. Trovare il file .json del widget personalizzato.

Abilitazione delle librerie esterne

Le librerie esterne ampliano ulteriormente le funzionalità dei widget personalizzati. Le librerie esterne gestiscono gran parte del lavoro sporco della scrittura html direttamente in JavaScript. Le librerie esterne devono essere abilitate per ogni widget in cui si desidera utilizzarle.

1. Nel widget, fare clic sul menu a 3 punti della barra multifunzione.

1. Selezionare "Abilita libreria esterna".

1. Selezionare l'estensione che si desidera abilitare.

Ecco una descrizione di base di ciò che ciascuna di esse fa; molte di esse eccellono in diverse aree, quindi sentitevi liberi di esplorare.

• jQuery - consente una selezione più snella degli elementi html e la manipolazione degli elementi.
• D3 - Il gold standard per la visualizzazione dei dati, con una curva di apprendimento ripida ma una grande flessibilità.
• Google Visualization - Un ottimo strumento per la visualizzazione, come dice il nome stesso.
• javaascript-Ip-solver - Ip solver è una libreria esterna che può gestire calcoli complessi per risolvere equazioni.
• Lodash - Lodash fornisce un sacco di strumenti che facilitano il lavoro con i tipi di dati javascript.
• ChartJS - La più semplice libreria di grafici possibile, con tonnellate di risorse online.
• Moment - Moment fornisce un sacco di strumenti per lavorare con date e orari.