トップへ戻る

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

このトピックの内容

  1. 構成ファイルの作成
  2. 構成ファイル情報を読み取るようにテンプレートを設定する
  3. 構成ファイル情報をアプリ テンプレートのアイテムと関連付ける

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

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

構成ファイルの作成

構成ファイルは、アプリ テンプレートの構成オプションを定義する JSON ファイルです。 構成ファイルの例をご参照ください。

注意:

JSON がエラーのない整形式であることを保証するために、JSONLint などで検証ツールを使用して JSON コードを実行することをお勧めします。

この構成ファイルには、オプションを分類するセクションが 1 つ以上含まれています。

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

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

次の表にリストされているフィールド タイプを使用して、構成オプションを指定します。 構成ファイルの作成時に、構成設定の中で fieldName プロパティが一意であることを確認します。

フィールド タイプ説明

段落

構成ダイアログ ボックスに説明文を表示します。

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

出力のサンプル

description:"Bike Accidents"

Boolean

true または false の値を指定するためのチェックボックスを作成します。 指定された機能がマップに含まれているかどうかを確認するには、condition を使用します。 マップがこの条件を満たしていない場合、チェックボックスとラベルは構成パネルに表示されません。

{
       "type": "boolean",
       "fieldName": "tool_bookmarks",
       "condition": "bookmark",
       "label": "Bookmarks",
       "tooltip": ""
 }

出力のサンプル

tool_bookmarks:false

数値

数値を受け入れるフィールドを作成します。 フィールドが特定範囲の値だけを受け入れる場合は、constraints 設定を使用して、入力を特定範囲の値に制限したり、入力値の形式を設定したりできます。 

{ 
     "type": "number",
     "fieldName": "range",
     "label": "Range:",
     "tooltip": "",
     "constraints" :{min:0,max:10,places:0}
}

出力のサンプル

range:0.5

オプション

複数の選択肢を持つドロップダウン リストを作成します。

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

出力のサンプル

theme:"blue"

カラー パレット

パレットから色を選択したり、hex、rgb、または hsv 値を指定することができるカラー パレットを表示します。

{
   "type": "color", 
   "label": "Choose a selection color",
   "fieldName": "selectionColor"
  
 }

出力のサンプル

selectionColor:"#829254"

Web マップ ダイアログ

アプリ内に表示する新しいマップを参照または検索するダイアログ ボックスを表示します。必要に応じて、マップをテストするための条件を指定できます。 指定された条件が満たされない場合は、マップが必要条件を満たしていないことを確認する整合チェック メッセージが構成パネルに表示されます。 有効な条件の文字列は次のとおりです。

  • time - マップが時間対応である
  • edit - アプリに編集可能なレイヤーが 1 つ以上含まれる
  • featurelayer - マップにフィーチャ レイヤーが 1 つ以上含まれる
  • filter - マップに対話式フィルターが定義されている
  • 4x - マップにバージョン 4x の ArcGIS API for JavaScript でサポートされていないコンテンツが含まれる
{
   “type”: “webmap”,
   “conditions”: [“time”, “edit”, “featurelayer”, “filter”, “4x”]
 }

出力のサンプル

webmap:"739ef0cf75de432995c77dd44ec8f652"

グループ ダイアログ

アプリ内に表示する新しいグループを参照または検索するダイアログ ボックスを表示します。

{
   "type": "group"

 }

出力のサンプル

group:"449d00a4478d4849bbb65612355d6cd1"

複数のレイヤーとフィールドのセレクター

マップ内に、サポートされるタイプとジオメトリ タイプに一致するレイヤーとフィールドのツリー ビューが表示されます。 アプリのエンド ユーザーは、複数のレイヤーと各レイヤーで複数のフィールドを選択できます。

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

出力のサンプル

searchLayers: [{
    "id":"Whittier_Hazards_821",
    "fields":[],
    "type":"FeatureLayer"
}]

レイヤーとフィールドのセレクター

マップ内に、リストされたタイプとジオメトリでフィルターされたレイヤーのドロップダウン リストが表示されます。 ユーザーが 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"
                  ]
               }
            }

出力のサンプル

tableLayer: {
    id: "2014CyclingAccidents_All_874",
    fields: [{
        id: "urlField",
        fields: ["Casualty_Severity"]   
    }]
}

Radio

一度に 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
   }]
 }

出力のサンプル

customLayout:"fullmap"

ベースマップ

すべての名前付き Esri ベースマップのドロップダウン リストを表示します。

{
  “type”: “basemaps”,
   “fieldname” :”my_basemap”,
   “label”: “Alternate Basemap”
}

出力のサンプル

my_basemap:"satellite"

条件付き

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

検索

ロケーターを使ってフィーチャ レイヤー内のフィーチャや住所を検索するウィンドウを設定します。 フィーチャの検索を設定する場合は、ユーザーはフィーチャ レイヤーを選択してフィールドを検索することができます。

   {
“type”: “Search”,
  “fieldName”: “searchConfig”,
“label”: “Configure Search Options”
}

出力のサンプル

searchConfig: {
sources: [{
locator: {
    url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
    _url: {
        path: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
        query: null
    },
        normalization: true
    },
    url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
    name: "ArcGIS World Geocoding Service",
    enableSuggestions: true,
    singleLineFieldName: "SingleLine",
    enable: true,
    id: "dojoUnique3"
}],
activeSourceIndex: 0,
enableSearchingAll: false
}

縮尺リスト

ユーザーが選択できる事前定義された縮尺レベルの一覧が表示されます。 たとえば、国、州、郡、首都圏、市区町村、地区などです。

{
    “type”: “scaleList”,
    “fieldName”: “customUrlLayerZoomScale”,
     “label”: “Choose zoom level”
}

出力例

“customUrlLayerZoomScale”: 12000

構成ファイルの例

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

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

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

構成ファイルを作成したら、それをカスタム アプリ テンプレートに関連付けて、アプリを構成可能にできます。

  1. アプリ テンプレートをアプリ アイテムとして追加します (まだ追加していない場合)。
  2. アプリ テンプレートのアイテム ページで、[設定] タブをクリックし、[Web マッピング アプリケーション] セクションを見つけます。
  3. [目的] ドロップダウン メニューから [構成可能] を選択します。
  4. [構成パラメーター] フィールドで、構成ファイルの JSON コードを貼り付けます。
    注意:

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

  5. [保存] をクリックして、設定を保存します。

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

このトピックへのフィードバック

このトピックの内容
  1. 構成ファイルの作成
  2. 構成ファイル情報を読み取るようにテンプレートを設定する
  3. 構成ファイル情報をアプリ テンプレートのアイテムと関連付ける