Instructivo: selecciona las opciones

Widget de botón Habilidades intermedias de App Maker

Entre 10 y 15 minutos

Qué compilarás

Compilarás una aplicación para pedir pizza. Un usuario de la aplicación puede realizar las siguientes acciones:

  • Pedir una pizza y seleccionar el tamaño y los ingredientes
  • Ver todos los pedidos en una tabla
  • Actualizar las opciones de ingredientes

Qué aprenderás

En este instructivo, aprenderás a realizar las siguientes acciones:

  • Configurar diferentes tipos de widgets de entrada
  • Tres maneras de configurar las opciones para un widget de entrada

También crearás modelos de datos, agregarás páginas y usarás vinculaciones para configurar las opciones en un widget, que se describen en detalle en otros instructivos.

Crea tu aplicación

  1. Accede a la cuenta de G Suite que te proporcionó tu empleador o escuela.
  2. Abre App Maker.
  3. Crea una aplicación en blanco y asígnale el nombre “Pedido de pizza”.

Configura el modelo de datos y la IU de la aplicación

  1. Agrega un modelo de Cloud SQL y asígnale el nombre “Pedidos”.
  2. Agrega los siguientes campos:
Nombre del campo Tipo
Correo electrónico del cliente String
Tamaño String
Ingredientes String
  1. Haz clic en el campo Tamaño (Size) y, luego, en Opciones avanzadas (Advanced). Haz clic en el campo Valores posibles Possible values), ingresa un tamaño, como “pequeño” y haz clic en Agregar (Add). Repite para ingresar más tamaños, como “medio” y “grande”. Haz clic en Listo (Done).
  2. En la barra de navegación izquierda, haz clic en NewPage. En el Editor de propiedades (Property Editor), configura las siguientes propiedades:

    1. Name: PizzaOrders
    2. DisplayName: pedidos de pizza
    3. datasource: pedidos
  3. Abre las opciones de Widgets y agrega un widget de formulario a la página.

    1. Deja la fuente de datos como “Inherited:Orders”.
    2. Selecciona un formulario de tipo Insertar (Insert).
    3. Borra la casilla de verificación Id de la página Seleccionar campos del formulario (Choose form fields).

    El formulario se propaga automáticamente con los campos de texto que corresponden a los campos de la fuente de datos. En los siguientes pasos, agregarás los widgets para reemplazar algunos de estos campos de texto. Sin embargo, no borrarás los campos de texto aún, ya que te muestran cómo se asocian los widgets a la fuente de datos.

  4. Agrega un widget de tabla junto al formulario. Mantén todos los valores predeterminados.

Agrega widgets de selección

En esta sección, configurarás los widgets que permiten a los usuarios seleccionar el tamaño y los ingredientes de la pizza.

  1. Crea una lista desplegable para seleccionar el tamaño de la pizza:

    1. Agrega un widget de lista desplegable al formulario Pedidos de pizza debajo del campo de texto Correo electrónico del cliente (Customer Email).
    2. En el Editor de propiedades (Property Editor), asigna el nombre “SizeSelector” al widget de lista desplegable.
    3. Configura la etiqueta (label) como “Select size:”.
    4. Haz clic en opciones (options). Para vincular las opciones de la lista desplegable a los valores posibles del campo Tamaño (Size), configura las opciones (options) como @datasource.model.fields.Size.possibleValues.
    5. Haz clic en valores (values) y selecciona Tamaño (Size). Esta configuración asocia el valor a @datasource.item.Size. Si haces clic en el widget de campo de texto Tamaño (Size), verás que tiene el mismo valor. El valor asocia el widget a la fuente de datos. Cuando un usuario crea un pedido, la aplicación agrega un registro al modelo de datos con el campo Tamaño (Size) configurado con el valor seleccionado en el widget.
    6. Borra el widget de campo de texto Tamaño (Size).
  2. Crea un widget de selección múltiple para seleccionar los ingredientes de la pizza:

    1. Agrega un widget de selección múltiple a la página debajo de la lista desplegable Seleccionar tamaño (Select size).
    2. En el Editor de propiedades (Property Editor), asigna el nombre “ToppingsSelector” al widget de selección múltiple.
    3. Configura la etiqueta (label) como “Select toppings:”.
    4. Haz clic en opciones (options). En el editor de código de vinculaciones, borra @datasource.text y, luego, ingresa ["basil", "eggplant", "garlic", "tomatoes"] (o tus otros ingredientes favoritos).

      Ten en cuenta que no vinculaste las opciones a los valores posibles configurados para el campo Ingredientes (Toppings) en la fuente de datos. Los valores posibles se usan como validadores de datos y coinciden con exactitud. Para usar este método en los widgets de selección múltiple, deberías ingresar cada ingrediente y todas las combinaciones de ingredientes. Por ejemplo, “albahaca”, “berenjena”, “ajo”, “tomates”, “albahaca, berenjena”, “albahaca, ajo”, “albahaca, berenjena, ajo”, y así sucesivamente.

    5. Haz clic en valores (values) y configura la vinculación como @datasource.item.Toppings#strToArray(). Si haces clic en el widget de campo de texto Ingredientes (Toppings), verás que tiene un valor similar. Dado que el usuario puede seleccionar más de un ingrediente en el widget de selección múltiple, usa #strToArray() para convertir la lista que está en el widget en un arreglo que se guarda en la fuente de datos.

    6. Borra el widget de campo de texto Ingredientes (Toppings).

  3. Cierra las opciones de Widgets (haz clic en Cerrar ).

  4. Obtén una vista previa y prueba la aplicación:

    1. Haz clic en Vista previa (Preview) y permite que la aplicación acceda a los datos.
    2. En el panel Crear pedidos (Create Orders), pide una pizza. Cuando haces clic en Enviar (Submit), el pedido de pizza se agrega a la tabla.
    3. Cierra la pestaña de la vista previa.

