Tutorial: Formulario Mobile

En este tutorial, se creará un Formulario Mobile utilizando la tabla de muestra “orders” y los siguientes recursos adicionales:

  • Bloques
  • Comandos SQL

Creando un Formulario Mobile

Nota:

Si tiene alguna duda sobre cómo crear un formulario, vaya a: Creación de un formulario nuevo

1. Cree una nueva aplicación de Formulario, seleccione la opción “Registro Único” y luego seleccione la tabla de muestra “orders“.

2. Hecho esto, si desea una mejor visualización del formulario, seleccione la pestaña “Editar Campos” y edite la Etiqueta de los campos, como se muestra en la imagen a continuación.

Editando los campos de un Formulario Mobile

1. Primero, en el menú de la aplicación, acceda a la pestaña “Layout” y seleccione la opción “Bloques“.

2. Ahora, cambie el nombre del bloque existente a “Pedidos” y configúrelo de acuerdo con la imagen a continuación:

3. Aún en la configuración del bloque, haga clic en el botón “Crear nuevo bloque” y cree un nuevo bloque llamado “Ubicación“, como se muestra en la imagen.

4. Una vez creado, configure el bloque de acuerdo con la imagen a continuación.

5. Una vez hecho esto, en el menú de la aplicación, acceda a la pestaña “Posicionamiento de campos”.

6. Ahora, mueva los campos: “orderid” y “requireddate” al cuadro de la izquierda, como se muestra a continuación.

7. Luego, organiza los campos restantes en sus respectivos bloques, como se muestra en la imagen a continuación.

8. Una vez hecho esto, en el menú de la aplicación, acceda a la pestaña “Campos” y seleccione el campo “customerid”.

9. En la sesión “Configuración general“, desactive la opción “Usar Select2“.

10. Luego, navegue a la sección “Edición de Loookup” y reemplace el comando presente en el cuadro de texto con el “Comando SQL” a continuación, como se muestra en la imagen:

SELECT customerid, companyname 
FROM customers 
ORDER BY companyname

11. Ahora seleccione el campo employeeid“.

12. En la sección “Configuración general“, cambie el “Tipo de datos” a “Número de auto-complete” y desactive la opción “Usar Select2“.

13. Luego, navegue a la sección “Edición de Loookup” y reemplace el comando presente en el cuadro de texto con el “Comando SQL” a continuación, como se muestra en la imagen:

SELECT employeeid, sc_concat(firstname,' ', lastname) 
FROM employees 
ORDER BY firstname, lastname

14. Ahora seleccione el campo “priceorder“.

15. Navegue a la sección “Formato de Valores” y active la opción “Uso de símbolos de moneda“.

16. Ahora seleccione el campo “shipcountry“.

17. En la sección “Configuración general“, cambie el “Tipo de dato” a “Select“, establezca el “Valor inicial (tipo)” en “Valor definido” y escriba “US” en la pestaña “Valor inicial“.

18. Luego, navegue a la sección “Edición de Loookup” y reemplace el comando presente en el cuadro de texto con el “Comando SQL” a continuación, como se muestra en la imagen:

SELECT iso, printable_name 
FROM country 
ORDER BY printable_name

19. Ahora, seleccione el campo “shipregion“.

20. En la sección “Configuración general“, cambie el “Tipo de dato” a “Select“.

21. Luego, navegue a la sección “Edición de Loookup” y reemplace el comando presente en el cuadro de texto con el “Comando SQL” a continuación, como se muestra en la imagen:

SELECT regionid, regiondescription 
FROM region 
ORDER BY regiondescription

22. Ahora seleccione el campo “shipstate“.

23. En la sección “Configuración general“, cambie el “Tipo de dato” a “Select“.

24. Luego, navegue a la sección “Edición de Loookup” y reemplace el comando presente en el cuadro de texto con el “Comando SQL” a continuación, como se muestra en la imagen:

SELECT stateid, statename 
FROM states 
ORDER BY statename

25. Ahora seleccione el campo “shipcity“.

26. En la sección “Configuración general“, cambie el “Tipo de dato” a “Select“.

27. Luego, navegue a la sección “Edición de Loookup” y reemplace el comando presente en el cuadro de texto con el “Comando SQL” a continuación, como se muestra en la imagen:

SELECT cityid, cityname 
FROM city 
WHERE stateid = '{shipstate}'
ORDER BY cityname

28. Ahora seleccione el campo “shipvia“.

29. En la sección “Configuración general“, cambie el “Tipo de dato” a “Radio“.

30. Luego, navegue a la sección “Edición de Loookup” y reemplace el comando presente en el cuadro de texto con el “Comando SQL” a continuación, como se muestra en la imagen:

ELECT shipperid, companyname 
FROM shippers 
ORDER BY companyname

31. Ahora seleccione el campo “freight“.

32. Navegue a la sección “Formato de Valores” y active la opción “Uso de símbolos de moneda“.

33. Finalmente, seleccione el botón “Ejecutar Aplicación” en la barra de herramientas para generar el formulario.

Después de seguir los pasos anteriores, el formulario se verá así:

Nota:

Para acceder al formulario en el formato siguiente, utilice un dispositivo móvil.

Para ver más ejemplos creados con Scriptcase, vaya a: Ejemplos: Sistemas completos y aplicaciones con Scriptcase.

Compartir este tutorial

Tutoriales en la misma categoria

Form login responsivo 3

En este ejemplo, veremos cómo utilizar las Plantillas HTML disponibles para crear aplicaciones de ...

Tutorial: Form login responsivo 2

En este ejemplo, veremos cómo utilizar las Plantillas HTML disponibles para crear aplicaciones de...

Form login responsivo

En este ejemplo, veremos cómo utilizar las Plantillas HTML disponibles para crear aplicaciones de ...

Aplicación Grid de informe con etiquetas fijas

Informe en formato de resumen con etiquetas ancladas a la parte superior de la pantalla. Cre...

Comentar este post