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:
- Se non è già stato fatto, creare un modello di app Web.
- Creare un file 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 personalizzato.
Per iniziare, consultare le sezioni seguenti.
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. Tale file contiene una o più sezioni per suddividere in categorie le opzioni.
La proprietà fieldName deve essere univoca all'interno delle impostazioni di configurazione.
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.
| 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.
|
Booleano | Crea una casella di controllo in cui specificare valori true o 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.
|
Opzioni | Crea un elenco a discesa contenente diverse opzioni. |
Selettore colore | Visualizza un selettore colore che consente agli utenti di scegliere un colore da una tavolozza oppure di specificare i valori per HEX, RGB o HSV. |
Finestra di dialogo Mappa Web | Visualizza una finestra di dialogo in cui cercare una nuova mappa da visualizzare nell'app. |
Finestra di dialogo Gruppo | Visualizza una finestra di dialogo in cui cercare un nuovo gruppo da visualizzare nell'app. |
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. |
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. |
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. |
Mappe di base | Mostra un elenco a discesa di tutte le mappe di base Esri denominate. |
Condizionale | Mostra o nasconde contenuti in base a una condizione vera o falsa. Ad esempio, deselezionando la casella di controllo Visualizza elenco layer, quest'ultimo e tutte le relative opzioni (ad esempio Includi sublayer nell'elenco layer) vengono nascosti. |
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
Se il modello deve essere 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. Se non è già stato fatto, aggiungere innanzitutto il modello come un nuovo elemento app e impostare lo scopo su Configurabile. Aprire quindi la pagina degli elementi dell'app, fare clic sulla scheda Impostazioni, copiare il codice JSON dal file di configurazione e incollarlo nella casella Parametri 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.
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 quella galleria di app. L'amministratore dell'organizzazione può quindi configurare il map viewer o configurare i gruppi in modo che utilizzino il gruppo che include il modello.