Skip To Content

Aggiungere parametri configurabili ai modelli

Una volta creato un modello di app Web, è possibile renderlo configurabile. Le app Web configurabili consentono agli utenti di personalizzare l'aspetto e il comportamento di un'app. La creazione di un modello di app configurabile è un processo in quattro fasi:

  1. Se non è già stato fatto, creare un modello di app Web.
  2. Creare un file di configurazione per definire le proprietà di configurazione desiderate.
  3. Impostare il modello in modo che legga le proprietà di configurazione e le applichi all'app.
  4. Associare il file di configurazione all'elemento per il modello di app personalizzato.

Creare un file di configurazione

Il file di configurazione è 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.

Il file di configurazione contiene una o più sezioni per suddividere in categorie le opzioni.

Creare ogni sezione specificando una categoria e un insieme di campi.

{
    "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 campoDescrizione

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

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. È possibile 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 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.

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

  {  
               "type":"layerAndFieldSelector",
               "fieldName":"tableLayer",
               "label":"Layer to display in table",
               "tooltip":"Layer to display in table",
               "fields":[  
                  {  
                     "multipleSelection":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"]       }]
}

Pulsante di opzione

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"

Basemap

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

Cercare

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

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

Configurare il modello in modo da leggere le informazioni del file di configurazione

Per rendere il modello configurabile, l'app dovrà accettare l'ID dell'elemento di un'applicazione di Web mapping come valore per il parametro URL appid. L'ID viene utilizzato per effettuare una richiesta asincrona con cui recuperare le proprietà di configurazione per l'app. In ArcGIS API for JavaScript, è possibile utilizzare esri.request per recuperare i dettagli relativi alla configurazione dell'app.

In questo esempio, esri.arcgis.utils.arcgisUrl viene risolto in www.arcgis.com/sharing/content/items.

var requestHandle = esri.request({
    url: esri.arcgis.utils.arcgisUrl + "/" + appid + "/data",
    content: {
        f: "json"
     },
    callbackParamName: "callback",
    load: function (response) {
     for (var key in response.values){
      if(response.values[key]!==undefined)configOptions[key]=response.values[key];
      }
    }, 
});

La risposta includerà le modifiche che l'utente ha apportato all'app utilizzando il riquadro di configurazione. È quindi possibile recuperare le modifiche e applicarle all'app. L'app deve definire valori predefiniti per le opzioni di configurazione allo scopo di gestire i casi in cui il modello non è configurato.

 {
    "source": "15a34e2c161b4364860854fbc84262c5",    "folderId": "5705faa4594a4fd09edf01742c16e523",    "values": {
        "webmap": "32f1438789d34b5e8125f0f7c64b8d63",        "layer":"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer/2",        "theme": "green",        "orgname": "Water Points",        "bufferdistance": 3       }
 }

Associare le informazioni del file di configurazione all'elemento per il modello di app personalizzato

Dopo aver creato il file di configurazione, è possibile associarlo al modello di app personalizzato e rendere configurabile l'app.

  1. Se non è già stato fatto, aggiungere innanzitutto il modello di app come nuovo elemento app.
  2. Nella pagina dell'elemento del modello di app, fare clic sulla scheda Impostazioni e trovare la sezione Applicazione di Web Mapping.
  3. Dal menu a discesa Scopo, selezionare Configurabile.
  4. Nel campo Parametri di configurazione, incollare il codice JSON dal file di configurazione.
    Nota:

    Nel campo Parametri di configurazione è necessario specificare 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.

  5. Fare clic su Salva per salvare le impostazioni.

Se si desidera utilizzare il modello configurabile nella galleria di app di Map Viewer o nella galleria di app di gruppo dell'organizzazione, condividere con il gruppo l'elemento in uso per tale galleria di app. L'amministratore dell'organizzazione può quindi configurare la mappa o configurare i gruppi in modo che utilizzino il gruppo che include il modello.