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.

Antes de continuar leyendo el artículo recuerda que todo lo que os ofrezco aquí es Gratis, pero si te gusta mi trabajo, puedes realizar una donación para que pueda continuar con este proyecto. Cualquier cantidad desde 1€/1$ es bienvenida. Gracias!!!!!!!!!!!!!!

Vamos con los controles, de momento añadiremos unos botones. Para hacerlo debemos utilizar la etiqueta "button". Escribimos las siguientes líneas dentro del grupo "Facturas".

<button id="botonNuevaFactura" label="Nueva" size="large" imageMso="FileNew" />
<button id="botonGuardarFactura" label="Guardar" size="large" imageMso="FileSave" />

Usamos la etiqueta button para crear botones.

En este caso hemos añadido dos botones. Las líneas son casi idénticas, exceptuando los cambios obvios porque se trata de dos botones diferentes. Este es el resultado que conseguimos, ahora os explico que hay en esas dos líneas.

Los dos Botones creados dentro del grupo Facturas con la etiqueta button.

Antes de empezar con las propiedades fijaros que en este caso no hay etiqueta de apertura y de cierre. El botón se define con una sola etiqueta que finaliza con "/>". Así se definen los elementos que no contienen otros elementos, otros controles. Como el botón ya no va tener otros controles en su interior, no debe haber etiqueta de apertura y cierre, sólo una que se abre con "<" y se cierra con "/>". Ahora vamos con las propiedades, la primera ya la hemos comentado, "id". Con ella identificamos el control, en este caso el botón. En ocasiones puede ser interesante saber que botón se ha pulsado y desde código, desde VBA, podríamos usar esta propiedad para saber el id del botón pulsado. Estoy ya lo usaremos más adelante.

Siguiente propiedad, "label". Lo mismo que en los usos anteriores, en ella indicamos el texto que aparecerán en el botón. En este tipo de controles, para identificar visualmente los botones, además del texto, también podemos indicar una imagen que aparecerá junto con el texto.  Ahora lo comentaremos.

Establecemos el texto del botón usando la propiedad label.

Siguiente propiedad, "size". Con esta propiedad controlamos el tamaño del botón, tenemos dos posibilidades. En el ejemplo hemos indicado "large" para indicar que lo queremos grande, si lo queremos pequeño debemos usar "normal". En la siguiente imagen podéis ver la diferencia de tamaño.

<button id="botonNuevaFactura" label="Nueva" size="large" imageMso="FileNew" />
<button id="botonGuardarFactura" label="Guardar" size="normal" imageMso="FileSave" />

Diferencia entre tamaño large y normal en los botones de la Ribbon.

Cuando hay botones pequeños, tenemos algunas opciones para controlar cómo se distribuyen por el grupo de controles, pero os las explicaré en artículos posteriores. Seguimos con la última propiedad, "imageMso", con ella controlamos la imagen que se muestra en el botón. Esta propiedad la debemos usar cuando queremos que el botón muestre una imagen de alguno de los controles que tiene Excel de serie. Por ejemplo, en el primer botón he establecido esta propiedad a "FileNew", con esto le estoy indicando que ese botón tendrá la misma imagen que el botón que me permite crear nuevos documentos en Excel. En esa propiedad hay que utilizar el identificador que tiene el control del que queremos usar su imagen. En el primer botón hemos usado "FileNew" y en el segundo he usado "FileSave" que se correspondería al botón u opción de guardar un documento. En la siguiente imagen podéis ver esas imágenes cuando se muestran en la "Barra de Herramientas de Acceso Rápido" para ejecutar esas funciones.

Usamos imágenes de los controles nativos de Excel.

Ya os comenté en el artículo anterior que cuando una propiedad acaba en "Mso", significa que se utilizará algo de lo que lleva Excel creado de serie. Se usará algún nombre que identifica un control de la interface de Excel. En este caso los botones para crear nuevos documentos y guardarlos. Seguro que muchos estaréis pensando, ¿Cómo descubro esos identificadores? 

Por Internet hay algunas herramientas que te informan de los identificadores que tienen los controles en los programas de Office. Yo suelo utilizar un documento de Excel, que Microsoft tiene disponible para descargar... En él, se muestran las imágenes con los identificadores, está preparado para la versión 2007 pero también lo podemos usar para obtener los identificadores de las otras versiones. Lo podéis descargar aquí:

2007 Office System Add-In: Icons Gallery.

Cuando abráis el documento, en la ficha "Desarrollador", tendréis disponibles unos botones que os permitirán obtener el identificador de los controles que os interesen. Solo hay que pulsar encima del control que os interese y os mostrará el identificador.

Documento para obtener los identificadores de imágenes.

Identificador de la opción para crear un nuevo documento.

Bueno, pues con esto ya hemos acabado por este artículo, sólo me queda comentaros dos cosas. La primera es que a los botones también se les puede poner imágenes vuestras, pero esto os lo explicaré en otro artículo, en ese caso habría que utilizar la propiedad "image". Y la segunda es que de todas las propiedades que tiene un botón, nos falta utilizar la más importante... La que nos permite indicar que pasará cuando se pulse, pero esto también se irá a otro artículo, puede que al siguiente dedicado a este tema ;)

*Siguiente Artículo:*:

• 12/08/2014: Ejecutar una Macro o Código VBA desde un Botón de la Cinta de Opciones.