Se si dispone dei privilegi per creare contenuti, è possibile creare un modello di app personalizzato ospitato sul server web. Una volta creato e configurato il modello di app personalizzato, rendi rilevabile l'app in ArcGIS aggiungendo il modello a ArcGIS Online. A questo punto, è possibile rendere l'app configurabile per consentirne la personalizzazione dell'aspetto e del funzionamento. Se l'organizzazione prevede di utilizzare il modello in una delle gallerie, è possibile condividere il modello con un gruppo di modelli app.
Creare e configurare un modello di app Web
Per creare un modello di applicazione Web personalizzato, è possibile scaricare e modificare uno dei modelli di ArcGIS Configurable Apps esistenti, aggiornare un'applicazione Web esistente affinché utilizzi i contenuti di ArcGIS Online o creare una nuova applicazione Web utilizzando il codice in un'applicazione di base scaricabile da GitHub.
Nota:
ArcGIS Configurable Apps sarà dichiarato obsoleto nel 2025. Per ulteriori informazioni sull'obsolescenza di ArcGIS Configurable Apps e sulla modalità di migrazione delle app configurabili a ArcGIS Instant Apps, vedere l'articolo del blog ArcGIS ArcGIS Configurable Apps Roadmap for Retirement.
A prescindere dalla modalità di creazione dell'app, verranno utilizzati parametri URL e mappe. Se si crea un modello di app basato su gruppi, è possibile utilizzare i gruppi e prendere in considerazione ulteriori requisiti per l'utilizzo delle mappe di base di Bing Maps, l'accesso a mappe non pubbliche e l'utilizzo di risorse che richiedono un proxy o la specifica Cross-Origin Resource Sharing (CORS).
Dopo la creazione di un modello di app, è possibile ospitarlo sul server web.
Parametri URL
Quando si utilizza un modello, è necessario specificare il gruppo o la mappa da visualizzare includendo nel modello l'ID webmap o group come parametro dell'URL. Per specificare gli ID delle mappe Web, si utilizza il parametro webmap, mentre per il contenuto del gruppo si utilizza il parametro group. Affinché il modello personalizzato funzioni con il gruppo o la mappa corrente, è necessario includere nell'app il codice per estrarre l'ID del gruppo o della mappa Web corrente dall'URL.
Ad esempio, è possibile visualizzare la mappa della mappa di base dell'Europa nel modello Viewer di base.
A tale scopo, iniziare con l'URL del viewer di base:
https://www.arcgis.com/apps/View/index.htmlCopiare la parte webmap= dell'URL della mappa di base dell'Europa:
https://www.arcgis.com/home/webmap/viewer.html?webmap=5421a40574914458892efe74f0149025E aggiungerla alla fine dell'URL del viewer di base:
https://www.arcgis.com/apps/View/index.html?webmap=5421a40574914458892efe74f0149025ArcGIS API for JavaScript include un metodo helper esri.urlToObject che semplifica questo processo. Questo metodo converte i parametri dell'URL in un oggetto.
var webmap;
var urlObject = esri.urlToObject(document.location.href);Una volta ottenuti i parametri dell'URL come un oggetto, è possibile accedere ai diversi input. Ad esempio, è possibile assegnare il valore del parametro dell'URL della mappa Web in una variabile denominata webmap_id.
var webmap_id = urlObject.query.webmap;Nota:
Se l'app è configurabile, è necessario anche gestire un parametro dell'URL denominato appid, che definisce le impostazioni di configurazione.
Mappe Web
Nota:
Questa funzionalità è supportata solo in Map Viewer classico.
I modelli di app sono progettati per funzionare con la mappa attualmente visualizzata in Map Viewer classico. Con i modelli viene in genere creata una mappa basata sulla mappa Web specificata nel parametro dell'URL della mappa Web. Ciascuna API Web include un metodo helper che consente di creare una mappa utilizzando le informazioni dell'ID della mappa Web. Per ulteriori informazioni sull'uso di API per utilizzare le mappe Web, consultare ArcGIS API for JavaScript.
Ad esempio, è possibile utilizzare il metodo ArcGIS API for JavaScript esri.arcgis.utils.createMap per creare una mappa basata sull'ID di input. È anche possibile includere una funzione di callback che viene eseguita al completamento della richiesta sincrona a esri.arcgis.utils.createMap.esri.arcgis.utils.createMap(webmap,"map",{
mapOptions:{
slider:false
},
bingMapsKey:bingMapsKey
}).then(function(response){
map = response.map;
});
Nota:
Se una delle mappe Web include una mappa di base di Bing Maps, è necessario specificare una chiave Bing Maps quando si utilizza il metodo createMap. Sono disponibili diverse altre opzioni della mappa che è possibile specificare, ad esempio per visualizzare il cursore, la navigazione, l'attribuzione e altro ancora.
La funzione callback fornisce l'accesso a un oggetto risposta che a sua volta consente di accedere all'oggetto mappa, ai layer e a molto altro ancora. Per ulteriori informazioni sulla classe Map, vedere ArcGIS API for JavaScript.
Gruppo
I modelli di gruppo consentono di visualizzare il contenuto del gruppo specificato in un’app.
ArcGIS REST API consente di accedere al contenuto da ArcGIS Online. Utilizzarla per recuperare i contenuti del gruppo sulla base dell'ID gruppo di input. Per ulteriori informazioni sull'utilizzo di ArcGIS REST API, consultare Panoramica su ArcGIS REST API.
In questo esempio viene eseguita un'interrogazione per trovare un gruppo con l'ID di input.
var portal = new esri.arcgis.Portal('https://www.arcgis.com');
dojo.connect(portal, 'onLoad',function(){
portal.queryGroup(groupid).then(function(response){
var group = response.results[0];
});
});Dopo aver trovato il gruppo, è possibile eseguire un'interrogazione per recuperare gli elementi dal gruppo. In questo esempio si interroga il gruppo per individuare cinque elementi di tipo Web Map o 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;
});
Considerazioni aggiuntive
Le app Web sono in genere progettate per l'uso con tipi diversi di contenuto, pertanto potrebbe essere necessario impostare il modello in modo che gestisca mappe con mappe di base di Bing Maps, contenuto non pubblico e così via. Vedere le considerazioni specifiche riportate di seguito.
Chiave Bing Maps
Se una delle mappe da visualizzare utilizza una mappa di base di Bing Maps, è necessario specificare una chiave di Bing Maps nell'app. La chiave di Bing Maps viene specificata come parametro del metodo createMap.
Supporto per proxy e CORS
Poiché l'app effettuerà richieste interdominio per ArcGIS Online, è necessario abilitare CORS o aggiungere un proxy all'app.
Aggiungere il modello ad ArcGIS Online
Una volta creato un modello di app web e ospitato sul server web, rendi rilevabile l'app in ArcGIS aggiungendo il modello a ArcGIS Online.
Aggiungere il modello come elemento dell’app
Aggiungi il modello a ArcGIS Online come elemento app web e specifica l'URL dell'app. Per Scopo, scegliere Configurabile. Per API, scegliere JavaScript.
Una volta aggiunto il modello, l'elemento modello appare nei contenuti ed è possibile modificarne i dettagli. Assicurarsi di includere un titolo descrittivo e un riepilogo poiché le informazioni vengono visualizzate quando gli utenti visualizzano questo elemento nella galleria di app configurabili. Facoltativamente, è possibile creare un file .zip che contiene i file dell'app e collegarlo all'elemento per offrire la funzionalità di download.
Registrare il modello dell'app
Dopo l'aggiunta del modello di app come elemento, è necessario registrare l'app. La registrazione dell'app fornisce all'utente un ID app univoco. Utilizzare l'ID app per raccogliere statistiche sull'utilizzo e consentire agli utenti di effettuare l'accesso alla piattaforma con OAuth 2.0, un framework di autorizzazione standardizzato. L'ID app consente inoltre all'app di utilizzare i contenuti dell'utente associati all'organizzazione, nonché di sfruttare altre funzionalità di ArcGIS Online quali la geocodifica, il Routing e il GeoEnrichment.
Quando si registra il modello di app Web, impostare tipo su Browser con il valore URI di reindirizzamento che fa riferimento all'URL del modello di app.
Se si utilizza il modello ApplicationBase, impostare la proprietàoauthappid configurabile nel file config/defaults.js.
//sample
"oauthappid": “h4xZWhfz0an0TvqC"
Se non si utilizza il modello ApplicationBase, è necessario utilizzare l’Identity Manager per il riconoscimento dell'ID dell'app registrata. Per ulteriori informazioni, vedere gli esempi OAuth Basic e OAuth Popup.
Rendere configurabile l’app
Per permettere la personalizzazione dell'aspetto e del comportamento della tua web app, puoi renderla configurabile. Ad esempio, è possibile consentire agli utenti di modificare i colori dell'app o personalizzare altre impostazioni per l'app.
Per rendere configurabile l’app, è necessario creare un file di configurazione e associare le informazioni del file di configurazione con l'elemento del modello di app creato.
Creare un file di configurazione
Il file di configurazione dell’app è costituito da un file JSON che definisce le opzioni di configurazione per il modello dell'app. Ad esempio, il file di configurazione per l'app Basic Viewer è configurationPanel.js e si trova nella cartella delle risorse del repository Basic Viewer di Esri. Osservare un modello completo di file di configurazione.
Nota:
Si consiglia di eseguire il codice JSON tramite un'utilità di convalida, ad esempio JSONLint, per verificare che sia corretto e privo di errori.
Effettuare quanto segue per creare un file di configurazione:
- Creare una o più sezioni specificando una categoria e un insieme di campi per ogni sezione.
{ "configurationSettings": [ { "category": "", "fields": [] } ] } - Specificare le opzioni di configurazione utilizzando i tipi di campo elencati nella tabella seguente. Quando si crea il file di configurazione, assicurarsi che la proprietà fieldName sia univoca all'interno dell'impostazione di configurazione.
Tipo di campo Descrizione Paragrafo
Visualizza testo descrittivo nella finestra di dialogo di configurazione.
{ "type": "paragraph", "value": "* These menu items will appear in the application when the web map has layers that require them." }Stringa
Accetta input in formato testo. Include la proprietà stringFieldOption che specifica il tipo di casella di testo visualizzata sullo schermo. I valori sono textbox, textarea e richtext. L'opzione textbox è il valore predefinito e corrisponde a una casella di testo a riga singola. L'opzione textarea consente di visualizzare una casella di testo più grande per l'immissione dei dati. L'opzione richtext visualizza un editor RTF che consente agli utenti di applicare effetti di formattazione, ad esempio impostare il tipo di carattere del testo su grassetto e corsivo.
{ "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" }Output di esempio
description:"Bike Accidents"Booleano
Crea una casella di controllo in cui specificare valori true o false. Utilizzare condition per vedere se la mappa contiene la funzionalità specificata. Se la mappa non soddisfa la condizione, la casella di controllo e l'etichetta non verranno visualizzate nel pannello di configurazione.
{ "type": "boolean", "fieldName": "tool_bookmarks", "condition": "bookmark", "label": "Bookmarks", "tooltip": "" }Output di esempio
tool_bookmarks:falseNumero
Crea un campo che accetta valori numerici. Se il campo deve accettare solo un intervallo specifico di valori, è possibile utilizzare l'impostazione constraints per limitare l'input a un particolare intervallo di valori o per formattare i valori di input. Per informazioni sulla creazione di vincoli con Dojo Number TextBox, consultare la documentazione di Dojo.
{ "type": "number", "fieldName": "range", "label": "Range:", "tooltip": "", "constraints" :{min:0,max:10,places:0} }Output di esempio
range:0.5Data e ora
Crea un selettore di data con una scelta di date.
{ "type":"date", "fieldName" : "startDate", "label" : "Start Date" }Crea un selettore di ora con una scelta di orari.
{ "type": "time", "fieldName": "startTime", "label": "Start Time" }Output di esempio (in formato ISO-8601) per data e ora
Start Date and Time: 1970-01-01T21:30:00.000ZOpzioni
Crea un elenco a discesa contenente diverse opzioni.
{ "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" }] }Output di esempio
theme:"blue"Selettore colore
Visualizza un selettore colore che consente di scegliere un colore da una tavolozza oppure di specificare i valori per HEX, RGB o HSV. Fornisce anche un cursore di trasparenza e un'opzione senza colori.
{ "type": "color", "label": "Choose a selection color", "fieldName": "selectionColor", "transparency" : true, "noColor" : true }Output di esempio
selectionColor:"#829254"Finestra di dialogo Mappa Web
Visualizza una finestra di dialogo in cui cercare una nuova mappa da visualizzare nell'app. Opzionalmente specificare una condizione per testare la mappa. Se non si soddisfa la condizione specificata, comparirà un messaggio di validazione sul pannello di configurazione a conferma del fatto che la mappa non soddisfa tali requisiti. Le stringhe con le condizione valide sono le seguenti:
- time: la mappa è abilitata alle variazioni temporali
- edit: l'app dispone di almeno un layer modificabile
- featurelayer: la mappa dispone di almeno un feature layer
- filter: la mappa dispone di un filtro interattivo definito
- 4x: la mappa contiene del contenuto che non è ancora supportato nella versione 4x di ArcGIS API for JavaScript
{ “type”: “webmap”, “conditions”: [“time”, “edit”, “featurelayer”, “filter”, “4x”] }Output di esempio
webmap:"739ef0cf75de432995c77dd44ec8f652"Finestra di dialogo Scena Web
Visualizza una finestra di dialogo in cui cercare una nuova scena Web da visualizzare nell'app.
{ "type": "webscene" }Output di esempio
webscene:"ab41c86a588748128e6f5d80990a2395"Finestra di dialogo Gruppo
Visualizza una finestra di dialogo in cui cercare un nuovo gruppo da visualizzare nell'app.
{ "type": "group" }Output di esempio
group:"449d00a4478d4849bbb65612355d6cd1"Selettore di più layer e campi
Offre una vista ad albero dei layer e dei campi nella mappa che corrispondono ai tipi e ai tipi di geometria supportati. Consente agli utenti finali delle app di selezionare più layer e campi per ogni layer.
Nota:
Se editOnly è impostato su true, l'elenco campi mostrerà solo i campi modificabili.
{ "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" ] } }Output di esempio
searchLayers: [{ "id":"Whittier_Hazards_821", "fields":[], "type":"FeatureLayer" }]Selettore di layer e campi
Mostra un elenco a discesa di layer nella mappa, filtrati in base ai tipi e alle geometrie. Se necessario, specificare uno o più selettori di campi per consentire agli utenti di selezionare un layer e i campi.
Nota:
Se editOnly è impostato su true, l'elenco campi mostrerà solo i campi modificabili.
{ "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" ] } }Output di esempio
tableLayer: { id: "2014CyclingAccidents_All_874", fields: [{ id: "urlField", fields: ["Casualty_Severity"] }] }Radio
Consente di creare un pulsante di opzione in cui è possibile selezionare una sola opzione alla volta. L'opzione selezionata verrà impostata su true.
{ "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 }] }Output di esempio
customLayout:"fullmap"Mappe di base
Mostra un elenco a discesa di tutte le mappe di base Esri denominate.
{ “type”: “basemaps”, “fieldname” :”my_basemap”, “label”: “Alternate Basemap” }Output di esempio
my_basemap:"satellite"Condizionale
Mostra o nasconde contenuti in base a una condizione vera o falsa. Ad esempio, deselezionando la casella di controllo Visualizza elenco layer, l'elenco layer e tutte le relative opzioni (ad esempio Includi sublayer nell'elenco layer) vengono nascosti.
{ "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" } ] } }Cerca
Consente di configurare un riquadro di ricerca per trovare feature all'interno di un campo di un feature layer o indirizzi utilizzando un localizzatore. Se si configura una ricerca di feature, gli utenti possono scegliere il feature layer e i campi di ricerca.
{ “type”: “Search”, “fieldName”: “searchConfig”, “label”: “Configure Search Options” }Output di esempio
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 Geocoding service", enableSuggestions: true, singleLineFieldName: "SingleLine", enable: true, id: "dojoUnique3" }], activeSourceIndex: 0, enableSearchingAll: false }ScaleList
Visualizza un elenco di livelli di scala predefiniti tra cui è possibile scegliere. Ad esempio, Paesi, Stati, Stato, Contee, Contea, Area metropolitana, Città, Cittadina, Quartiere.
{ “type”: “scaleList”, “fieldName”: “customUrlLayerZoomScale”, “label”: “Choose zoom level” }Output di esempio
“customUrlLayerZoomScale”: 12000Estensione mappa
Crea un selettore con le opzioni del centro della mappa e del livello di zoom.
{ "type":"extentMap", "label": "Select center and zoom", "fieldName": "mapExtent" }Output di esempio
mapExtent: { level: 2, coords: { latitude: 51.304, longitude: -98.7231 } }
Associare le informazioni di configurazione con l’elemento del modello
Dopo la creazione del file di configurazione, è necessario associare le informazioni di configurazione JSON al modello di app per renderlo configurabile.
- Nella pagina dell'elemento del modello di app, fai clic sulla scheda Impostazioni, quindi fai clic sul link Applicazione di mappatura web in cima.
- Nella casella Parametri di configurazione, incollare il codice JSON dal file di configurazione.
Nota:
Nella casella Parametri di configurazione è necessario specificare un codice JSON valido. Si consiglia di eseguire il codice JSON tramite un'utilità di convalida, ad esempio JSONLint, per verificare che sia corretto e privo di errori.
- Salvare le impostazioni correnti.
Esempio di file di configurazione
Di seguito è riportato un esempio di un file di configurazione 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
}
}
Utilizzare il modello nella galleria dell'organizzazione
Per utilizzare il modello nella galleria Configurable Apps o nella galleria di app di gruppo dell'organizzazione, condividere l'elemento con tutti e con il gruppo in uso per quella galleria. L'amministratore dell'organizzazione può quindi configurare la mappa o configurare i gruppi in modo che utilizzino il gruppo che include il modello.