miércoles, 19 de noviembre de 2014

Crear un ComboBox en la Ribbon de Excel con XML y el Custom UI Editor.

Curso:
Formato:
Artículo/Tutorial.
Archivos necesarios:Personal v0.01.xlsm.
ImagenesCombo.rar.
Anterior Artículo/Tutorial:Act. y Des. Botones...
Siguiente Artículo/Tutorial:Próximamente.
Versión Vídeo/Tutorial:Próximamente.

Vamos a crear un comboBox con imágenes en la Ribbon.
ComboBox con imágenes en la Ribbon.

Seguimos con los artículos dedicados a la personalización de la Interface de Excel usando XML y VBA. Aparcamos de momento el tema de los botones y empezamos con otro control de los que podemos usar en nuestras fichas personalizadas, el comboBox o Cuadro Combinado. ¿Qué es un comboBox? Bueno pues se trata de uno de los controles más usados en todos los programas, son controles que muestran listas, en las que podemos seleccionar alguno de sus elementos. En realidad podemos seleccionar y escribir, por eso se llaman cuadros combinados. Son una combinación de un cuadro de texto en el que podemos escribir y una lista en la que podemos seleccionar. Por ejemplo, en la siguiente imagen podemos ver el cuadro combinado que permite aplicar formatos numéricos a las celdas de Excel.

ComboBox para seleccionar el formato numérico en Excel.
ComboBox para seleccionar el formato numérico en Excel.

En este artículo nos vamos a centrar en como crearlo, en las opciones que tenemos para variar su aspecto físico, su apariencia. En el siguiente artículo conseguiremos que funcione, como ejemplo haremos lo necesario para que al seleccionar una de las opciones que aparecen en un cuadro combinado, se aplique un filtro. Para realizar los mismos pasos que yo, os he dejado para descargar el documento y las imágenes que uso en el artículo, podéis realizar la descarga a continuación o al inicio del artículo en su ficha descriptiva.


Antes de empezar a crear nuestro primer comboBox os voy a contar un detalle. En la Ribbon podemos crear otro control muy parecido a un comboBox, llamado dropDown. Un dropDown es como un cuadro combinado, pero sin la posibilidad de escribir en el. Es decir, si sólo quiero permitir seleccionar un elemento  y no quiero permitir escribir, esa debería ser mi opción. A mi particularmente siempre me gusta más la opción de los comboBox, pero que sepáis que también tenéis esa otra opción de la que ya hablaremos. De todas las maneras para lo que queremos hacer en este caso, la mejor opción es el comboBox. La idea es que con lo que se seleccione en el comboBox se aplicarán filtros, es decir el texto que se quedará seleccionado en el comboBox será parte del criterio de un filtro. Bueno pues para eso es mejor el comboBox porque es muy fácil acceder al texto que se ha quedado seleccionado. Por el contrario, en un DropDown, no se puede acceder fácilmente al texto que se queda seleccionado. Cuando veamos los dropDown ya veremos que se puede hacer y que no. De momento quedaros con que un comboBox, es la mejor opción si queremos acceder al texto que se queda seleccionado. En la siguiente imagen podéis ver los dos controles, la única diferencia visual que podemos ver a primera vista es que en el de la izquierda se puede escribir, es el comboBox.

comboBox y dropDown. En el primer se puede escribir, en el segundo no.
comboBox y dropDown. En el primer se puede escribir, en el segundo no.

Todo el trabajo que hay que realizar en este artículo lo vamos a realizar en el Custom UI Editor, por lo tanto accedemos a él y abrimos el documento descargado. A Excel solo vamos a ir para ver como queda el código XML que iremos escribiendo, para ver como va quedando el comboBox. Para empezar vamos a crear un customUI para la versión 2010 de Excel. Como ya hemos visto el proceso en artículos anteriores, no entro en detalles. En la siguiente imagen podéis ver como se hace desde el menú Insert.

Insertamos un customUI para Excel 2010.
Insertamos un customUI para Excel 2010.

A continuación debemos añadir algunas líneas de código XML para definir la personalización que vamos a crear y los elementos contenedores en los que vamos a crear el comboBox. El código debe quedar como veis a continuación.

<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
  <ribbon>
    <tabs>
      <tab id="fichaRecursosHumanos" label="Recursos Humanos" insertBeforeMso="TabHome">
        <group id="grupoEmpleados" label="Empleados">
          
        </group>
      </tab>
    </tabs>
  </ribbon>
