Artículo: Cómo usar nuestras imágenes en los Botones de la Ribbon de Excel usando el Custom UI Editor.

Resultado final del artículo.

En los artículos anteriores, os he hablado de algunas de las propiedades que tiene "button" para crear botones en las fichas de la "Cinta de Opciones". Por ejemplo he hablado de las propiedades "size", "label", "imageMso"... De esas propiedades que ya hemos visto os puedo decir que son básicas para poder definir botones, pero también os puedo decir que hay muchas más que nos permitirán ajustar los botones a lo que realmente necesitamos. En este artículo voy a empezar a trabajar con la propiedad o atributo "image", con ella podremos utilizar en los botones de la Ribbon, nuestras imágenes. En los artículos anteriores os enseñé como utilizar imágenes de otros comandos de los programas de Office, en este os voy a enseñar una de las maneras que tenemos para utilizar las nuestras. Para este artículo voy a utilizar el último documento que he utilizado en la serie de artículos dedicados a este tema. Si no lo tenéis lo podéis descargar en el siguiente enlace.

GestiónNegocioV0.04.xlsm

También vais a necesitar las imágenes que voy a usar para los botones, las podéis descargar a continuación.

ImagenesBotones.rar

Antes de empezar con el trabajo, me gustaría aclarar un detalle. En este artículo vamos a usar para los botones, imágenes que forman parte del documento de Excel con el que estamos trabajando. Es decir, las imágenes estarán dentro del archivo que contiene el documento para el que estamos creando la ficha personalizada. Con el "Custom UI Editor" podemos añadir imágenes dentro de los documentos de Excel y así podemos usarlas en el código XML para definir las imágenes de los botones que creemos. Esta es la posibilidad más sencilla que tenemos para usar imágenes nuestras en los botones de la Ribbon. Si queremos usar imágenes que están fuera del documento, imágenes que por ejemplo están guardadas en una carpeta de nuestro disco duro... Tendremos que hacer más pasos de los que vamos a ver aquí, será un poco más difícil. En este artículo nos vamos a centrar en la primera posibilidad, las imágenes que están almacenadas fuera del documento las dejaremos para artículos posteriores.

Imágenes insertadas dentro de un proyecto o documento de Excel.

Vamos con el tema de este artículo. Para empezar a utilizar nuestras imágenes en los botones, lo primero es tenerlas preparadas. No os voy a dar una "lección maestra" sobre qué características deben tener las imágenes que uséis, pero sí que os voy a dar algunos consejos que deberíais tener en cuenta. Para empezar el formato de la imagen, hay muchos formatos gráficos, por ejemplo "JPG", "GIF", "BMP", "PNG"... Cada uno de ellos tiene algunas características que lo diferencian del resto, pero en mi opinión la mejor opción para ser usada en los botones de la "Ribbon", son las imágenes en formato "PNG". La razón principal para recomendaros este formato es que es el que mejor trabaja con las transparencias y este es un detalle muy importante para que no pasen cosas como las que os voy a contar enseguida. El único problema que tienen las imágenes en formato "PNG" es que si las imágenes se encuentran fuera del documento, guardadas en carpetas de nuestro equipo, su uso será mucho más complicado que los otros formatos que os he comentado líneas atrás. Se puede hacer, pero habrá que escribir algo de código VBA. Esa es la única limitación que tienen, pero para lo que vamos a ver en este artículo, ese detalle no nos afecta.

Otro detalle importante, las dimensiones de las imágenes que usaremos. Los "expertos" en temas gráficos recomiendan un tamaño de 32x32 píxeles para las imágenes que usemos en botones grandes y de 16x16 píxeles en botones pequeños. Si usáis imágenes con dimensiones superiores, Excel las reescalará y se pueden producir deformaciones y efectos que afeen el resultado final. Lo mejor es trabajar con esas dimensiones al crear las imágenes que irán en los botones. Para crear las imágenes podéis usar vuestro programa de diseño o de retoque favorito, desde el simple "Paint" al más completo "Photoshop".

