Configurar la ayuda de herramienta

Para visualizar información en un mapa, una imagen o un calendario, puede configurar una ayuda de herramienta. Puede usar y configurar la ayuda de herramienta estándar o personalizarla con más precisión mediante una ayuda de herramienta HTML personalizada. A pesar de suponer un poco más de tiempo, una ayuda de herramienta personalizada es una buena manera de obtener el máximo rendimiento de los datos. Para cambiar de la configuración de la ayuda de herramienta estándar a esta vista de ayuda de herramienta personalizada, seleccione Ayudas de herramientas HTML personalizadas en el menú desplegable de tipos de ayudas de herramientas.

Ayuda de herramienta estándar

Por supuesto, puede configurar qué campos aparecerán en la ayuda de herramienta y su orden relativo. En la parte derecha dispone de una vista previa dinámica.

Para cada uno de los campos de la ayuda de herramienta, puede llevar a cabo las 3 acciones siguientes:

../../../_images/tooltip__actions.png

Acciones de los campos de la ayuda de herramienta

  • Arrastrar y soltar para ver el campo dentro de la ayuda de herramienta

  • Hacer clic para eliminar el campo de la ayuda de herramienta

  • Hacer clic para añadir el campo a la ayuda de herramienta

Ayudas de herramientas HTML personalizadas

Al seleccionar Ayudas de herramientas HTML personalizadas aparece un editor HTML. Es muy parecido a escribir "páginas" en el dominio; tiene acceso a cada uno de los widgets de ODS y hasta puede integrar otras visualizaciones en la ayuda de herramienta. Incluso puede emplear las clases de diseño de cuadrícula.

Cuando se visualiza la ayuda de herramienta, esta puede acceder a una variable record específica que se "inserta" en la ayuda de herramienta. Este objeto record contiene las propiedades siguientes:

  • record.fields: El objeto que contiene todos los valores (p. ej. record.fields.tree_height).

  • record.recordid: El identificador único del registro.

  • record.datasetid: El identificador del juego de datos.

Con estas propiedades, puede visualizar directamente valores en la ayuda de herramienta o incluso usarlas para visualizar datos de otros juegos de datos.

El esquema del juego de datos también se inserta a modo de variable fields, que es una matriz de objetos de campo (puede utilizar ng-repeat para efectuar un bucle por los campos). Un objeto de campo contiene las propiedades siguientes:

  • field.name: El identificador del campo, por ejemplo para encontrar un valor en record.fields.

  • field.type: El tipo del campo (text, decimal, integer, date, datetime, geo_point_2d, geo_shape).

  • field.label: Una etiqueta en formato legible.

Este es el código del ejemplo anterior:

<ul style="display: block; list-style-type: none; color: #2c3f56; padding:0; margin:0;">
    <li><strong style="font-size:17px;">{{ record.fields.name | limitTo:25 }}</strong></li>
    <li>{{ record.fields.organisation | limitTo:40}}</li>
    <li ng-if="record.fields.description" style="color:#bbb;">{{ record.fields.description | limitTo:140 }}</li>
    <li ng-if="!record.fields.description" style="font-style:italic;color:#bbb;">No description provided<br/></li>
    <br/>
    <li ng-if="record.fields.has_issue == 'TRUE'" style="color:#ec643c;"><i class="fa fa-exclamation-triangle"></i> An issue has been reported on this  portal</li>
    <li>
        <ul style="list-style-type: none; color: #2c3f56;padding:0 0 15px;margin-top:0px;">
            <li style="display: inline;float:left;"><strong style="font-size:13px;"><a ng-href="https://docs.google.com/forms/  d/1-9m30rCw492oGCB7Pg3aOsZ-q03KBeJsw_GZFLqIvNE/   viewform?entry.1740897944={{record.fields.name}}&amp;entry.1624486384={{record.fields.url}}&amp;entry.462034829&amp;entry.848235220"   style="color:#ccc;" target="_blank">Report an issue </a></strong><i class="fa fa-external-link" style="color:#ccc;"></i></li>
            <li style="display: inline;float:right;"><strong style="font-size:13px;"><a ng-href="{{record.fields.url}}" style="color:#ec643c;"  target="_blank">Open this portal </a></strong><i class="fa fa-external-link" style="color:#ec643c;"></i></li>
        </ul>
    </li>
</ul>

Si quiere visualizar una imagen de uno de los campos file del juego de datos, puede usar el widget ods-record-image.

Puede utilizar <ods-dataset-context> para mostrar una visualización de otro juego de datos; en el ejemplo siguiente, los datos se toman de otro juego de datos y se filtran con uno de los valores del registro seleccionado.

<div class="my-tooltip">
    <!-- Display the name of the city directly from the point that the user selected -->
    <h1>City report : {{ record.fields.city_name }}</h1>

    <!-- Display an image from the dataset -->
    <ods-record-image field="city_logo" record="record"></ods-record-image>

    <!-- Create a context reading data from another dataset but filtered on
         the city that the user clicked on -->
    <ods-dataset-context context="alerts"
                         alerts-dataset="city-alerts-realtime"
                         alerts-parameters="{'refine.city': city_name}">
        <ods-table context="alerts"></ods-table>
    </ods-dataset-context>
</div>