Adicionar parâmetros configuráveis para modelos

Os aplicativos da web configuráveis permitem aos usuários personalizar a aparência e comportamento de um aplicativo. A criação de um modelo de aplicativo configurável é um processo de quatro etapas:

1. Se você ainda não fez isto, crie um modelo de aplicativo da web.
2. Crie um arquivo configurável.
3. Configure o modelo para ler as propriedades de configuração e aplicá-las no aplicativo.
4. Associe o arquivo de configuração com o item para seu modelo de aplicativo.

Para iniciar, consulte as seções abaixo.

Criar um arquivo configurável

O arquivo de configuração é um arquivo JSON que define as opções de configuração do modelo de aplicativo. Este arquivo contém uma ou mais seções que categorizam as opções.

A propriedade fieldName deve ser única dentro dos parâmetros de configuração.

Crie cada seção especificando uma categoria e conjunto de campos.

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

Especifique as opções de configuração utilizando os tipos de campo listados na tabela abaixo.

Tipo de campo	Descrição
Parágrafo	Exibe um texto explicativo na caixa de diálogo da configuração. { "type": "paragraph", "value": "* These menu items will appear in the application when the web map has layers that require them." }
Texto	Aceita a entrada de texto. Inclui a propriedade stringFieldOption que especifica o tipo da caixa de texto exibida na tela. Os valores são textbox, textarea e richtext. A opção textbox é o padrão e é uma caixa de texto de única linha. A opção textarea exibe uma caixa de texto maior para inserir os dados. A opção richtext exibe um editor de texto eficiente que permite aos usuários aplicar algumas formatações, como configurar a fonte para texto em negrito ou itálico. { "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" }
Booleano	Cria uma caixa de seleção para especificar os valores true ou false. { "type": "boolean", "fieldName": "displaytitle", "label": "Show Title", "tooltip": "" }
Número	Cria um campo que aceita valores numéricos. Se o campo tiver que aceitar somente um intervalo de valores específico, você poderá utilizar a configuração constraints para restringir a entrada para um intervalo de valores em particular ou formatar os valores de entrada. { "type": "number", "fieldName": "range", "label": "Range:", "tooltip": "", "constraints" :{min:0,max:10,places:0} }
Opções	Cria uma lista suspensa com uma série de opções de escolha. { "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" }] }
Seletor de Cores	Exibe um seletor de cores que permite aos usuários escolher uma cor na palheta ou especificar valores de hex, rgb ou hsv. { "type": "color", "label": "Choose a selection color", "fieldName": "selectionColor" }
Diálogo Mapa da Web	Exibe um diálogo para procurar ou pesquisar um novo mapa para exibir em um aplicativo. { "type": "webmap" }
Diálogo Grupo	Exibe um diálogo para procurar ou pesquisar um novo grupo para exibir em um aplicativo. { "type": "group" }
Múltiplas Camadas e Seletor de Campo	Apresenta uma visão de árvore das camadas e campos no mapa que corresponde aos tipos de geometria e tipos suportados. Permite aos usuários finais do aplicativo selecionarem múltiplas camadas e múltiplos campos para cada camada. { "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" ] } }
Camada e Seletor de Campo	Exibe uma lista suspensa de camadas no mapa filtradas pelos tipos e geometrias listadas. Opcionalmente especifique um ou mais seletores de campo para permitir aos usuários selecionar uma camada e campos. { "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" ] } }
Rádio	Cria uma botão de opção onde somente uma opção pode ser selecionada de cada vez. A opção selecionada será configurada para verdadeira. { "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 }] }
Mapas Base	Exibe uma lista suspensa de todos os mapas base nomeados da Esri. { “type”: “basemaps”, “fieldname” :”my_basemap”, “label”: “Alternate Basemap” }
Condicional	Exibe ou oculta conteúdo com base em uma condição verdadeira ou falsa. Por exemplo, se uma caixa de seleção Exibir lista de camada estiver selecionada, a lista de camadas e todas as opções relacionadas (por exemplo Incluir subcamadas na lista de camadas) serão ocultadas. { "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" } ] } }

Exemplo de arquivo de configuração

Abaixo está um exemplo de um arquivo de configuração completo.

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

Configurar o modelo para ler as informações do arquivo de configuração

Se o modelo for configurável, o aplicativo precisará aceitar o ID do item para um Aplicativo de Mapeamento da Web como o valor do parâmetro da URL appid. Este ID é utilizado para criar uma solicitação assíncrona para recuperar as propriedades de configuração do aplicativo. No ArcGIS API for JavaScript, você pode utilizar esri.request para recuperar os detalhes de configuração do aplicativo.

Neste exemplo, esri.arcgis.utils.arcgisUrl soluciona 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];
      }
    }, 
});

A resposta incluirá as alterações feitas no aplicativo pelo usuário utilizando o painel de configuração. Você pode então recuperar as alterações e aplicá-las no aplicativo. O aplicativo deve definir os valores padrões das opções de configuração para lidar com as situações onde o modelo não estiver configurado.

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

Associe as informações do arquivo de configuração com o item para seu modelo de aplicativo

Após criar seu arquivo de configuração, você está pronto para associá-lo ao modelo de aplicativo personalizado e tornar o aplicativo configurável. Primeiro, se você ainda não fez isto, adicione o modelo como um novo item do aplicativo e configure a finalidade para Configuráveis. Então abra a página de item do seu aplicativo, clique na guia Configurações, copie o código JSON do seu arquivo de configuração, e cole na caixa Parâmetros de Configuração.

Anotação:

O campo Parâmetros de Configuração exige um JSON válido. É uma boa prática executar o JSON por um validador como JSONLint para garantir que você tenha um JSON bem formado, livre de erros.

Se você desejar utilizar um modelo configurável na galeria de aplicativo do visualizador de mapa ou galeria de aplicativo do grupo da sua organização, compartilhe o item no grupo sendo utilizado para esta galeria de aplicativo. Então o administrador da sua organização pode configurar o visualizador de mapa ou configurar grupos para utilizar o grupo que inclui seu modelo.