</customUI>

Estas líneas ya las hemos comentado en los artículos anteriores, básicamente creamos una ficha personalizada que aparece justo antes de la ficha Inicio y en su interior tiene un grupo de controles. En la siguiente imagen podéis ver el resultado de esas líneas de código.

Creamos una ficha personalizada con un grupo de controles.
Creamos una ficha personalizada con un grupo de controles.

Dentro del grupo que hemos creado, es donde irá el comboBox. Para hacerlo debemos escribir dentro de las etiquetas group las siguientes líneas de código, debe quedar como vemos a continuación:

<group id="grupoEmpleados" label="Empleados">
  <comboBox id="comboPoblacion" label="Selecciona una población: ">
    
  </comboBox>
</group>
  

Con la etiqueta comboBox definimos cuadros combinados, en concreto aquí hemos creado un comboBox identificado como comboPoblacion y que muestra un texto al lado, en el que se puede leer que debemos seleccionar una población. Como ya sabéis el atributo id identifica al control y en este caso la etiqueta label controla el texto que aparece justo al lado del cuadro combinado, es el texto que ayuda a saber que es lo que debemos seleccionar. En la siguiente imagen podéis ver como ha quedado el comboBox.

ComoBox vacío creado en la ficha personalizada.
ComoBox vacío creado en la ficha personalizada.

En el siguiente paso vamos a dar contenido al cuadro combinado. En este caso se trata de un cuadro combinado con opciones fijas. Es decir, tiene las mismas opciones todo el rato por lo que las opciones las podemos definir en el código XML. Si por ejemplo se tratará de un comboBox que debe cargar las opciones de una hoja de Excel, el proceso para darle contenido sería diferente a lo que vamos hacer ahora. En este caso para darle contenido debemos usar elementos item, escribimos lo siguiente y os comento que hemos hecho.

<comboBox id="comboPoblacion" label="Selecciona una población: ">
  <item id="itemTodas" label="*--Todas las Poblaciones--*"/>
  <item id="itemBarcelona" label="Barcelona"/>
  <item id="itemMadrid" label="Madrid"/>
  <item id="itemPamplona" label="Pamplona"/>
</comboBox>

Por cada opción que aparece en el cuadro combinado debemos utilizar una etiqueta item, debemos definir un item para cada opción, en este caso cuatro. El filtro que aplicaremos en el próximo artículo, utilizará las poblaciones a las que pertenecen unos trabajadores, para mostrar sólo los que trabajan en esa población. He creado cuatro opciones, una para mostrar los datos de todas las poblaciones, otra para mostrar los datos de los trabajadores de Barcelona, otra para los de Madrid y otra para los de Pamplona. Si abrís el documento en Excel esto es lo que tendremos.

Con item creamos cada una de las opciones que se muestran en el comboBox.
Con item creamos cada una de las opciones que se muestran en el comboBox.

En cada item he usado dos atributos, el id y label. Como siempre el id es para identificar, en este caso cada opción que aparece, pero a nosotros nos da igual no lo usamos. Label en este caso se corresponde con el texto que mostrará cada opción. Así ya tendríamos creado el comboBox, pero evidentemente no pasa nada si selecciono una de las opciones, eso lo dejamos para el siguiente artículo. Ahora vamos a conocer algunos atributos más que tiene comboBox e item para ajustar más su apariencia.


Por ejemplo, la primera opción que he añadido al cuadro combinado la he creado un poco más larga adrede, para ver lo siguiente. Seleccionarla y fijaros que pasa.

La opción seleccionada no se ve por completo debido al tamaño del comboBox.
La opción seleccionada no se ve por completo debido al tamaño del comboBox.

El combBox no es lo suficientemente grande como para que se vea toda la opción seleccionada. Con las otras, no pasa nada porque el tamaño que le da por defecto es suficiente para que se vean, pero para la primera no es suficiente. ¿Qué podemos hacer? Bueno, pues tenemos el atributo sizeString de comboBox para controlar su tamaño. Añadimos ese atributo en la etiqueta comboBox y os cuento la manera curiosa que tiene de funcionar.

<comboBox id="comboPoblacion" label="Selecciona una población: " 
sizeString="1234567890123456789012345">

