Hinzufügen konfigurierbarer Parameter zu Vorlagen

In diesem Thema

Erstellen einer Konfigurationsdatei
Einrichten der Vorlage zum Lesen der Informationen der Konfigurationsdatei
Verknüpfen der Informationen der Konfigurationsdatei mit dem Element für die benutzerdefinierte Vorlage

Mittels konfigurierbarer Webanwendungsvorlagen können Benutzer das Aussehen und Verhalten einer Anwendung anpassen. Vorlagen werden in vier Schritten konfigurierbar gemacht:

Erstellen Sie eine Webanwendungsvorlage, falls dies nicht bereits erfolgt ist.
Erstellen Sie eine Konfigurationsdatei.
Richten Sie die Vorlage zum Lesen der Konfigurationseigenschaften ein, und wenden Sie sie auf die Anwendung an.
Verknüpfen Sie die Konfigurationsdatei mit dem Element für die benutzerdefinierte Vorlage.

Die ersten Schritte sind in den folgenden Abschnitten beschrieben.

Erstellen einer Konfigurationsdatei

Die Konfigurationsdatei ist eine JSON-Datei, mit der die Konfigurationsoptionen für die Vorlage definiert werden. Diese Datei enthält einen oder mehrere Abschnitte, die die Optionen kategorisieren.

Die Eigenschaft fieldName muss innerhalb der Konfigurationseinstellung eindeutig sein.

Erstellen Sie die einzelnen Abschnitte, indem Sie eine Kategorie und eine Reihe von Feldern festlegen.

{
    "configurationSettings": [
        {
            "category": "",
            "fields": []
        }
    ]
}

Legen Sie die Konfigurationsoptionen anhand der in der folgenden Tabelle aufgelisteten Feldtypen fest.

Feldtyp	Beschreibung
Absatz	Zeigt einen erläuternden Text im Dialogfeld "Konfiguration" an. `{ "type": "paragraph", "value": "* These menu items will appear in the application when the web map has layers that require them." }`
Text	Akzeptiert Texteingabe. Beinhaltet die Eigenschaft "stringFieldOption", die den Typ des auf dem Bildschirm angezeigten Textfeldes festlegt. Werte sind "textbox", "textarea" und "richtext". "Textbox" ist der Standardwert und ein einzeiliges Textfeld. "Textarea" zeigt ein größeres Textfeld für die Eingabe von Daten an. "Richtext" zeigt einen Richtext-Editor an, der Benutzern die Anwendung einiger Formatierungsoptionen ermöglicht, z. B. die Einstellung der Textschriftart auf fett oder kursiv. `{ "type": "string", "fieldName": "description", "label": "Description", "tooltip": "", "stringFieldOption": richtext \|\| textarea \|\| textbox, "placeHolder": "Text that appears in the text box to provide a hint to users on text to enter" }`
Boolescher Wert	Erstellt ein Kontrollkästchen zum Festlegen von "True"- oder "False"-Werten. `{ "type": "boolean", "fieldName": "displaytitle", "label": "Show Title", "tooltip": "" }`
Zahl	Erstellt ein Feld, das numerische Werte akzeptiert. Wenn das Feld nur einen bestimmten Wertebereich akzeptiert, können Sie die Einschränkungseinstellung verwenden, um die Eingabe auf einen bestimmten Wertebereich zu beschränken oder die Eingabewerte zu formatieren. `{ "type": "number", "fieldName": "range", "label": "Range:", "tooltip": "", "constraints" :{min:0,max:10,places:0} }`
Optionen	Erstellt eine Dropdown-Liste mit einer Reihe von Optionen. `{ "type": "options", "fieldName": "theme", "tooltip": "Color theme to use", "label": "Color Scheme:", "options": [{ "label": "Blue", "value": "blue" }, { "label": "Green", "value": "green" }, { "label": "Orange", "value": "orange" }] }`
Farbauswahl	Zeigt eine Farbauswahl an, über die Benutzer eine Farbe aus einer Palette auswählen oder HEX-, RGB- oder HSV-Werte angeben können. `{ "type": "color", "label": "Choose a selection color", "fieldName": "selectionColor" }`
Das Dialogfeld "Webkarte"	Zeigt ein Dialogfeld an, um nach einer neuen Karte zu suchen, die in einer Vorlage angezeigt werden soll. `{ "type": "webmap" }`
Das Dialogfeld "Gruppe"	Zeigt ein Dialogfeld an, um nach einer neuen Gruppe zu suchen, die in einer Vorlage angezeigt werden soll. `{ "type": "group" }`

Beispiel für eine Konfigurationsdatei

Im Folgenden finden Sie ein Beispiel für eine vollständige Konfigurationsdatei und das resultierende Konfigurationsfenster.

