Cómo Crear Formularios con pestañas en PowerApps for SharePoint List

Cómo Crear Formularios con pestañas en PowerApps for SharePoint List

En este tutorial de PowerApps, Veremos qué son las pestañas en PowerApps, Cómo crear una o varias pestañas en la aplicación PowerApps. Este es un ejemplo completo de cómo crear formularios con pestañas en PowerApps para la lista de SharePoint.

Además, tomando un escenario simple, veremos cómo podemos usar las pestañas de PowerApps en la pantalla de PowerApps.

¿Qué son las pestañas de PowerApps?

• Una pestaña es tal vez un Botón o cualquier control de entrada en el que se puede hacer clic en la parte superior de un Formulario o una Ventana. Esta pestaña ayuda a mostrar otra página o área cuando un usuario hace clic en ella. Cuando un usuario hace clic en las pestañas, está haciendo alguna funcionalidad.
• Del mismo modo, los formularios con pestañas de PowerApps se utilizan para hacer que los elementos de grupo y mantener el tamaño visible de los formularios manejables.
• Hasta ahora PowerApps no tiene ningún formulario con pestañas. Así que podemos crear el formulario con pestañas utilizando un grupo de controles de entrada de Powerapps y una galería.

Requisito:

La siguiente captura de pantalla representa el escenario que quiero crear para los usuarios. Hay un total de tres pestañas como:

1. Enfermedad: Cuando un usuario haga clic en la pestaña Enfermedad, mostrará todos los campos relacionados únicamente con la enfermedad (como Problemas Circulatorios, Enfermedades Hepáticas, Hepatitis, etc.). Al mismo tiempo, esta pestaña estará en modo de desactivación y las otras dos pestañas estarán en modo de edición.
2. Detalles del paciente: Cuando un usuario haga clic en la pestaña Detalles del Paciente, se mostrarán todos los campos relacionados únicamente con el Paciente (como el Nombre del Paciente, el Nombre del Padre, la fecha de nacimiento, etc.). Al mismo tiempo, esta pestaña estará en modo de desactivación y las otras dos pestañas estarán en modo de edición.
3. Detalles relativos: Cuando un usuario haga clic en la pestaña Detalles Relativos, mostrará todos los campos relacionados únicamente con el Familiar del Paciente (como el Nombre del Familiar del Paciente, la Relación con el paciente, el Número de Contacto Relativo, etc.). Al mismo tiempo, esta pestaña estará en modo de desactivación y las otras dos pestañas estarán en modo de edición.

Además, cuando el usuario ingrese todos los valores de campo y una vez que los envíe, todos los datos se almacenarán en la lista de SharePoint.

Leer: Power Apps Loading Spinner

Crear formulario con pestañas en PowerApps

Aquí veremos cómo podemos crear las diferentes pestañas de PowerApps según la necesidad. Siga los pasos a continuación para cumplir con el requisito anterior.

Paso-1:

Hay una Lista de SharePoint llamada Detalles de Registro del Hospital. Esta lista tiene muchas columnas a continuación con diferentes tipos de datos como:

1. Título: Esta es una columna predeterminada con una sola línea de texto. Acabo de cambiarle el nombre a Nombre del paciente.
2. Nombre del padre: Una sola línea de texto
3. Fecha de nacimiento: Fecha y hora
4. Género: Tipo de elección y así sucesivamente

Paso– 2:

• Crea una aplicación Canvas de PowerApps. Conecte la fuente de datos de la Lista de SharePoint (Detalles de Registro del Hospital) a la aplicación.

• En la pantalla de PowerApps, Inserte un formulario de edición (Insert – > Forms – > Edit). Conecte la fuente de datos de lista de SharePoint al formulario. Puede ver que todos los campos se han recuperado de la lista. Mantenga los campos requeridos y elimine los campos innecesarios del formulario.

Paso 3:

• Agregue tres botones para crear tres pestañas en la pantalla. Todos los botones deben colocarse encima del formulario de edición que se ve a continuación.
• Establezca la propiedad Texto de los tres botones en Enfermedad, Detalles del Paciente y Detalles relativos.

Paso– 4:

• Seleccione la pestaña Enfermedad y aplique esta fórmula beow en su propiedadSelelect como:

OnSelect = Set(varFormTab, "Disease")

Donde,

1. varFormTab = Nombre de la variable
2. Enfermedad = Este es el valor que he especificado

• A continuación, seleccione la propiedad DisplayMode de la pestaña y establezca esta fórmula a continuación:

DisplayMode = If( varFormTab = "Disease", Disabled, Edit)

El código anterior especifica si la variable especificada contiene el valor de Enfermedad, entonces la pestaña estará en modo de desactivación, de lo contrario estará en modo de edición.

Paso– 5:

