Añadir imágenes dinámicas a los espacios de trabajo

Este artículo describe cómo integrar imágenes dinámicas en sus paneles. La selección de nuevos valores de atributo impulsa los cambios en las imágenes dinámicas.

También puede insertar imágenes en objetos de informes como tablas.

Los paneles GoodData se pueden ampliar fácilmente con imágenes estáticas que permiten mejorar el atractivo visual general y transmitir información contextual adicional. Estas imágenes, sin embargo, no cambian cuando cambia el contexto.

Supongamos, por ejemplo, que ha agregado un filtro de panel a su panel. Cuando el nuevo valor de atributo se selecciona desde el filtro, sería incluso más útil actualizar la imagen del panel con una nueva versión.

De forma predeterminada, GoodData define la longitud máxima de las etiquetas de atributo en 128 caracteres, que puede ser demasiado pequeña cuando se referencian imágenes por URL. Si cuenta con tener URL más largas, puede ampliar el límite de caracteres para la etiqueta del atributo en el modelo lógico de datos del espacio de trabajo mediante las páginas grises o una llamada a la API. De lo contrario, puede hacer las modificaciones necesarias en el portal GoodData, donde no se modifican los valores predeterminados para la etiqueta del atributo.

Debe tener privilegios de administrador para el espacio de trabajo en el que vaya a publicar dichos cambios.

Preparar las imágenes fuente

El conjunto de imágenes fuente debe cumplir los siguientes requisitos:

  • Formato PNG o JPG
  • Deben estar almacenadas en un repositorio accesible, al que puedan acceder los usuarios finales en HTTPS
  • Nombres únicos para cada imagen

Preparar los datos

En función de cómo se vayan a utilizar las imágenes en el panel, la tabla de datos debería ensamblarse en uno de los siguientes formatos.

Imágenes dinámicas controladas por un filtro

Si se propone insertar imágenes en el panel con el objetivo de que su selección se controle mediante un filtro del panel, los datos deberían ensamblarse en el siguiente formato:

ID de empleadoNombre del empleadoImagen del empleado
1Persona 1source=web&url=https%3A%2F%2Fwww.example.org%2Fimage1.jpg
2Persona 2source=web&url=https%3A%2F%2Fwww.example.org%2Fimage2.png

En la configuración anterior, el valor de Campo de imagen es una concatenación de la cadena source=web&url= y de la versión con codificación URL de la URL a la ubicación de la imagen.

Imágenes referenciadas en un informe de tabla

Si las imágenes se van a utilizar en un informe de tabla, los datos deberían ensamblarse en el siguiente formato:

ID de empleadoNombre del empleadoImagen del empleado
1Persona 1

source=web&url=https%3A%2F%2Fwww.example.org%2Fimage1.jpg

2Persona 2

source=web&url=https%3A%2F%2Fwww.example.org%2Fimage2.png

En la configuración anterior, el valor de Campo de imagen es una concatenación de la cadena source=web&url= y de la versión con codificación URL de la URL a la ubicación de la imagen.

Preparar los metadatos

Prepare los metadatos del espacio de trabajo de modo que este pueda mostrar las imágenes de origen que ha definido.

Definición de la etiqueta de atributo

Con CloudConnect Designer, localice un atributo que identifique de forma exclusiva el contenido de la imagen. En la tabla de datos anterior, este atributo corresponde a la columna ID de empleado. Agregue una etiqueta a este atributo que se corresponda con la columna Imagen.

Una etiqueta es una referencia al atributo en una forma diferente.

