Acceder a datos de un widget específico

Desde la versión 3 del código de Blogger, es posible acceder a datos de un widget en cualquier parte del código mediante la etiqueta de datos global data:widgets. Esto nos permite acceder a datos aunque estemos fuera del contexto del widget.

<!-- IDs de secciones que contienen un widget tipo Label -->
<b:loop values='data:widgets.Label' var='widget'>
  <b:eval expr='data:widget.sectionId'/>
</b:loop>

Esta posibilidad es muy útil para diversas aplicaciones, pero hoy te comentaré una situación que quizás no te hayas planteado y que puede ayudarte cuando se te presente.

Situación

Imaginemos que tenemos muchos gadgets del tipo HTML y queremos acceder al título de uno en específico para evaluar si es igual a un valor en particular.

<b:section id='header'>
  <b:widget id='HTML1' type='HTML' title='Banner'/>
  <b:widget id='HTML2' type='HTML' title='Menu'/>
</b:section>
<b:section id='main'>
  <b:widget id='HTML3' type='HTML' title='Aviso'/>
</b:section>

Usando la etiqueta de datos global data:widgets, podemos recorrer los widgets hasta encontrar el que nos interesa.

<b:loop values='data:widgets.HTML' var='widget'>
  <b:if cond='data:widget.title == "Aviso"'>
    <!-- Hacer algo -->
  </b:if>
</b:loop>

Pero, ¿qué pasa si lo que realmente queremos es trabajar con el widget HTML3 y hacer distintas acciones según el título? Bueno, eso es lo que vamos a ver a continuación.

Reconstrucción de datos

Resulta que la etiqueta data:widgets también nos permite acceder a los datos de un widget específico mediante su ID. Solo debes mencionar primero el nombre del objeto (el id del widget), seguido del nombre del elemento:

<b:eval expr='data:widgets.HTML3.title'/>

Así de simple. Con esta línea de código podemos acceder al título del widget HTML3 y hacer las acciones que necesitemos, aquí un ejemplo:

<b:if cond='data:widgets.HTML3.title == "Aviso"'>
  <!-- Hacer algo -->
</b:if>

Incluso podemos ir más allá, y en casos en donde se almacenan más valores (como el widget Blog), podemos realizar acciones más complejas dependiendo de la configuración del usuario.

<b:with value="data:widgets.Blog1.allBylineItems" var="show">
  <!-- Comprobamos si el usuario tiene alguna opción activada
  @data {string} data:show.share - Mostrar botones de compartir
  @data {string} data:show.author - Mostrar autor
  @data {string} data:show.timestamp - Mostrar fecha
  @data {string} data:show.comments - Mostrar comentarios
  @data {string} data:show.labels - Mostrar etiquetas
  @data {string} data:show.icons - Mostrar compartir por correo -->
  <b:if cond='data:show.share'>
    <!-- Hacer algo -->
  </b:if>
</b:with>

En el ejemplo anterior comprobamos las opciones activas del usuario en el widget Blog1, basado en el hecho de que sus respectivas etiquetas de texto estarán vacías cuando no sea así. Esto puede resultar de mucha utilidad cuando tienes más de un widget tipo Blog en el código, pero necesitas que estén sincronizados con las opciones del usuario del widget principal.

Conclusión

La etiqueta data:widgets es una herramienta muy poderosa que nos permite acceder a datos de widgets específicos, sin importar en qué parte del código nos encontremos y aunque no todos los datos están disponibles, los que sí están pueden ser de gran utilidad para crear funciones avanzadas.

Espero que este artículo te haya sido de utilidad y que puedas aplicar estos conocimientos en tus proyectos. Si tienes alguna duda o sugerencia, no dudes en dejar un comentario. Muchas gracias por leer.