Haut

Créer des modèles d’applications configurables

Dans cette rubrique

  1. Créer et configurer un modèle d’application Web
  2. Ajouter le modèle à ArcGIS Online
  3. Rendre l’application configurable
  4. Faire apparaître le modèle dans la bibliothèque de votre organisation

Si vous disposez des privilèges permettant de créer du contenu, vous pouvez créer un modèle d’application personnalisé hébergé sur votre serveur Web. Une fois le modèle d’application personnalisé créé et configuré, faites en sorte que l’application puisse être découverte dans ArcGIS en ajoutant le modèle à ArcGIS Online. Vous pouvez ensuite rendre l’application configurable pour permettre la personnalisation de son apparence et de son comportement. Si votre organisation prévoit d’utiliser votre modèle dans une de ses bibliothèques, vous pouvez le partager avec un groupe de modèles d’applications.

Créer et configurer un modèle d’application Web

Pour créer un modèle d’application Web personnalisé, vous pouvez télécharger et modifier un modèle ArcGIS Configurable Apps existant, mettre à jour une application Web existante pour utiliser le contenu de ArcGIS Online, ou créer une nouvelle application Web à l’aide du code dans une application de démarrage que vous pouvez télécharger à partir de GitHub.

Quelle que soit la manière dont vous créez l’application, vous utiliserez des paramètres URL et des cartes. Vous pouvez travaillez avec des groupes si vous créez un modèle d’application basé sur les groupes et vous pouvez prendre en considération des demandes supplémentaires pour travailler avec des Bing Maps fonds de carte, en accédant à des cartes non publiques et en travaillant avec des ressources qui nécessitent un proxy ou Cross-Origin Resource Sharing (CORS).

Une fois que vous avez créé un modèle d’application, hébergez-le sur le serveur Web.

Paramètres URL

Lorsque vous utilisez un modèle, spécifiez la carte Web ou le groupe à afficher en intégrant l’ID webmap ou group en tant que paramètre URL dans le modèle. Les ID des cartes Web sont spécifiés avec le paramètre webmap et le contenu des groupes est spécifié avec le paramètre group. Pour que votre modèle personnalisé fonctionne avec la carte ou le groupe en cours, vous devez inclure du code dans l'application afin d'extraire l'ID de la carte web ou du groupe en cours de l'URL.

Vous pouvez par exemple afficher la carte Fond de carte de l'Europe dans le modèle Visionneuse de base.

Pour ce faire, commencez avec l'URL de la visionneuse de base :

https://www.arcgis.com/apps/View/index.html

Copiez la partie webmap= de l’URL du fond de carte de l’Europe :

https://www.arcgis.com/home/webmap/viewer.html?webmap=5421a40574914458892efe74f0149025

Ajoutez-la ensuite à la fin de l'URL de la visionneuse de base :

https://www.arcgis.com/apps/View/index.html?webmap=5421a40574914458892efe74f0149025

L’API ArcGIS pour JavaScript comporte une méthode d’assistance esri.urlToObject qui simplifie ce processus. Cette méthode convertit les paramètres URL en un objet.

var webmap;
var urlObject = esri.urlToObject(document.location.href);

Une fois les paramètres URL convertis en un objet, vous pouvez accéder aux différentes entrées. Vous pouvez par exemple attribuer la valeur du paramètre URL de la carte Web à une variable nommée webmap_id.

var webmap_id = urlObject.query.webmap;
Remarque :

Si l’application est configurable, vous devez gérer un paramètre URL appelé appid, qui définit les paramètres de configuration.

Cartes web

Remarque :

Cette fonction est prise en charge uniquement dans Map Viewer Classic.

Les modèles de cartes sont conçus pour fonctionner avec la carte actuellement affichée dans Map Viewer Classic. Les modèles créent généralement une carte en fonction de la carte web spécifiée dans le paramètre URL de la carte web. Chaque API web possède une méthode d'assistance qui crée une carte à l'aide des informations issues de l'ID de la carte web. Pour en savoir plus sur l’utilisation des API afin de travailler avec les cartes Web, voir ArcGIS API for JavaScript.

Par exemple, vous pouvez utiliser la méthode ArcGIS API for JavaScript esri.arcgis.utils.createMap pour créer une carte en fonction de l’ID en entrée. Vous pouvez également inclure une fonction de rappel qui s’exécute lorsque la requête synchrone sur esri.arcgis.utils.createMap est terminée.

