Instructivo 5: Conecta modelos de datos

Widget de botón Habilidades intermedias de App Maker

access_time Aproximadamente 30 minutos

Qué compilarás

Compilarás una aplicación de recursos humanos que enumera a los empleados por departamento. Un usuario de la aplicación puede hacer las siguientes acciones:

  • Agregar, editar, ordenar y borrar registros de departamentos y empleados
  • Ver los registros de los empleados de dos maneras:

    • Por departamento solamente
    • Por departamento o ver todo

En esta aplicación, no se incluye una manera para que el usuario se mueva entre las páginas. Utilizarás el selector de página en el modo Vista previa para moverte entre páginas.

Qué aprenderás

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

  • Crear relaciones entre modelos de datos. En este instructivo, crearás una relación de uno a varios entre un modelo de departamentos y un modelo de empleados. Un departamento puede tener muchos empleados
  • Mostrar los registros que cumplen con la relación, como los registros de todos los empleados del departamento de recursos humanos

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 Relaciones.

Configura el modelo de datos Departamentos

  1. Agrega un modelo de datos de Cloud SQL y asígnale el nombre Departamentos.
  2. Agrega los siguientes campos:

    Nombre del campoTipo de campo
    DepartmentString
    LocationString
  3. Haz clic en el campo Departamento (Department) y, luego, en Establecer como campo de visualización (Set as display field).

    Cuando configuras Departamento (Department) como un campo de visualización, App Maker usa los valores de campo para hacer referencia a un registro en ese modelo. Por ejemplo, cuando agregues un widget desplegable más adelante en este instructivo, los valores del campo Departamento (Department) propagarán automáticamente las opciones desplegables (con la expresión de vinculación @datasource.items).

Configura el modelo de datos Empleados

  1. Agrega un modelo de datos de Cloud SQL y asígnale el nombre Empleados.
  2. Agrega los siguientes campos:

    Nombre del campoTipo de campo
    FirstNameString
    LastNameString
    EmailString
    StartDateFecha

    No es necesario establecer un campo de visualización para el modelo Empleados.

Agrega una relación

  1. Haz clic en el modelo Departamentos y, luego, en la pestaña Relaciones (Relations).

  2. Haz clic en Agregar relación (Add Relation):

    1. Para el extremo de relación del modelo Departamentos, haz clic en la flecha hacia abajo de Conteo (Count) y selecciona Uno (One). Deja el nombre predeterminado para este extremo de relación. Ingresa “Departamento” para el nombre de este extremo de relación.
    2. Para el otro modelo, haz clic en la flecha hacia abajo de Modelo (Model) y selecciona Empleados.
    3. Para el extremo de relación del modelo Empleados, haz clic en la flecha hacia abajo de Conteo (Count) y selecciona Varios (Many). Ingresa “Empleados” para el nombre de este extremo de relación.
    4. Haz clic en Crear (Create).

Crea una página donde puedas agregar departamentos

  1. Cambia el nombre de la página NewPage a EditDepartments. Se selecciona el panel de nivel superior de la página.
  2. En el Editor de propiedades (Property Editor), haz clic en la propiedad de la fuente de datos (datasource) y selecciona Departamentos.
  3. Agrega un formulario de inserción a la página. Mantén las opciones predeterminadas para el formulario.
  4. Cierra la paleta de Widgets (haz clic en Cerrar close).

Crea una página en la que puedas agregar empleados

  1. Agrega una página nueva. Asígnale el nombre EditEmployees, establece la fuente de datos en Empleados y haz clic en Crear (Create).
  2. Agrega un formulario de inserción a la página. Mantén las opciones predeterminadas para el formulario.
  3. Cierra la paleta de widget.

Crea una página en la que puedas enumerar empleados por departamento

Puedes utilizar las relaciones para tabular los empleados por departamento de dos maneras. En este instructivo, se muestran ambos enfoques:

  • Solo departamentos específicos (como se muestra en esta sección): usa la relación como una fuente de datos. La tabla que utiliza esta fuente de datos no admite la paginación o la clasificación basada en columnas.
  • Departamentos específicos; cuando no se selecciona ningún departamento; todos los empleados (se muestra en la próxima sección): usa un filtro de consulta en la relación. La tabla que utiliza el filtro de consulta admite paginación. También puedes ordenar la tabla por columnas.

En una aplicación real, elige un enfoque. Recomendamos el segundo enfoque porque está paginado, se puede ordenar y solo está vacío cuando un departamento no tiene empleados.

