Configurer l'info-bulle

Anthony Pépin Mis à jour le par Anthony Pépin

Afin d'afficher des informations sur une carte, sur une image ou dans un calendrier, vous pouvez configurer une infobulle. Vous pouvez utiliser et configurer l'infobulle standard ou la paramétrer plus précisément en utilisant une infobulle HTML personnalisée. Une info-bulle personnalisée prend un peu plus de temps, mais c'est un bon moyen d'exploiter vos données. Pour passer de l'interface de configuration d'info-bulle standard à cette vue d'info-bulle personnalisée, sélectionnez "Modèle HTML personnalisé" dans le menu déroulant des types d'info-bulle.

../../../_images/tooltip__select-type--en.jpg

Info-bulle standard

Vous pouvez configurer les champs qui apparaîtront dans l'info-bulle et leur ordre relatif. Un aperçu instantané est disponible sur le côté droit.

../../../_images/tooltip__settings--fr.png

Pour chacun des champs de l'info-bulle, les trois actions suivantes sont disponibles :

../../../_images/tooltip__actions.png
  • Glisser-déposer pour déplacer un champ dans l'info-bulle
  • Cliquez pour supprimer un champ de l'info-bulle
  • Cliquez pour ajouter un champ à l'info-bulle
../../../_images/tooltip__preview--fr.png

Info-bulle personnalisée en HTML

Lorsque vous sélectionnez cette option, un éditeur HTML apparaît. Ceci est très similaire à l'écriture de "pages" dans votre domaine. Vous avez accès à tous les widgets ODS et vous pouvez même intégrer d'autres visualisations dans l'info-bulle.

../../../_images/tooltip__custom-tooltip--en.jpg

Lorsque l'infobulle est affichée, elle peut accéder à une variable record spécifique qui est "injectée" dans l'infobulle. Cet objet record contient les propriétés suivantes :

  • record.fields : objet contenant toutes les valeurs (par exemple record.fields.tree_height )
  • record.recordid : identifiant unique de l'enregistrement
  • record.datasetid : identifiant du jeu de données

À l'aide de ces propriétés, vous pouvez afficher directement des valeurs dans l'info-bulle ou même les utiliser pour afficher des données provenant d'autres jeux de données.

Le schéma du jeu de données est également injecté en tant que variable fields , qui est un tableau d'objets de champ (vous pouvez utiliser ng-repeat pour boucler sur les champs). Un objet champ contient les propriétés suivantes :

  • field.name : l'identifiant du champ, par exemple, pour trouver une valeur dans record.fields
  • field.type : le type du champ ( text , decimal , integer , date , datetime , geo_point_2d , geo_shape )
  • field.label : un label destiné à l'affichage

Voici le code de l'exemple ci-dessus :

<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 vous souhaitez afficher une image de l'un des champs file de votre jeu de données, vous pouvez utiliser le widget ods-record-image .

Vous pouvez utiliser un <ods-dataset-context> pour afficher une visualisation à partir d'un autre jeu de données. Dans l'exemple suivant, les données sont extraites d'un autre jeu de données et filtrées à l'aide de l'une des valeurs de l'enregistrement sélectionné.

 <div class="my-tooltip">
 < h1 >City report : {{ record.fields.city_name }}</ h1 >
 < 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>

Aucune info-bulle

Vous pouvez choisir de n'afficher aucune info-bulle, ce qui peut être utile lorsque, par exemple, vous souhaitez afficher plusieurs couches sur une carte et n'avoir qu'une seule couche avec des info-bulles.

Êtes-vous satisfait ?

Consulter l'historique du jeu de données

Actions et états des jeux de données

Table des matières

Contactez-nous

Powered by HelpDocs (opens in a new tab)