4D para iOS: Controles de entrada personalizados

Hasta ahora, los formateadores personalizados le permitían hacer coincidir el texto o las imágenes con el contenido de un campo, como reemplazar verdadero/falso con una imagen o 1, 2 con etiquetas de texto. 4D v19 R3 le permite crear controles de entrada de acciones disponibles desde formularios de acciones, como crear una lista de elección con texto predefinido. Y aún mejor, esta lista puede ser llenada dinámicamente usando una fuente de datos como una lista de empleadores. ¡Profundicemos en los detalles!

RECORDATORIO DE LOS FORMATEADORES PERSONALIZADOS

Los formateadores personalizados le permiten tratar las enumeraciones utilizando un simple archivo JSON para mostrar los valores correspondientes en función de los valores de su base de datos.

Aquí hay un ejemplo del archivo manifest.json :

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

Este sencillo archivo JSON le permite convertir enteros en cadenas para que se muestren en su aplicación iOS. Pero también puedes crear y utilizar este tipo de formateadores para mostrar imágenes, enteros, emojis…

Colocándolos en una carpeta específica de «formateadores«, puedes asignarlos a un campo de texto, por ejemplo, para obtener ese tipo de resultado:

Los valores del campo de estado «Por hacer», «En curso» y «Hecho » en la parte inferior de la pantalla se muestran correctamente según el valor entero de su base de datos.

Es una forma sencilla de mostrar valores formateados en tus aplicaciones móviles. La ventaja es que esas listas de elección se utilizan automáticamente en tus formularios de acción, permitiéndote seleccionar uno de los valores de la lista para utilizarlo como parámetro. Pero uno de los límites es que esas listas son estáticas porque se basan en un archivo JSON.

CONTROLES DE ENTRADA DE ACCIONES

Ahora hablemos de los controles de entrada. Esta nueva característica le permitirá crear

• listas deelección utilizando un archivo manifest.json igual que antes y
• listas basadasen fuentes de datos.

Esto le garantizará tener siempre listas actualizadas directamente accesibles desde su aplicación móvil.

Estos controles de entrada de acciones son sencillos de crear y muy fáciles de usar. Para utilizarlos en tus proyectos móviles, al igual que para los formateadores o los formularios personalizados de listas y detalles, tendrás que incluirlos en tu base de datos en una carpeta especial «inputControls» (mi base/Resources/mobile/inputControl).

Esos controles de entrada de acción estarán entonces disponibles y seleccionables en la sección Acción, en las propiedades de los parámetros, filtrados por el tipo de su parámetro de acción y la forma en que desea mostrar sus listas usando formatos.

Vamos a centrarnos en los formatos porque es un concepto bastante nuevo. Básicamente, los formatos te permiten definir la forma en que quieres mostrar tus listas en el lado de la aplicación móvil:

• Push: abre una nueva vista que viene de la derecha para mostrar la lista
• Segmentada: muestra tu lista en forma de elementos en una barra que puedes seleccionar
• Popover: abre una nueva vista que viene de la parte inferior para mostrar la lista
• Hoja: abre una hoja desde la parte inferior que muestra la lista desde la parte inferior
• Picker: a diferencia de los otros, este formato permite desplazarse para seleccionar el valor deseado en lugar de seleccionar un valor haciendo clic en él

Ahora veamos algunos ejemplos

LISTAS DE ELECCIÓN ESTÁTICAS

Este es un ejemplo de un archivo manifest.json que puede ser utilizado como una lista de elección estática:

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

Muy similar al formateador de datos de la aduana, ¿verdad? Como puede ver, aquí se define una simple lista estática para este control de entrada de acciones con un formato de visualización de «hoja«.

LISTAS DE ELECCIÓN DINÁMICAS A PARTIR DE UNA FUENTE DE DATOS

Y aquí tenemos un ejemplo basado en una clase de datos Contacto y un atributo Apellido.

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

La lista de contactos actualizada será accesible como una lista en el formulario de acción de su aplicación móvil, basada en la clase de datos Contacto con un formato de visualización » push«.

Lo veremos más adelante, pero lo mejor es que puedes definir opciones inteligentes en tu archivo manifest.json, como mostrar una barra de búsqueda o cómo quieres ordenar tus listas.

CÓMO SE VE EN LA APLICACIÓN DEL USUARIO

En este ejemplo, el push, el popover y el picker muestran listas basadas en una fuente de datos. Puedes añadir una búsqueda definiendo el valor «search» para el formato de visualización «push», una opción de ordenación definiendo el valor «order», así como el formato de visualización de tus datos (definiendo el «entityFormat»). Por ejemplo, para el control de entrada del selector:

• el orden » descendente » le permite ordenar su lista en orden descendente
• el entityFormat «%FirstName% %LastName% – %Job%» le permite mostrar «Sophie Adams – UX Designer» ya que los campos FirstName, LastName y Job están disponibles.

Y lo mejor de todo es que esa lista está disponible incluso si está desconectado.

CÓMO SE VE EN EL EDITOR DE PROYECTOS

Como primer paso, tendrás que crear tu control de entrada de acción desde tu editor de código favorito, siguiendo los ejemplos de esta entrada del blog o la documentación.Luego tendrás que añadirlos en la carpeta «inputControls» (mi base/Resources/mobile/inputControl).

De vuelta al editor del proyecto, tus controles de entrada estarán disponibles y filtrados por el tipo de parámetro y el formato previamente definido en tu archivo JSON.

Y como puede ver con este ejemplo, es bastante fácil crear listas de elección estáticas y listas basadas en fuentes de datos para garantizar la mejor experiencia para sus usuarios móviles.

No dude en darnos su opinión en el foro de 4D, y consulte la documentación para más detalles.