Antes de que os asustéis, lo que he puesto en sizeString no es el número de caracteres que se van a mostrar... Es la manera curiosa que tiene este atributo de indicar que longitud tendrá el cuadro combinado. En este caso el cuadro combinado tendrá la longitud necesaria para que se pueda mostrar lo que he indicado en sizeString. Es decir Excel calculara la longitud del combo dependiendo de lo que necesite para mostrar el texto que hemos puesto en sizeString. Podríamos pensar que entonces se van a mostrar 25 caracteres porque he escrito 25 números, pero tampoco... Podrían ser menos dependiendio de los caracteres que aparezcan, un caracter en mayúsculas no ocupa lo mismo que uno en minúsculas por ejemplo. Sí, lo sé... os doy la razón en todo lo que estáis pensando, pero así está diseñado esto. Así quedaría el comboBox después de hacer el cambio.


Con la propiedad SizeString controlamos el tamaño del comboBox.
Con la propiedad SizeString controlamos el tamaño del comboBox.

Lo de escribir números del 1 al 0 es para que más o menos a primera vista podamos saber cuantos caracteres se van a ver... aproximadamente. Es más fácil contar 25 números que contar 25 letras igules. Pero podía haber hecho lo siguiente y conseguiríamos un resultado más o menos parecido. Os digo parecido porque como ya os he dicho, en realidad el número de caracteres que se pueden ver dependerá de otros factores como el tamaño de los caracteres usados o el de la fuente del sistema... Vamos, que lo mejor es que vayáis probando a ojo, hasta dar con la longitud adecuada. Por ejemplo en el siguiente código he escrito en sizeString 25 x mayúsculas y el resultado que nos da es que tenemos más espacio que escribiendo los 25 números.

<comboBox id="comboPoblacion" label="Selecciona una población: " 
sizeString="XXXXXXXXXXXXXXXXXXXXXXXXX">


El atributo SizeString permite cambiar el tamaño pero de forma un poco incontrolada.
El atributo SizeString permite cambiar el tamaño pero de forma un poco incontrolada.

Bueno pues primer detalle resuelto, vamos con más posibilidades. Por ejemplo podemos añadir imágenes al cuadro combinado. Podemos hacer que el cuadro combinado muestre una imagen a la izquierda de su etiqueta y también podemos hacer que cada item muestre una imagen junto al texto de cada opción. En la siguiente imagen podéis ver como queda.

ComboBox e Items con imágenes.
ComboBox e Items con imágenes.

El sistema para añadir imágenes a los items y a los comboBox es el mismo que ya os conté para los botones. Tenemos dos opciones, si queremos usar imágenes de algún control de los que forman Office deberemos usar el atributo imageMso. Si por el contrario queremos usar nuestras propias imágenes deberemos usar el atributo image. En este ejemplo vamos a usar las dos opciones, para la imagen que aparece al lado del comboBox y para el primer item del comboBox usaremos la propiedad imageMso. Es decir vamos a usar imágenes que tienen otros controles en Office. Para los otros tres items del comboBox vamos a usar imágenes nuestras, las que podéis descargar al inicio del artículo.

En cuanto a estas últimas, cuando os hablé de las imágenes en los botones, os dije que si no queríamos que las imágenes cambiasen teniendo en cuenta algún tipo de condición, lo mejor era insertar las imágenes dentro del documento con el Custom UI Editor y así usarlas fácilmente en el atributo image. Bueno pues aquí se vuelve a repetir el mismo sistema, si siempre queremos usar las mismas imágenes, la opción más cómoda y sencilla es la misma. Por lo tanto antes de empezar a modificar el código XML vamos a insertar las imágenes en el Custom UI Editor. En la siguiente imagen podéis ver como se hace, es algo que ya se comentó en artículos anteriores, usamos la opción para insertar iconos.

Insertamos en el Custom UI Editor dentro del documento de Excel.
Insertamos en el Custom UI Editor dentro del documento de Excel.

Una vez que ya tenemos las imágenes el siguiente paso es modificar el código XML para utilizar nuestras imágenes y las que vamos a usar de Office.


<comboBox id="comboPoblacion" label="Selecciona una población: " sizeString="XXXXXXXXXXXXXXXXXXXXXXXXX" imageMso="GroupSmartArtQuickStyles">
  <item id="itemTodas" label="*--Todas las Poblaciones--*" imageMso="CellsDelete"/>
  <item id="itemBarcelona" label="Barcelona" image="Barcelona"/>
  <item id="itemMadrid" label="Madrid" image="Madrid"/>
  <item id="itemPamplona" label="Pamplona" image="Pamplona"/>