Pasos:

  1. En su escritorio local, inicie CloudConnect Designer.
  2. En la pestaña Explorador de proyectos, seleccione el espacio de trabajo que desea cambiar.
  3. En la carpeta modelo, debería buscar el archivo o archivos *LDM del espacio de trabajo. Haga doble clic en el archivo del modelo lógico de datos que desea editar.
  4. En el conjunto de datos apropiado, agregue o modifique la etiqueta del atributo.

    1. Haga doble clic en el conjunto de datos. Se abre la ventana Atributos y hechos.

    2. Supongamos que el conjunto de datos Empleados tiene el siguiente aspecto en la ventana Atributos y hechos: 

    3. Para más información, haga clic en la casilla de verificación Mostrar identificador. Para el conjunto de datos anterior, debe añadir la etiqueta. Para agregar una etiqueta, haga clic en el icono Más. Seleccione Añadir etiqueta para > ID del empleado.

    4. Como título de la nueva entrada, indique Imagen del empleado. Compruebe que el tipo se haya especificado como una etiqueta.

    5. Haga clic en la casilla de verificación Mostrar tipos de datos. En la columna Tipos de datos, haga clic en la entrada de la nueva etiqueta. Haga clic en el botón Examinar….

    6. En la ventana Seleccionar tipo de datos, compruebe que el botón de selección Texto se haya seleccionado. En el cuadro de texto, indique 255.

    7. Cuando haya terminado, la definición del conjunto de datos debería tener el siguiente aspecto:  

       Conjunto de datos de ejemplo con etiqueta agregada

    8. Anote el identificador interno para el atributo y la etiqueta. Lo necesitará más tarde.

    9. Para guardar los cambios en el conjunto de datos, haga clic en Aceptar.

    10. Compruebe que el modelo lógico de datos esté asociado al espacio de trabajo adecuado. En la pestaña Explorador de proyectos, haga clic con el botón derecho en el espacio de trabajo de destino y seleccione Proyecto activo para…

    11. Antes de publicar, debería validarlo. Haga clic con el botón secundario en el panel Editor de modelos y seleccione Validar….

    12. Si la validación se aprueba, guarde el archivo *.LDM.

    13. Haga clic en Publicar modelo en el servidor en la barra lateral Detalles.

El espacio de trabajo se ha actualizado para agregar la etiqueta al único identificador para cada imagen.

Actualizar el gráfico ETL

Ahora debe actualizar el gráfico ETL para agregar los valores para la nueva etiqueta de atributo. Debe:

  • Actualizar un gráfico ETL para incluir una nueva columna. Es posible que se le requiera que vuelva a publicar todos sus datos en el gráfico ETL.
  • O crear un gráfico ETL nuevo que rellene esta etiqueta de atributo.

Para más información sobre cómo crear gráficos ETL en CloudConnect Designer, vea Desconexión directa del conjunto de datos.

Actualizar la definición del espacio de trabajo

En su proyecto de GoodData, debe actualizar la definición del espacio de trabajo para que sepa que la forma de visualización de la etiqueta es una imagen.

Pasos:

  1. Inicie sesión en el portal GoodData.
  2. En el menú desplegable Espacios de trabajo, seleccione el espacio de trabajo en el que ha publicado el modelo lógico de datos.
  3. Desde la barra de herramientas, seleccione Gestión. En la pestaña Datos, haga clic en Atributos. Seleccione el atributo al que ha agregado la etiqueta (por ejemplo, ID de empleado).
  4. La información del objeto se muestra para el atributo y sus etiquetas.
  5. En la columna Controles, bajo la sección Etiquetas, haga clic en el enlace Editar.
  6. Desde la lista desplegable Tipo, seleccione Imagen.
  7. La definición del atributo debería tener el siguiente aspecto:
  8. Haga clic en Guardar. La definición del espacio de trabajo se ha actualizado.

Definir informes y paneles

Ahora que el modelo lógico de datos del espacio de trabajo y el gráfico ETL se han actualizado para utilizar una nueva etiqueta de atributo, debe crear los objetos del espacio de trabajo para tener acceso a estas imágenes y visualizarlas.

En los pasos siguientes, puede ver cómo estas imágenes pueden estar disponibles en informes y paneles.

Ejemplo: adición de imágenes a un informe

En este ejemplo, puede agregar la etiqueta a un informe tabular como una columna que muestra los valores del atributo, con referencia a las imágenes almacenadas.

Pasos:

  1. Inicie sesión en el portal GoodData.
  2. En el menú desplegable Espacio de trabajo, seleccione el espacio de trabajo en el que ha publicado el modelo lógicos de datos y los cambios en el gráfico ETL.
  3. En el menú del portal, seleccione Informes.
  4. En la página Informes, abra o cree un nuevo informe.
  5. Haga clic en la pestaña Cómo.
  6. Desde la lista de atributos disponibles, navegue hasta el ID de empleado y selecciónelo.
  7. En la columna Valores del filtro, seleccione Imagen del empleado en el menú desplegable.
  8. Para añadir la etiqueta de atributo, haga clic en Hecho. El informe se ha actualizado con la columna nueva.

