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 au portail
  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 votre propre modèle d’application personnalisé. 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 votre modèle au portail. Vous pouvez ensuite rendre l’application configurable afin que les utilisateurs puissent personnaliser son apparence et 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 Appsexistant, mettre à jour une application Web existante pour utiliser le contenu depuis votre portail ou créer une nouvelle application Web à l’aide de l’une des API Web ArcGIS.

Quelle que soit la manière dont vous créez votre 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).

Le portail ArcGIS Enterprise inclut ArcGIS API 3.35 pour JavaScript 10.9. Vous n’avez pas besoin d’héberger votre propre API ni de faire pointer le portail sur la version locale pour les modèles d’applications récemment créés. Ceux-ci font automatiquement référence à l’API installée. L’API installée localement est généralement disponible à l’adresse suivante : https://webadaptorhost.domain.com/webadaptorname/jsapi/jsapi.

Attention :

Ne modifiez pas les fichiers de modèles d’applications Web fournis avec ArcGIS Enterprise, car ces fichiers sont gérés par le portail et toute modification que vous y apportez peut être supprimée par le portail par la suite. Pour personnaliser les modèles, procédez comme suit :

  1. Créez une copie du fichier de modèle existant que vous souhaitez personnaliser.
  2. Placez cette copier dans un emplacement différent sur le disque.
  3. Personnalisez la copie du modèle.
  4. Ajoutez-la à votre portail en tant que nouveau modèle.

Cartes web

Les modèles de cartes sont conçus pour fonctionner avec la carte actuellement affichée dans Map Viewer. 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.

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.

Groupe

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

ArcGIS REST API offre l’accès au contenu de votre portail. Vous pouvez l'utiliser pour extraire le contenu du groupe en fonction de l'ID de groupe en entrée.

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://webadaptorhost.domain.com/webadaptorname/');
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

Si votre application doit effectuer des requêtes inter-domaines, vous devez activer CORS ou ajouter un proxy à votre application.

Ajouter le modèle au portail

Une fois votre modèle d’application Web créé, faites en sorte que votre application puisse être découverte dans ArcGIS en ajoutant le modèle à votre portail.

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

Ajoutez votre modèle à votre portail 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é votre modèle, l’élément correspondant apparaît dans le 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. Vous pouvez inscrire des applications basées sur OAuth 2.0 que vous développez. En inscrivant votre application sur le portail, vous obtenez un ID d'application. Cet ID d’application permet de répartir des applications et d’obtenir des rapports d’utilisation.

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.

Travaillez 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 contenus dans ArcGIS API for JavaScript.

Rendre l’application configurable

Pour autoriser les utilisateurs à personnaliser l’apparence et le 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éez 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. 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. 

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

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

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

    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 à votre 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 d’applications Map Viewer ou la bibliothèque d’applications de groupes 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 au portail
  3. Rendre l’application configurable
  4. Faire apparaître le modèle dans la bibliothèque de votre organisation