構成可能なパラメーターのテンプレートへの追加

構成可能な Web アプリを使用すると、アプリの外観と動作をユーザーがカスタマイズできます。次の 4 段階のプロセスで、アプリ テンプレートを構成可能にすることができます。

1. Web アプリ テンプレートを作成していない場合は、新規に作成します。
2. 構成ファイルを作成します。
3. 構成プロパティを読み取り、アプリに適用するようにテンプレートを設定します。
4. 構成ファイルをアプリ テンプレートのアイテムと関連付けます。

次のセクションを参照し、作業を開始します。

構成ファイルの作成

構成ファイルは、アプリ テンプレートの構成オプションを定義する JSON ファイルです。このファイルには、オプションを分類するセクションが 1 つ以上含まれています。

構成設定内で、fieldName プロパティは一意である必要があります。

カテゴリと一連のフィールドを指定して、各セクションを作成します。

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

次の表にリストされているフィールド タイプを使用して、構成オプションを指定します。

フィールド タイプ	説明
段落	構成ダイアログ ボックスに説明文を表示します。 { "type": "paragraph", "value": "* These menu items will appear in the application when the web map has layers that require them." }
文字列	テキストの入力を受け入れます。画面上に表示されるテキスト ボックスのタイプを指定する stringFieldOption プロパティを含めます。値は textbox、textarea、および richtext です。デフォルトは textbox オプションで、1 行のテキスト ボックスです。textarea オプションは、データを入力するための大きなテキスト ボックスです。richtext オプションは、太字や斜体のフォントをテキストに設定するなど、ユーザーが書式を適用できるリッチ テキスト エディターです。 { "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" }
ブール値	true または false の値を指定するためのチェックボックスを作成します。 { "type": "boolean", "fieldName": "displaytitle", "label": "Show Title", "tooltip": "" }
数値	数値を受け入れるフィールドを作成します。フィールドが特定範囲の値だけを受け入れる場合は、constraints 設定を使用して、入力を特定範囲の値に制限したり、入力値の形式を設定したりできます。 { "type": "number", "fieldName": "range", "label": "Range:", "tooltip": "", "constraints" :{min:0,max:10,places:0} }
オプション	複数の選択肢を持つドロップダウン リストを作成します。 { "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" }] }
カラー パレット	ユーザーがパレットから色を選択したり、hex、rgb、または hsv 値を指定することができるカラー パレットを表示します。 { "type": "color", "label": "Choose a selection color", "fieldName": "selectionColor" }
Web マップ ダイアログ	アプリ内に表示する新しいマップを参照または検索するダイアログを表示します。 { "type": "webmap" }
グループ ダイアログ	アプリ内に表示する新しいグループを参照または検索するダイアログを表示します。 { "type": "group" }
複数のレイヤーとフィールドのセレクター	マップ内に、サポートされるタイプとジオメトリ タイプに一致するレイヤーとフィールドのツリー ビューが表示されます。 アプリのエンド ユーザーは、複数のレイヤーと各レイヤーで複数のフィールドを選択できます。 { "label":"Select search layers and fields", "fieldName":"searchLayers", "type":"multilayerandfieldselector", "tooltip":"Select layer and fields to search", "layerOptions":{ "supportedTypes":[ "FeatureLayer" ], "geometryTypes":[ "esriGeometryPoint", "esriGeometryLine", "esriGeometryPolyline", "esriGeometryPolygon" ] }, "fieldOptions":{ "supportedTypes":[ "esriFieldTypeString" ] } }
レイヤーとフィールドのセレクター	マップ内に、リストされたタイプとジオメトリでフィルターされたレイヤーのドロップダウン リストが表示されます。 ユーザーが 1 つのレイヤーと複数のフィールドを選択できるように、1 つ以上のフィールド セレクターを指定することもできます。 { "type":"layerAndFieldSelector", "fieldName":"tableLayer", "label":"Layer to display in table", "tooltip":"Layer to display in table", "fields":[ { "multipleSelection":true, "fieldName":"hiddenFields", "label":"Hide the selected fields", "tooltip":"Fields to hide in table", "supportedTypes":[ "esriFieldTypeSmallInteger", "esriFieldTypeInteger", "esriFieldTypeSingle", "esriFieldTypeDouble", "esriFieldTypeString" ] } ], "layerOptions":{ "supportedTypes":[ "FeatureLayer" ], "geometryTypes":[ "esriGeometryPoint", "esriGeometryLine", "esriGeometryPolygon" ] } }
ラジオ	一度に 1 つのオプションを選択できるラジオ ボタンを作成します。選択されたオプションは True に設定されます。 { "type": "radio", "fieldName": "layout", "tooltip": "Custom Layout", "label": "Custom Layout:", "items": [{ "label": "Sidebar", "value": "sidebarmenu" }, { "label": "FullWidth", "value": "fullwidth" }, { "label": "default", "value": "Default", "checked": true }] }
ベースマップ	すべての名前付き Esri ベースマップのドロップダウン リストを表示します。 { “type”: “basemaps”, “fieldname” :”my_basemap”, “label”: “Alternate Basemap” }
条件	true または false 条件に基づいてコンテンツを表示または非表示にします。たとえば、[レイヤー リストの表示] チェックボックスがオフの場合、レイヤー リストとすべての関連オプション (たとえば、[レイヤー リスト内のサブレイヤーを含める]) は非表示になります。 { "type":"conditional", "condition": false, "fieldName":"showtitle", "label":"Display Map Title", "items":[ { "placeHolder":"Defaults to web map title", "label":"Title:", "fieldName":"title", "type":"string", "tooltip":"Defaults to web map title" },{ "type":"paragraph", "value":"Enter a value to override the default title font size " }, { "type":"string", "label":"Title font size", "tooltip":"Specify title font size", "fieldName":"titlefontsize", "placeHolder":"20px" } ] } }