</comboBox>

Para empezar hemos usado tanto en el comboBox como en la primera opción que se puede seleccionar, el atributo imageMso. Con el ya os comenté que se pueden usar imágenes de otros controles de Office, por ejemplo en el primer item he usado la imagen que muestra el botón de Excel para eliminar celdas. Recordad que hay que indicar el identificador del control que tiene la imagen que queremos usar y así aparecerá en nuestro control. Como ya os he comentado, todo esto lo podéis ver con más detalle en el artículo y vídeo en los que explique como poner imágenes a los botones. En la siguiente imagen podéis ver como han quedado.


Utilizamos imageMso e image para configurar las imágenes del comboBox y de los items.
Utilizamos imageMso e image para configurar las imágenes del comboBox y de los items.

En cuanto a los otros tres items, hemos usado el atributo image. En el hemos indicado los nombres de las imágenes que hemos insertado. Recordad que son los nombres que aparecen a la izquierda en el Custom UI Editor, que se correspondían con los nombres de las fotos pero sin la extensión del nombre del archivo, en este caso sin el .PNG. De las imágenes que podéis utilizar en el atributo image solo comentaros que yo he usado imágenes en formato PNG y de un tamaño de 16x16 pixels. Se vuelve a repetir otra vez todo lo que os comenté sobre las imágenes en los artículos de los botones. Se pueden utilizar imágenes de mayor tamaño, pero esto ya es a gusto de cada uno. En la siguiente imagen podéis ver como quedaría una imagen de 32x32 pixels y la podéis comparar con las de 16x16. En el atributo imageMso, Excel por defecto usa imágenes de 16x16.

Comparación entre imágenes a 16x16 y 32x32 pixels.
Comparación entre imágenes a 16x16 y 32x32 pixels.

Bueno pues así ya hemos conseguido establecer las imágenes del comboBox y de los items, ya veis que queda muy bien. En el comboBox he usado imageMso, pero también podríais utilizar image para poner una imagen vuestra. Ahora, último detalle que comento en este artículo, vamos a poner algo de ayuda al comboBox y a los items. Utilizando dos atributos que tienen tanto comboBox como item, podemos conseguir que al pasar el puntero del ratón por encima de ellos se despliegue una pequeña pantalla de ayuda. Los atributos son screentip y supertip, en la siguiente imagen podéis ver como quedaría al pasar el puntero por encima del comboBox.




Si os fijáis bien, hay como una especie de título, la primera línea... Y justo debajo hay un texto mucho más largo. Bueno pues la primera línea estaría creada con screentip y el texto largo con supertip. Justo después de esos dos elementos aparece una línea de división, el nombre del documento y un enlace en el que pone Más información. No preguntéis como se puede modificar esa parte, porque desde las herramientas que estamos usando, no se puede. Sólo podemos la parte de arriba. Para que quede como en la imagen anterior, la etiqueta comboBox debería quedar así en el código XML.


<comboBox id="comboPoblacion" label="Selecciona una población: " sizeString="XXXXXXXXXXXXXXXXXXXXXXXXX" imageMso="GroupSmartArtQuickStyles" screentip="Selecciona una población para mostrar los trabajadores." 
supertip="Al seleccionar una población se mostrarán sólo los datos de esa población. Si quieres volver a ver todos los datos selecciona la primera opción">

Simplemente se ponen los dos atributos y se les asigna el texto que queremos que se vea en pantalla. Como os he comentado también se puede hacer para cada uno de las opciones, item también tiene esos dos atributos. En la siguiente imagen podemos ver como quedaría al pasar el puntero del ratón por la primera opción.

También podemos mostrar ayuda para cada uno de los items.
También podemos mostrar ayuda para cada uno de los items.

El código del item de la primera opción debería quedar así para que se vea como en la imagen.


<item id="itemTodas" label="*--Todas las Poblaciones--*" imageMso="CellsDelete" 
screentip="Muestra todos los trabajadores." supertip="Al aplicar esta opción 
se quitarán los filtros aplicados por la población del trabajador."/>

