Skip To Content

Criar modelos de aplicativo configuráveis

Se você tiver privilégios para criar conteúdo, poderá criar um modelo de aplicativo personalizado. Após o modelo de aplicativo personalizado ser criado e configurado, torne seu aplicativo pesquisável no ArcGIS adicionando o modelo no seu portal. Você poderá, em seguida, tornar o aplicativo configurável para permitir a personalização de sua aparência e comportamento. Se a sua organização planeja apresentar seu modelo em uma de suas galerias, você poderá compartilhar o modelo com um grupo do modelo de aplicativo.

Criar e configurar um modelo de aplicativo da web

Para criar um modelo de aplicativo da web personalizado, você pode atualizar um aplicativo da web existente para trabalhar com conteúdo do seu portal ou construir um novo aplicativo da web usando uma das ArcGIS Web APIs.

Independente de como você cria o aplicativo, você trabalhará com parâmetros da URL e mapas. Você pode trabalhar com grupos se estiver criando um modelo de aplicativo baseado em grupo e pode considerar requisitos adicionais para trabalhar com mapas base do Bing Maps, acessar mapas não públicos e trabalhar com recursos que exigem um proxy ou Cross-Origin Resource Sharing (CORS).

O portal ArcGIS Enterprise inclui ArcGIS Maps SDK for JavaScript. Não há necessidade de hospedar seu próprio API e apontar o portal na versão local para os modelos de aplicativo recentemente criados; os modelos de aplicativo da web referenciam automaticamente o API instalado. A API instalado localmente está normalmente disponível em https://webadaptorhost.domain.com/webadaptorname/jsapi/jsapi.

Aviso:

Não altere os arquivos do modelo de aplicativo da web fornecidos com ArcGIS Enterprise, pois estes arquivos são gerenciados pelo ArcGIS Enterprise, e quaisquer alterações poderão ser subsequentemente substituídas pelo ArcGIS Enterprise. Se você desejar personalizar os modelos, faça o seguinte:

  1. Crie uma cópia do arquivo de modelo existente que você deseja personalizar.
  2. Substitua a cópia em um local diferente no disco.
  3. Personalize a cópia do modelo.
  4. Adicione no seu portal como um novo modelo.

Mapas da web

Anotação:

Esta funcionalidade é suportada apenas no Map Viewer Classic.

Os modelos de aplicativo são projetados para funcionar com o mapa atualmente exibido no Map Viewer Classic. Os modelos normalmente ajudam a criar um mapa baseado no mapa da web especificado no parâmetro da URL do mapa da web. Cada API da web tem um método de ajuda que cria um mapa utilizando informações do ID de mapa da web.

Por exemplo, você pode utilizar o método esri.arcgis.utils.createMap do ArcGIS Maps SDK for JavaScript para criar um mapa baseado no ID de entrada. Você também pode incluir uma função de retorno que executa quando o pedido síncrono para esri.arcgis.utils.createMap é finalizado.

esri.arcgis.utils.createMap(webmap,"map",{
   mapOptions:{
     slider:false
   },
   bingMapsKey:bingMapsKey
}).then(function(response){
    map = response.map;
});
Anotação:

Se alguns dos mapas da web incluir mapas base do Bing Maps, você precisará especificar a chave do Bing Maps ao utilizar o método createMap. Há várias outras opções de mapa que você pode especificar, como por exemplo, exibir o controle deslizante, navegação, atribuição, e mais.

Uma função callback fornece acesso a um objeto de resposta que fornece acesso ao objeto de mapa, camadas e muito mais.

Grupo

Os modelos de grupo exibem o conteúdo do grupo especificado como um aplicativo.

O ArcGIS REST API fornece acesso ao conteúdo do seu portal. Você pode utilizá-lo para recuperar o conteúdo do grupo baseado no ID do grupo de entrada.

Neste exemplo, você executará uma consulta para localizar um grupo com o ID de entrada.

var portal = new esri.arcgis.Portal('https://webadaptorhost.domain.com/webadaptorname/');
dojo.connect(portal, 'onLoad',function(){
    portal.queryGroup(groupid).then(function(response){
        var group = response.results[0];
     });
});

Após localizar o grupo, você pode consultá-lo para recuperar os itens a partir deste grupo.

Neste exemplo, você consulta o grupo para localizar cinco itens do tipo Web Map ou Web Mapping Application.

var queryParams = {
    q: 'type:"Web Map" -type:"Web Mapping Application"',
    num: 5
 };
group.queryItems(queryParams).then(function(response){
    var groupItems = response.results;
});

Considerações adicionais

Os aplicativos da web são normalmente projetados para funcionar com vários tipos de conteúdo, então talvez seja necessário instalar o modelo para manipular os mapas com mapas base do Bing Maps, conteúdo não-público, e assim por diante. As considerações específicas estão listadas abaixo.

Chave do Bing Maps

Se algum dos mapas que você deseja exibir utilizar um mapa base do Bing Maps, você precisará incluir a chave do Bing Maps no aplicativo. A chave do Bing Maps é fornecida como um parâmetro para o método createMap .

Suporte de Proxy e CORS

Se seu aplicativo for fazer pedidos de domínio transversal, você precisará ativar CORS ou adicionar um proxy ao seu aplicativo.

Adicionar seu modelo ao portal