Detalles de una imagen preparada para los botones de la Ribbon.

Empezamos, abrimos el documento de este artículo en el "Custom UI Editor" y comenzaremos añadiendo las imágenes que usaremos en los botones. Si os habéis descargado mis imágenes, tendréis cuatro, dos en formato "JPG" y otras dos en formato "PNG". Vamos a empezar con las imágenes en formato "JPG", así comprobaremos que pueden pasar "cosas raras" si no usáis el formato "PNG". Para añadir las imágenes debemos pulsar el siguiente botón o utilizar la opción "Icons..." del menú "Insert".

Opciones para Insertar imágenes en un documento de Excel.

Al hacerlo aparecerá la típica ventana de Windows en la que podemos seleccionar archivos para abrirlos. Seleccionamos los dos en formato "JPG" y pulsamos en el botón "Abrir".

Seleccionamos las imágenes que vamos a insertar en el documento de Excel.

Al hacerlo veremos algo nuevo en el "Custom UI Editor", en la parte izquierda tendremos las dos imágenes que ya forman parte del proyecto, del documento. Forman parte del "customUI14.xml" que contiene este documento, a partir de ahora ya las podemos usar desde el código XML. Si no las veis deberéis desplegar el contenido del "customUI14.xml" pulsando en el más que tiene a su izquierda.

Se pulsa en el + para mostrar el contenido del "customUI".

Las imágenes ya forman parte del proyecto.

Vídeo: Ejecutar Macros o Código VBA desde los Botones de la Cinta de Opciones.

En la sesión anterior, aprendimos a crear botones en las fichas personalizadas de la Ribbon de Excel usando código XML. Los botones que creamos tenían una representación visual en Excel, pero funcionalmente no ofrecían nada, no funcionaban. En esta sesión nos vamos a dedicar a eso, aprenderemos como ejecutar las "Macros" o "Código VBA" que desarrollemos en Excel, desde los botones que creemos en la "Cinta de Opciones".

En esta sesión el trabajo con el código XML va ser mínimo, casi no vamos a trabajar en el "Office Custom UI Editor". Para conectar los botones con las macros lo único que debemos usar en el código XML es la propiedad "onAction" de los botones "button". En ella simplemente hay que indicar el nombre de la "Macro" que queremos que se ejecute al ser pulsado el botón y después sólo nos quedará desarrollar las macros en Excel.

Una vez estemos en Excel, en realidad el código que hay que escribir de VBA para conectar con los botones también es mínimo. Lo único que necesitamos es crear procedimientos de VBA que reciban un argumento de tipo "IRibbonControl", es el único requisito que hay que cumplir en cuanto a cómo deben ser las macros que ejecutemos desde los botones de la "Ribbon". El resto del código a desarrollar ya dependerá de las necesidades específicas de cada uno. En este vídeo por ejemplo, en ese sentido, vamos a ir poco más lejos que en el artículo que publiqué en el Blog sobre este tema, voy a crear un ejemplo algo más complicado.

Vamos a crear un ejemplo que "mate" dos pájaros de un tiro. Servirá para aprender a conectar las macros con los botones de la "Cinta de Opciones". Y también servirá para ayudaros a encontrar la solución a una de las dudas que más me soléis plantear: Como guardar en un documento nuevo de Excel una copia de una factura rellenada. En este ejemplo vamos a crear dos botones en una ficha personalizada de Excel que al pulsarlos, uno creará nuevas facturas y el otro las guardará. Ojo, que se trata de daros "pistas" para solucionar esa necesidad que algunos tenéis. Muchas veces pedís con cierta ligereza este tipo de ayuda y no os dais cuenta que crear un documento para gestionar estos temas requiere mucho tiempo y trabajo.

Documento con el que trabajaremos en el Vídeo.