{
    "configurationSettings": [
        {
            "category": "General Settings",
            "fields": [
                {
                    "type": "options",
                    "fieldName": "theme",
                    "tooltip": "Color theme to use",
                    "label": "Color Scheme:",
                    "options": [
                        {
                            "label": "Blue",
                            "value": "blue"
                        },
                        {
                            "label": "Green",
                            "value": "green"
                        },
                        {
                            "label": "Orange",
                            "value": "orange"
                        }
                    ]
                },
                {
                    "type": "string",
                    "fieldName": "layer",
                    "label": "Analysis Layer",
                    "tooltip": "Feature Layer with Facilities to search"
                },
                {
                    "type": "string",
                    "fieldName": "orgname",
                    "label": "Organization Name:",
                    "tooltip": "",
                    "stringFieldOption": "richtext",
                    "placeHolder": "Organization Name"
                },
                {
                    "type": "number",
                    "fieldName": "bufferdistance",
                    "label": "Search Distance (miles)",
                    "value": "1"
                }
            ]
        }
    ],
    "values": {
        "theme": "orange",
        "bufferdistance": 1
    }
}

Das Konfigurationsfenster — Das resultierende Konfigurationsfenster für den Beispielcode

Einrichten der Vorlage zum Lesen der Informationen der Konfigurationsdatei

Wenn die Vorlage konfigurierbar ist, muss die Anwendung die Element-ID für eine Web Mapping-Anwendung als Wert für den URL-Parameter appid akzeptieren. Diese ID wird verwendet, um eine asynchrone Anforderung zum Abrufen der Konfigurationseigenschaften für die Anwendung auszuführen. In ArcGIS API for JavaScript können Sie mit esri.request die Konfigurationsdetails der Anwendung abrufen.

In diesem Beispiel wird "esri.arcgis.utils.arcgisUrl" in "www.arcgis.com/sharing/content/items" aufgelöst.

var requestHandle = esri.request({
    url: esri.arcgis.utils.arcgisUrl + "/" + appid + "/data",
    content: {
        f: "json"
     },
    callbackParamName: "callback",
    load: function (response) {
     for (var key in response.values){
      if(response.values[key]!==undefined)configOptions[key]=response.values[key];
      }
    }, 
});

Die Antwort enthält die Änderungen, die der Benutzer über das Konfigurationsfenster an der Anwendung vorgenommen hat. Sie können die Änderungen abrufen und sie auf die Anwendung anwenden. Die Anwendung sollte Standardwerte für die Konfigurationsoptionen definieren, um Situationen zu handhaben, in denen die Vorlage nicht konfiguriert ist.

{
    "source": "15a34e2c161b4364860854fbc84262c5",
    "folderId": "5705faa4594a4fd09edf01742c16e523",
    "values": {
        "webmap": "32f1438789d34b5e8125f0f7c64b8d63",
        "layer":"http://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer/2",
        "theme": "green",
        "orgname": "Water Points",
        "bufferdistance": 3
       }
 }

Verknüpfen der Informationen der Konfigurationsdatei mit dem Element für die benutzerdefinierte Vorlage

Nachdem Sie die Konfigurationsdatei erstellt haben, können Sie sie mit Ihrer benutzerdefinierten Vorlage verknüpfen und die Anwendung konfigurierbar machen. Zunächst fügen Sie die Vorlage als neues Anwendungselement in Ihrem Portal hinzu, sofern dies nicht bereits erfolgt ist. Dann öffnen Sie die Detailseite Ihrer Anwendung, klicken Sie auf die Schaltfläche Bearbeiten, kopieren Sie den JSON-Code aus Ihrer Konfigurationsdatei, und fügen Sie ihn in das Feld Konfigurationsparameter unten auf der Elementdetailseite ein.

Elementdetailseite mit dem Feld "Konfigurationsparameter" — Machen Sie Ihre Vorlage konfigurierbar, indem Sie die Informationen der Konfigurationsdatei in das Feld "Konfigurationsparameter" der Vorlagenelementdetails einfügen.

Der Abschnitt "Konfigurationsparameter" ist nun im Modus Bearbeiten des Webanwendungselements verfügbar.

Hinweis:

Für das Feld Konfigurationsparameter ist ein gültiges JSON erforderlich. Sie sollten Ihr JSON über einen Validator wie JSONLint ausführen, um sicherzustellen, dass Sie über ein wohlgeformtes, fehlerfreies JSON verfügen.

Wenn Sie die konfigurierbare Vorlage in der Webvorlagengalerie Ihrer Organisation oder in der Gruppenvorlagengalerie verwenden möchten, geben Sie das Element für die Gruppe frei, die für die Vorlagen verwendet wird. Anschließend kann der Administrator Ihrer Organisation den Map Viewer konfigurieren oder Gruppen konfigurieren, um die Gruppe zu verwenden, die Ihre Vorlage enthält.

Feedback zu diesem Thema?