esri.arcgis.utils.createMap(webmap,"map",{
   mapOptions:{
     slider:false
   },
   bingMapsKey:bingMapsKey
}).then(function(response){
    map = response.map;
});
Remarque :

Si l’une de vos cartes Web comprend un fond de carte Bing Maps, vous devrez indiquer une clé Bing Maps lors de l’utilisation de la méthode createMap. Vous pouvez également spécifier plusieurs autres options cartographiques, telles qu'indiquer si vous souhaitez afficher le curseur, la navigation, l'attribution, etc.

La fonction de rappel callback permet d'accéder à un objet de réponse qui fournit l'accès à l'objet de carte, aux couches, etc. Pour en savoir plus sur la classe Map, voir ArcGIS API for JavaScript.

Groupe

Les modèles de groupes affichent le contenu provenant du groupe spécifié dans une application.

ArcGIS REST API fournit l’accès au contenu à partir de ArcGIS Online. Vous pouvez l'utiliser pour extraire le contenu du groupe en fonction de l'ID de groupe en entrée. Pour plus d’informations sur le fonctionnement de ArcGIS REST API, consultez la ArcGIS REST API.

Dans cet exemple, vous effectuez une requête pour trouver un groupe avec l'ID en entrée.

var portal = new esri.arcgis.Portal('https://www.arcgis.com');
dojo.connect(portal, 'onLoad',function(){
    portal.queryGroup(groupid).then(function(response){
        var group = response.results[0];
     });
});

Une fois le groupe trouvé, vous pouvez demander à extraire les éléments du groupe.

Dans cet exemple, vous interrogez le groupe pour trouver cinq éléments de type Web Map ou Web Mapping Application.

var queryParams = {
    q: 'type:"Web Map" -type:"Web Mapping Application"',
    num: 5
 };
group.queryItems(queryParams).then(function(response){
    var groupItems = response.results;
});

Autres éléments à prendre en compte

Les applications Web sont en général conçues pour fonctionner avec plusieurs types de contenu, vous pouvez donc avoir besoin de paramétrer le modèle pour gérer les cartes avec Bing Maps des fonds de carte, du contenu non public, etc. Vous trouverez ci-dessous des remarques spécifiques.

Bing Maps

Si l’une des cartes que vous voulez afficher utilise un Bing Maps, vous devrez intégrer une clé Bing Maps à votre application. La Bing Maps est fournie comme paramètre de la méthode createMap.

Prise en charge proxy et CORS

Comme votre application va effectuer des requêtes inter-domaines destinées à ArcGIS Online, vous devez activer CORS ou ajouter un proxy à votre application.

Ajouter le modèle à ArcGIS Online

Une fois un modèle d’application Web créé et hébergé sur votre serveur Web, faites en sorte que l’application puisse être découverte dans ArcGIS en ajoutant votre modèle à ArcGIS Online.

Ajouter le modèle en tant qu’élément d’application

Ajoutez le modèle à ArcGIS Online en tant qu’élément d’application Web et spécifiez l’URL de l’application. Pour l’option Purpose (Objet), choisissez Configurable. Sélectionnez JavaScript comme API.

Une fois que vous avez ajouté le modèle, l’élément correspondant apparaît dans votre contenu et vous pouvez mettre à jour ses détails. N’oubliez pas d’inclure un titre descriptif et un résumé, car ces informations s’affichent lorsque les utilisateurs visualisent l’élément dans la bibliothèque d’applications configurables. Vous pouvez également créer un fichier .zip contenant les fichiers de votre application et l’associer à l’élément pour permettre de la télécharger.

Enregistrer le modèle d'application

Après avoir ajouté le modèle d’application en tant qu’élément, vous devez enregistrer l’application. L’enregistrement de l’application génère un ID d’application unique. Utilisez l’ID d’application dans votre application pour recueillir des statistiques d’utilisation et autoriser les utilisateurs à se connecter à la plateforme avec OAuth 2.0, une structure d’autorisation normalisée. L’ID d’application permet également à votre application de travailler avec du contenu utilisateur associé à l’organisation. Elle peut en outre utiliser d’autres fonctionnalités de ArcGIS Online, telles que le géocodage, le calcul d’itinéraire et l’enrichissement géographique.

Lorsque vous enregistrez votre modèle d’application Web, définissez le type sur Browser (Navigateur) en faisant pointer Redirect URI (URI de redirection) vers l’URL du modèle d’application.

Si vous utilisez le modèle ApplicationBase, définissez la propriété configurable oauthappid dans le fichier config/defaults.js.

