Configurer l'infobulle — documentation OpenDataSoft Documentation 1.0

Aucune infobulle¶

Vous pouvez choisir de ne pas afficher d'infobulle. Cela peut par exemple être utile lorsque vous souhaitez afficher plusieurs couches sur une carte et avoir uniquement une couche avec des infobulles.

Infobulle standard¶

Vous pouvez configurer les champs qui apparaîtront dans l'infobulle, ainsi que leur ordre d'affichage. Un aperçu est disponible dans la colonne de droite pour voir en simultané le rendu final de l'infobulle.

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

Paramétrage de l'infobulle

Pour chacun des champs, les 3 actions suivantes sont disponibles et signifient :

Actions sur les champs

Glisser/déposer pour changer la position de ce champ dans l'infobulle
Cliquer pour retirer le champ de l'infobulle
Cliquer pour ajouter le champ à l'infobulle

../../../_images/tooltip__preview--fr.png

L'aperçu

Infobulle personnalisée en HTML¶

Lorsque vous sélectionnez Infobulle personnalisée en HTML, un éditeur HTML s'affiche. L'approche est similaire à l'écriture de "pages" sur votre domaine ; vous pouvez utiliser n'importe quel ODS Widget et même intégrer d'autres visualisations dans l'infobulle.

../../../_images/tooltip__custom-tooltip--fr.jpg

Un exemple d'infobulle personnalisée.

Lorsque l'infobulle s'affiche, une variable record est "injectée" et est disponible pour être utilisée. Cet objet record contient les propriétés suivantes :

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

Grâce à ces propriétés, vous pouvez afficher directement les valeurs dans l'infobulle, ou même les utiliser pour afficher des données depuis d'autres jeux de données.

Le schéma du jeu de données est également injecté sous la forme d'une variable fields, qui contient un tableau d'objets représentant les champs (vous pouvez utiliser ng-repeat pour faire une boucle sur ces champs). Un objet champ (ici "field") contient les propriétés suivantes :

field.name : l'identifiant du champ, par exemple pour récupérer une valeur à l'intérieur de 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 à partir de l'un des champs fichier 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 récupérées à partir d'un autre jeu de donnée qui a été filtré à partir d'une des valeurs de l'enregistrement sélectionné.

<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>

Configurer l'infobulle¶

Aucune infobulle¶

Infobulle standard¶

Infobulle personnalisée en HTML¶