Ejemplo: adición de imágenes a un panel

Adición de un filtro del panel para la imagen

En este punto, debe agregar un filtro del panel para filtrar los valores para el atributo ID de empleado. Cuando se configura el filtro del panel, las selecciones realizadas en el filtro filtran automáticamente todo el contenido de la pestaña del panel para mostrar solo el atributo seleccionado, lo que significa que el filtro también se aplica al objeto de la imagen dinámica que especifique a continuación.

Al configurar el filtro del panel, debería especificar que los usuarios solo pueden seleccionar un valor en la pestaña Selección.

Para más información sobre cómo agregar filtros del panel, vea Filtros de panel.

Adición del conjunto de imágenes al panel

Ahora puede agregar la imagen al panel con los siguientes pasos.

Pasos:

  1. Inicie sesión en el portal GoodData.

  2. Seleccione el espacio de trabajo desde el menú desplegable Espacio de trabajo.

  3. Desde el menú Paneles, seleccione el panel al que desea agregar la imagen.

  4. Haga clic en la pestaña del panel en el que desea agregar la imagen.

  5. Haga clic en el icono Editar.

  6. En la barra de herramientas Editar, haga clic en Contenido web.

  7. Inserte la siguiente URL:  

    https://secure.gooddata.com/gdc/app/projects/%CURRENT_PROJECT_HASH%/images?displayFormIdentifier=[label_id]&attributeElementUri=%FILTER_VALUE([attribute_id])%
    1. [label_id] = el identificador interno de la etiqueta que contiene los datos de la imagen.
    2. [attribute_id] = el identificador interno del atributo primario
    3. Para un ejemplo concreto, vea Ejemplo: Visualización de la imagen del jugador por número de camiseta" que se ofrece a continuación.

  8. Haga clic en Guardar.

  9. Cambie el tamaño y la posición de la imagen según convenga.

En este punto, debería poder usar el filtro del panel para seleccionar los valores para el Nombre del empleado, que actualiza automáticamente la imagen que se muestra.

Ejemplo: Visualización de la imagen del jugador por número de camiseta

Supongamos que está creando un espacio de trabajo para hacer un seguimiento de las estadísticas de un equipo deportivo y desea filtrar un panel según el número de camiseta de cada jugador. Además de crear un filtro de panel según el número de camiseta, desea mostrar una imagen del jugador en función del número de camiseta de cada jugador.

En este caso, debería completar todos los pasos anteriores con los siguientes cambios.

  1. Obtenga una imagen de cada jugador.
  2. Obtenga, mediante el portal de GoodData, el identificador del espacio de trabajo para el espacio de trabajo que debe contener las imágenes. En este ejemplo, utilizaremos lo siguiente: MyProjectHash.
  3. En el modelo lógico de datos, localice el atributo que se utiliza para identificar el jugador en cuestión. Cree una etiqueta para este atributo del número de camiseta. El nombre de visualización de esta etiqueta debería ser jersyno.
  4. Anote el identificador interno para el atributo y la etiqueta. A efectos de este ejemplo, utilizaremos label.support_gooddata_test.jersyno para la etiqueta y attr.support_gooddata_test.jersyno para el atributo.
  5. Efectúe los cambios necesarios al modelo lógico de datos y al gráfico ETL y publíquelo en el espacio de trabajo.
  6. En el portal GoodData, cree el informe que debe contener la imagen y el filtro del panel que se utilizará para filtrar según el número de camiseta.
  7. En el panel que debe contener la imagen del jugador, inserte la siguiente URL como contenido web:  https://secure.gooddata.com/gdc/app/projects/MyProjectHash/images?displayFormIdentifier=label.support_gooddata_test.jersyno.imageurl&attributeElementUri=%FILTER_VALUE(attr.support_gooddata_test.jersyno)%

Las indicaciones anteriores representan el conjunto básico de pasos de la configuración. Asegúrese de probar los resultados.

Probar los resultados

Antes de entregar estos informes a sus usuarios finales, debe revisar los resultados de cada informe utilizando los recursos de imagen y realizando pruebas de muestra significativas para verificar que los informes se está llenando con las imágenes adecuadas.

Mostrar valores de filtro seleccionados en un cuadro de texto del panel