SAP Build Apps brinda la capacidad de crear e implementar backends de aplicaciones. Esta capacidad se denomina Visual Cloud Functions (VCF) y aquí puede encontrar una buena documentación para esta característica.
La capacidad de VCF se puede utilizar para diseñar e implementar en su subcuenta de SAP Business Technology Platform (BTP) un modelo de datos que se puede completar con sus datos y luego acceder a las aplicaciones desarrolladas con SAP Build Apps, para recuperar, editar y guardar datos.
En el artículo de hoy, explicaré cómo se puede acceder a los datos almacenados en un backend VCF utilizando las capacidades proporcionadas que permiten al desarrollador realizar actividades de clasificación, filtrado y paginación.
Para escribir este artículo, implementé un backend VCF simple que almacena información básica sobre los automóviles: una descripción, incluida la marca y el modelo, el tipo de motor y la potencia:
Después del diseño y la implementación del backend de VCF, cargué algunos datos con el enfoque que describí. en un articulo anterior.
Y luego comencé a desarrollar una aplicación, llamada CarExplorer, que consume los datos almacenados en el backend de VCF.
Se supone que la aplicación carga datos desde el backend y muestra una lista de automóviles en su interfaz gráfica de usuario.
Después de crear un nuevo proyecto de SAP Build Apps desde el lobby, primero debemos definir una conexión con el backend. esta entrada de blog explica cómo completar esta tarea (consulte el Habilitación del backend desde la interfaz de usuario sección).
El siguiente paso consiste en la definición de una Variable de Datos, denominada Autopara almacenar la información recuperada del backend VCF, como una colección de registros
Tenga en cuenta que, cuando se define la variable de datos, SAP Build Apps genera automáticamente la lógica de acceso para recuperar todos los datos cuando se carga la página inicial.
Ahora podemos mostrar fácilmente todos los datos, simplemente agregando a la página inicial de nuestra aplicación una Tarjeta y configurándola para que se repita con la variable Coche y muestre la información básica.
Para la propiedad Contenido, utilicé la siguiente fórmula:
"Engine type: " + repeated.current.engineType + " Power: " + repeated.current.power + " HP"
Ahora puede simplemente ejecutar la aplicación en la vista previa y mirar los autos que se muestran:
Como puede ver, la lista de autos no está ordenada y debe deslizarse hacia abajo para buscar todos los autos. Además, la lista contiene todos los autos que tenemos en el backend. Al acceder a un backend que contiene cientos (o miles) de registros, es probable que la aplicación no funcione, porque el sistema no puede asignar a una sola variable toda la memoria necesaria para almacenar todos esos registros.
Aquí es el momento de comenzar a explorar las capacidades de acceso avanzado, para que nuestra aplicación sea fácil de usar y también capaz de trabajar con cualquier cantidad de registros almacenados en el backend. Al usar esas capacidades, podrá acceder a backends que contienen muchos datos y filtrar y ordenar esos datos según sus requisitos.
La primera capacidad que quiero explorar es la clasificación. Gracias a esa capacidad, podrá ordenar su lista según uno o más criterios.
Establecer los criterios de clasificación es muy fácil: solo necesita volver a la pantalla de definición de Variable de datos y seleccionar el ordenar propiedad:
Esta propiedad debe estar vinculada a un Lista de valores:
y luego puede agregar sus opciones de clasificación preferidas:
En este caso, decidí ordenar mi lista de autos por Marca/Modelo en orden ascendente. Simplemente ejecutando nuevamente la aplicación en la vista previa, verá que ahora la lista parece estar ordenada.
Puede hacer que sus criterios de clasificación sean más sofisticados utilizando fórmulas e involucrando otros componentes de su aplicación. Solo como ejemplo, agregué a mi pantalla una casilla de verificación para seleccionar un criterio de clasificación alternativo (por Poder) y definí una variable booleana (ordenarPorPotencia) vinculado a ese objeto. Luego cambié el ordenar propiedad de la Datos del coche variable, vinculándola a una fórmula, en lugar de una lista:
IF(pageVars.sortByPower, [{property: ["power"], direction: "asc"}], [{property: ["brandModel"], direction: "asc"}] )
Ahora, al obtener una vista previa de la aplicación, marcar y desmarcar la casilla cambia dinámicamente el orden de clasificación por Potencia o Marca/Modelo.
La capacidad de filtrado le permite extraer del backend solo los registros que satisfacen sus criterios de selección.
Para implementar el filtrado de registros, en la página de definición de Variable de datos, debe configurar el Condición del filtro propiedad:
y para unirlo a un Objeto con propiedades:
Luego puede agregar sus criterios de filtrado.
Para proporcionar un ejemplo, agregué a mi aplicación una barra de búsqueda y la vinculé a una variable llamada sbuscar. Ahora puedo usarlo para definir un criterio de filtrado:
También en este caso, puede hacer que sus criterios de filtrado sean más flexibles simplemente usando una fórmula en lugar de un enlace de objeto:
{type: "and", conditions: [{type: "contains", property: ["brandModel"], value: pageVars.searchFor}]}
Después de hacer eso, al obtener una vista previa de su aplicación, puede escribir un texto en el cuadro de búsqueda y solo la Marca/Modelos que contengan esa cadena se extraerán del VCF y se mostrarán en su aplicación.
La capacidad de paginación es muy útil cuando se accede a backends que contienen muchos registros: le permite leer solo una página de registros de un tamaño determinado, simplificando la visualización de la información y evitando asignar demasiada memoria a la variable de datos utilizada para almacenar los registros. .
La capacidad de Paginación se puede configurar desde la página de definición de Variable de datos y establecer el Paginación propiedad como un vínculo a un Objeto con propiedadesde la misma manera que hicimos para el Filtrado.
Después de hacer eso, podemos configurar las opciones de paginación:
Podemos dejar sin cambios el Base para la paginación propiedad.
El Tamaño de página debe configurarse con el número de registros que queremos leer para cada página
El Número de página debe configurarse con el número de la página que queremos leer.
El Incluir recuento total La propiedad debe establecerse en True, vinculándola a un valor estático verdadero/falso. Cuando está habilitado, cada vez que se realiza una actividad de lectura, se calcula la cantidad total de registros disponibles en el backend (y que finalmente satisfacen los criterios de filtrado). Esto se puede usar para implementar la lógica de paginación, como voy a explicar.
En primer lugar, definamos dos variables de aplicación:
Nombre de variable: número de página
Tipo de variable: Número
Esta variable contiene el número de la página a leer. Podemos vincular esta variable en la pantalla de vinculación de paginación. En la misma página estoy configurando a 5 el tamaño de la página.
La siguiente variable:
Nombre de variable: número de páginas
Tipo de variable: Número
Esta variable contiene el número total de páginas a navegar y debe calcularse usando el totalCount mencionado anteriormente.
Entonces necesitamos cambiar la lógica de la variable de datos:
Al principio configuramos el número de página variable a 1. Al final establecemos la número de páginas variable utilizando la fórmula:
INTEGER(outputs["Get record collection"].totalCount/5) + 1
En esta fórmula, puse el número 5 porque decidí establecer ese tamaño de página. Si desea establecer un tamaño de página diferente, también debe cambiar la fórmula.
Para avanzar y retroceder entre las páginas, podemos agregar dos botones en la parte inferior de nuestra aplicación:
La lógica de los dos botones es muy simple: cada vez que el Próximo se hace clic en el botón, el valor de la variable número de página debe incrementarse en 1. Y cada vez que el Anterior se hace clic en el botón, el valor de la variable debe disminuirse en 1. Esto se puede hacer fácilmente agregando a la lógica de los botones un bloque Establecer variable de la aplicación para modificar el valor de la variable. número de página variable utilizando estas fórmulas:
appVars.pageNumber + 1
Para el Próximo botón y:
appVars.pageNumber - 1
Para el Anterior botón.
Pero nuestra aplicación aún no está completa: debemos evitar que, cuando lleguemos a la última página, el Próximo el botón se presiona una y otra vez, configurando el número de página variable a un valor que no corresponde a una página existente. Y, al mismo tiempo, debemos evitar que cuando estamos mostrando la primera página, haga clic en el Anterior botón establece el número de página variable a 0 y por debajo.
Esto se puede lograr desactivando el Próximo cuando se muestra la última página: el Desactivado propiedad de la Próximo El botón debe estar vinculado a la fórmula:
appVars.pageNumber == appVars.numberOfPages
(Aquí es cuando el número de páginas variable que definimos antes se vuelve relevante).
Y luego podemos deshabilitar el Anterior botón cuando se muestra la primera página, uniendo su Desactivado propiedad a la fórmula:
appVars.pageNumber == 1
También podemos agregar en la parte inferior de la página un cuadro de texto que proporcione información sobre el número de página actual y el número total de páginas. Aquí la fórmula que utilicé para el contenido de ese cuadro de texto:
"Pag. " + appVars.pageNumber + "/" + appVars.numberOfPages
Ahora nuestra aplicación está terminada: podemos navegar por la lista de autos extraídos del backend VCF, configurando diferentes criterios de clasificación (por Marca/Modelo o por Potencia), usando la barra de búsqueda para extraer solo los registros que coinciden con nuestros criterios de búsqueda y usando el Anterior y el Próximo botones para navegar hacia adelante y hacia atrás entre las páginas. El número total de páginas que se muestran en la parte inferior de la página cambiará dinámicamente según el número de registros que coincidan con los criterios de búsqueda.
Después de leer este artículo, podrá acceder a los datos en su backend de VCF, utilizando las capacidades de Clasificación, Filtrado y Paginación, y luego hará que sus aplicaciones sean más fáciles de usar y accesibles.
¡Y eso es todo por hoy! Ahora puede continuar siguiendo la página del tema del entorno SAP Build Apps (https://community.sap.com/topics/build-apps), publicar y responder preguntas (https://answers.sap.com/tags/6cfd8176-04ae-4548-8f38-158456e1a47a), y leer otras publicaciones sobre el tema (https://blogs.sap.com/tags/6cfd8176-04ae-4548-8f38-158456e1a47a/).
¡Diviértete con SAP Build Apps! Y continúe siguiendo mi perfil para nuevos blogs y déjeme sus comentarios.
Calle Eloy Gonzalo, 27
Madrid, Madrid.
Código Postal 28010
Paseo de la Reforma 26
Colonia Juárez, Cuauhtémoc
Ciudad de México 06600
Real Cariari
Autopista General Cañas,
San José, SJ 40104
Av. Jorge Basadre 349
San Isidro
Lima, LIM 15073