Skip To Content

Adicionar parâmetros configuráveis para modelos

Após você ter criado um modelo de aplicativo da web, você tem a opção de torná-lo configurável. 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 de configuração para definir as propriedades de configuração que deseja.
  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.

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. Veja um exemplo completo de um arquivo de configuração.

Anotação:

É uma boa prática executar o código JSON por um validador como JSONLint para garantir que você tenha um JSON bem formado, livre de erros.

O arquivo de configuração contém uma ou mais seções que categorizam as opções.

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. Ao criar o arquivo de configuração, assegure que a propriedade fieldName seja única dentro do parâmetro de configuração.

Tipo de campoDescriçã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."
}

String

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

Saída de amostra

description:"Bike Accidents"

Booleano

Cria uma caixa de seleção para especificar os valores true ou false. Utilize condition para verificar se o mapa contém a funcionalidade especificada. Se o mapa não atender a condição, a caixa de seleção e rótulo não serão exibidos no painel de configuração.

{
       "type": "boolean",       "fieldName": "tool_bookmarks",       "condition": "bookmark",       "label": "Bookmarks",       "tooltip": ""
 }

Saída de amostra

tool_bookmarks:false

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

Saída de amostra

range:0.5

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

Saída de amostra

theme:"blue"

Seletor de Cores

Exibe um seletor de cores para escolher uma cor de uma paleta ou para especificar os valores de hex, rgb ou hsv.

{
   "type": "color",    "label": "Choose a selection color",
   "fieldName": "selectionColor"
  
 }

Saída de amostra

selectionColor:"#829254"

Diálogo Mapa da Web

Exibe uma caixa de diálogo para procurar ou pesquisar um novo mapa para exibir em um aplicativo. Opcionalmente especifique uma condição para testar o mapa. Se a condição especificada não for atendida, uma mensagem de validação aparecerá no painel de configuração confirmando que o mapa não atende aos requisitos. As strings de condições válidas são:

  • time—O mapa está habilitado ao tempo
  • edit—O aplicativo tem pelo menos uma camada editável
  • featurelayer—O mapa tem pelo menos uma camada de feição
  • filter—O mapa tem um filtro interativo definido
  • 4x—O mapa tem conteúdo que não é ainda suportado na versão 4x do ArcGIS API for JavaScript
{
   “type”: “webmap”,   “conditions”: [“time”, “edit”, “featurelayer”, “filter”, “4x”]
 }

Saída de amostra

webmap:"739ef0cf75de432995c77dd44ec8f652"

Diálogo Grupo

Exibe uma caixa de diálogo para procurar ou pesquisar um novo grupo para exibir em um aplicativo.

{
   "type": "group"
 }

Saída de amostra

group:"449d00a4478d4849bbb65612355d6cd1"

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

Saída de amostra

searchLayers: [{
    "id":"Whittier_Hazards_821",    "fields":[],    "type":"FeatureLayer"
}]

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

Saída de amostra

tableLayer: {
    id: "2014CyclingAccidents_All_874",    fields: [{
        id: "urlField",        fields: ["Casualty_Severity"]       }]
}

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

Saída de amostra

customLayout:"fullmap"

Mapas Base

Exibe uma lista suspensa de todos os mapas base nomeados da Esri.

{
  “type”: “basemaps”,   “fieldname” :”my_basemap”,   “label”: “Alternate Basemap”
}

Saída de amostra

my_basemap:"satellite"

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 desmarcada, a lista de camada e todas as opções relacionadas (por exemplo Incluir subcamadas na lista de camada) estarão ocultas.

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

Pesquisar

Configure um painel de pesquisa para localizar feições dentro de um campo de uma camada de feição ou endereços utilizando um localizador. Se você configurar uma pesquisa de feição, os usuários podem escolher a camada de feição e campos de pesquisa.

   {
“type”: “Search”,  “fieldName”: “searchConfig”, “label”: “Configure Search Options”
}

Saída de amostra

searchConfig: {
sources: [{
locator: {
    url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",    _url: {
        path: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",        query: null    },        normalization: true    },    url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",    name: "ArcGIS World Geocoding Service",    enableSuggestions: true,    singleLineFieldName: "SingleLine",    enable: true,    id: "dojoUnique3"
}], activeSourceIndex: 0, enableSearchingAll: false
}

ScaleList

Exibe uma lista de níveis de escala pré-definidos que uma usuário pode escolher. Por exemplo, Países, Estados, Estado, Municípios, Metro, Cidade, Vizinhança.

{
    “type”: “scaleList”,    “fieldName”: “customUrlLayerZoomScale”,     “label”: “Choose zoom level”
}

Resultado

“customUrlLayerZoomScale”: 12000

Exemplo de arquivo de configuração

O seguinte é 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

Para tornar o modelo 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 ter criado seu arquivo de configuração, você está pronto para associá-lo ao modelo de aplicativo personalizado e tornar o aplicativo configurável.

  1. Se você ainda não tiver criado, adicione o modelo como um novo item do aplicativo.
  2. Na página de item do modelo de aplicativo, clique na guia Configurações e localize a seção Aplicativo de Mapeamento na Web .
  3. No menu suspenso Propósito, selecione Configurável.
  4. No campo Parâmetros de Configuração , cole o código JSON de seu arquivo 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.

  5. Clique em Salvar para salvar suas configurações.

Se você desejar utilizar um modelo configurável na galeria de aplicativo do Map Viewer 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 de sua organização pode configurar o mapa ou configurar grupos para utilizar o grupo que inclui seu modelo.