Erstellen Sie professionelle Pop-ups in ArcGIS Field Maps mit Multiple-Choice-Antworten

Multiple-Choice-Formularelemente ermöglichen es mobilen Mitarbeitenden, mehr als eine Antwort in einem einzelnen Feld zu erfassen. Dies ist nützlich, wenn auf ein Asset, eine Inspektion oder eine Beobachtung mehr als ein Zustand zutreffen kann.

Wenn die ausgewählten Werte in einem Pop-up angezeigt werden, erscheinen sie als durch Kommas getrennte Liste. Dieses Format ist nicht die benutzerfreundlichste Art, Informationen im Außeneinsatz darzustellen. Mit zunehmender Anzahl von Antworten kann die Liste auf den ersten Blick schwer lesbar werden. (siehe Abbildung)

Anstatt die Rohwerte im Pop-up anzuzeigen, können Sie Arcade in Kombination mit HTML verwenden, um diese Werte in eine formatierte Liste umzuwandeln, die leichter lesbar ist und die wichtigsten Informationen für Ihre mobilen Mitarbeitenden hervorhebt. In diesem Artikel erfahren Sie, wie Sie aus Multiple-Choice-Antworten in ArcGIS Field Maps ein ansprechenderes und professionelleres Pop-up-Erlebnis erstellen.

Hinweis: Falls Sie bisher noch nicht mit einem Multiple-Choice-Formularelement gearbeitet haben, erfahren Sie mehr darüber im Artikel „Build smarter forms in ArcGIS Field Maps with multiple choice and conditional visibility“.

Arcade-Inhalt zum Pop-up hinzufügen

Um zu veranschaulichen, wie dies funktioniert, betrachten wir das Beispiel einer Inspektionsperson, die nach einem Sturm Dachschäden an einem Wohngebäude meldet. Die Details der Dachschäden wurden mithilfe einer Multiple-Choice-Frage erfasst und in einem einzigen Feld gespeichert.

Der folgende Arcade-Ausdruck nimmt diese gespeicherten Werte und zeigt sie als formatierte Liste im Pop-up an, wie in der folgenden Abbildung zu sehen ist. Dadurch lassen sich die Informationen leichter erfassen und besser verstehen.

Pop-up in ArcGIS Field Maps mit übersichtlich aufbereiteten Dachschadendetails. Ausgewählte Schadensarten werden als formatierte Checkliste mit Symbolen angezeigt, darunter Einstich oder Loch, Baumeinschlag und Teileinsturz. Darunter ist ein Foto eines Wohnhauses zu sehen, dessen Dach durch einen umgestürzten Baum schwer beschädigt wurde. — *Formatierte Checkliste mit Multiple-Choice-Antworten*

Schritte zum Hinzufügen von Arcade-Inhalten zum Pop-up

Öffnen Sie Ihre Karte im Map Viewer und wählen Sie den Layer aus, der die Multiple-Choice-Frage im Formular enthält.
Klicken Sie im rechten Seitenbereich auf das Symbol „Pop-ups“, um das Konfigurationsfenster für Pop-ups zu öffnen.
Klicken Sie unten im Fenster auf „+ Inhalt hinzufügen“ und wählen Sie „Arcade“ aus. Dadurch wird der Arcade-Ausdruckseditor geöffnet.
Passen Sie den untenstehenden Arcade-Ausdruck an und übernehmen Sie ihn.
Klicken Sie auf „Fertig“.
Speichern Sie die Karte.

Sie können den folgenden Code als Ausgangspunkt verwenden und ihn mit Ihren eigenen Daten sowie Formatierungselementen anpassen.

Arcade Ausdruck:

// CHANGE TO MATCH YOUR DATA
// These are the main values you may need to update.


var damageList = $feature.Roof_Damage_Details;
var title = "Roof Damage Details";
var emptyText = "No roof damage details were recorded.";


// Color and style choices
// These are optional to change.


var listStyle = {
    mainColor: "#7F1D1D",
    accentColor: "#FCA5A5",
    backgroundColor: "#F8FBFF",
    textSize: "15px",
    headertextSize: "20px",
    textFont: "Arial, sans-serif",
    symbol: "✔"
};