//sample

 "oauthappid": “h4xZWhfz0an0TvqC"

Si vous n’utilisez pas le modèle ApplicationBase, vous devez travailler avec le Gestionnaire d’identité pour qu’il reconnaisse l’ID de l’application enregistrée. Pour plus d'informations, consultez les exemples OAuth Basic et OAuth Popup.

Rendre l’application configurable

Pour autoriser la personnalisation de l’apparence et du comportement de votre application Web personnalisée, vous pouvez la rendre configurable. Par exemple, vous pouvez autoriser les utilisateurs à modifier les couleurs de l’application ou à personnaliser d’autres paramètres.

Pour rendre l’application configurable, il faut créer un fichier de configuration et l’associer à l’élément de modèle d’application que vous avez créé.

Créer un fichier de configuration

Le fichier de configuration de l’application est un fichier JSON qui définit les options de configuration du modèle d’application. Par exemple, le fichier de configuration de l’application Visionneuse de base est configurationPanel.js ; il se trouve dans le dossier ressources du Esri référentiel de la visionneuse de base. Consultez un exemple complet de fichier de configuration.

Remarque :

Il est recommandé d’exécuter votre code JSON via un outil de validation, tel que JSONLint, pour s’assurer que le code JSON est correctement formé et qu’il ne comporte pas d’erreur.

