L’uscita di FileMaker 19 ha portato in dotazione diversi strumenti che possono cambiare profondamente il modo di sviluppare le nostre soluzioni.
In questo articolo vedremo come utilizzare in combinazione tre nuovi strumenti per costruire un flusso che parta da FileMaker, il quale invierà i dati a JavaScript che li mostrerà in un Visualizzatore Web su cui l’utente potrà agire per invocare una procedura FileMaker.
Per prima cosa, ricapitoliamo i punti di forza degli strumenti che utilizzeremo.
Esegui FileMaker Data API ci dà la possibilità di interrogare FileMaker a basso livello ottenendo come risultato un JSON, che ci verrà utilissimo dal momento che dovremo passare questi dati a JavaScript e JSON è sicuramente il candidato migliore.
Esegui JavaScript in visualizzatore web ci consente di richiamare ed eseguire una funzione JavaScript situata all’interno di una pagina web caricata in un visualizzatore web, passandole o meno dei parametri.
FileMaker.PerformScript, invece, è la sua controparte JavaScript che ci consente di eseguire uno script FileMaker da una funzione JavaScript posta all’interno del visualizzatore web.
Il nostro obiettivo è di scrivere quanto meno codice possibile per visualizzare una lista di aspetto gradevole alimentata da dati FileMaker e che possa funzionare da selettore. Quindi, facendo clic sulla riga, il sistema dovrà restituire a FileMaker un valore, ad esempio l’id del record, per poi eseguire uno script FileMaker.
Per la parte di UI utilizzeremo Bootstrap, che richiameremo semplicemente aggiungendo lo URL al cdn ufficiale.
Per quanto riguarda la scrittura del codice JavaScript, abbiamo preso in esame diverse librerie, per capire quale fosse quella che meglio si adatta a questo scopo: per leggerezza, completezza e semplicità d’uso la scelta è caduta su Vue.js.
In fin dei conti, siamo sviluppatori FileMaker e, benché JavaScript sia un mondo affascinante e studiarlo dia sicuramente delle soddisfazioni, abbiamo cercato lo strumento che richiede minor impegno “extra FileMaker”.
Tutto ciò premesso, iniziamo a scrivere quel po’ di codice JavaScript necessario al funzionamento di tutta la filiera.
Partiamo con il file di partenza, che al proprio interno non ha nulla se non i tag HTML di base e i riferimenti a Bootstrap e Vue.js.
La prima cosa di cui abbiamo bisogno è una funzione, richiamabile da FileMaker, che riceva i dati. Come scrivevo, siamo sviluppatori FileMaker, quindi cerchiamo di tenere questa parte il più semplice possibile.
La funzione riceve i dati, in formato JSON, da FileMaker, li trasforma in un oggetto JSON (ricordiamo che il JSON che manda FileMaker è una stringa, quindi se vogliamo che JavaScript sia in grado di manipolare il JSON bisogna invocare il comando JSON.parse).
Dopodiché richiamiamo Vue, identifichiamo quale elemento deve essere gestito (riga XX: noi lo chiameremo #lista-fm) e indichiamo, nell’oggetto methods, eventuali funzioni che il nostro elemento dovrà utilizzare: in questo esempio abbiamo una funzione say(), che non fa altro che mostrare un messaggio il cui testo corrisponde al parametro che passeremo. Non la utilizzeremo in questo tutorial, ma può rivelarsi utile per testare se va tutto bene, prima di collegare la funzione principale.
L’altra funzione, quella che effettivamente andremo ad utilizzare, è showCard(), che sfrutterà FileMaker.PerformScript() per invocare uno script FileMaker (mostraCard) passando come parametro l’id cliente.
Infine, indichiamo a Vue quali sono i dati che dovrà gestire: per rendere l’esempio un po’ più sofisticato, abbiamo usato una struttura a due livelli, dove “ParentMessage” sarà un elemento comune a tutte le voci e “items” conterrà i dati dei record.
Ora manca solo l’ultimo sforzo e poi con la parte complessa avremo finito: abbiamo il codice (ovvero il controller), abbiamo i dati (ovvero il model). Manca solo lo strumento per mostrarli, ovvero la view.
Spostiamoci nella parte HTML del nostro codice (); creiamo un blocco <ul> e al suo interno un blocco <li>, che corrispondono rispettivamente a una lista valori e ai suoi elementi.
Dentro questo blocco definiamo che aspetto deve avere questo elemento richiamando una classe list-group-item da Bootstrap e usiamo la semplice sintassi di Vue per gestire i loop: v-for="(item, index) in items"
Ovvero: per ognuno degli elementi presenti in items - che, lo ricordiamo, sono i nostri dati provenienti da FileMaker - crea un elemento nella lista valori.
Mentre il loop di Vue crea le voci, vogliamo anche che la procedura associ a ognuna di esse la funzione per aprire i dettagli, in modo da visualizzare una card FileMaker quando facciamo clic sulla riga.
Per ottenere questo risultato, utilizziamo la direttiva v-on a cui assoceremo l’evento (click) seguito dal nome della funzione e dal parametro da passare (id_cliente).
Siamo arrivati in fondo: ci manca solo di dire a Vue quali dati deve mostrare e come impaginarli: servendoci delle graffe, imposteremo questo codice.
{{ parentMessage }} {{ index +1 }}: {{ item.fieldData.message }}
Ovvero: {{ il valore fisso “Azienda” }} {{indice, che parte da 0, +1 }}: {{ il valore dell’elemento “message” nell’oggetto che contiene i dati }}
Abbiamo finito: con meno di 50 righe di codice avremo una lista valori con uno stile facilmente modificabile, in grado di ricevere dati da FileMaker e interagire con esso
Torniamo dunque verso lidi più familiari: in FileMaker dobbiamo costruire la procedura che ricerca i dati mediante le Data API per poi passarli alla funzione loadData che abbiamo appena finito di scrivere.
Lo script imposta una serie di valori, che per facilitare la lettura e il debugging sono stati scomposti in una decina di righe (il blocco rosso) inserendo dei segnaposto per facilitare la personalizzazione, ma che volendo possono essere condensati in un paio di righe.
L’importante è la riga dove definiamo i parametri da passare alla chiamata verso le Data API. (riga 15)
Una volta chiesti e ricevuti i dati, ci ritroviamo con un oggetto JSON. È il momento di richiamare la nostra pagina web, il codice HTML JavaScript che abbiamo scritto prima e che avremo memorizzato in un campo di FileMaker, e assegnarla al Visualizzatore Web (blocco blu).
Infine, per forzare il caricamento dei dati, richiamiamo la funzione JavaScript loadData passandole i dati come parametro (blocco verde).
A questo punto, dovrebbe succedere la magia: uno script FileMaker chiede dei dati tramite Data API, li passa a una pagina web tramite una funzione JavaScript e, se facciamo clic su una riga, un’altra funzione passa un dato a una funzione JavaScript che richiama uno script FileMaker.
E qui il cerchio si chiude.
L’uscita di FileMaker 19 ha portato in dotazione diversi strumenti che possono cambiare profondamente il modo di sviluppare le nostre soluzioni.In questo articolo vedremo come utilizzare in combinazione tre nuovi strumenti per costruire un flusso che parta da FileMaker, il quale invierà i dati a JavaScript che li mostrerà in un Visualizzatore Web su cui l’utente potrà agire per invocare una procedura FileMaker.Per prima cosa, ricapitoliamo i punti di forza degli strumenti che utilizzeremo.Esegui FileMaker Data API ci dà la possibilità di interrogare FileMaker a basso livello ottenendo come risultato un JSON, che ci verrà utilissimo dal momento che dovremo passare questi dati a JavaScript e JSON è sicuramente il candidato migliore.Esegui JavaScript in visualizzatore web ci consente di richiamare ed eseguire una funzione JavaScript situata all’interno di una pagina web caricata in un visualizzatore web, passandole o meno dei parametri.FileMaker.PerformScript, invece, è la sua controparte JavaScript che ci consente di eseguire uno script FileMaker da una funzione JavaScript posta all’interno del visualizzatore web.Il nostro obiettivo è di scrivere quanto meno codice possibile per visualizzare una lista di aspetto gradevole alimentata da dati FileMaker e che possa funzionare da selettore. Quindi, facendo clic sulla riga, il sistema dovrà restituire a FileMaker un valore, ad esempio l’id del record, per poi eseguire uno script FileMaker.