4D pour iOS : Commandes de saisie personnalisées

Jusqu’à présent, les formateurs personnalisés vous permettaient de faire correspondre du texte ou des images au contenu d’un champ, par exemple en remplaçant true/false par une image ou 1, 2 par des étiquettes de texte. 4D v19 R3 vous permet de créer des contrôles d’entrée d’action disponibles à partir de formulaires d’action, comme la création d’une liste de choix avec un texte prédéfini. Et mieux encore, cette liste peut être remplie dynamiquement en utilisant une source de données telle qu’une liste d’employeurs. Entrons dans les détails !

RAPPEL DES FORMATEURS PERSONNALISÉS

Lesformateurs personnalisés permettent de traiter les énumérations à l’aide d’un simple fichier JSON pour afficher les valeurs correspondantes en fonction des valeurs de votre base de données.

Voici un exemple de fichier manifest.json :

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

Ce simple fichier JSON vous permet de convertir des entiers en chaînes de caractères pour les afficher dans votre application iOS. Mais vous pouvez également créer et utiliser ces types de formateurs pour afficher des images, des entiers, des emojis…

En les déposant dans un dossier spécifique « formatters« , vous pouvez les affecter à un champ texte, par exemple, pour obtenir ce genre de résultat :

Les valeurs des champs d’état « To Do », « In Progress » et « Done » en bas de l’écran sont correctement affichées en fonction de la valeur entière dans votre base de données.

Il s’agit d’un moyen simple d’afficher des valeurs formatées dans vos applications mobiles. L’avantage est que ces listes de choix sont automatiquement utilisées dans vos formulaires d’action, ce qui vous permet de sélectionner l’une des valeurs de la liste pour l’utiliser comme paramètre. Mais l’une des limites est que ces listes sont statiques car elles sont basées sur un fichier JSON.

CONTRÔLES DE SAISIE DES ACTIONS

Parlons maintenant des contrôles d’entrée ! Cette nouvelle fonctionnalité vous permettra de créer :

• deslistes de choix utilisant un fichier manifest.json comme auparavant et
• deslistes basées sur des sources de données.

Cela vous garantira d’avoir toujours des listes à jour directement accessibles depuis votre application mobile !

Ces contrôles d’entrée d’action sont simples à créer et très faciles à utiliser. Pour les utiliser dans vos projets mobiles, tout comme pour les formateurs ou les formulaires de liste et de détail personnalisés, vous devrez les inclure dans votre base de données dans un dossier spécial « inputControls » (my base/Resources/mobile/inputControl).

Ces contrôles d’entrée d’action seront ensuite disponibles et sélectionnables dans la section Action, dans les propriétés des paramètres, filtrés par le type de votre paramètre d’action et la manière dont vous souhaitez afficher vos listes à l’aide de formats.

Concentrons-nous sur les formats, car il s’agit d’un concept assez nouveau. Fondamentalement, les formats vous permettent de définir la manière dont vous souhaitez afficher vos listes du côté de l’application mobile :

• Push : ouvre une nouvelle vue qui vient de la droite pour afficher la liste.
• Segmenté : affiche votre liste sous la forme d’éléments dans une barre que vous pouvez sélectionner.
• Popover : ouvre une nouvelle vue qui vient du bas pour afficher la liste.
• Feuille : ouvre une feuille qui vient du bas et affiche la liste par le bas.
• Picker : contrairement aux autres, ce format vous permet de faire défiler la liste pour sélectionner la valeur souhaitée au lieu de sélectionner une valeur en cliquant dessus.

Voyons maintenant quelques exemples !

LISTES DE CHOIX STATIQUES

Voici un exemple de fichier manifest.json qui peut être utilisé comme une liste de choix statique :

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

Très similaire au formateur de données douanières, non ? Comme vous pouvez le voir, une simple liste statique est définie ici pour ce contrôle de saisie d’action avec un format d’affichage « feuille ».

LISTES DE CHOIX DYNAMIQUES PROVENANT DE LA SOURCE DE DONNÉES

Et voici un exemple basé sur une classe de données Contact et un attribut LastName.

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

La liste de contacts mise à jour sera accessible sous forme de liste dans le formulaire d’action de votre application mobile, basée sur la classe de données Contact avec un format d’affichage « push ».

Nous verrons cela plus tard, mais ce qui est génial, c’est que vous pouvez définir des options intelligentes dans votre fichier manifest.json, comme l’affichage d’une barre de recherche ou la façon dont vous voulez trier vos listes!

COMMENT CELA SE PRÉSENTE DANS L’APPLICATION DE L’UTILISATEUR

Dans cet exemple, le push, le popover et le picker affichent des listes basées sur une source de données. Vous pouvez ajouter une recherche définissant la valeur « search » pour le format d’affichage « push », une option de tri définissant la valeur « order », ainsi que le format d’affichage de vos données (en définissant le « entityFormat »). Par exemple, pour le contrôle de saisie du sélecteur :

• l’ordre « descendant » vous permet de trier votre liste par ordre décroissant
• le format d’affichage « %FirstName% %LastName% – %Job% » vous permet d’afficher « Sophie Adams – UX Designer » puisque les champs FirstName, LastName et Job sont disponibles.

Et le meilleur, c’est que ces listes sont disponibles même si vous êtes hors ligne !

Comment cela se présente-t-il dans l’éditeur de projet ?

Dans un premier temps, vous devrez créer votre contrôle d’entrée d’action à partir de votre éditeur de code préféré, en suivant les exemples de cet article de blog ou de la documentation, puis vous devrez les ajouter dans le dossier « inputControls » (ma base/Ressources/mobile/inputControl).

De retour dans l’éditeur de projet, vos contrôles d’entrée seront disponibles et filtrés par le type de votre paramètre et le format précédemment défini dans votre fichier JSON.

Et comme vous pouvez le constater avec cet exemple, il est assez facile de créer des listes de choix statiques et des listes basées sur des datasources pour garantir la meilleure expérience à vos utilisateurs mobiles !

N’hésitez pas à nous faire part de vos commentaires sur le forum 4D, et consultez la documentation pour plus de détails !