Ajout de paramètres configurables aux modèles

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

  1. Créez une application de modèle si tel n'est pas encore le cas.
  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 personnalisé.

Les étapes permettant d'ajouter des paramètres de configuration à votre application de modèle personnalisé sont décrites en détail ci-dessous. Pour plus d'informations sur la création d'un modèle, reportez-vous à la rubrique Création de modèles d'applications Web.

Création d'un fichier de configuration

Le fichier de configuration est un fichier JSON qui définit la boîte de dialogue en entrée pour le modèle personnalisable. Ce fichier contient une ou plusieurs sections qui classent les options de personnalisation.

La propriété fieldName 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 les suivantes : textbox, text area et richtext. La valeur par défaut textbox correspond à une zone de texte uniligne. La valeur textarea affiche une zone de texte plus grande afin de saisir des données. La valeur 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 vraies ou fausses.

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

Pour en savoir plus sur la création de contraintes avec Dojo NumberTextBox

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

Exemple de fichier de configuration

Vous trouverez ci-dessous un exemple de fichier de configuration complet et le volet de configuration obtenu.

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

Volet de configuration
Volet de configuration obtenu pour l'exemple de code

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

Si le modèle est destiné à être configurable, l'application doit accepter un ID d'application comme paramètre URL. Cet ID d'application (appid) 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 extraire 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":"http://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer/2",
        "theme": "green",
        "orgname": "Water Points",
        "bufferdistance": 3
       }
 }

Association des informations du fichier de configuration à l'élément de votre modèle personnalisé

Après avoir créé votre fichier de configuration, vous êtes prêt à l'associer à votre modèle personnalisé et à rendre l'application configurable. D'abord, si tel n'est pas encore le cas, ajoutez le modèle comme nouvel élément de l'application cartographique Web dans ArcGIS Online. Pour plus d'informations sur l'ajout d'un élément à ArcGIS Online, reportez-vous à la rubrique Ajout d'applications. Ensuite, ouvrez la page des détails de l'élément de votre application Web, cliquez sur le bouton de mise à jour, puis copiez et collez le code JSON de votre fichier de configuration dans la zone Paramètres de configuration au bas de la page des détails de l'élément.

Page des détails de l'élément avec le champ Paramètres de configuration
Rendez votre modèle configurable en ajoutant les informations du fichier de configuration au champ Paramètres de configuration des détails de l'élément de modèle.

Une section consacrée aux paramètres de configuration est maintenant disponible en mode de mise à jour de l'élément de l'application Web dans ArcGIS Online.

RemarqueRemarque :

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 de modèles cartographiques Web ou dans la bibliothèque des modèles de groupes de votre organisation, partagez l'élément avec le groupe utilisé pour les modèles. L'administrateur de votre organisation pourra ensuite configurer la carte ou configurer les groupes de façon à utiliser le groupe qui comprend votre modèle.

4/12/2013