Para crear una página que enumere los empleados solo por departamento realiza las siguientes acciones:

  1. Agrega una página, asígnale el nombre RelationDatasource, establece la fuente de datos en Departamentos y haz clic en Crear (Create).
  2. Agrega una lista desplegable para permitir que los usuarios de la aplicación seleccionen el departamento:

    1. Haz clic en el Widget widgets y agrega un widget desplegable  a la página RelationDatasource.
    2. Haz clic en la propiedad opciones (options) y selecciona Más opciones (More options) chevron_right fuente de datos (datasource) chevron_right elementos (items). Haz clic en Aceptar (OK). Esto establece los valores posibles del menú desplegable en el campo de visualización de la fuente de datos; en este caso los valores en el campo Departamento (Department).
    3. Haz clic en la propiedad valor (value) y selecciona Más opciones (More options) chevron_right fuente de datos (datasource) chevron_right elementos (items). Haz clic en Aceptar (OK). Esto establece el valor del widget en el elemento que el usuario selecciona.
    4. Haz clic en la propiedad etiqueta (label) y, luego, ingresa Seleccionar un departamento (Select a department).
  3. Agrega una tabla para mostrar los registros de empleados:

    1. Agrega un widget de tabla Widget de tabla a la página debajo del widget desplegable. Alinea los lados izquierdos de la tabla y el widget desplegable.
    2. Selecciona la fuente de datos Departamento: Empleado (relación) (Department: Employee [relation]) y haz clic en Siguiente (Next). Con esta fuente de datos, la tabla muestra los empleados que coinciden con el valor del widget desplegable.
    3. Mantén las opciones predeterminadas para la tabla. Haz clic en Siguiente (Next) y Finalizar (Finish).
  4. Cierra la paleta de widget.

Crea una página en la que puedas enumerar empleados por departamento o enumerar todos los empleados

  1. Agrega una página, asígnale el nombre QueryFilter, establece la fuente de datos en Empleados y haz clic en Crear (Create).
  2. Agrega una lista desplegable para permitir que los usuarios seleccionen el departamento:

    1. Haz clic en Widgets widgets y agrega un menú desplegable  a la página QueryFilter.
    2. Para la propiedad valor (value), selecciona la expresión de vinculación Más opciones (More options) chevron_right fuente de datos (datasource) chevron_right consulta (query) chevron_right filtros (filters) chevron_right Departamento (Department ) chevron_right _iguales (_equals). Haz clic en Aceptar (OK).
    3. Para la propiedad opciones (options), selecciona una expresión de vinculación del panel Aplicación (Applicatio) a la izquierda: fuente de datos (datasources) chevron_right Departamento (Department) chevron_right elementos (items). Haz clic en Aceptar (OK).
    4. Haz clic en la propiedad etiqueta (label) y, luego, ingresa Seleccionar un departamento (Select a department).
    5. Abre la sección Eventos (Events) del editor de propiedades, haz clic onValueEdit y selecciona Volver a cargar fuente de datos (Reload datasource) para volver a cargar la fuente de datos y ejecutar la consulta cuando el usuario de la aplicación cambie el valor de la lista desplegable.
  3. Agrega una tabla para mostrar los registros de los empleados que coincidan con la selección del departamento:

    1. Agrega una tabla Widget de tabla a la página debajo del menú desplegable. Alinea los lados izquierdos de la tabla y el widget desplegable.
    2. Se selecciona la fuente de datos Heredado: empleados (Inherited: Employees). Mantén las opciones predeterminadas para la tabla; haz clic en Siguiente (Next) chevron_right Siguiente (Next) chevron_right Finalizar (Finish).
  4. Cierra la paleta de widget.

Obtén una vista previa y prueba la aplicación

  1. En la esquina superior derecha, haz clic en Vista previa (Preview) para ejecutar la aplicación en una pestaña nueva del navegador.
  2. Haz clic en Permitir(Allow) para permitir que la aplicación use la información específica.
  3. Ingresa los datos del departamento:
    1. Desde el selector de páginas, selecciona EditDepartments.
    2. En el formulario Editar departamento (Edit Department), ingresa el nombre y la ubicación de varios departamentos. Haz clic en Crear (Create) para crear cada registro nuevo.
  4. Ingresa los datos del empleado:
    1. Desde el selector de página, selecciona EditEmployees.
    2. En el formulario Editar empleado (Edit Employee), ingresa información para varios empleados. Haz clic en Crear (Create) para crear cada registro nuevo. Selecciona diferentes departamentos para los empleados.
  5. Observa los empleados por departamento en la página que utiliza una fuente de datos de relación para la tabla:

    1. Desde el selector de páginas, selecciona RelationDatasource.
    2. Selecciona un departamento de la lista desplegable. La tabla contiene registros de empleados para ese departamento. Cuando no se selecciona ningún departamento, la tabla estará vacía.
  6. Observa los empleados por departamento en la página que usa un filtro de consulta para cargar datos de la tabla:

    1. Desde el selector de página, selecciona QueryFilter.
    2. Cuando no se selecciona ningún departamento, la tabla contiene todos los registros de empleados. Selecciona un departamento del menú desplegable. Ahora la tabla contiene registros de empleados para ese departamento.

Felicitaciones. Compilaste una aplicación de App Maker que usa relaciones.

Próximos pasos

  1. Obtén más información sobre las relaciones.
  2. Estudia la aplicación de ejemplo de Relaciones. Es similar a la aplicación que acabas de crear.
  3. Obtén más información sobre las fuentes de datos de búsqueda y los filtros.