Creare modelli di app

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 l'app configurabile per consentire la personalizzazione dell'aspetto e del 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 un modello di web app personalizzato, è possibile aggiornare una web app esistente per lavorare con i contenuti del portale o creare una nuova web app utilizzando una delle API 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.37 per JavaScript a 11.0. 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:

1. Effettuare una copia del file di modello esistente che si desidera personalizzare.
2. Inserire la copia in un percorso diverso del disco.
3. Personalizzare la copia del modello.
4. Aggiungerla al Portale come nuovo modello.

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.

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 diBing 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.

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 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. 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:

1. Creare una o più sezioni specificando una categoria e un insieme di campi per ogni sezione.

   {
       "configurationSettings": [
           {
               "category": "",
               "fields": []
           }
       ]
   }

2. 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:false
   Numero	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.5
   Data 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.000Z
   Opzioni	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”: 12000
   Estensione 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.

1. Sulla pagina dell'elemento del modello di app, fare clic sulla scheda Impostazioni e fare clic sul collegamento Applicazione di Web Mapping in alto.
2. 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.

3. 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 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.