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

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

  1. Web アプリケーション テンプレートを作成していない場合は、新規に作成します。詳細な手順については、「Web アプリケーション テンプレートの作成」をご参照ください。
  2. 構成ファイルを作成します。
  3. 構成プロパティを読み取り、アプリケーションに適用するようにテンプレートを設定します。
  4. 構成ファイルをカスタム テンプレートのアイテムと関連付けます。

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

構成ファイルの作成

構成ファイルは、テンプレートの入力ダイアログを定義する JSON ファイルです。このファイルには、カスタマイズ オプションを分類するセクションが 1 つ以上含まれています。

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

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

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

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

Field type

説明

Paragraph

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

{
       "type": "paragraph",
       "value": "* These menu items will appear in the application when the web map has layers that require them."
}

String

テキストの入力を受け入れます。画面上に表示されるテキスト ボックスのタイプを指定する 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"
}

Boolean

true または false の値を指定するためのチェックボックスを作成します。

{
       "type": "boolean",
       "fieldName": "displaytitle",
       "label": "Show Title",
       "tooltip": ""
 }

Number

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

Dojo NumberTextBox を使用した制約の作成の詳細

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

Options

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

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

構成ファイルの例

構成ファイルとその構成パネルの例を以下に示します。

{
    "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":"http://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer/2",
        "theme": "green",
        "orgname": "Water Points",
        "bufferdistance": 3
       }
 }

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

構成ファイルを作成したら、それをカスタム テンプレートに関連付けて、アプリケーションを構成可能にできます。まず、テンプレートを新しい Web マッピング アプリケーション アイテムとして追加していない場合は、ポータルに追加します。アプリケーションの追加の詳細については、「アプリケーションの追加」をご参照ください。次に、Web アプリケーションのアイテム詳細ページを開き、[編集] ボタンをクリックして、JSON コードを構成ファイルからコピーして、アイテム詳細ページの下部にある [構成パラメータ] ボックスに貼り付けます。

アイテム詳細ページと [構成パラメータ] フィールド
構成ファイル情報をテンプレートのアイテム詳細の [構成パラメータ] フィールドに追加して、テンプレートを構成可能にします。

これで、Web アプリケーション アイテムの [編集] モード内で、構成パラメータ セクションが使用できるようになります。

注意注意:

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

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

Copyright © 1995-2014 Esri. All rights reserved.
5/20/2014