Skip To Content

向模板中添加可配置参数

可配置 Web 应用程序允许用户自定义应用程序的外观和行为。可通过以下四个步骤将应用程序模板设置为可配置:

  1. 如果您尚未进行此操作,请创建 Web 应用程序模板
  2. 创建配置文件。
  3. 设置模板以读取配置属性并将属性应用于应用程序。
  4. 将配置文件与应用程序模板项目相关联。

要开始此过程,请参阅以下部分。

创建配置文件

配置文件是 JSON 文件,用于定义应用程序模板的配置选项。此文件包含一个或多个对选项进行分类的部分。

在配置设置中,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 属性,该属性用于指定在屏幕上显示的文本框类型。值为 textboxtextarearichtexttextbox 选项为默认值,其形式为单行文本框。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"
   }]
 }

颜色选取器

显示颜色选取器,通过该颜色选取器用户可以从调色板中选择颜色或指定十六进制、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"
                  ]
               }
            }

图层和字段选择器

在地图中显示按所列出类型和几何过滤的图层下拉列表。 还可指定一个或多个字段选择器,以允许用户选择图层和字段。

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

单选按钮

创建一次只能选择一个选项的单选按钮。所选选项将设置为 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”
}

条件分析

基于真或假条件显示或隐藏内容。例如,如果取消选中显示图层列表复选框,则图层列表和所有相关选项(例如在图层列表中包括子图层)均会隐藏。

{
               "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。最好通过验证器(例如 JSONLint)运行 JSON,从而确保 JSON 格式正确并且不含错误。

如果要使用组织的地图查看器应用程序库或群组应用程序库中的可配置模板,则需要将项目共享到用于该应用程序库的群组。然后您组织的管理员可以通过配置地图查看器配置群组来使用包括模板的群组。