// Create an array from the multiple choice input.

var mcList = Split(damageList, ",");

// Define html for entire body.

var html = "";

html += "<div style='font-family:" + listStyle.textFont + "; background-color:" + listStyle.backgroundColor + "; padding:12px; border-radius:8px;'>";

// Define the header.

html += "<div style='font-size:" + listStyle.headertextSize + "; color:" + listStyle.mainColor + "; font-weight:bold; margin-bottom:10px;'>";
html += title;
html += "</div>";

// Show fallback text if no choices were selected.

if (IsEmpty(damageList)) {
    html += "<div style='font-size:" + listStyle.textSize + "; color:#555;'>";
    html += emptyText;
    html += "</div>";
}

// If choices were selected, format each one as a list item.

else {
    for (var i in mcList) {
        var listItem = mcList[i];
        if (listItem != "") {
            html += "<div style='display:flex; align-items:center; margin-bottom:6px;'>";
            html += "<span style='background-color:" + listStyle.accentColor + "; color:" + listStyle.mainColor + "; border-radius:50%; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; margin-right:8px; font-weight:bold;'>";
            html += listStyle.symbol;
            html += "</span>";
            html += "<span style='font-size:" + listStyle.textSize + ";'>";
            html += listItem;
            html += "</span>";
            html += "</div>";
        }
    }
}
html += "</div>";

return {
    type: "text",
    text: html
};

Skript an Ihre Daten anpassen

Wenn Sie noch keine Erfahrung mit Arcade haben, müssen Sie sich keine Sorgen machen. Sie müssen nicht jede einzelne Zeile verstehen, um den Ausdruck verwenden zu können. Sie müssen lediglich einige wenige Werte am Anfang des Skripts anpassen.

Feldreferenz aktualisieren (erforderlich):

var list = $feature.Roof_Damage_Details;

Dies ist das Feld, in dem die ausgewählten Werte aus Ihrer Multiple-Choice-Frage gespeichert werden. Wenn Ihr Feld einen anderen Namen hat, ersetzen Sie „Roof_Damage_Details“ durch den entsprechenden Feldnamen. Falls Sie nicht sicher sind, wie dieser lautet, finden Sie ihn unter „Anzeigename“ in den Feldeigenschaften im Bereich Field Maps Designer.

Im Pop-up angezeigten Titel anpassen (optional):

var title = “Roof Damage Details”;

Dies ist der Titel, der für diesen Abschnitt angezeigt wird. Verwenden Sie eine Bezeichnung, die für Ihren Workflow passend ist. Beispielsweise könnten Sie statt „Roof Damage Details“ auch „Details zu Dachschäden“, „Inspektionsergebnisse“ oder „Festgestellte Schäden“ verwenden.

Angezeigte Meldung anpassen, wenn keine Schadensdetails ausgewählt wurden (optional):

var emptyText = “No roof damage details were recorded.”;

Dies ist die Meldung, die angezeigt wird, wenn keine Schadensdetails ausgewählt oder erfasst wurden.

Und das war’s! Alles andere kann unverändert bleiben, sofern Sie nicht die Farben, Schriftarten, Symbole oder andere Formatierungsoptionen anpassen möchten.

Zusammenfassung

Multiple-Choice-Formularelemente sind eine praktische Möglichkeit, mehrere Antworten in einem einzigen Feld zu erfassen. Durch die Verwendung von Arcade in Kombination mit HTML können Sie die Rohwerte aus Multiple-Choice-Antworten in ein übersichtlicheres und ansprechenderes Pop-up-Erlebnis verwandeln. Mit etwas Formatierung werden wichtige Informationen leichter erfassbar, sodass mobile Mitarbeitende schnell erkennen können, was vor Ort festgestellt wurde.

Möchten Sie dies in Aktion sehen? Erkunden Sie die in diesem Artikel verwendete Beispielkarte Inland Empire Severe Damage Assessment, um die Pop-up-Konfiguration anzusehen und den Workflow selbst zu testen.