El funcionamiento es el mismo, se coloca el texto que queremos mostrar en los dos atributos. Estas opciones las tienen todos los controles, cuando expliqué los botones no las comenté pero también tienen screentip y supertip.

Bueno, pues así ya hemos acabado con este artículo. En el próximo, haremos que al seleccionar una de las opciones se aplique un filtro. Veremos como conectar el comboBox con VBA para que haga el trabajo que tiene que hacer. Aunque os puede parecer sorprendente es mucho más fácil de lo que hicimos para desactivar y activar botones... ;)

12 comentarios:

  1. Hola, David
    ¿Sabes si estos combobox de la cinta de opciones se ven afectados por el mismo problema que causó la actualización de seguridad de finales de diciembre que impedía cargar los combobox en las hojas?
    Security Update for Microsoft Office 2007 (KB2596927)
    Security Update for Microsoft Office 2010 (KB2553154)
    Security Update for Microsoft Office 2013 (KB2726958)

    Y aprovechado... ¿sabes si ya han parcheado el parche? He tenido que desinstalar dicha actualización porque me dejaba inoperativo el libro.

    Un saludo,

    ResponderEliminar
    Respuestas
    1. Buenas

      No se ven afectados, ese problema por lo visto solo afecta a los controles ActiveX. Los hemos estado utilizando estos últimos meses sin problemas.

      De hecho yo no me había dado cuenta del problema con los controles ActiveX hasta que alguien me lo comentó. En cuanto al parche no se si lo han sacado porque yo opté por la solución de borrar los archivos .exd y se me arregló. Revisa este enlace que quizás ahí esté la solución definitiva.

      http://support.microsoft.com/kb/3025036

      Saludos.

      Eliminar
  2. Hola David,
    Estoy encantado de haber encontrado tu blog. Es muy didáctico.
    Una pregunta, tengo creadas macros y a través de add-in las tengo disponibles para cualquier excel que se abra. no solo para un .xlsm.
    Las macros se ejecutan desde botones creados mediante la personalización de la cinta de opciones del propio excel.
    Por tanto, te pregunto si es posible crear un dropdown de esta manera, para que aparezca en todos los excel que se abran.
    Imagino que habrá algún xml que tenga esta configuración de la cinta de opciones pero no se si es posible modificarlo.

    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Debes crear un complemento de la misma manera que haces hasta ahora pero creando las personalizaciones que explico aquí. Es decir tu creas el documento tal y como explico aquí pero cuando lo tengas acabado lo guardas como complemento.

      Cuando actives el complemento, aparecerá para todos los documentos con el combo definido. De hecho sobre esto que me estás preguntando creo que va ser la próxima sesión que trate sobre este tema.

      Saludos.

      Eliminar
  3. Muchas gracias David, me funcionó perfectamente.

    ResponderEliminar
  4. Hola David, increíblemente buenos tus artículos, estoy aprendiendo mucho con ellos. Por favor, amplía el tema del Ribbon de Excel. Yo utilizaba hasta la versión 2013 el Classic Menu for Excel, pero no consigo que funcione para Excel 2016. Además, no logro saber cómo se integra en la cinta de opciones. A diferencia de los botones del fichero CustomIU, aparece en la personalización, si bien con todas las opciones desactivadas. Por favor, si puedes, explícanos como hacerlo. Gracias por un trabajo tan fenomenal.

    ResponderEliminar
    Respuestas
    1. La verdad es que no te puedo ayudar porque nunca he usado el Classic Menu for Excel. Soy un converso de la Ribbon y no he necesitado nunca volver a los menús clásicos.

      Saludos.

      Eliminar
    2. A veces los árboles no te dejan ver el bosque. En realidad no te preguntaba por ese programa, sino por la propia Ribbon y cómo seguir "manipulándola". El Classic Menu lo hace de otra forma, y te preguntaba si podías explicarnos algo al respecto. De "exito" también se muere, creído.

      Eliminar
  5. Excelente tus aportes. Llegué hasta aquí. Salió el siguiente artículo?
    Muchas gracias! Saludos!

    ResponderEliminar
  6. buena tarde David excelentes tus enseñanzas, una pregunta puedo desde el ribbon quitar o ocultar las opciones predeterminadas ejem.(insertar, diseño etc)?

    ResponderEliminar
    Respuestas
    1. Si te refieres a desde Excel, creo que no. Editando el XML si.

      Saludos.

      Eliminar