Vídeo: Crear Botones en la Cinta de Opciones o Ribbon de Excel con XML y el Office Custom UI Editor.

En la sesión anterior, aprendimos a crear fichas personalizadas en la Ribbon de Excel usando código XML. En esta, vamos a dar contenido a las fichas, aprenderemos a crear "Grupos de Controles" y "Botones", también usando código XML y el Office Custom UI Editor.

En las fichas de la cinta de opciones puede haber multitud de tipos de controles: Botones, Listas, Cuadros combinados, galerías, etc... En este vídeo vamos a empezar por los más fáciles de crear y manejar, los botones. Antes de empezar a crearlos, debemos conocer otro tipo de objetos, los grupos de controles. Cualquier tipo de control que queramos añadir a una ficha debe estar dentro de un grupo de controles, en las fichas que tiene Excel de serie se pueden ver ejemplos. Por ejemplo en la ficha "Inicio" de Excel tenemos los grupos "Portapapeles", "Fuente", "Alineación", "Número", etc...

Grupos de Controles en la Ficha Inicio.

Los grupos se crean usando la etiqueta "group" y en su interior iremos añadiendo todas las etiquetas que definan los controles que irán dentro de cada grupo. En este caso irán todas las etiquetas "button" que definirán los botones que vamos a crear. Esto es principalmente lo que vamos a ver en esta sesión, las etiquetas "group" y "button" que nos permitirán crear "Grupos de Controles" y "Botones". Igual que en el vídeo anterior os iré explicando algunas de las propiedades que vamos a utilizar para definir ambos objetos.

Entre otras propiedades hablaremos de la propiedad "size" e "imageMso". Con la primera controlaremos el tamaño de los botones que creamos y con la segunda la imagen que se muestra en los botones. La propiedad "imageMso" es una de las posibilidades que tenemos para configurar la imagen de un botón, más adelante hablaremos del resto. Para configurar esta propiedad puede ser interesante que os descarguéis este archivo de la página Web de Microsoft. Es un documento que os ayudará a elegir la imagen que queréis para vuestro botón, en el vídeo os doy más detalles sobre su uso.

2007 Office System Add-In: Icons Gallery.

Para realizar los pasos que veréis en el vídeo os podéis descargar el siguiente archivo de Excel, sino tenéis el de las sesión anterior o no lo queréis modificar.

GestiónNegocioV0.02.xlsm

También os dejo aquí el enlace para descargar el programa "Custom UI Editor" que uso en los vídeos. Seguramente ya lo tendréis todos, pero lo pongo para los rezagados. Recordad que es de uso libre y aquí os dejo el enlace oficial en el que lo podéis descargar.

Custom UI Editor for Microsoft Office

Artículo: Ejecutar una Macro o Código VBA desde un Botón de la Cinta de Opciones.

Resultado final del artículo.

En el artículo anterior creamos varios botones en una ficha personalizada y os hablé de algunas de las propiedades de los botones que se crean con la etiqueta "button". Pero no os hablé de la propiedad más importante, la que permite indicar que tiene que suceder cuando se pulsa el botón, la propiedad "onAction". En ella podemos indicar que macro o código VBA queremos que se ejecute al ser pulsado el botón. En este artículo la vamos a usar y veremos cómo enlazar los botones de la Cinta de Opciones con nuestras Macros o código VBA.

Para la explicación voy a seguir con el documento que creamos en el artículo anterior, pero en mi caso le he quitado el grupo "Albaranes" de la ficha "Facturación" y la ficha "Productos". He quitado casi todo lo que por el momento no vamos a utilizar. Si no lo tenéis, lo podéis descargar del siguiente enlace.

GestiónNegocioV0.02.xlsm

