In questo articolo vedremo come integrare un componente aggiuntivo JavaScript e come muovere i primi passi nella sua personalizzazione.
I componenti aggiuntivi sono una novità di FileMaker 19: sono moduli, più o meno complessi, e possono includere tabelle, campi, script, parti dell’interfaccia.. Il tutto riunito in un modulo autocontenuto che potremo richiamare da un selettore e posizionare con un semplice drag&drop.
Con l’uscita della versione 19.1, abbiamo ora la possibilità di utilizzare sia componenti costituiti esclusivamente da elementi nativi FileMaker sia componenti che integrino una o più librerie JavaScript.
In entrambi i casi il risultato è un oggetto facilmente configurabile una volta richiamato sui nostri formati scheda.
Vediamo subito come selezionare e utilizzare un componente aggiuntivo: spostiamoci in formato scheda e selezioniamo la linguetta Componenti aggiuntivi dal pannello di sinistra, poi scegliamo il componente che vogliamo includere. Nel nostro caso opteremo per il Calendario.
Trasciniamo quindi il componente selezionato sul nostro formato scheda e vediamo che cosa succede nel nostro file.
La prima cosa che possiamo notare è che sono apparsi molti nuovi elementi.
L’aspetto più evidente è che ora il componente appare tra i componenti disponibili.Inoltre, abbiamo un nuovo gruppo di script, FCCalendar Addon, a sua volta ripartito in sottocartelle, 2 nuove tabelle (Addon e Sample Events) e una ricorrenza di tabella sul nostro grafico delle relazioni.
Per ora non toccheremo nulla, in modo da apprezzare l’utilizzo del componente così come viene proposto “appena tirato fuori dalla confezione”.
Posizioniamo il nostro oggetto sul formato scheda, passiamo in modo Usa e vediamo che cosa ci viene proposto: la prima, bella sorpresa è che ci troviamo un calendario pronto e funzionante, con alcuni dati di esempio e le funzionalità di base già impostate.
Agendo sull’ingranaggio possiamo selezionare alcune impostazioni, quali l’abbinamento con il formato scheda che dovrà mostrare i dettagli dell’appuntamento quando lo apriremo dal calendario, la tabella e i campi da abbinare alle voci necessarie alla libreria JavaScript per gestire gli eventi (il titolo, che corrisponde al contenuto dell’evento, data e ora di inizio/fine, la chiave primaria e altri dati meno essenziali).
In questo caso, ricordiamo un piccolo accorgimento: se partiamo da un file vuoto, assicuriamoci di aver creato almeno un record, altrimenti rischiamo di non riuscire a salvare le preferenze appena impostate.
Naturalmente non tutte le possibilità di personalizzazione offerte dalla libreria JavaScript, l’ottima FullCalendar, sono parametrizzate nel componente: sono decine e sarebbe francamente quasi impossibile. Ad ogni modo, per chi volesse approfondirne le potenzialità, suggeriamo di fare una visita al sito del prodotto (link a https://fullcalendar.io/docs#toc)
Se però ci troviamo nella necessità di andare oltre le impostazioni predefinite, dovremo “sporcarci un po’ le mani”, andando ad agire più in profondità.
Partiamo dalle cose più semplici: visto che il componente associa degli eventi del calendario a controparti costituite da script FileMaker, iniziamo con il personalizzare il comportamento di un evento base.
Apriamo gli script, spostiamoci nella cartella FCCalendar Public > FCCalendar Event Handlers e apriamo lo script FCCalendarEvents.
Questo script riceve come informazione l’azione che stiamo compiendo sul calendario, come ad esempio un clic su un appuntamento.
Proviamo una modifica semplice. Scegliamo l’evento di creazione di un nuovo appuntamento (NewEventFromSelected, riga 147) e aggiungiamo un messaggio in cui chiediamo conferma all’utente se procedere o meno con la creazione.
Proviamo a creare un nuovo appuntamento facendo clic su uno slot vuoto e vediamo che, ogni volta che viene invocata la procedura di creazione dal calendario, viene eseguito anche il nostro codice.
Andiamo oltre con la nostra personalizzazione, spingendoci in territori meno rassicuranti ma che ci aprono la strada a molte più opzioni di personalizzazione.
Creiamo un nuovo formato e associamolo alla tabella FCCalendarAddOn, che fa parte del componente aggiuntivo e contiene le informazioni di configurazione, incluso il codice HTML/JavaScript del nostro calendario.
Riportiamo il campo HTML sul formato e copiamo il contenuto per poi incollarlo in un editor in grado di formattare il testo. Si tratta di un testo lunghissimo e senza formattazione è molto difficile muoversi al suo interno.
Cerchiamo ora la stringa “minTime” e individuiamo la prima ricorrenza, che dovrebbe trovarsi alla riga 13547 .
Cambiamo il valore “00:00:00” in “08:00:00” e cambiamo anche “maxTime” a “20:00:00”.
Copiamo il testo, incolliamolo nel campo HTML di FileMaker, torniamo sul nostro calendario e vediamo che, anziché mostrare 24 ore, il nostro calendario va dalle 8 di mattina alle 8 di sera.
Torniamo al nostro codice, spostiamoci qualche riga più in alto e cambiamo il valore di “weekends” da “!0” a “!1”.
Torniamo al nostro calendario e vediamo che i sabati e le domeniche non sono più visualizzati.
Come accennato sopra, le opzioni di personalizzazione offerte da FullCalendar sono numerosissime e c’è veramente spazio per sbizzarrirsi.
Uno dei vantaggi di lavorare con un componente aggiuntivo è la facilità con cui possiamo rimuovere il tutto.
Passiamo in formato scheda, spostiamoci nella linguetta Componenti aggiuntivi e selezioniamo l’opzione “Disinstalla Componente aggiuntivo”.
Se procediamo verrà rimosso ogni elemento del componente: script, relazioni, oggetti (come il visualizzatore web) e tutto quanto collegato al componente originale.
Attenzione, però: se aggiungiamo qualcosa legato al componente aggiuntivo, come ad esempio il formato che abbiamo creato per copiare il codice HTML, questo non verrà rimosso automaticamente.
Allo stesso modo ogni personalizzazione – come le modifiche effettuate sul codice – andranno perse perché non fanno parte del componente originale.
Quindi se abbiamo la necessità di reimpiegare il codice JavaScript modificato, dovremo salvare una copia in un file di testo oppure ripetere la procedura descritta sopra.
In alternativa, possiamo costruire una nostra versione del componente aggiuntivo con tutti gli elementi che ci servono, ma questa strada merita un articolo tutto suo.