Skip To Content

Добавление настраиваемых параметров в шаблоны

Настраиваемые веб-приложения дают пользователям возможность настраивать внешний вид и поведение приложения. Чтобы сделать шаблон приложения настраиваемым, необходимо выполнить процесс из четырех шагов:

  1. Создайте шаблон веб-приложения, если вы этого еще не сделали.
  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, которое определяет тип текстового поля, отображаемого на экране. Значениями являются textbox, textarea и richtext. Опция textbox используется по умолчанию и представляет собой однострочное текстовое поле. Опция 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"
  
 }

Диалог Веб-карта

Отображает диалоговое окно выбора или поиска новой карты для приложения.

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

Условия

Отображает или скрывает ресурсы в зависимости от условия 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    }
}

Настройка шаблона для считывания информации файла конфигурации

Если шаблон будет настраиваемым, приложение должно принять идентификатор элемента для картографического веб-приложения в качестве значения параметра appid URL. Этот идентификатор используется при асинхронном запросе для получения свойств конфигурации для приложения. В 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 правильно оформлен и не содержит ошибок.

Если вы хотите использовать настраиваемый шаблон в галерее приложений вьюера карт вашей организации или в галерее приложений группы, сделайте его доступным для группы, которая использует эту галерею приложений. Тогда администратор вашей организации сможет настроить вьюер карт или настроить группы, чтобы использовать группу, содержащую ваш шаблон.