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 является значением по умолчанию и представляет собой однострочное текстовое поле. Text area представляет собой более крупное текстовое поле для ввода данных. Rich text имеет редактор, с помощью которого возможно форматирование текста, например, использование жирного шрифта или курсива.

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

Число

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

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

 }

Пример файла конфигурации

Ниже представлен пример файла конфигурации и соответствующая панель настройки.

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

Связывание информации файла конфигурации с элементом для вашего пользовательского шаблона

Когда файл конфигурации будет создан, вы можете связать его со своим пользовательским шаблоном и сделать приложение настраиваемым. Прежде всего добавьте шаблон как новый элемент приложения в ваш портал, если это еще не сделано. Затем откройте страницу с информацией о приложении, щелкните кнопку Редактировать (Edit) и скопируйте и вставьте код JSON из файла конфигурации в поле Параметры конфигурации (Configuration Parameters), расположенное в нижней части страницы с информацией об элементе.

Страница с информацией об элементе с полем Параметры конфигурации
Сделайте свой шаблон настраиваемым, добавив информацию файла конфигурации в поле Параметры конфигурации (Configuration Parameters) информации об элементе шаблона.

Теперь раздел параметров конфигурации доступен в режиме Редактирования (Edit) элемента веб-приложения.

Примечание:

Для поля Параметры конфигурации (Configuration Parameters) требуется допустимый JSON. Рекомендуется запускать JSON через валидатор, например через JSONLint, чтобы убедиться в том, что ваш JSON правильно оформлен и не содержит ошибок.

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