Panoramica dei widget personalizzati
- 08 Jan 2025
- 4 Minuti da leggere
- Contributori
- Stampa
Panoramica dei widget personalizzati
- Aggiornato il 08 Jan 2025
- 4 Minuti da leggere
- Contributori
- Stampa
Sommario dell'articolo
Hai trovato utile questo riassunto?
Grazie per il tuo feedback
Costruire i propri widget in Tulip utilizzando HTML, CSS e JavaScript
Restriction
This feature is only available for Professional plans and above.
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.
Guardate il seguente video riassuntivo per un rapido approfondimento di questa funzione:
Scoprite i widget personalizzati nella libreria di Tulip!
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
Only users with access to account settings (Account Owners) can access the custom widget editing UI.
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 dei prop possono essere modificati direttamente nella sezione di anteprima a scopo di test.
Esistono funzioni speciali per interagire con gli Oggetti di scena e gli Eventi.
Ottenere il valore degli oggetti di scena
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.
/Riprendere il valore di un oggetto getValue('My Prop');``/Salvare l'oggetto in una variabileelet myVariable = getValue('My Prop');
Fare qualcosa quando un oggetto cambia
/Fare qualcosa ogni volta che il valore di un oggetto cambia getValue('My Prop', (internalVariable) => { doSomething(internalVariable);});
Impostare il valore di un oggetto
//Impostare il valore di un oggetto di testo a 'ciao!'setValue('My Text Prop', 'ciao!');
//imposta il valore di un elemento in un oggettosetValue('My Object Prop', {'Key inside object': 'new value' });```
### **Lanciare un evento**
```Incendiare**un evento** fireEvent('event', *payload*);
/accende un evento senza payloadfireEvent('My Event');
//accendere un evento con payloadfireEvent('My Event', myVariable);```
Il diagramma seguente illustra il flusso di informazioni attraverso un widget personalizzato in un'applicazione. I dati della variabile di input vengono memorizzati nel prop. La modifica del valore segnala un evento, dove un trigger memorizza i dati nella variabile di uscita.
{height="" width=""}
## Video di esempio per la creazione di un widget
{height="576" width="1024"}
---
## **Importazione/esportazione di app**
**Esportazione**
1. Nella panoramica dei widget personalizzati, selezionare i 3 punti accanto al widget che si desidera esportare.
{Altezza="" larghezza=""}
1. Selezionare "Esporta".
{Altezza="" Larghezza="800"}
**Importazione**
1. Dalla schermata di panoramica dei widget personalizzati, selezionare i 3 puntini in alto.
{Selezionare "Importa".}
1. Selezionare "Importa".
{Selezionare "Importa".}
1. Trovare il file .json del widget personalizzato.
## **Abilitare le librerie esterne**
Le librerie esterne estendono 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 nella barra multifunzione.
{height="" width=""}
1. Selezionare "Abilita libreria esterna".
{Selezionare "Abilita libreria esterna".}
1. Selezionare l'estensione che si desidera abilitare.
{height="" width="450"}
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.
Questo articolo è stato utile?
