Se si dispone di privilegi per creare contenuti, è possibile creare il proprio modello di app personalizzato. Una volta creato e configurato il modello di app personalizzato, rendere la propria app rilevabile in ArcGIS aggiungendo il modello al portale. Si ha quindi l’opzione di rendere configurabile l’app per consentire agli utenti di personalizzarne l’aspetto e il comportamento. Se l'organizzazione prevede di utilizzare il modello in una delle proprie gallerie, è inoltre possibile condividere il modello con uno dei gruppi di modelli dell'app.
Creare e configurare un modello di app Web
Per creare il proprio modello di applicazione personalizzato, è possibile scaricare e modificare uno dei modelli ArcGIS Configurable Apps esistenti, aggiornare un'applicazione Web esistente affinché utilizzi i contenuti del portale o creare una nuova applicazione Web utilizzando una delle API di ArcGIS Web.
Indipendentemente da come verrà creata l'app, sarà necessario gestire parametri di 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).
Il portale ArcGIS Enterprise include ArcGIS API 3.35 for JavaScript alla versione 10.9. Non è necessario ospitare un'API personalizzata e indirizzare il portale alla versione locale per nuovi modelli app creati. I modelli di app Web fanno automaticamente riferimento all'API installata. L'API installata in locale è in genere disponibile all'indirizzo https://webadaptorhost.domain.com/webadaptorname/jsapi/jsapi.
Attenzione:
Non modificare i file di modello di applicazioni Web forniti con ArcGIS Enterprise, poiché tali file sono gestiti dal portale ed eventuali modifiche apportate potrebbero essere successivamente sovrascritte dal portale stesso. Se si desidera personalizzare i modelli, eseguire le operazioni seguenti:
- Effettuare una copia del file di modello esistente che si desidera personalizzare.
- Inserire la copia in un percorso diverso del disco.
- Personalizzare la copia del modello.
- Aggiungerla al Portale come nuovo modello.
Mappe Web
I modelli di app sono progettati per funzionare con la mappa attualmente visualizzata in Map Viewer. 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.
Ad esempio, è possibile utilizzare il metodo ArcGIS API for JavaScript esri.arcgis.utils.createMap per creare una mappa basata sull'ID di input. Nonché includere una funzione 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 Web Map include una mappa di base di Bing Maps, è necessario specificare una chiave di 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.
Gruppo
I modelli di gruppo consentono di visualizzare il contenuto del gruppo specificato in un’app.
ArcGIS REST API consente di accedere al contenuto dal portale. Utilizzarla per recuperare i contenuti del gruppo sulla base dell'ID gruppo di input.
In questo esempio viene eseguita un'interrogazione per trovare un gruppo con l'ID di input.
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];
});
});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 che si desidera 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
Se l'app effettuerà richieste interdominio, sarà necessario abilitare CORS o aggiungere un proxy all'app.
Aggiungere il modello al portale
Dopo aver creato il modello di app Web , rendere rilevabile l’app in ArcGIS, aggiungendo il modello al portale.
Aggiungere il modello come elemento dell’app
Aggiungere il modello al portale come elemento dell'app Web e specificare l'URL dell'app. Per Scopo, scegliere Configurabile. Per API, scegliere JavaScript.
Una volta aggiunto il modello, l’elemento del modello viene visualizzato nei contenuti dove è possibile modificare i dettagli elemento. 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 aver aggiunto il modello dell'app come elemento, è necessario registrare l'app. È possibile registrare le app basate su OAuth 2.0 sviluppate. In seguito alla registrazione dell'app con il portale viene generato un ID, che costituisce la base per distribuire app e ottenere report di utilizzo.
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.
Utilizzare l’Identity Manager per il riconoscimento dell'ID dell'app registrata. Per ulteriori informazioni, vedere gli esempi OAuth Basic e OAuth Popup inclusi con ArcGIS API for JavaScript.
Rendere configurabile l’app
Per consentire agli utenti di personalizzare l'aspetto e il comportamento dell’app Web personalizzata, è possibile renderla personalizzabile. 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. Osservare un modello completo di file di configurazione.
Nota:
È opportuno eseguire il codice JSON con 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.
{ "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.
{ "type": "color", "label": "Choose a selection color", "fieldName": "selectionColor" }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 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 World 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 aver creato il file di configurazione, è necessario associare le informazioni di configurazione JSON con il modello di app per renderlo configurabile.
- Sulla pagina dell'elemento del modello di app, fare clic sulla scheda Impostazioni e fare clic sul collegamento Applicazione di Web Mapping in alto.
- 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. È opportuno eseguire il codice JSON con 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
Se si desidera utilizzare il modello nella galleria di app di Map Viewer 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.