En la primera imagen del artículo, podemos ver cuál será el resultado visual final. Como podéis ver aparecen los dos botones que añadimos en el artículo anterior y uno tercer botón nuevo. Entre el segundo y el tercero he metido un separador que consiste en una línea vertical de separación. Primero vamos a realizar estos cambios, añadiremos el tercer botón y el separador.

Separador para separar controles en los grupos de controles.

Abrimos el documento en el Custom UI Editor y vamos con las modificaciones en el aspecto visual del grupo de controles "Facturas". En algunas ocasiones puede que queramos separar controles dentro de un mismo grupo, por ejemplo en este caso he querido separar de los otros dos el botón que permitiría eliminar facturas. Como es un poco peligros he decidido separarlo un poco. Para esto tenemos un control que podemos definir en el código XML y que se utiliza como separador, escribimos la siguiente líneas después de los dos botones que tenemos definidos del artículo anterior.

<separator id="separador01" />
<button id="botonEliminarFactura" label="Eliminar" size="large" imageMso="ReviewDeleteComment" />

Añadimos un separador con la etiqueta separator y un botón con button.

La primera línea que hemos añadido es completamente nueva, en ella usamos la etiqueta "separator" para añadir un separador entre los dos botones que ya existen y el que creamos en la siguiente línea. Como ya os he comentado como separador se crea una línea vertical, en la siguiente imagen lo podéis ver. Es una etiqueta muy sencilla lo único que hemos utilizado en su interior es la propiedad "id" para darle un identificador. Como podéis observar, al igual que la etiqueta "buton" no tiene etiqueta de cierre, se define en una sola etiqueta. Como en su interior no hay otros elementos no hace falta, todo en una sola etiqueta.

Después del separador hemos añadido otro botón que usaremos para eliminar facturas. Sobre los botones ya os hablé en el artículo anterior y de momento no hay nada nuevo que contaros en este. Para definirlo he utilizado las propiedades de las que ya os hablé.

Aspecto definitivo de la ficha Facturación.

Una vez que tenemos el aspecto visual creado, vamos con el lógico, con el funcionamiento. Como os he dicho antes, de los botones no hemos utilizado la propiedad más importante que tienen, la que nos permite indicar que pasará cuando se pulsen. ¿De qué nos sirve un botón si no pasa nada al pulsarlo? De los tres botones que tenemos, dos los vamos a modificar para que hagan algo al ser pulsados. Va ser muy sencillo, ya os he dicho que en estos artículos sobre todo me quiero centrar en conocer todo lo relacionado con el XML. Ya tendremos tiempo de crear código más complejo para ser ejecutado desde la Cinta de Opciones. De momento lo único que pasará es que cuando pulsemos el botón "Nueva" se añadirá una nueva hoja al documento y al pulsar el botón "Eliminar" se eliminará la hoja en la que estamos en ese momento. Evidentemente ninguna de las dos tareas se corresponde con crear nuevas facturas y eliminarlas, pero ya os digo que eso no es lo que estamos aprendiendo en estos artículos. Vamos con el primero, modificamos el código del primer botón para añadir una nueva propiedad, la propiedad "onAction":

<button id="botonNuevaFactura" label="Nueva" size="large" imageMso="FileNew" onAction="Facturas.CrearFactura"/>

La propiedad "onAction" es la responsable de controlar que se hace cuando se pulsa un control, en este caso un botón. En ella tenemos que indicar el nombre de la macro o procedimiento VBA que queremos que se ejecute al ser pulsado el botón. Aquí le he dicho que se ejecutará un procedimiento llamado "CrearFactura" que está situado dentro de un módulo llamado "Facturas". Ahora diréis, ¿Y dónde está esto? Bueno pues cuando acabemos en el Custom UI Editor debemos ir a Excel para crear ambas cosas, el módulo y el procedimiento. Es cuanto llegará el momento de programar. En cuanto al XML ya no hay nada más que hacer, esto es todo para este botón. Nos falta hacer lo mismo con el tercer botón, el que eliminará las facturas.

