Una volta creato un modello di app Web, è possibile renderla configurabile. Le app Web configurabili consentono agli utenti di personalizzare l'aspetto e il comportamento di un'app. Rendere i modelli di app configurabili è un processo di quattro passaggi:
- Se non è già stato fatto, creare un modello di app Web.
- Creare un file di configurazione per definire le proprietà di configurazione.
- Impostare il modello in modo che legga le proprietà di configurazione e le applichi all'app.
- Associare il file di configurazione all'elemento per il modello di app.
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 campo | Descrizione |
|---|---|
Paragrafo | Visualizza testo descrittivo nella finestra di dialogo di configurazione. |
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. Output di esempio |
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. Output di esempio |
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. Output di esempio |
Opzioni | Crea un elenco a discesa contenente diverse opzioni. Output di esempio |
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. Output di esempio |
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:
Output di esempio |
Finestra di dialogo Gruppo | Visualizza una finestra di dialogo in cui cercare un nuovo gruppo da visualizzare nell'app. Output di esempio |
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. Output di esempio |
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. Output di esempio |
Radio | Consente di creare un pulsante di opzione in cui è possibile selezionare una sola opzione alla volta. L'opzione selezionata verrà impostata su true. Output di esempio |
Mappe di base | Mostra un elenco a discesa di tutte le mappe di base Esri denominate. Output di esempio |
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. |
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. Output di esempio |
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. Output di esempio |
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 mappatura Web 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 Maps SDK 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 un file di configurazione, è possibile associarlo con il modello di app personalizzato e rendere l'app configurabile.
- Se non è già stato fatto, aggiungere innanzitutto il modello di app come elemento app.
- Nella pagina dell'elemento del modello di app, fare clic sulla scheda Impostazioni e trovare la sezione Applicazione di Web Mapping.
- Dal menu a discesa Scopo, selezionare Configurabile.
- 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.
- Fare clic su Salva per salvare le impostazioni.
Se si desidera utilizzare il modello configurabile nella galleria di app di Map Viewer Classic 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.