Ajouter des paramètres configurables aux modèles

Les applications Web configurables permettent aux utilisateurs de personnaliser l'apparence et le comportement d'une application. La procédure permettant de rendre un modèle d'application configurable se compose de quatre étapes :

1. Si vous ne l'avez pas déjà fait, créez un modèle d'application Web.
2. Créez un fichier de configuration.
3. Configurez le modèle pour lire les propriétés de configuration et appliquez-les à l'application.
4. Associez le fichier de configuration à l'élément de votre modèle d'application.

Pour commencer, consultez les sections ci-dessous.

Créez un fichier de configuration

Le fichier de configuration est un fichier JSON qui définit les options de configuration du modèle d'application. Ce fichier contient une ou plusieurs sections qui classent les options.

La fieldName propriété doit être unique à l'intérieur du paramètre de configuration.

Créez chaque section en spécifiant une catégorie et un ensemble de champs.

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

Spécifiez les options de configuration à l'aide des types de champs répertoriés dans le tableau ci-dessous.

Type de champ	Description
Paragraphe	Affiche une explication dans la boîte de dialogue de configuration. { "type": "paragraph", "value": "* These menu items will appear in the application when the web map has layers that require them." }
Chaîne	Accepte l'entrée de texte. Inclut la propriété stringFieldOption qui indique le type de zone de texte affiché à l'écran. Les valeurs sont textbox, textarea et richtext. L'option textbox est la valeur par défaut et une zone de texte uniligne. L'option textarea affiche une zone de texte plus grande afin d'y saisir des données. L'option richtext affiche un éditeur de texte enrichi qui permet aux utilisateurs d'appliquer une mise en forme au texte (par exemple mettre la police en gras ou en italique). { "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" }
Booléen	Crée une case à cocher pour indiquer des valeurs true ou false. { "type": "boolean", "fieldName": "displaytitle", "label": "Show Title", "tooltip": "" }
Nombre	Crée un champ qui accepte des valeurs numériques. Si le champ ne doit accepter qu'une plage spécifique de valeurs, vous pouvez utiliser le constraints paramètre des contraintes pour limiter l'entrée dans une plage de valeurs donnée ou pour mettre en forme les valeurs en entrée. { "type": "number", "fieldName": "range", "label": "Range:", "tooltip": "", "constraints" :{min:0,max:10,places:0} }
options	Crée une liste déroulante avec une série de choix. { "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" }] }
Sélecteur de couleurs	Affiche un sélecteur de couleurs qui permet aux utilisateurs de choisir une couleur dans une palette ou de spécifier des valeurs hexadécimales, RVB ou TSL. { "type": "color", "label": "Choose a selection color", "fieldName": "selectionColor" }
Boîte de dialogue Carte Web	Affiche une boîte de dialogue qui permet de parcourir ou de recherche une nouvelle carte à afficher dans l'application. { "type": "webmap" }
Boîte de dialogue Groupe	Affiche une boîte de dialogue qui permet de parcourir ou de rechercher un nouveau groupe à afficher dans l'application. { "type": "group" }
Sélection de plusieurs couches et champs	Présente une arborescence des couches et champs de la carte qui correspond aux types pris en charge et aux types de géométrie. Permet aux utilisateurs de l'application de sélectionner plusieurs couches et plusieurs champs pour chaque couche. { "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" ] } }
Sélection de couches et de champs	Affiche une liste déroulante des couches de la carte filtrée selon les types et géométries répertoriés. Vous pouvez préciser un ou plusieurs sélecteurs de champ pour permettre aux utilisateurs de sélectionner une couche et des champs. { "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" ] } }
Radio	Crée une case d'option pour laquelle une seule option peut être sélectionnée à la fois. L'option sélectionnée sera définie sur la valeur 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 }] }
Fonds de carte	Affiche une liste déroulante de tous les fonds de carte Esri nommés. { “type”: “basemaps”, “fieldname” :”my_basemap”, “label”: “Alternate Basemap” }
Conditions	Affiche ou masque le contenu selon une condition true ou false. Par exemple, si une case à cocher Afficher la liste des couches est désactivée, la liste des couches et toutes les options associées (par exemple Inclure les sous-couches dans la liste de couches) sont masquées. { "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" } ] } }

Exemple de fichier de configuration

Vous trouverez ci-dessous un exemple de fichier de configuration complet.

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

Paramétrer le modèle pour lire les informations du fichier de configuration

Si le modèle doit être configurable, l'application doit accepter l'ID d'élément d'une application cartographique Web comme valeur du paramètre URLappid. Cet ID permet d'effectuer une requête asynchrone visant à extraire les propriétés de configuration de l'application. Dans ArcGIS API for JavaScript, vous pouvez utiliser esri.request pour récupérer les détails de configuration de l'application.

Dans cet exemple, esri.arcgis.utils.arcgisUrl est résolu en 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 réponse inclura les modifications apportées par l'utilisateur à l'application à l'aide du volet de configuration. Vous pouvez ensuite extraire les modifications et les appliquer à l'application. L'application doit définir les valeurs par défaut des options de configuration pour gérer les situations dans lesquelles le modèle n'est pas configuré.

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

Associer des informations du fichier de configuration à l'élément de votre modèle d'application

Après avoir créé votre fichier de configuration, vous êtes prêt à l'associer à votre modèle d'application et à rendre l'application configurable. D'abord, si tel n'est pas encore le cas, ajoutez le modèle comme nouvel élément d'application et définissez l'objectif sur Configurable. Ensuite, ouvrez la page des éléments de votre application, cliquez sur l'onglet Paramètres, puis copiez/collez le code JSON de votre fichier de configuration dans la zone Paramètres de configuration au bas de la page des détails des éléments.

Remarque :

Le champ Paramètres de configuration requiert un code JSON valide. Il est recommandé d'exécuter votre JSON via un validateur, tel que JSONLint pour s'assurer que le code JSON est correctement formé et qu'il ne comporte pas d'erreurs.

Si vous souhaitez utiliser le modèle configurable dans la bibliothèque d'applications de la visionneuse de carte ou la bibliothèque d'applications de groupes de votre organisation, partagez l'élément avec le groupe utilisé pour cette bibliothèque d'applications. L'administrateur de votre organisation pourra configurer la visionneuse de carte ou configurer les groupes de façon à utiliser le groupe qui comprend votre modèle.