Pour créer un fichier de configuration, procédez comme suit :

  1. Créez une ou plusieurs sections en spécifiant une catégorie et un ensemble de champs pour chacune d’elles.
    {
    "configurationSettings": [
        {
            "category": "",
            "fields": []
        }
    ]
}
  2. Spécifiez les options de configuration à l’aide des types de champs répertoriés dans le tableau ci-dessous. Lorsque vous créez le fichier de configuration, veillez à ce que la propriété fieldName soit unique dans le paramètre de configuration.

    Type de champDescription

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

    Exemple de sortie

    description:"Bike Accidents"

    Booléen

    Crée une case à cocher pour indiquer des valeurs true ou false. Utilisez condition pour voir si la carte contient la fonctionnalité spécifiée. Si la carte ne remplit pas la condition, la case à cocher et l’étiquette n’apparaissent pas dans le panneau de configuration.

    {
       "type": "boolean",
       "fieldName": "tool_bookmarks",
       "condition": "bookmark",
       "label": "Bookmarks",
       "tooltip": ""
 }

    Exemple de sortie

    tool_bookmarks:false

    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. Pour plus d’informations sur la création de contraintes avec la zone de texte numérique Dojo, reportez-vous à la documentation Dojo.

    { 
     "type": "number",
     "fieldName": "range",
     "label": "Range:",
     "tooltip": "",
     "constraints" :{min:0,max:10,places:0}
}

    Exemple de sortie

    range:0.5

    Date et heure

    Crée un sélecteur de date avec un choix de dates.

    {
     "type":"date",
     "fieldName" : "startDate",
     "label" : "Start Date"
}

    Crée un sélecteur d’heure avec un choix d’heures.

    {
     "type": "time",
     "fieldName": "startTime",
     "label": "Start Time"
}

    Exemple de sortie (au format ISO-8601) pour la date et l’heure

    Start Date and Time: 1970-01-01T21:30:00.000Z

    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 sortie

    theme:"blue"

    Sélecteur de couleurs

    Affiche un sélecteur de couleurs permettant de choisir une couleur dans une palette ou de spécifier des valeurs hexadécimales, RVB ou TSL. Fournit également un curseur de transparence et une option aucune couleur.

    {
   "type": "color", 
   "label": "Choose a selection color",
   "fieldName": "selectionColor",
   "transparency" : true,
   "noColor" : true
 }

    Exemple de sortie

    selectionColor:"#829254"

    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. Vous pouvez également spécifier une condition pour tester la carte. Si la condition spécifiée n’est pas remplie, un message de validation apparaît dans le panneau de configuration pour confirmer que la carte ne répond pas aux exigences requises. Les chaînes de conditions valides sont les suivantes :

    • time - La carte est temporelle.
    • edit - L’application comporte au moins une couche modifiable.
    • featurelayer - La carte comporte au moins une couche d’entités.
    • filter - Un filtre interactif est défini pour la carte.
    • 4x - La carte comporte un contenu non encore pris en charge dans la version 4x de ArcGIS API for JavaScript
    {
   “type”: “webmap”,
   “conditions”: [“time”, “edit”, “featurelayer”, “filter”, “4x”]
 }

    Exemple de sortie

    webmap:"739ef0cf75de432995c77dd44ec8f652"

    Dialogue de scène Web

    Affiche une boîte de dialogue pour parcourir ou rechercher une nouvelle scène Web à afficher dans l’application.

    {
   "type": "webscene"
 }

    Exemple de sortie

    webscene:"ab41c86a588748128e6f5d80990a2395"

    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"

 }

    Exemple de sortie

    group:"449d00a4478d4849bbb65612355d6cd1"

    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.

    Remarque :

    Si editOnly est défini sur true, la liste des champs inclut uniquement des champs modifiables.

     {  
               "label":"Select search layers and fields",
               "fieldName":"searchLayers",
               "type":"multilayerandfieldselector",
               "editOnly":true,  
               "tooltip":"Select layer and fields to search",
               "layerOptions":{  
                  "supportedTypes":[  
                     "FeatureLayer"
                  ],
                  "geometryTypes":[  
                     "esriGeometryPoint",
                     "esriGeometryLine",
                     "esriGeometryPolyline",
                     "esriGeometryPolygon"
                  ]
               },
               "fieldOptions":{  
                  "supportedTypes":[  
                     "esriFieldTypeString"
                  ]
               }
            }

    Exemple de sortie

    searchLayers: [{
    "id":"Whittier_Hazards_821",
    "fields":[],
    "type":"FeatureLayer"
}]

    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.

    Remarque :

    Si editOnly est défini sur true, la liste des champs inclut uniquement des champs modifiables.

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

    Exemple de sortie

    tableLayer: {
    id: "2014CyclingAccidents_All_874",
    fields: [{
        id: "urlField",
        fields: ["Casualty_Severity"]   
    }]
}

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

    Exemple de sortie

    customLayout:"fullmap"

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

    Exemple de sortie

    my_basemap:"satellite"

    Conditions

    Affiche ou masque le contenu selon une condition true ou false. Par exemple, si une case à cocher Display layer list (Afficher la liste des couches) est désactivée, la liste des couches et toutes les options associées (par exemple Include sublayers in layer list [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"
                   }
               ]
            }
}

    Rechercher

    Configure un volet de recherche permettant de rechercher des entités dans un champ d'une couche d'entités ou des adresses à l'aide d'un localisateur. Si vous configurez une recherche d’entités, les utilisateurs peuvent choisir la couche d’entités et les champs de recherche.

       {
“type”: “Search”,
  “fieldName”: “searchConfig”,
“label”: “Configure Search Options”
}

    Exemple de sortie

    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

    Affiche une liste des niveaux d'échelle prédéfinis que l'utilisateur peut sélectionner. Par exemple, Pays, Etats, Etat, Comtés, Comté, Métropole, Ville, Commune, Quartier.

    {
    “type”: “scaleList”,
    “fieldName”: “customUrlLayerZoomScale”,
    “label”: “Choose zoom level”
}

    Exemple de sortie

    “customUrlLayerZoomScale”: 12000

    ExtentMap

    Crée un sélecteur avec des options de centre de la carte et de niveau de zoom.

    {
   "type":"extentMap",
   "label": "Select center and zoom",
   "fieldName": "mapExtent"
}

    Exemple de sortie

    mapExtent: {
  level: 2,
  coords: {
     latitude: 51.304,
     longitude: -98.7231
     }
}

Associer les données de configuration à l’élément de modèle

Après avoir créé le fichier de configuration, vous devez associer les données de configuration JSON au modèle d’application pour le rendre configurable.

  1. Dans la page des éléments du modèle d’application, cliquez sur l’onglet Settings (Paramètres), puis sur le lien Web Mapping Application (Application cartographique Web) situé en haut.
  2. Dans la zone Configuration Parameters (Paramètres de configuration), collez le code JSON issu de votre fichier de configuration.
    Remarque :

    Le champ Configuration Parameters (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.

  3. Enregistrez les paramètres.

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

Faire apparaître le modèle dans la bibliothèque de votre organisation

Si vous souhaitez utiliser le modèle dans la bibliothèque ou la bibliothèque ou la bibliothèque d’applications de groupes Configurable Apps de votre organisation, partagez l’élément avec tous et avec le groupe utilisé pour cette bibliothèque. 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.

Vous avez un commentaire à formuler concernant cette rubrique ?

Dans cette rubrique
  1. Créer et configurer un modèle d’application Web
  2. Ajouter le modèle à ArcGIS Online
  3. Rendre l’application configurable
  4. Faire apparaître le modèle dans la bibliothèque de votre organisation