<button id="botonEliminarFactura" label="Eliminar" size="large" imageMso="ReviewDeleteComment" onAction="Facturas.EliminarFactura"/>

Nada nuevo, en este caso le indicamos que cuando se pulse el botón se ejecutará el procedimiento "EliminarFactura" situado en el módulo "Facturas". El código XML de todo el documento quedará como veis en la siguiente imagen, el siguiente paso es pasar a Excel para escribir el código VBA.

Código XML con las llamadas a los Procedimientos de VBA.

Artículo: Cómo crear Botones en la Cinta de Opciones o Ribbon de Excel con XML.

Resultado Final de este Artículo.

En el artículo anterior, llegamos a crear dos fichas personalizadas en la Cinta de Opciones de Excel, en la Ribbon. Pero estaban vacías, no había controles en su interior. En este artículo vamos a empezar a añadirlos, en concreto vamos a ver como insertar botones en las fichas personalizadas de la Ribbon. A partir de aquí, nos vamos a encontrar con multitud de controles y propiedades que poco a poco iremos explicando en los diferentes artículos. En la imagen de al lado podéis ver el resultado final que obtendremos  al finalizar el artículo. El documento que voy a usar, lo podéis descargar pulsando en el siguiente enlace.

GestiónNegocioV0.01.xlsm

Si habéis seguido los pasos del artículo anterior podéis usar el vuestro. Por lo tanto abrimos el documento  en el Custom UI Editor y así veremos el código XML de ese artículo

Código XML para definir dos fichas personalizadas.

Lo primero que debemos tener en cuenta para añadir controles en las fichas de la Ribbon, es que deben estar dentro de otro contenedor que todavía no hemos usado. En el anterior artículo llegamos hasta la etiqueta "tab", que era la que realmente creaba la ficha. Pero todavía necesitamos otro para poder crear botones u otros controles. Escribimos las siguientes líneas entre las etiquetas que definían la ficha "FACTURACIÓN". 

<group id="grupoFacturas" label="Facturas">
</group>

Creamos un grupo de controles con la etiqueta group.

Con la etiqueta "group" que hemos añadido dentro de "tab", creamos un grupo de controles. Si os fijáis en cualquiera de las fichas que tiene Excel de serie, veréis que los controles están distribuidos en grupos de controles. Por ejemplo en la ficha "Inicio" tenemos los grupos "Fuente", "Alineación", "Número", etc...

Grupos de controles en la ficha "Inicio" de Excel 2013.

Bueno, pues con la etiqueta "group" creamos un grupo de controles en el que posteriormente iremos añadiendo botones. Se pueden insertar más tipos de controles, pero en este artículo sólo usaremos botones. Esta etiqueta es muy sencilla e igual que todas las etiquetas que pueden contener otros elementos, tiene etiqueta de inicio y de fin. En cuanto a las propiedades, solo hemos usado la propiedad "id" para identificar el grupo y la propiedad "label" para indicar el texto que se verá como nombre del grupo. En este caso como texto hemos puesto "Facturas".

Ficha con el grupo de controles creado pero vacío.

En la imagen anterior podéis ver el grupo de controles y en la parte inferior tiene el nombre que hemos indicado en la propiedad "label". Como no hemos metido todavía controles en su interior, está vacío. Como podéis comprobar en las fichas de Excel, puede haber más de un grupo en una ficha. Lo único que habría que hacer es añadir tantas etiquetas "group" como grupos tenga. Por ejemplo puedo añadir otro grupo dentro de la primera ficha, en este caso un grupo dedicado a los albaranes, a las notas de entrega.

<group id="grupoAlbaranes" label="Albaranes">
</group>

Código XML para definir un grupo de controles.

Igual que con las fichas, el orden en el que aparecerán los grupos depende del orden en el que los escribáis en el código XML. Este sería el resultado que obtenemos:

Dos grupos vacíos en la ficha personalizada.