Após criar um modelo de aplicativo da web, torne o aplicativo pesquisável no ArcGIS adicionando o modelo ao seu portal.

Adicionar o modelo como um item de aplicativo

Adicione o modelo ao seu portal como um item de aplicativo da web e especifique a URL para o aplicativo. Para Propósito, escolha Configurável. Para API, escolha JavaScript.

Após adicionar o modelo, o item do modelo aparece em seu conteúdo e você poderá editar seus detalhes. Não deixe de incluir um título descritivo e resumo porque estas informações são exibidas quando os usuários visualizam este item na galeria de aplicativo configurável.

Registrar o modelo de aplicativo

Após adicionar o modelo de aplicativo como um item, você deverá registrar o aplicativo.Você pode registrar os aplicativos baseados em OAuth 2.0 que você desenvolver. Registrar seu aplicativo com o portal fornece a você um ID do Aplicativo. O ID do aplicativo é a fundação para distribuir aplicativos e obter relatórios de uso.

Quando você registrar seu modelo de aplicativo da web, defina o tipo para Navegador com Redirecionar URI apontando para a URL do aplicativo modelo.

Trabalhe com o Gerenciador de Identidade de forma que ele reconheça o ID do aplicativo registrado. Para mais informações, consulte as amostras Fundamentos do OAuth e Pop-up do OAuth incluído com ArcGIS Maps SDK for JavaScript.

Tornar seu aplicativo configurável

Para permitir a personalização da aparência e do comportamento de seu aplicativo da web, você pode torná-lo configurável. Por exemplo, você pode permitir que os usuários alterem as cores do aplicativo ou personalize outras configurações do aplicativo.

Tornar seu aplicativo configurável envolve criar um arquivo de configuração e associar as informações do arquivo de configuração com o item de modelo do aplicativo que seu criou.

Criar um arquivo configurável

O arquivo de configuração do aplicativo é 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.

Faça o seguinte para criar um arquivo de configuração:

  1. Crie uma ou mais seções especificando uma categoria e configure de campos de cada seção.
    {
        "configurationSettings": [
            {
                "category": "",
                "fields": []
            }
        ]
    }
  2. 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."
    }

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

    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

    Data e Hora

    Cria um seletor de datas com uma opção de datas.

    {
         "type":"date",
         "fieldName" : "startDate",
         "label" : "Start Date"
    }

    Cria um seletor de hora com uma opção de horas.

    {
         "type": "time",
         "fieldName": "startTime",
         "label": "Start Time"
    }

    Saída de amostra (no formato ISO-8601) para data e hora

    Start Date and Time: 1970-01-01T21:30:00.000Z

    Opções

    Cria uma lista suspensa com uma série de opções.

    {
       "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 Maps SDK for JavaScript
    {
       “type”: “webmap”,
       “conditions”: [“time”, “edit”, “featurelayer”, “filter”, “4x”]
     }

    Saída de amostra

    webmap:"739ef0cf75de432995c77dd44ec8f652"

    Diálogo Cena da Web

    Exibe uma caixa de diálogo para procurar ou pesquisar uma nova cena da web para exibir no aplicativo.

    {
       "type": "webscene"
     }

    Saída de amostra

    webscene:"ab41c86a588748128e6f5d80990a2395"

    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.

    Anotação:

    Se editOnly estiver configurado para true, a lista de campos incluirá somente campos editáveis.

     {  
                   "label":"Select search layers and fields",
                   "fieldName":"searchLayers",
                   "type":"multilayerandfieldselector",
                   "editOnly":true,  
                   "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"
    }]

    Seletor de Campo e Camada

    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.

    Anotação:

    Se editOnly estiver configurado para true, a lista de campos incluirá somente campos editáveis.

      {  
                   "type":"layerAndFieldSelector",
                   "fieldName":"tableLayer",
                   "label":"Layer to display in table",
                   "tooltip":"Layer to display in table",
                   "fields":[  
                      {  
                         "multipleSelection":true,
                         "editOnly":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 camadas estiver desmarcada, a lista de camadas 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”
    }

    Saída de amostra

    “customUrlLayerZoomScale”: 12000

    ExtentMap

    Cria um seletor com opções de centralizar mapa e nível de zoom.

    {
       "type":"extentMap",
       "label": "Select center and zoom",
       "fieldName": "mapExtent"
    }

    Saída de amostra

    mapExtent: {
      level: 2,
      coords: {
         latitude: 51.304,
         longitude: -98.7231
         }
    }

Associe as informações de configuração com o item do modelo

Após criar o arquivo de configuração, você deverá associar as informações de configuração de JSON com o modelo de aplicativo para torná-lo configurável.

  1. Na página de item do modelo de aplicativo, clique na guia Configurações e clique no link Aplicativo de Mapeamento da Web na parte superior.
  2. Na caixa Parâmetros de Configuração , cole o código JSON de seu arquivo de configuração.
    Anotação:

    A caixa 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.

  3. Salve suas configurações.

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

Apresente seu modelo na galeria da sua organização

Se você desejar utilizar seu modelo em sua galeria de aplicativo ou galeria de aplicativo de grupo do Configurable Apps da sua organização, compartilhe o item com todos e com o grupo utilizado para esta galeria. Então o administrador de sua organização pode configurar o mapa ou configurar grupos para utilizar o grupo que inclui seu modelo.