Configura las opciones de ingredientes con las vinculaciones de datos

¿Qué sucede si tienes un menú que cambia con frecuencia? No quieres editar las opciones del widget y volver a implementar la aplicación cada vez que agregas una opción de ingrediente. En esta sección, agregarás una página a fin de agregar los ingredientes y una tabla para verlos. Configurarás una vinculación de datos para actualizar automáticamente el selector de ingredientes con las opciones nuevas.

  1. Agrega un modelo de Cloud SQL y asígnale el nombre “Ingredientes”.
  2. En la pestaña Campos (Fields), agrega un campo de tipo string y asígnale el nombre “Ingrediente”.
  3. Agrega una página nueva. En el Editor de propiedades (Property Editor), realiza los siguientes cambios:
    1. Asigna el nombre “CreateToppings” a la página.
    2. Configura la fuente de datos como Ingredientes (Toppings).
    3. En la sección Seguridad (Security), haz clic en el menú Quién puede ver esta página (Who can see this page) y selecciona Solo administradores (Admins only). Con esta configuración, los clientes no pueden acceder a la página ni agregar más ingredientes. Solo podrán acceder a la página PizzaOrders.
  4. Abre las opciones de Widgets y agrega un widget de formulario a la página.

    1. Deja la fuente de datos como Inherited: Toppings.
    2. Selecciona el tipo de formulario Insertar (Insert).
    3. Borra la casilla de verificación Id de la página Seleccionar campos del formulario (Choose form fields).
    4. (Opcional) Cambia el tamaño del widget para que sea más angosto.
  5. Agrega una tabla junto al formulario Insertar. Mantén los valores predeterminados.

  6. Ve a la página Crear pedidos (Create Orders).

  7. En el formulario CreateOrders, selecciona el widget de selección múltiple SelectToppings.

  8. En el Editor de propiedades (Property Editor), haz clic en opciones (options). Borra el arreglo de JavaScript anterior. En Aplicación (Application), selecciona fuente de datos (datasources) Ingredientes (Toppings) elementos (items) proyecciones (projections) Ingrediente (Topping). El valor es @datasources.Toppings.items..Topping. Ahora las opciones del widget son los valores del modelo de datos Ingredientes (Toppings).

  9. Obtén una vista previa y prueba la aplicación:

    1. Haz clic en Vista previa (Preview).
    2. Ten en cuenta que en la página PizzaOrders, en el panel Crear pedidos (Create Orders), no tienes ninguna opción de ingredientes. Debes agregar algunos ingredientes a la base de datos Ingredientes (Toppings).
    3. Usa el selector de página para ir a la página CreateToppings.
    4. Agrega los ingredientes. La tabla se completa a medida que los agregas.
    5. Usa el selector de página para ir a la página PizzaOrders. Ahora el panel Crear pedidos (Create Orders) muestra todos los ingredientes que acabas de agregar.

Felicitaciones. Acabas de crear una aplicación que utiliza varias formas comunes para permitir que los usuarios seleccionen las opciones.

Próximos pasos

  1. Intenta configurar las opciones de tamaño de la pizza en el formulario Crear pedido con las vinculaciones de datos.
  2. Intenta configurar el selector de tamaño de la pizza con el widget de grupo de botones de selección .

    Sugerencia: Para lograr que las opciones muestren el valor del campo Tamaño (Size) en lugar del campo Id, ve al modelo de datos, haz clic en el campo Tamaño (Size) y, luego, haz clic en Establecer como campo de visualización (Set as display field). ¿Deseas usar el grupo de botones de selección para elegir los ingredientes?

  3. Estudia la aplicación Plantilla de clasificaciones de proveedores. La página CompanyCreate tiene un widget de selección múltiple para seleccionar las regiones de la empresa. Las regiones están asociadas al registro de la empresa con una relación.