El nuevo componente de tipo Cards desbloquea una nueva y poderosa forma de presentar datos y proporciona a los desarrolladores el máximo control y flexibilidad sobre la interfaz de usuario.
La región Cards proporciona una fácil personalización de casi todos los aspectos de la interfaz de usuario de la Card, incluido el diseño, la apariencia, el icono, la insignia, los medios, las expresiones HTML avanzadas que admiten la creación de plantillas del lado del cliente y, por primera vez, la capacidad de definir múltiples acciones por Card. Esto significa que podemos incluir cualquier cantidad de acciones, como enlaces o botones, en una sola card, todo sin escribir una sola línea de código.
Veamos seguidamente cómo funciona.
Creamos una nueva aplicación que la llamaremos Demo Cards. En el asistente vamos a crear una nueva página de tipo Cards.
Seleccionamos los siguientes atributos para crear la página de tipo Cards:
Seleccionamos la tabla EMP.
- Title Column: ENAME
- Body Column: JOB
- Icon Initials Column: ENAME
- Badge Column: DEPTNO
Añadimos la página y creamos la aplicación demo.
Ejecutamos la aplicación y hacemos clic en la página de las cards.
Podemos cambiar el estilo tema que estamos usando actualmente desde el Theme Roller:
Hacemos clic en Theme Roller, seleccionamos el estilo Redwood Light y hacemos clic en el botón Set as Current.
Editamos la página de las cards. Podemos observar que en la región de Cards tenemos ahora las propiedades y los atributos de las cards en la lateral derecha, y debajo de la región de Cards -donde antes se mostraba el acceso a los atributos-, ahora vemos que se muestra Actions.
En la vista de propiedades de la región de cards, podemos ver en la sección de Apariencia, tenemos una nueva adición al tema Universal el cual es la plantilla llamada Cards Container.
En la sección de atributos podemos ver todos los diferentes atributos que disponemos para las cards. Por ejemplo, en la sección Icon and Badge podemos ingresar en:
- Badge label: DEPARTMENT
Si ejecutamos la página no vamos a ver el label del Badget, para poder verlo necesitamos cambiar el estilo de cards que estamos visualizando. Para ello, en modo ejecución de la página, hacemos clic en Quick Edit desde la barra de herramientas del desarrollador, seleccionamos la región de cards y hacemos clic en el icono de la herramienta:
Se abre una ventana en la cual podemos seleccionar tres tipos diferentes de estilos: A, B y C. Para ver el Badget label seleccionamos el estilo B.
Otra adición interesante es que podemos personalizar la página de cards cuando no hay datos que mostrar.
Por ejemplo, vamos a editar la página de cards, y en la cláusula where vamos a forzar que no haya datos ingresando 1=0.
Al ejecutar la página podemos ver que se visualiza así:
Para personalizar esto, editamos la página y accedemos a los atributos de la región de Cards. En la última sección de atributos en Messages, ingresamos: No Employees Found
Al ingresar el mensaje, podemos ver que se muestra la opción para ingresar un icono, seleccionamos por ejemplo el icono fa-warning.
Ejecutamos la página y podemos ver los cambios realizados:
Como definir Actions en las Cards
Antes de crear una acción de la card, vamos a crear en nuestra aplicación un informe interactivo con su pantalla de la tabla Empleados. En mi caso el informe interactivo es página 3 y la pantalla de ingreso y edición de datos es la página 4.
Regresamos a la página 2 donde esta nuestra región de cards, seleccionamos Actions y con el botón derecho del mouse seleccionamos Create Actions.
Tenemos diferentes acciones:
- Button
- Full Card
- Title
- Subtitle
- Media
En este ejemplo utilizaremos la acción Full Card.
En atributos, en la sección Link, seleccionamos el target que sea la página 4 donde está la pantalla de edición de datos y le pasamos el elemento P4_EMPNO con el valor &EMPNO. Luego ingresamos 4 en Clear Cache.
Recordemos de eliminar la cláusula where de las cards y luego ejecutamos la página.
Si cambiamos el tipo de Acción por ejemplo podemos ahora utilizar el tipo de acción Title.
Podemos ver que ahora que se activa un enlace en el título de la card, que en nuestro caso es el nombre del empleado.
Para ver más ejemplos de regiones de tipo cards, accede a los ejemplos del tema Universal AQUI