Konfigurieren der QuickInfo

Zum Anzeigen von Informationen auf einer Karte oder in einem Bild bzw. einem Kalender können Sie eine QuickInfo konfigurieren. Entweder können Sie dazu die Standard-QuickInfo verwenden und konfigurieren oder sie mithilfe einer benutzerdefinierten HTML-QuickInfo individueller gestalten. Eine benutzerdefinierte QuickInfo ist etwas zeitaufwendiger, aber ein guter Weg zur Nutzung Ihrer Daten. Zum Wechseln von der standardmäßigen QuickInfo-Konfigurationsschnittstelle zu dieser benutzerdefinierten QuickInfo-Ansicht wählen Sie im Dropdownmenü QuickInfo-Typ die Option Benutzerdefiniertes HTML.

Standard-QuickInfo

Natürlich können Sie konfigurieren, welche Felder in welcher relativen Reihenfolge in der QuickInfo erscheinen werden. Auf der rechten Seite ist eine Livevorschau verfügbar.

Für jedes QuickInfo-Feld sind die folgenden 3 Aktionen verfügbar:

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

Aktionen für QuickInfo-Felder

  • Drag & Drop zum Verschieben von Feldern in der QuickInfo

  • Klick zum Entfernen eines Felds aus der QuickInfo

  • Klick zum Hinfügen eines Felds zur QuickInfo

Benutzerdefinierte HTML-QuickInfo

Wenn Sie Benutzerdefinierte HTML-QuickInfo auswählen, erscheint ein HTML-Editor. Dies ähnelt sehr dem Schreiben von "Seiten" in Ihrer Domain; Sie haben Zugriff auf jedes ODS-Widget und können sogar andere Visualisierungen in Ihre QuickInfo integrieren. Selbst die Klassen zur Rasteranordnung können verwendet werden.

Wird eine QuickInfo angezeigt, kann sie auf eine bestimmte record-Variable zugreifen, die in die QuickInfo "eingespeist" wird. Dieses record-Objekt hat folgende Eigenschaften:

  • record.fields: alle Werte enthaltendes Objekt (z. B. record.fields.tree_height)

  • record.recordid: eindeutiger Bezeichner für den Eintrag

  • record.datasetid: Bezeichner des Datensatzes

Durch die Verwendung dieser Eigenschaften können Sie direkt Werte in der QuickInfo anzeigen oder sie sogar zur Anzeige von Daten anderer Datensätze verwenden.

Das Schema des Datensatzes wird ebenfalls als eine Feld``variable eingespeist, bei der es sich um ein Array von Feldobjekten handelt (Sie können ``ng-repeat verwenden, um eine Schleife über die Felder auszuführen). Ein Feldobjekt hat folgende Eigenschaften:

  • field.name: der Bezeichner des Felds, um beispielsweise einen Wert in record.fields zu finden

  • field.type: der Typ des Felds (Text, Dezimalzahl, Ganzzahl, Datum, datetime, geo_point_2d, geo_shape)

  • field.label: eine für Menschen klare Beschriftung

Hier ist der Code des obigen Beispiels:

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

Möchten Sie ein Bild von einem Datei``feld Ihres Datensatzes anzeigen, können Sie das Widget ``ods-record-image verwenden.

Zum Anzeigen einer Visualisierung eines anderen Datensatzes können Sie einen <ods-dataset-context> verwenden. Im folgenden Beispiel werden die Daten von einem anderen Datensatz genommen und mithilfe eines Wertes des ausgewählten Eintrags gefiltert.

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