Custom state in Bubble

Il custom state e’ uno dei concetti base di Bubble utilizzato principalmente per salvare informazioni temporanee che successivamente dovranno essere salvate o manipolate. Per chi ha un background in programmazione il custom state puo’ essere paragonato ad una variabile contenente un qualsiasi tipo di informazione.

Che cos’è un custom state?

Il custom state ci permette di salvare qualsiasi tipo di informazione all’interno degli elementi del design. Possiamo assegnare al custom state informazioni quali testi, numeri, valori binari, date e oggetti relativi al nostro database inoltre il custom state e’ in grado di salvare anche liste di informazioni.

L’informazione contenuta e’ statica e legata alla pagina del browser che stiamo navigando, cio’ vuol dire che se definiamo un custom state relativo ad un elemento specifico di una pagina e successivamente navighiamo muovendoci su un’altra pagina della nostra app l’informazione temporanea andra’ persa.

Come creo un custom state ?

Il custom state può essere creato all’interno di un qualsiasi elemento del design, inoltre è buona prassi creare uno o piu’ custom state all’interno della pagina su cui si sta lavorando in modo tale da avere un solo elemento contenente le informazioni temporanee che andremo ad utilizzare.

Il custom state è creato partendo dall’inspector dell’elemento e cliccando l’icona “i” e successivamente “Add a new custom state

Inoltre è possibile attraverso l’element inspector controllare tutti gli eventi, azioni e altri elementi che utilizzano il medesimo custom state.

Dopo aver definito un nome ed il tipo di valore che il custom state può contenere saremo in grado di definire un valore di Default oppure salvare un singolo valore o una lista utilizzando le apposite opzioni

Come definire il valore del custom state ?

Una volta creato è possibile assegnare un valore al nostro custom state attraverso l’azione contenuta nella Workflow tab sezione Element Actions e selezionando set a state

Tale azione ci permetterà di selezionare l’elemento contenente lo state ed infine assegnare un valore. Nel nostro esempio lo state è stato creato all’interno della pagina “index con il nome test con un valore pari ad “A

L’informazione contenuta all’interno del nostro custom state è statica, ciò vuol dire che non viene aggiornata automaticamente, ad esempio nel caso in cui il nostro state andrà a contenere come informazione la data del giorno corrente tale valore rifletterà la data con ore e minuti relative al momento in cui abbiamo inviato l’informazione al nostro state senza aggiornarsi ulteriormente con il passare del tempo.

L’unica informazione in grado di aggiornarsi all’interno del nostro state riguarda un oggetto del database. Ad esempio nel caso in cui inviamo come valore quello di un qualsiasi utente e successivamente andremo ad aggiornare le info relative quali email o nome allora anche l’informazione contenuta dal nostro custom state sarà aggiornata.

Il motivo per cui tali valori vengono aggiornati risiede nel fatto che il nostro state quando possiede un valore relativo ad un oggetto del database in realtà non contiene l’intero oggetto ma semplicemente il parametro chiamato “ id “ utilizzato all’interno del database per identificare ogni singola riga per una qualsiasi tabella.

In poche parole il nostro custom state salva questo codice identificativo per l’oggetto in questione e successivamente ci permette di visualizzare le info relative ogni volta che vengono aggiornate.

Lista di valori contenuta all’interno del custom state

Come anticipato il nostro custom state può contenere non solo un singolo valore ma anche una lista di valori ad esempio:

text1, text2, text 3

quando si lavora con delle liste è opportuno ricordare che:

  • se inviamo al nostro custom state una lista relativa a degli oggetti del database utilizzando l’espressione Do a search for e successivamente andiamo a creare nuovi oggetti all’interno del database la nostra lista non si aggiornerà in automatico;
  • nel caso in cui stiamo contando gli elementi della nostra lista con l’espressione count e successivamente rimuoviamo alcuni di essi dal nostro state il valore anche in questo caso non andrà ad aggiornarsi fino a quando non inizieremo una nuova azione per contare nuovamente gli elementi.

Ecosistema No-Code

Share the Post:

Online Bubble Bootcamp

Il primo corso completo in italiano per imparare ad utilizzare Bubble.io software di programmazione visuale per creare applicazioni web e mobile