• Seleccione la pestaña Detalles del paciente y aplique esta fórmula beow en su propiedadSelelect como:

OnSelect = Set(varFormTab, "PatientDetails")

Donde,

1. varFormTab = Nombre de variable
2. PatientDetails = Este es el valor que he especificado

• A continuación, seleccione la propiedad DisplayMode de la pestaña y establezca esta fórmula a continuación:

DisplayMode = If( varFormTab = "PatientDetails", Disabled, Edit)

El código anterior especifica si la variable especificada contiene el valor PatientDetails, entonces la pestaña estará en modo de desactivación, de lo contrario estará en modo de edición.

Paso– 6:

• Seleccione la pestaña Detalles relativos y aplique esta fórmula beow en su propiedadSelelect como:

OnSelect = Set(varFormTab, "RelativeDetails")

Donde,

1. varFormTab = Nombre de variable
2. RelativeDetails = Este es el valor que he especificado

• A continuación, seleccione la propiedad DisplayMode de la pestaña y establezca esta fórmula a continuación:

DisplayMode = If( varFormTab = "RelativeDetails", Disabled, Edit)

El código anterior especifica si la variable especificada contiene el valor RelativeDetails, entonces la pestaña estará en modo de desactivación, de lo contrario estará en modo de edición.

Paso– 7:

• Ahora decidiremos qué campo se mostrará en qué pestaña. Eso significa, supongamos en la pantalla, que tengo una enfermedad llamada «Dolores de cabeza Crónicos».
• Quiero mostrar este campo cuando el usuario haga clic en la pestaña Enfermedad. Siga la siguiente fórmula para hacerlo.
• Seleccione la tarjeta de datos de Dolores de cabeza Crónicos (la tarjeta de datos debe desbloquearse primero) y aplique esta fórmula a continuación en su propiedad visible como:

Visible = If( varFormTab = "Disease", true, false)

Donde,

1. varFormTab = Nombre de variable que hemos creado antes
2. Enfermedad = El valor que hemos especificado

El código anterior especifica, si la variable es igual al valor de Enfermedad, entonces el campo será visible de lo contrario se ocultará.

NOTA:

Si está interesado en obtener más información sobre el control de alternancia de PowerApps, consulte este artículo: Control de alternancia de PowerApps + Cómo usarlo con ejemplo. Este tutorial de PowerApps le ayuda a obtener cómo cambiar el valor de conmutación de verdadero a Sí o falso a No y muchos más.

Paso– 8:

• De la misma manera, supongamos que hay un campo llamado Nombre del paciente y queremos mostrar el campo cuando el usuario haga clic en la pestaña Detalles del paciente.
• Para hacerlo, Seleccione la tarjeta de datos del Nombre del paciente y aplique esta fórmula a continuación en su propiedad Visible:

Visible = If( varFormTab = "PatientDetails", true, false)

Donde,

1. varFormTab = Nombre de variable que hemos creado antes
2. PatientDetails = El valor que hemos especificado

El código anterior especifica, si la variable es igual al valor PatientDetails, entonces el campo será visible de lo contrario se ocultará.

• De la misma manera, puede hacer el mismo proceso para los campos rest para sus pestañas específicas.

Paso 9:

• Inserte un botón donde le ayudará a almacenar el registro en la lista de SharePoint (Detalles de Registro de Hospital).
• Seleccione el Botón y establezca su propiedad de texto para Guardar.
• Aplique esta fórmula a continuación en la propiedadectelect del botón como:

OnSelect = SubmitForm(Form1)

Donde,

Form1 = Editar nombre del formulario

Paso– 10:

• Guarde y publique la aplicación. Vuelva a abrir la aplicación. Introduzca los valores seleccionando todas y cada una de las pestañas y, a continuación, haga clic en el botón Guardar.

• A continuación, vaya a la lista de Sharepoint existente (Detalles de registro de Hospital) y actualícela. Puede ver que se ha guardado un nuevo elemento como en la siguiente captura de pantalla.

Además, es posible que te gusten estos tutoriales de PowerApps a continuación como:

• Tabla repetitiva de PowerApps
• Función de recuento de PowerApps con ejemplos
• Función de recuento de PowerApps con ejemplos
• Función de Recuento de PowerApps con ejemplos
• Casilla de verificación de PowerApps: Cómo usar las funciones
• PowerApps First, FirstN, Last y LastN con ejemplos
• PowerApps AddColumns Function con ejemplos
• PowerApps LastSubmit() con ejemplos
• PowerApps ForAll Function con ejemplos
• PowerApps Patch Function con ejemplos

En este tutorial de PowerApps, Vimos qué son PowerApps pestañas, Cómo crear una o varias pestañas en la aplicación PowerApps. Aprendimos aquí, cómo crear un formulario con pestañas para la lista de SharePoint en PowerApps.