Criar modelos de aplicativo configuráveis—Portal for ArcGIS

Se você tiver privilégios para criar conteúdo, você pode criar seu próprio modelo de aplicativo personalizado. Após o modelo de aplicativo personalizado ser criado e configurado, torne seu aplicativo pesquisável no ArcGIS adicionando seu modelo ao portal. Você então tem a opção de tornar o aplicativo configurável para permitir que os usuários personalizem a aparência e comportamento. Se sua organização planeja apresentar seu modelo em uma de suas galerias, você pode compartilhar seu modelo com um grupo de modelo de aplicativo.

Crie e configure um modelo de aplicativo da web

Para criar seu próprio modelo de aplicativo da web personalizado, você pode baixar e modificar um dos modelos existentes de aplicativo configurável, atualizar um aplicativo da web existente para funcionar com conteúdo do seu portal ou construir um novo aplicativo da web utilizando um dos ArcGIS Web APIs.

Independente de como você cria seu aplicativo, você trabalhará com Parâmetros de 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 ArcGIS Enterprise portal inclui ArcGIS API 3.15 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. O 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 que são fornecidos com o ArcGIS Enterprise, pois estes arquivos são gerenciados pelo portal, e quaisquer alterações poderão ser subsequentemente substituídas pelo portal. Se você desejar personalizar os modelos, faça o seguinte:

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

Mapas da web

Os modelos de aplicativo são projetados para funcionar com o mapa atualmente exibido no Map Viewer. 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ê poderá utilizar o método do ArcGIS API for JavaScript esri.arcgis.utils.createMap 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.

A função callback fornece acesso a um objeto de resposta que fornece acesso ao objeto de mapa, camadas, e 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 você ter criado seu modelo de aplicativo da web, torne seu aplicativo pesquisável no ArcGIS adicionando seu modelo ao portal.

Adicionar o modelo como um item de aplicativo

Adicione seu 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 você ter adicionado seu modelo, o item de modelo aparece em seu conteúdo e você pode 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. Opcionalmente, você pode criar um arquivo ZIP que contém os arquivos do aplicativo e anexá-lo ao item para fornecer o recurso de download.

Registrar o modelo de aplicativo

Após adicionar seu modelo de aplicativo como um item, você deve registrar o aplicativo. Você pode registrar os aplicativos baseados em OAuth 2.0 que você desenvolve. 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 OAuth Basic e OAuth Popup incluídas com ArcGIS API for JavaScript.

Tornar seu aplicativo configurável

Para permitir aos usuários personalizar a aparência e comportamento de seu aplicativo da web personalizado, 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:

Crie uma ou mais seções especificando uma categoria e configure de campos de cada seção.

{
    "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 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." }`
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`
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 API 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 verdadeiro, 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 verdadeiro, 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 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” }` 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 você ter criado o arquivo de configuração, você deve associar as informações de configuração de JSON com seu modelo de aplicativo para torná-lo configurável.

A partir da página do item do seu modelo de aplicativo, clique na guia Configurações e clique no link Aplicativo de Mapeamento na Web na parte superior.
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.
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 Map Viewer 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.

Comentário neste tópico?

Crie e configure um modelo de aplicativo da web

Aviso:

Mapas da web

Anotação:

Grupo

Considerações adicionais

Chave do Bing Maps

Suporte de Proxy e CORS

Adicionar seu modelo ao portal

Adicionar o modelo como um item de aplicativo

Registrar o modelo de aplicativo

Tornar seu aplicativo configurável

Criar um arquivo configurável

Anotação:

Anotação:

Anotação:

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

Anotação:

Exemplo de arquivo de configuração

Apresente seu modelo na galeria da sua organização

Neste tópico