![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/img1.jpg?resize=750%2C623&ssl=1\")
<\/p>\nEl nuevo componente de tipo Cards desbloquea una nueva y poderosa forma de presentar datos y proporciona a los desarrolladores el m\u00e1ximo control y flexibilidad sobre la interfaz de usuario.<\/p>\n
La regi\u00f3n Cards proporciona una f\u00e1cil personalizaci\u00f3n de casi todos los aspectos de la interfaz de usuario de la Card, incluido el dise\u00f1o, la apariencia, el icono, la insignia, los medios, las expresiones HTML avanzadas que admiten la creaci\u00f3n de plantillas del lado del cliente y, por primera vez, la capacidad de definir m\u00faltiples 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\u00ednea de c\u00f3digo.<\/p>\n
Veamos seguidamente c\u00f3mo funciona.<\/p>\n
Creamos una nueva aplicaci\u00f3n que la llamaremos Demo Cards. En el asistente vamos a crear una nueva p\u00e1gina de tipo Cards.<\/p>\n
<\/p>\n
Seleccionamos los siguientes atributos para crear la p\u00e1gina de tipo Cards:<\/p>\n
Seleccionamos la tabla EMP.<\/p>\n
![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/img2.jpg?resize=750%2C598&ssl=1\")
<\/p>\n
A\u00f1adimos la p\u00e1gina y creamos la aplicaci\u00f3n demo.<\/p>\n
Ejecutamos la aplicaci\u00f3n y hacemos clic en la p\u00e1gina de las cards.<\/p>\n
![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/img3-scaled-1.jpg?resize=750%2C174&ssl=1\")
<\/p>\n
Podemos cambiar el estilo tema que estamos usando actualmente desde el Theme Roller<\/strong>:<\/p>\n Hacemos clic en Theme Roller<\/strong>, seleccionamos el estilo Redwood Light<\/strong> y hacemos clic en el bot\u00f3n Set as Current.<\/strong><\/p>\n Editamos la p\u00e1gina de las cards. Podemos observar que en la regi\u00f3n de Cards tenemos ahora las propiedades y los atributos de las cards en la lateral derecha, y debajo de la regi\u00f3n de Cards -donde antes se mostraba el acceso a los atributos-, ahora vemos que se muestra Actions.<\/p>\n En la vista de propiedades de la regi\u00f3n de cards, podemos ver en la secci\u00f3n de Apariencia, tenemos una nueva adici\u00f3n al tema Universal el cual es la plantilla llamada Cards Container.<\/p>\n En la secci\u00f3n de atributos podemos ver todos los diferentes atributos que disponemos para las cards. Por ejemplo, en la secci\u00f3n Icon and Badge<\/strong> podemos ingresar en:<\/p>\n Si ejecutamos la p\u00e1gina 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\u00f3n de la p\u00e1gina, hacemos clic en Quick Edit<\/strong> desde la barra de herramientas del desarrollador, seleccionamos la regi\u00f3n de cards y hacemos clic en el icono de la herramienta:<\/p>\n 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.<\/p>\n Otra adici\u00f3n interesante es que podemos personalizar la p\u00e1gina de cards cuando no hay datos que mostrar.<\/p>\n Por ejemplo, vamos a editar la p\u00e1gina de cards, y en la cl\u00e1usula where<\/strong> vamos a forzar que no haya datos ingresando 1=0.<\/p>\n Al ejecutar la p\u00e1gina podemos ver que se visualiza as\u00ed:<\/p>\n Para personalizar esto, editamos la p\u00e1gina y accedemos a los atributos de la regi\u00f3n de Cards. En la \u00faltima secci\u00f3n de atributos en Messages, ingresamos: No Employees Found<\/p>\n Al ingresar el mensaje, podemos ver que se muestra la opci\u00f3n para ingresar un icono, seleccionamos por ejemplo el icono fa-warning.<\/p>\n Ejecutamos la p\u00e1gina y podemos ver los cambios realizados:<\/p>\n Antes de crear una acci\u00f3n de la card, vamos a crear en nuestra aplicaci\u00f3n un informe interactivo con su pantalla de la tabla Empleados. En mi caso el informe interactivo es p\u00e1gina 3 y la pantalla de ingreso y edici\u00f3n de datos es la p\u00e1gina 4.<\/p>\n Regresamos a la p\u00e1gina 2 donde esta nuestra regi\u00f3n de cards, seleccionamos Actions<\/strong> y con el bot\u00f3n derecho del mouse seleccionamos Create Actions<\/strong>.<\/p>\n Tenemos diferentes acciones:<\/p>\n En este ejemplo utilizaremos la acci\u00f3n Full Card<\/strong>.<\/p>\n En atributos, en la secci\u00f3n Link<\/strong>, seleccionamos el target<\/strong> que sea la p\u00e1gina 4 donde est\u00e1 la pantalla de edici\u00f3n de datos y le pasamos el elemento P4_EMPNO con el valor &EMPNO. Luego ingresamos 4 en Clear Cache.<\/p>\n Recordemos de eliminar la cl\u00e1usula where de las cards y luego ejecutamos la p\u00e1gina.<\/p>\n Si cambiamos el tipo de Acci\u00f3n por ejemplo podemos ahora utilizar el tipo de acci\u00f3n Title.<\/p>\n Podemos ver que ahora que se activa un enlace en el t\u00edtulo de la card, que en nuestro caso es el nombre del empleado.<\/p>\n Para ver m\u00e1s ejemplos de regiones de tipo cards, accede a los ejemplos del tema Universal Here<\/a><\/p>","protected":false},"excerpt":{"rendered":" El nuevo componente de tipo Cards desbloquea una nueva y poderosa forma de presentar datos y proporciona a los desarrolladores el m\u00e1ximo control y flexibilidad sobre la interfaz de usuario. La regi\u00f3n Cards proporciona una f\u00e1cil personalizaci\u00f3n de casi todos los aspectos de la interfaz de usuario de la Card, incluido el dise\u00f1o, la apariencia,Continue reading “En Oracle APEX 20.2 tenemos un nuevo componente Cards”<\/span><\/a><\/p>","protected":false},"author":132749711,"featured_media":16676,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_crdt_document":"","advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":true},"categories":[121913,122084],"tags":[122082,122086,122087,121904,122088,122089,122090],"class_list":["post-15597","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-oracle-apex-20-2","tag-apex-20-2","tag-cards","tag-nuevas-caracteristicas","tag-oracle-apex","tag-oracle-apex-20-2","tag-region-cards","tag-tarjetas","entry"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/17-En-Oracle-APEX-20.2-tenemos-un-nuevo-componente-Cards.jpg?fit=2952%2C1737&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paMvMS-43z","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/kiusi.com\/en\/wp-json\/wp\/v2\/posts\/15597","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kiusi.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiusi.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiusi.com\/en\/wp-json\/wp\/v2\/users\/132749711"}],"replies":[{"embeddable":true,"href":"https:\/\/kiusi.com\/en\/wp-json\/wp\/v2\/comments?post=15597"}],"version-history":[{"count":11,"href":"https:\/\/kiusi.com\/en\/wp-json\/wp\/v2\/posts\/15597\/revisions"}],"predecessor-version":[{"id":16749,"href":"https:\/\/kiusi.com\/en\/wp-json\/wp\/v2\/posts\/15597\/revisions\/16749"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiusi.com\/en\/wp-json\/wp\/v2\/media\/16676"}],"wp:attachment":[{"href":"https:\/\/kiusi.com\/en\/wp-json\/wp\/v2\/media?parent=15597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiusi.com\/en\/wp-json\/wp\/v2\/categories?post=15597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiusi.com\/en\/wp-json\/wp\/v2\/tags?post=15597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/img4-scaled-1.jpg?resize=750%2C382&ssl=1\")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/img5-scaled-1.jpg?resize=750%2C383&ssl=1\")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/img6.jpg?resize=750%2C671&ssl=1\")
<\/p>\n\n
![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/img7-1.jpg?resize=750%2C719&ssl=1\")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/img8-scaled-1.jpg?resize=750%2C364&ssl=1\")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/img9-scaled-1.jpg?resize=750%2C279&ssl=1\")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/img10.jpg?resize=750%2C197&ssl=1\")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/img11.jpg?resize=750%2C760&ssl=1\")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/img12.jpg?resize=683%2C255&ssl=1\")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/img13.jpg?resize=750%2C208&ssl=1\")
<\/p>\nComo definir Actions en las Cards<\/strong><\/h2>\n
![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/img14.jpg?resize=530%2C610&ssl=1\")
<\/p>\n\n
![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/img15-scaled-1.jpg?resize=750%2C292&ssl=1\")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/img16-scaled-1.jpg?resize=750%2C428&ssl=1\")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2020\/10\/img17-scaled-1.jpg?resize=750%2C430&ssl=1\")
<\/p>\n