4D per iOS: Controlli di input personalizzati

Finora i formattatori personalizzati consentivano di abbinare testo o immagini al contenuto di un campo, ad esempio sostituendo vero/falso con un’immagine o 1, 2 con etichette di testo. 4D v19 R3 consente di creare controlli di input disponibili nei moduli di azione, ad esempio creando un elenco di scelta con testo predefinito. E ancora meglio, questo elenco può essere riempito dinamicamente utilizzando una fonte di dati come un elenco di datori di lavoro. Entriamo nei dettagli!

PROMEMORIA DEI FORMATTATORI PERSONALIZZATI

Iformattatori personalizzati consentono di gestire le enumerazioni utilizzando un semplice file JSON per visualizzare i valori corrispondenti in base ai valori del database.

Ecco un esempio di file manifest.json:

{
    "name": "integerToString",
    "type": [
        "integer"
    ],
    "binding": "localizedText",
    "choiceList": {
        "0":"To Do",
        "1":"In Progress",
        "2":"Done"
     }
}

Questo semplice file JSON consente di convertire gli interi in stringhe da visualizzare nell’applicazione iOS. Ma è anche possibile creare e utilizzare questi tipi di formattatori per visualizzare immagini, numeri interi, emoji…

Se li si inserisce in una cartella specifica “formatters”, è possibile assegnarli a un campo di testo, ad esempio, per ottenere questo tipo di risultato:

I valori dei campi di stato “Da fare”, “In corso” e “Fatto” nella parte inferiore dello schermo vengono visualizzati correttamente in base al valore intero del database.

È un modo semplice per visualizzare valori formattati nelle applicazioni mobili. Il vantaggio è che questi elenchi di scelta vengono utilizzati automaticamente nei moduli di azione, consentendo di selezionare uno dei valori dell’elenco per utilizzarlo come parametro. Ma uno dei limiti è che questi elenchi sono statici perché si basano su un file JSON.

CONTROLLI DI INPUT ALL’AZIONE

Parliamo ora dei controlli di input! Questa nuova funzionalità consente di creare

• elenchi di scelte utilizzando un file manifest.json come in precedenza e
• elenchi basati su fonti di dati.

Questo vi garantirà di avere sempre elenchi aggiornati direttamente accessibili dalla vostra applicazione mobile!

Questi controlli di input di azione sono semplici da creare e molto facili da usare. Per utilizzarli nei vostri progetti mobili, proprio come per i formattatori o i moduli personalizzati di elenchi e dettagli, dovrete includerli nel vostro database in una cartella speciale “inputControls” (my base/Resources/mobile/inputControl).

Questi controlli di input azione saranno quindi disponibili e selezionabili nella sezione Azione, nelle proprietà dei parametri, filtrati in base al tipo di parametro dell’azione e al modo in cui si desidera visualizzare gli elenchi utilizzando i formati.

Concentriamoci sui formati, perché si tratta di un concetto abbastanza nuovo. Fondamentalmente, i formati consentono di definire il modo in cui si desidera visualizzare gli elenchi sul lato dell’applicazione mobile:

• Push: apre una nuova vista che proviene da destra per visualizzare l’elenco
• Segmentato: visualizza l’elenco sotto forma di elementi in una barra che è possibile selezionare
• Popover: apre una nuova vista dal basso per visualizzare l’elenco.
• Foglio: apre un foglio dal basso che visualizza l’elenco dal basso
• Picker: a differenza degli altri, questo formato consente di scorrere per selezionare il valore desiderato, invece di selezionare un valore facendo clic su di esso.

Ora diamo un’occhiata ad alcuni esempi!

ELENCHI DI SCELTA STATICI

Ecco un esempio di file manifest.json che può essere utilizzato come elenco di scelta statico:

{
    "name": "choiceListSheet",
    "type": [
        "text"
     ],
    "format": "sheet",
    "choiceList": {
        "1":"Vincent",
        "2":"David",
        "3":"Anass",
        "4":"Eric",
        "5":"Quentin",
        "6":"Houssam"
     }
}

Molto simile al formattatore di dati doganali, vero? Come si può vedere, qui viene definito un semplice elenco statico per questo controllo di input di azione con un formato di visualizzazione “foglio”.

ELENCHI DI SCELTA DINAMICI DA FONTE DI DATI

Ecco un esempio basato su una classe di dati Contact e su un attributo LastName.

{
    "name": "datasourcePush"
    "type": [
        "text"
    ],
    "format":"push",
    "choiceList": {
        "dataSource": {
            "dataClass": "Contact",
            "field": "LastName",
            "entityFormat": "%FirstName% %LastName% - %Job%",
            "search": "LastName",
            "order": "descending" 
        }
    }
}

L’elenco dei contatti aggiornato sarà accessibile come elenco nel modulo di azione dell’applicazione mobile, basato sulla classe di dati Contact con un formato di visualizzazione “push”.

Lo vedremo più avanti, ma il bello è che si possono definire opzioni intelligenti nel file manifest.json, come la visualizzazione di una barra di ricerca o l’ordinamento degli elenchi!

COME APPARE NELL’APP DELL’UTENTE

In questo esempio, il push, il popover e il picker visualizzano elenchi basati su una fonte di dati. È possibile aggiungere una ricerca definendo il valore “search” per il formato di visualizzazione “push”, un’opzione di ordinamento definendo il valore “order” e il formato di visualizzazione dei dati (definendo “entityFormat”). Ad esempio, per il controllo di input picker:

• l’ordine “descending” consente di ordinare l’elenco in ordine decrescente
• l’entityFormat “%FirstName% %LastName% – %Job%” consente di visualizzare “Sophie Adams – UX Designer”, poiché sono disponibili i campi FirstName, LastName e Job.

E soprattutto, questi elenchi sono disponibili anche se si è offline!

Come appare nell’editor del progetto

Come primo passo, dovrete creare il vostro controllo di input di azione dal vostro editor di codice preferito, seguendo gli esempi di questo blog post o della documentazione. Poi dovrete aggiungerlo nella cartella “inputControls” (my base/Resources/mobile/inputControl).

Tornando all’editor del progetto, i controlli di input saranno disponibili e filtrati in base al tipo di parametro e al formato precedentemente definito nel file JSON.

Come potete vedere da questo esempio, è molto semplice creare elenchi di scelte statiche ed elenchi basati su fonti di dati per garantire la migliore esperienza agli utenti mobili!

Non esitate a darci un feedback sul forum di 4D e consultate la documentazione per maggiori dettagli!