In questa esercitazione ci serviremo di una serie di strumenti open source legati a JavaScript e, più in particolare a Vue.js, per costruire una lista che consenta il drag and drop dei propri elementi e che renda persistenti le modifiche nel nostro sistema FileMaker.
Anche per questo percorso utilizzeremo i 3 nuovi strumenti introdotti da FileMaker 19.
Esegui FileMaker Data API, che ci dà la possibilità di ottenere i dati direttamente in JSON, pronti per essere trasferiti a JavaScript.
Esegui JavaScript in visualizzatore web ci permette di richiamare ed eseguire una funzione JavaScript, passandole o meno dei parametri.
FileMaker.PerformScript, invece, è la sua controparte JavaScript che ci consente di eseguire uno script FileMaker dall’interno del visualizzatore web.
Visto che si tratta di un percorso FileMaker, cercheremo di non addentrarci troppo nella scrittura e nel funzionamento di Vue.js: prenderemo quindi spunto da un ottimo tutorial, disponibile su YouTube, che spiega come creare la lista passo passo.
Nel nostro caso, però, adatteremo questo percorso a FileMaker, alimentandolo con i dati residenti nella tabella CLIENTI e ricevendo i cambiamenti di ordinamento per poi applicarli ai dati esistenti.
Per creare la nostra lista useremo quindi Vue.js e due librerie collegate: Sortable.js e VueDraggable.js
Senza addentrarci troppo in tecnicismi, che fortunatamente Vue.js e le altre librerie associate risolvono per noi, vediamo come costruire una lista valori che gestisca il drag and drop.
Dopodiché scriveremo uno script FileMaker che mantenga allineato il nostro modello dati, ovvero la tabella FileMaker che alimenta la lista, ai cambiamenti che avvengono nella UI.
Dopo aver referenziato le nostre librerie, creiamo uno stile dedicato per il nostro elemento sortable, che apparirà quando effettivamente muoveremo gli elementi della lista valori con il drag&drop.
Vediamo che, di particolare, ha un cursore di tipo MOVE, per rendere meglio l’idea di che cosa sta per succedere.
Aggiungiamo anche una classe sortable-drag con opacità a 0, per disattivare la trasparenza di default e creiamo la nostra classe ghost (che sarà quella che viene applicata all’oggetto che spostiamo) impostando un elemento visibile dal bordo sinistro della riga selezionata.
Naturalmente possiamo sbizzarrirci, con questa classe, e applicare qualunque formattazione ci venga in mente.
Ora occupiamoci di ciò che effettivamente dovremo mostrare, ovvero la nostra lista. Spostiamoci nella sezione body e inseriamo il codice che vediamo qui rappresentato.
Il tag draggable è ciò che attiva il drag&drop nella nostra lista: gli assegneremo quindi la nostra classe ghost e, molto importante, attiveremo una direttiva @end che funziona come un trigger di FileMaker: al termine dell’evento - in questo caso la fine del trascinamento - il codice esegue un metodo, che possiamo considerare come un equivalente di uno script di FileMaker.
Nel nostro caso eseguirà un metodo che abbiamo chiamato onEnd e che andremo a scrivere fra poco.
Veniamo infine alla parte del codice: che cosa succede quando la nostra lista richiama il metodo onEnd dopo aver finito l’operazione di drag & drop? È il momento di scrivere un po’ di JavaScript: riprendiamo la funzione loadData, che si occupa di ricevere i dati da FileMaker.
Quando la invochiamo, oltre a farle ricevere i dati, facciamo in modo di rendere disponibile il metodo che abbiamo associato alla fine del trascinamento.
Vediamo che onEnd riceve un evento (evt) da cui noi possiamo ricavare il vecchio e il nuovo indice, ovvero la posizione occupata in precedenza e la nuova posizione.
Con queste due informazioni potremo aggiornare la nostra tabella in FileMaker!Ed è esattamente questo che faremo, invocando lo script FileMaker riordinaDati, passando come parametri i due indici.
Ora, però, dobbiamo fare in modo che la magia della nostra lista valori drag&drop - finora solo ipotizzata - diventi persistente, perché altrimenti ci troveremo con una lista visualizzata in un certo ordine ma memorizzata in un altro.
Abbiamo scritto che al termine dell’operazione di drag&drop, Vue invoca un metodo che a sua volta passa la vecchia e la nuova posizione a uno script FileMaker.
Ora ciò che ci serve è una procedura che applichi questi cambiamenti.
Un approccio, tra i tanti disponibili, consiste nel cercare l’elemento spostato utilizzando il vecchio indice (FileMaker ancora non sa che qualcosa è cambiato, quindi in questa fase dobbiamo “vivere nel passato”).
Una volta individuato l’elemento, dobbiamo capire se ci stiamo spostando verso l’alto o verso il basso, e per capirlo confronteremo i due indici, e poi cambiamo l’indice dell’elemento spostato.
L’ultima cosa da fare, poi, è di riordinare anche gli altri elementi di conseguenza: potremmo usare un loop oppure optare per l’istruzione sostituisci contenuto campo, abbinata all’opzione Numeri di serie.
In questo modo, ogni volta che sposteremo un elemento della lista, il metodo onEnd richiamerà lo script FileMaker che ci manterrà aggiornati i dati della nostra tabella.
Per questo esempio abbiamo selezionato una funzionalità accattivante e non disponibile in FileMaker per affrontare un problema delicato: come mantenere sincronizzata Vista (i dati come vengono resi disponibili all’utente) e Modello (i dati archiviati, solitamente in un database).
Venendo da FileMaker, che quando usa componenti nativi risolve questo problema al nostro posto, la cosa ci dà in effetti un po’ da pensare, visto che ci sposta dalla nostra zona di comfort.
Tuttavia, grazie all’introduzione dei tre strumenti menzionati all’inizio di questo articolo, trovare una soluzione è diventato un compito alla portata di tutti.