Agregar estilo a sus conmutadores con el widget repetidor

Anime sus conmutadores de paneles utilizando un widget repetidor en vez de un widget de alternancia. Con un widget repetidor, puede agregar imágenes para proporcionar a los usuarios pistas visuales de los estados de alternancia disponibles, cambiar la posición del texto y agregar emoji al texto.

Puede utilizar el conmutador situado en la parte superior de este panel (1) para resaltar la cantidad vendida en estas tres categorías de productos. Cada opción de alternancia incluye una fotografía que representa la categoría de producto. Al hacer clic en un conmutador, esa categoría de producto se resalta en el gráfico de barras (2).

A continuación se indica lo que debe hacer.

1. Cargue imágenes en su galería.

En el generador de paneles, utilice un widget de imagen para cargar las imágenes que desea utilizar. Puede colocar el widget de imagen en cualquier parte del panel. Haga clic en el icono de la imagen en el widget para abrir la ventana Seleccionar imagen. Siga las instrucciones en pantalla para completar la actualización. Para agregar más imágenes, haga clic en el nombre de la imagen en el panel Widget a la derecha del generador de paneles.

Después de cargar todas las imágenes, copie sus direcciones URL para almacenar en un archivo de texto para un uso posterior. En el panel Widget, haga clic en el nombre de la imagen para abrir la ventana Seleccionar imagen. En la ficha Galería (1), haga clic con el botón derecho del ratón en cada imagen y seleccione Copiar dirección de imagen (2). Pegue las direcciones de las imágenes en el archivo de texto.

Cuando termine de copiar las URL, cierre el widget de imagen.

1. Cree una consulta.

Utilice una tabla de comparación para crear la consulta que desee (1). En este ejemplo, para el origen de datos, utilizamos un conjunto de datos de cantidades vendidas para cada categoría de productos. Para Agrupar por, seleccione el campo que desea asociar con la acción de alternancia (2). La agrupación en este ejemplo es por categoría de producto.

3. Agregue una columna para las direcciones URL de imágenes utilizando el modo de consulta.

En Modo de consulta (1), cree una instrucción SAQL para asociar cada categoría de productos con la imagen adecuada, y almacene la URL en una nueva columna Foto (2). Utilice las URL que guardó en el archivo de texto.

Esta instrucción SAQL se creó para nuestro ejemplo. Cada categoría de productos se asigna a su imagen y se agrega a la columna Foto. Puede utilizar esta declaración como un modelo cuando cree el suyo propio.

q = load "SuperStoreSales";
result = group q by 'Product_Category';

result = foreach result generate q.'Product_Category' as 'Product_Category', count(q) as 'A', (case 'Product_Category'
   when "Furniture" then "https://example.com/file-asset/furniturejpeg?v=1"
   when "Office Supplies" then "https://example.com/file-asset/office_suppliesjpeg?v=1"
   when "Technology" then "https://example.com/file-asset/technologiejpeg?v=1"
   else "Unspecified"
end) as 'Photo';

result = order result by ('Product_Category' asc);
result = limit result 2000;

Para confirmar lo que hizo, vuelva a hacer clic en el tabulador de comparación para comparar. Las direcciones URL de imágenes se enumeran en la columna Foto (1), y la nueva agrupación está a la izquierda (2).

4. Diseñe el conmutador del widget repetidor.

Ahora diseñe el widget repetidor utilizando las direcciones URL de imágenes de la columna Foto.

• Arrastre el widget de texto al lienzo del panel.
• Arrastre su consulta desde el panel derecho al widget.
• Arrastre un widget de imagen al repetidor. En el panel de propiedades, seleccione Fotografía como el origen de imagen. Ajuste la escala de la imagen para adaptarla. Haga clic en Listo.
• Modifique el contenido del repetidor de nuevo. Arrastre un widget de imagen al repetidor. En el panel Widget de la derecha, cambie el texto a [Categoría_Producto]. Agregue color y estilo. Para agregar un emoji, haga clic con el botón derecho en el área de texto. Cuando haya finalizado, haga clic en Listo.
• Bajo Formato de contenido en el panel derecho, introduzca tres elementos por línea de modo que las opciones de alternancia para este ejemplo se muestren de lado a lado.

Eso es todo. Guarde y realice una vista previa del panel. Cuando hace clic en uno de los conmutadores, se resalta la barra para esa categoría de productos.

Sugerencia Utilice las técnicas de este ejemplo para agregar imágenes a cualquiera de sus consultas.