構成ファイルの例

次に、完全な構成ファイルの例を示します。

{
    "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    }
}

構成ファイル情報を読み取るようにテンプレートを設定する

テンプレートを構成可能にする場合、アプリは、Web マッピング アプリケーションのアイテム ID を appid URL パラメーターの値として受け取る必要があります。この ID は、アプリの構成プロパティを取得するための非同期リクエストを作成するために使用されます。ArcGIS API for JavaScript では、esri.request を使用して、アプリ構成の詳細を取得できます。

次の例では、esri.arcgis.utils.arcgisUrl が www.arcgis.com/sharing/content/items に解決されます。

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];
      }
    }, 
});

応答には、ユーザーが構成ウィンドウを使用してアプリに加えた変更が含まれます。変更内容を取得して、それをアプリに適用できます。テンプレートが構成されていない場合のために、アプリによって、構成オプションのデフォルト値が定義されます。

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

構成ファイル情報をアプリ テンプレートのアイテムと関連付ける

構成ファイルを作成したら、それをカスタム アプリ テンプレートに関連付けて、アプリを構成可能にできます。まだアプリを構成可能にしていない場合は、まず、テンプレートを新しいアプリ アイテムとして追加し、目的を [構成可能] に設定します。次に、アプリのアイテム ページを開き、[設定] タブをクリックし、JSON コードを構成ファイルからコピーして [構成パラメーター] ボックスに貼り付けます。

注意:

[構成パラメーター] フィールド内の JSON は有効である必要があります。JSON がエラーのない整形式であることを保証するために、JSONLint などで検証ツールを使用して JSON を実行することをお勧めします。

組織のマップ ビューアー アプリ ギャラリーやグループ アプリ ギャラリーで構成可能テンプレートを使用する場合は、そのアプリ ギャラリーに使用されるグループでアイテムを共有します。組織サイトの管理者は、テンプレートを含んでいるグループを使用できるように、マップ ビューアーを構成したり、グループを構成したりできます。