Skip To Content

Concevoir la mise en page de votre site

Une fois que vous avez configuré votre site et ajouté des données, vous pouvez utiliser Site Editor (Éditeur de site) pour commencer à concevoir votre site. L’éditeur de site est un éditeur de page complet qui offre un modèle par défaut que vous pouvez adapter selon l’identité visuelle et les données de votre site ou que vous pouvez supprimer pour construire un site entièrement nouveau. Concevez la mise en page de votre site via un glisser-déplacer des fiches, en définissant un thème global et en personnalisant l’en-tête et lepied de page avec du texte ou du code HTML personnalisé.

Accéder à l’éditeur de site

Utilisez l'éditeur de site pour commencer à concevoir votre site ou revenir à tout moment et effectuer des changements.

  1. Connectez-vous au d’administration Sites.
  2. Cliquez sur l’onglet Sites.
  3. Recherchez le site que vous souhaitez modifier et sélectionnez Site Editor (Éditeur de site).

Configurer les paramètres du site

Attribuez un nom à votre site, définissez une description, etc. Il est également possible de configurer les paramètres et les fonctionnalités du site en cliquant sur l’onglet Sites afin d’accéder à Site Manager (Gestionnaire de sites).

  1. Ouvrez le volet latéral et cliquez sur Site Info (Info du site).
  2. Fournissez un nom dans le champ Site Name (Nom du site).
  3. Saisissez des informations d’arrière-plan sur votre site dans le champ About Site (À propos du site).
  4. Fournissez une icône favorite personnalisée en collant l’URL de l’image dans le champ Custom Favicon (Icône favorite personnalisée).
  5. Cliquez pour activer Google Analytics.
  6. Cliquez pour activer un fond de carte personnalisé (Custom Basemap). Vous pouvez choisir la carte désirée dans le menu déroulant.
  7. Cliquez sur Capabilities (Fonctionnalités) en haut du volet Customize (Personnaliser) pour ouvrir le menu Capabilities (Fonctionnalités). Dans ce menu, vous pouvez activer les fonctionnalités disponibles. En savoir plus sur les fonctionnalités dans Gérer les fonctionnalités du site.

En-tête

Saisissez l’URL d’une image ou utilisez la feuille de style en cascade (CSS) personnalisée pour personnaliser la barre de menus en haut de votre site.

  1. Ouvrez le volet latéral et cliquez sur Header (En-tête). Choisissez l’option Use logo and site title (Utiliser le logo et le titre du site) pour saisir un titre et ajouter l’URL de votre logo.
  2. Pour donner un nom à votre site, sélectionnez Use logo and site title (Utiliser le logo et le titre du site) et saisissez un titre dans le champ textuel Site Title (Titre du site) pour placer un titre dans l’en-tête de votre site.
  3. Pour placer une image en en-tête de votre site, collez l’URL d’une image dans le champ Logo URL (URL du logo).
  4. Si vous souhaitez attribuer une marque à l’en-tête de votre site avec un code HTML/CSS personnalisé, sélectionnez Use custom HTML/CSS (Utiliser un code HTML/CSS personnalisé).
  5. Modifiez la fenêtre CSS dans le panneau latéral et cliquez sur Apply Changes (Appliquer les changements)pour visualiser les effets sur votre code.
Attention :

L'en-tête HTML ne prend pas en charge le JavaScript intégré. Les balises de script sont ignorées.

Remarque :

Les zones My Data (Mes données) et Sign In (Connexion) ne peuvent être ni modifiées ni supprimées pour conserver le bon fonctionnement du site.

Thème

Définissez le thème de votre site en choisissant les couleurs de l’en-tête, du texte et des boutons de votre site.

  1. Pour sélectionner une couleur pour une des options suivantes, saisissez un code couleur ou sélectionnez une couleur depuis le sélecteur de couleurs en regard du champ du code couleur.
    • Le champ Header Background Color (Couleur d'arrière-plan de l'en-tête) applique de la couleur à l’en-tête de votre site.
    • Le champ Header Text Color (Couleur du texte de l'en-tête) applique de la couleur à tout le texte de l'en-tête.
    • Le champ Body Background Color (Couleur d'arrière-plan du corps) applique de la couleur aux lignes de votre site.
    • Le champ Body Text Color (Couleur du texte du corps) applique de la couleur au texte de l’ensemble de votre site.
    • Astuce:

      La couleur du texte peut aussi être modifiée par ligne.

      Le champ Body Link Color (Couleur des liens du corps) applique de la couleur à tout lien fourni sur votre site.
    • Le champ Button Background Color (Couleur d'arrière-plan des boutons) applique de la couleur aux boutons de votre site.
    • Le champ Button Text Color (Couleur de texte des boutons) applique de la couleur au texte des boutons de votre site.
  2. Une fois que vous avez défini les couleurs, cliquez sur Apply Changes (Appliquer les changements).
  3. Vous pouvez également appliquer des polices au texte en en-tête et dans le corps de votre site.
    • Pour choisir une police pour le corps de votre site, cliquez sur l’icône du paramètre Base Font (Police de base).
    • Pour changer la police pour l’en-tête de votre site, cliquez sur l’icône du paramètre Header Font (Police d’en-tête).
Remarque :

Pour recommencer ou revenir aux couleurs par défaut, sélectionnez Reset to Defaults (Rétablir les valeurs par défaut) en bas du menu Theme (Thème).

Mise en page et fiches

La mise en page de base d’un site ou d’une page est organisée en lignes et en fiches. Une fiche doit être placée dans une ligne, le nombre de fiches pouvant être placées dans une ligne étant illimité. Pour mettre à jour une fiche, cliquez sur le bouton des paramètres. Pour supprimer une fiche, cliquez sur le bouton de suppression. Pour créer votre site, vous pouvez utiliser les fiches suivantes : ligne, bannière, image, carte web, texte, catégorie, coordonnées, bibliothèque, iframe, détails de l’événement, vue de la liste d’événements, vidéo, réseau social, statistique de synthèse et diagramme.

Fiche ligne

Utilisez les lignes pour construire la mise en page globale de votre site. Faites glisser des fiches depuis l’Site Editor (Éditeur de site) pour ajouter aux lignes des fiches supplémentaires, comme du texte, des images et des supports.

  1. Faites glisser une ligne depuis l’éditeur de site (Site Editor) dans la mise en page.

    La page offre des repères pour vous guider.

  2. Si vous passez le curseur sur la ligne, trois boutons apparaissent à droite : des flèches pour déplacer cette ligne dans la page, un bouton des paramètres pour la mettre à jour et un bouton de suppression pour la supprimer.
  3. Cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  4. Dans la section Layout (Mise en page) de votre ligne, sélectionnez Box (Boîte) ou Wide (Large).L'option Wide (Largeur) permet d’afficher votre contenu sur l’intégralité de la page, tandis que l’option Box (Boîte) permet d’afficher le contenu dans une largeur fixe au sein de la ligne.
  5. Définissez la couleur du texte pour cette ligne.
  6. Définissez soit une couleur soit une image d'arrière-plan (par défaut transparent).
  7. Vous pouvez également ajouter une image en cliquant sur Image Source (Source de données d’image), puis en chargeant un fichier image ou en saisissant l’URL d'une image. Dans les deux cas, les formats d’image JPG, JPEG et PNG sont pris en charge.
    • Pour charger un fichier image, sélectionnez Upload Image (Charger une image) et faites glisser le fichier souhaité dans la zone de l’éditeur de site (Site Editor), ou cliquez sur Browse for Image (Rechercher une image) pour accéder au fichier souhaité et l’ajouter. La taille maximale du fichier est de 3 Mo.
    • Pour fournir l’URL d’une image, vous pouvez également coller le lien d’une image prise en charge dans le champ URL.
  8. Si vous utilisez un fichier image, vous pouvez personnaliser cette image en cliquant sur le bouton Rogner, puis en faisant glisser une poignée pour ajuster le cadre de rognage. Vous pouvez repositionner le cadre de rognage en le faisant glisser le long de la ligne en pointillé. Vous pouvez également appliquer un zoom en ajustant le curseur situé sous l’image et vous pouvez repositionner l’image en cliquant dans le cadre de rognage.
  9. Si vous ajoutez une couleur d’arrière-plan à une image, vous pouvez également ajuster le paramètre Image Transparency (Transparence d’image) dans le menu Appearance (Apparence) en saisissant un pourcentage ou en réglant le curseur.
  10. Activez Fixed Background (Arrière-plan fixe) pour définir un effet de parallaxe permettant de faire défiler le contenu à un rythme différent de l’image d'arrière-plan.
  11. Vous pouvez également définir un point dans Image Focal Point (Point focal de l’image) pour que, à partir de ce point, l’image s'adapte correctement aux différentes tailles d'écran.

Fiche bannière

Utilisez des bannières pour ajouter des en-têtes et des barres de recherche dans un site.

  1. Faites glisser une fiche Banner (Bannière) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Saisissez du texte dans les zones Headline (Titre) et Subheadline (Sous-titre).
  4. Dans le menu Search (Rechercher), cliquez sur Show Searchbar (Afficher la barre de recherche) pour ajouter une barre de recherche facultative dans la bannière. Vous pouvez également cliquer sur Add Ability to Search by Location (Ajouter la possibilité de rechercher par emplacement) pour ajouter une deuxième option de recherche permettant aux utilisateurs de filtrer les résultats par emplacement.
  5. Un espace de texte réservé peut aussi être affiché dans les barres de recherche.
  6. Dans le menu Options, saisissez une valeur pour le paramètre Minimum Height (Hauteur minimum) afin de définir la hauteur de votre bannière. La valeur doit être supérieure à zéro.
  7. Dans le menu Background Image (Image d’arrière-plan) menu, vous avez également la possibilité de charger un fichier image ou d’ajouter l’URL d’une image. Dans les deux cas, les formats d’image JPG, JPEG et PNG sont pris en charge.
    • Pour charger un fichier image, sélectionnez Upload Image (Charger une image) et faites glisser le fichier souhaité dans la zone de l’éditeur de site (Site Editor), ou cliquez sur Browse for Image (Rechercher une image) pour accéder au fichier souhaité et l’ajouter. La taille maximale du fichier est de 3 Mo.
    • Pour fournir l’URL d’une image, vous pouvez également coller le lien d’une image prise en charge dans le champ URL.
  8. Si vous utilisez un fichier image, vous pouvez personnaliser cette image en cliquant sur le bouton Rogner, puis en faisant glisser une poignée pour ajuster le cadre de rognage. Vous pouvez repositionner le cadre de rognage en le faisant glisser le long de la ligne en pointillé. Vous pouvez également ajuster le zoom situé sous l’image à l’aide du curseur et vous pouvez repositionner l’image en cliquant dans le cadre de rognage.
  9. Que vous choisissiez de charger des images ou de fournir des URL d’images, vous pouvez également définir un point dans Image Focal Point (Point focal de l’image) pour que, à partir de ce point, l’image s’adapte correctement aux différentes tailles d'écran.

Fiche Recherche

Ajoutez une barre de recherche pour aider les utilisateurs à retrouver rapidement un contenu partagé sur votre site.

  1. Faites glisser une fiche Search (Recherche) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Définissez un texte d’emplacement réservé dans le champ Search Placeholder Text (Texte d’emplacement réservé de recherche). Utilisez, par exemple, « Rechercher par mot-clé » ou « Rechercher les données ».
  4. Cliquez sur la case à cocher Add ability to Search by Location (Ajouter la possibilité de rechercher par emplacement) pour ajouter une barre de recherche supplémentaire afin de lancer une recherche en fonction de l’emplacement. Vous pouvez également indiquer un texte d’emplacement réservé dans le champ Location Placeholder Text (Texte d’espace réservé d’emplacement).

Fiche image

Ajoutez des images en les chargeant à partir de fichiers ou en fournissant des URL d’images. Les images partagées en interne seront visibles uniquement par les utilisateurs ayant ouvert une session et qui font partie de l’équipe ou de l’organisation.

  1. Faites glisser une fiche Image dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Sélectionnez une source d’image. Vous avez la possibilité de charger un fichier image ou de saisir une URL d’image. Dans les deux cas, les formats d’image JPG, JPEG et PNG sont pris en charge.
    • Pour charger un fichier image, sélectionnez Upload Image (Charger une image) et faites glisser le fichier souhaité dans la zone de l’éditeur de site (Site Editor), ou cliquez sur Browse for Image (Rechercher une image) pour accéder au fichier souhaité et l’ajouter. La taille maximale du fichier est de 3 Mo.
    • Pour ajouter l’URL d’une image, vous pouvez également sélectionner Image URL (URL de l’image) et coller le lien d’une image prise en charge dans le champ URL.
  4. Si vous utilisez un fichier image, vous pouvez personnaliser l’image chargée en cliquant sur le bouton Rogner, puis en faisant glisser une poignée pour ajuster le cadre de rognage. Vous pouvez repositionner le cadre de rognage en cliquant dessus et en le faisant glisser le long de la ligne en pointillé. Vous pouvez également appliquer un zoom en ajustant le curseur situé sous l’image, puis vous pouvez repositionner l’image en cliquant dans le cadre de rognage.
  5. Dans le menu Options, saisissez un texte de remplacement correspondant à l'image, afin d’aider les utilisateurs non-voyants et d’améliorer l’accessibilité de votre site.
  6. Ajoutez l’hyperlien d’une image, puis choisissez d’ouvrir le lien dans le même onglet ou dans un nouvel onglet.
  7. Saisissez du texte dans Image Caption (Légende de l’image) et définissez l’alignement du texte.
  8. Vous pouvez également cliquer sur Scale Image to Fill (Mettre l’image à l'échelle pour remplir) pour définir dans l’image un point focal. Votre image s’adapte ainsi à partir de ce point focal aux différentes tailles d'écran.

Cartes web

Affiche les cartes Web sur votre site. Les cartes Web peuvent être partagées de manière privée. Seuls les membres de l’équipe ou de l’organisation sont en mesure d’y accéder quand ils ont ouvert une session.

  1. Faites glisser une fiche Web Map (Carte web) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Cliquez sur Find a web map (Rechercher une carte Web).
  4. Recherchez une carte Web en recherchant My Maps (Mes cartes), My Organization's Maps (Mes cartes d’organisation) ou All Maps (Toutes les cartes).
  5. Pour afficher un titre pour votre carte, cliquez sur le bouton de bascule en regard de Title (Titre).
  6. Définissez une Height (Hauteur) (en pixels) pour votre carte.

Fiche texte

Mettez en forme le texte, ajoutez des listes et insérez des tables. Vous pouvez également utiliser un code HTML personnalisé.

  1. Faites glisser une fiche Text (Texte) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Ajoutez un texte.
  4. Sélectionnez le texte à mettre en forme. Les options de mise en forme incluent le style (ajout d’en-têtes, d’extraits de code et de guillemets), la mise en gras, en italique et les liens.
  5. Pour ajuster l’alignement du texte, cliquez sur les options de paragraphe et choisissez un alignement. Vous pouvez modifier l’indentation d’une ligne de texte en choisissant l’option de paragraphe et en sélectionnant le retrait positif ou négatif.
Remarque :

La couleur du texte peut être changée dans les paramètres de la fiche ligne.

Ajouter une liste à puces ou une liste numérotée

  1. Ajoutez du texte ou sélectionnez un texte existant.
  2. Choisissez la liste non triée pour créer une liste à puces.
  3. Choisissez la liste triée pour ajouter une liste numérotée.

Insérer un tableau

  1. Cliquez sur l’option de table.
  2. Sélectionnez le nombre de cellules que vous désirez par ligne et par colonne.
  3. Lorsque vous avez sélectionné les dimensions de votre table, cliquez pour l’insérer. Ajoutez ou supprimez des lignes/des colonnes en cliquant à l’intérieur d’une cellule et en choisissant le bouton d’insertion ou de suppression des lignes/des colonnes. Cliquez sur le bouton de suppression pour supprimer entièrement la table.
Remarque :

Pour ajouter un en-tête à la table, cliquez sur la ligne supérieure de la table, puis sur le bouton permettant d’activer/de désactiver l’en-tête de la table. Les en-têtes facilitent l’exploration du contenu des tables par les personnes recourant aux technologies d’assistance.

Insérer des boutons et des fiches

  1. Cliquez sur le bouton Insert (Insérer).
  2. Choisissez l’une des options suivantes :
    • Button (Bouton) : invite à l’action en fournissant des liens permettant d’obtenir plus d’informations.
    • Wide Card (Fiche large) : insérez une fiche unique pour afficher le contenu, établir un lien vers des informations supplémentaires et afficher une image.
    • Cards (Fiche) : insérez plusieurs fiches.
Remarque :

Il est possible de mettre à jour les images en fournissant un lien renvoyant à une image hébergée figurant dans l’affichage du code de la fiche.

Ajouter du code HTML

Vous pouvez utiliser le code HTML pour personnaliser l’apparence de votre texte.

  1. Faites glisser une fiche Text (Texte) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Cliquez sur l’option Code View (Afficher le code).
Attention :

Pour des raisons de sécurité, les fiches texte ne prennent pas en charge le JavaScript intégré. Les balises de script sont ignorées.

Les éléments HTML autorisés sont les suivants :

'a', 'b', 'blockquote', 'br', 'caption', 'cite', 'code', 'col',
 'colgroup', 'dd', 'dl', 'dt', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
 'i', 'img', 'li', 'ol', 'p', 'pre', 'q', 'small', 'strike', 'strong',
 'sub', 'sup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'u',
 'ul', 'center', 'style', 'div', 'span'

Les attributs suivants pour ces éléments sont autorisés :


 All supported HTML elements allow : ['class', 'style'], 'a' : ['href', 'title', 'target', 'data-toggle', 'data-target', 'name'], 'blockquote': ['cite'],	'button'    : ['name', 'value', 'data-toggle', 'data-target', 'data-dismiss'], 'col' : ['span', 'width'], 'colgroup' : ['span', 'width'],	'div' : ['data-show', 'data-target', 'data-toggle'] 'img' : ['align', 'alt', 'height', 'src', 'title', 'width' ], 'ol' : ['start', 'type'], 'q' : ['cite'], 'table' : ['summary', 'width', 'class'], 'td' : ['abbr', 'axis', 'colspan', 'rowspan', 'width'], 'th' : ['abbr', 'axis', 'colspan', 'rowspan', 'scope', 'width'],
 'ul' : ['type']

Fiche catégorie

Utilisez les catégories pour regrouper des jeux de données sur votre site afin que les utilisateurs puissent accéder rapidement au contenu disponible.

  1. Faites glisser une fiche Category (Catégorie) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Modifiez le texte du lien pour votre catégorie.
  4. Sélectionnez Use Tag Query (Utiliser une requête de balise) ou Use Group (Utiliser un groupe).

    Ceci détermine quels jeux de données s'affichent dans les résultats de recherche si les utilisateurs cliquent sur cette catégorie.

    • Tag (Balise) : Entrez une requête de balise. .Tous les jeux de données dont l'élément de portail Enterprise possède la balise recherchée apparaîtront dans les résultats de recherche.
    • Group (groupe) : Sélectionnez un groupe. Tous les jeux de données de ce groupe apparaitront dans les résultats de recherche.
  5. Choisissez une icône dans la bibliothèque :
    1. Sélectionnez Pick an Icon (Choisir une icône).
    2. Choisissez une icône depuis le modal et cliquez sur Select (Sélectionner).

      L'icône apparaît dans le panneau latéral.

    3. Cliquez sur la case grise à droite de l'icône pour sélectionner la couleur de l'icône.
  6. Utiliser votre propre icône :
    1. Indiquez une URL pour votre icône.
    2. Ajoutez un texte alternatif pour aider les utilisateurs non-voyants à reconnaître l'icône et améliorer l'accessibilité de votre site.
  7. Cliquez sur Back to Site Editor (Retour à l'éditeur de site) pour revenir au panneau latéral principal.
Astuce:

Les icônes personnalisées doivent être enregistrées dans un fichier .svg ou dans un fichier .png transparent. Les images seront mises à l'échelle pour correspondre à une dimension de 120x120 pixels.

Fiche coordonnées

Indiquez les informations de contact pour envoyer un e-mail au propriétaire des données.

  1. Faites glisser une fiche Contact Info (Coordonnées) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Indiquez l'adresse e-mail du contact et remplissez la ligne d'objet de l'e-mail.

    Lorsque les utilisateurs cliquent sur l'e-mail de votre page d'accueil, leur éditeur d'e-mail s'ouvre automatiquement.

  4. Cliquez sur Back to Site Editor (Retour à l'éditeur de site) pour revenir au panneau latéral principal.

Fiche bibliothèque

Utilisez la fiche bibliothèque pour présenter les applications, tableaux de bord, jeux de données, sites, pages, cartes Web et documents. La fiche bibliothèque extrait automatiquement ces éléments des groupes ArcGIS Online de votre organisation. Lorsque vous ajoutez le contenu à votre organisation ou à un groupe particulier, de nouvelles tuiles d'application s'affichent sur votre site sans modifier la mise en page.

  1. Faites glisser une fiche Gallery (Bibliothèque) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Pour sélectionner ce qui s'affiche sur vos fiches, cliquez sur le menu déroulant Display (Affichage) et choisissez d'afficher le contenu par type ou de sélectionner chaque élément manuellement.
    • Pour afficher le contenu selon le type, cliquez sur Dynamic (Dynamique), puis choisissez Apps (Applications), Dashboards (Tableaux de bord), Datasets (Jeux de données), Sites (Sites), Pages (Pages), Web Maps (Cartes Web) ou Documents (Documents). Définissez des paramètres supplémentaires, dont Cards Shown (Fiches affichées) pour sélectionner le nombre de fiches à répertorier à l'écran, mais aussi pour indiquer à partir de quel groupe ou de quelle balise les requêtes de fiches seront effectuées.
      Astuce:

      L’option Apps (Applications) comprend les éléments suivants : des applications, des formulaires (Survey123) et des applications cartographiques web. Parmi les types de Document (Documents) pris en charge figurent les suivants : PDF, Microsoft Excel, Microsoft PowerPoint, iWork Keynote, iWork Pages, iWork Documents et Visio Documents.

    • Pour afficher une association de contenus, cliquez sur Manual (Manuelle), puis sélectionnez chaque contenu en cliquant sur Add Content (Ajouter un contenu) et en choisissant la combinaison souhaitée d'applications, de jeux de données, de sites et de pages appartenant à votre organisation.
      Astuce:

      Si vous avez choisi l’affichage manuel, vous pouvez réorganiser la présentation des fiches dans la mise en page en modifiant la liste des fiches dans l’éditeur de site (Site Editor). Cliquez sur le nom d’une fiche pour la faire glisser et la déposer à sa nouvelle position dans la liste.

  4. Dans le menu déroulant Style, définissez l'apparence des fiches de la bibliothèque à l'aide des options suivantes :
    • Image : choisissez d'afficher des icônes ou des miniatures. ArcGIS Onlineéditeur de site (option Site Editor)SitesArcGIS OnlineMy Content (Mon contenu)Edit Thumbnail (Modifier la miniature)ArcGIS Onlinedétails de l’élémentContent (Contenu)Overview (Aperçu)Edit Thumbnail (Modifier la miniature)détails de l’élément
    • Corners (Angles) : choisissez d’afficher des angles droits ou arrondis.
    • Button Text (Texte du bouton) : éventuellement, renommez le bouton Explore (Explorer) en saisissant un nouveau nom dans la zone de texte.

Fiche iframe

Iframes intégrés et ressources externes.

Attention :

N’intégrez pas le code iframe provenant d'un autre site web. Collez uniquement dans l'URL que vous voulez intégrer.

  1. Faites glisser une fiche iframe dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Indiquez votre URL iframe et la hauteur iframe.
  4. Ajoutez un titre à votre iframe.
  5. Activez le défilement en réglant l’option correspondante sur Auto.
  6. Cliquez sur Apply (Appliquer).
Remarque :

Les URL des iframes en HTTP n'apparaissent pas dans l'éditeur de site (Site Editor), qui est exécuté en HTTPS. Enregistrez et affichez votre site pour voir votre iframe.

Fiche vidéo

Ajoutez des fiches vidéo pour incorporer des vidéos YouTube, Vimeo ou Facebook.

  1. Faites glisser une fiche Media (Contenu multimédia) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Collez l’URL d’une vidéo de Facebook, de Vimeo ou de YouTube dans le champ Video URL (URL de la vidéo).
  4. En fonction de la source vidéo, des options supplémentaires s’affichent et vous permettent de configurer l’affichage vidéo :
    • Pour les vidéos Facebook, sélectionnez Show Post Text (Afficher le texte de la publication) afin d’afficher le nombre de mentions « J’aime », de commentaires, de partages et tout autre texte associé. Sélectionnez Show Captions Always (Toujours afficher les légendes) pour afficher les sous-titres des vidéos.
    • Pour les vidéos Vimeo, sélectionnez Show Video Title (Afficher le titre de la vidéo), Show Video Owner (Afficher le propriétaire de la vidéo), Show Video Owner Thumbnail (Afficher la miniature du propriétaire de la vidéo) et Loop Video Playback (Lecture vidéo en boucle).
    • Pour les vidéos YouTube, sélectionnez Show YouTube Branding (Afficher la personnalisation YouTube) et Loop Video Playback (Lecture vidéo en boucle).
  5. Cliquez sur le bouton de copie en regard du champ Video URL (URL de la vidéo) pour enregistrer le lien dans le Presse-papiers afin de pouvoir le réutiliser ailleurs dans l’application.

Fiche réseau social

Partagez des messages et des chronologies publiés sur les réseaux sociaux directement sur vos sites à l’aide d’URL.

Publication Facebook

Affichez une seule publication pour mettre en valeur un fait spécifique.

  1. Faites glisser une fiche Social Media (Réseau social) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Dans le champ Social Media Post URL (URL des publications sur les médias sociaux), collez l’URL d’une publication Facebook partagée publiquement. Pour vous assurer que l’URL copiée est correcte, cliquez sur l’horodatage de la publication (date ou heure dans l’angle supérieur gauche de la publication), puis copiez la nouvelle URL dans le navigateur avant de revenir à la mise à jour de votre site.
  4. Vous pouvez également cliquer sur le bouton de bascule de Show Post Text (Afficher le texte de la publication) pour afficher le texte associé à la publication.

Journal Facebook

Affichez les éléments constitutifs d’une page Facebook - Journal, Événements et Messages - pour élargir votre champ d'exploration.

  1. Faites glisser une fiche Social Media (Réseau social) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Dans le champ Social Media Post URL (URL des publications sur les médias sociaux), collez l’URL d’une page Facebook partagée publiquement.
  4. Vous pouvez aussi cliquer sur les boutons de bascule d’une ou plusieurs des options suivantes :
    • Facebook Page Tabs (Onglets des pages Facebook) : permet d’afficher un onglet Timeline (Journal) sous l’en-tête de la page. Cliquez sur cette option si vous souhaitez partager votre journal en même temps que des Événements et/ou des Messages.
    • Events (Événements) : permet d’afficher uniquement les événements de la page dans une vue Liste.
    • Messages : permet à tout utilisateur de saisir et d'envoyer un message à l’administrateur de la page Facebook via Facebook Messenger.
    • Use Large Header (Utiliser un grand en-tête) : permet d'augmenter la taille de l'en-tête de la page et d'y ajouter un bouton Send Message (Envoyer un message) donnant accès à Facebook Messenger.
    • Show Cover Photo (Afficher la photo de couverture) : permet d’afficher la photo de couverture de la page.

Message Twitter

Affichez un seul message Twitter pour mettre en valeur un tweet spécifique.

  1. Faites glisser une fiche Social Media (Réseau social) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Dans le champ Social Media Post URL (URL des publications sur les médias sociaux), collez l’URL d’un message Twitter partagé publiquement. Pour obtenir le lien vers un tweet, cliquez sur l’icône des options supplémentaires située dans l’angle supérieur droit du message, puis sélectionnez Copy Link to Tweet (Copier le lien du Tweet).
  4. Vous pouvez aussi cliquer sur les boutons de bascule d’une ou plusieurs des options suivantes dans le menu Options :
    • Show Dark Theme (Afficher le thème foncé) : permet d’inverser la couleur de l’affichage.
    • Select Tweet Width (Sélectionner la largeur du tweet) : sélectionnez la taille du message à afficher. Vous pouvez choisir l’une des options suivantes : Small (Petite), Medium (Moyenne) et Large (Grande).
  5. Select Tweet Position (Sélectionner la position du tweet) : choisissez l’une des options d'alignement pour votre message - Left (Gauche), Center (Centrer) ou Right (Droit).

Fil Twitter

Affichez un fil Twitter avec défilement.

  1. Faites glisser une fiche Social Media (Réseau social) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Dans le champ Social Media Post URL (URL des publications sur les médias sociaux), collez l’URL d’un fil Twitter partagé publiquement.
  4. Vous pouvez aussi cliquer sur les boutons de bascule d’une ou plusieurs des options suivantes dans le menu Options :
    • Select Collection Height (Sélectionner la hauteur de collection) : sélectionnez Default (Par défaut) pour conserver l'affichage actuel ou sélectionnez Expanded (Développé) pour afficher une vue étendue de votre fil.
    • Tweet Limit (Nombre limite de tweets) : permet de définir le nombre de tweets affichés dans votre fil.
    • Show Dark Theme (Afficher le thème foncé) : permet d’inverser la couleur de l’affichage.
    • Show Header (Afficher l’en-tête) : permet d’afficher un en-tête. De la même façon, sélectionnez Show Footer (Afficher le pied de page) pour afficher un pied de page.
    • Show Border (Afficher la bordure) : permet d'encadrer le fil avec une bordure.
    • Show Background (Afficher l'arrière-plan) : permet de supprimer l'arrière-plan.

Collection Twitter

Affichez une collection Twitter sur votre site. Pour plus d’informations sur la création de collections Twitter, reportez-vous à la documentation dédiée aux développeurs Twitter pour apprendre à Organiser une collection de tweets.

  1. Faites glisser une fiche Social Media (Réseau social) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Dans le champ Social Media Post URL (URL des publications sur les médias sociaux), collez l’URL d’une collection Twitter partagée publiquement.
  4. Vous pouvez aussi cliquer sur les boutons de bascule d’une ou plusieurs des options suivantes dans le menu Options :
    • Tweet Limit (Nombre limite de tweets) : permet de fixer la limite du nombre de tweets apparaissant dans la collection.
    • Expanded Height (Hauteur étendue) : permet de présenter davantage d’éléments dans la collection.
    • Show Dark Theme (Afficher le thème foncé) : permet d’afficher le texte en blanc et d’appliquer un arrière-plan gris foncé.
    • Show Header (Afficher l’en-tête) : permet d’afficher le titre de la collection. De la même façon, sélectionnez Show Footer (Afficher le pied de page) pour afficher un pied de page qui contient des liens renvoyant à Embed (Incorporer) ou View on Twitter (Afficher sur Twitter).
    • Show Border (Afficher la bordure) : permet d’afficher une bordure autour de la fiche.
    • Show Background (Afficher l’arrière-plan) : applique un arrière-plan de couleur blanche à la fiche. Si Show Dark Theme (Afficher le thème foncé) est également sélectionné, un arrière-plan gris foncé est appliqué.

Fiche résumé statistique

Utilisez les statistiques de synthèse pour entrer les données en un clin d'œil sur les principaux indicateurs de performance et autres. Les statistiques de synthèse sont générées par une requête de jeu de données et sont automatiquement mises à jour au fur et à mesure de la mise à jour du jeu de données. Seules les personnes autorisées ont accès aux statistiques de synthèse générées à l'aide de données partagées en interne.

  1. Faites glisser une fiche Summary Statistic (Résumé statistique) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Cliquez sur (+) Add Data ([+] Ajouter des données) pour ouvrir un sélecteur d’éléments afin de trouver le service de données de votre choix. Lors de la mise à jour du site, le lien source en dessous de vos statistiques vous dirigera jusqu’à la page des détails des éléments pour la page d'aperçu du jeu de données.
  4. Dans Statistic Field (Champ de statistique), choisissez un champ à partir du service sélectionné. Ce champ sera utilisé dans les étapes ultérieures.
  5. Dans Statistic Type (Type de statistique), choisissez le type d'opération à effectuer dans le champ sélectionné.
    • Pour les champs de texte et de date, choisissez entre total, minimum ou maximum.
    • Pour les champs numériques, choisissez entre total, somme, minimum, maximum, écart type moyen ou variance.
  6. Vous pouvez ajouter un filtre à vos statistiques :
    1. Sélectionnez un attribut à utiliser pour votre filtre.
    2. Sélectionnez Ajouter.
    3. Sélectionnez la nouvelle fenêtre d'attributs pour afficher l'attribut du filtre. La zone de saisie varie selon le type de champ.
    4. Entrez le filtre que vous souhaitez.
    5. Cliquez hors de la zone de filtre ou appuyez sur Entrée sur votre clavier.
  7. Saisissez un titre dans la zone de texte Title (Titre).
  8. Vous avez également la possibilité de saisir du texte dans Trailing Text (Texte de fin) pour fournir des précisions sur la statistique et de modifier le paramètre Accent Color (Couleur d'accentuation) de la statistique.

Fiche diagramme

Créez des diagrammes simples directement depuis vos jeux de données, ou entrez votre propre diagramme JSON pour créer un diagramme personnalisé. Les diagrammes créés avec des données partagées de manière privée seront visibles uniquement des utilisateurs ayant accès à votre équipe ou à votre organisation lors de la connexion.

Diagramme en barres

Les diagrammes à barres sont créés à partir des requêtes vers un jeu de données sélectionné et sont automatiquement mis à jour lorsque vous mettez à jour votre jeu de données.

  1. Faites glisser une fiche Chart (Diagramme) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Par défaut, l'option Bar Chart (Diagramme à barres) est sélectionnée.
  4. Cliquez sur (+) Add Data [(+)Ajouter des données].
  5. Sélectionnez un élément parmi les services de données disponibles.
  6. Dans Choose Category Attribute (Choisir un attribut de catégorie), sélectionnez dans vos données l’élément de diagramme principal.

    Les champs de type numérique et chaîne peuvent être utilisés dans les diagrammes. Par défaut, lorsque vous sélectionnez un attribut de catégorie, le diagramme généré sera un nombre total de cet attribut.

  7. L’option Choose Value Attribute (Choisir un attribut de valeur) permet de sélectionner un champ numérique utilisé comme métrique de valeur pour votre attribut de catégorie. Une fois sélectionnée, l’opération statistique par défaut de ce champ est Somme. Vous pouvez modifier le paramètre Statistical Operation (Opération statistique) à l’aide du menu déroulant situé à droite du sélecteur Choose Value Attribute (Choisir un attribut de valeur). L’attribut de valeur prend en charge les valeurs suivantes : Min, Max, Somme, Moyenne, et Total. Sélectionner Total désélectionne l'attribut de valeur (aucun champ supplémentaire n’est requis pour comptabiliser l’attribut de catégorie).

    Les champs de type numérique et chaîne peuvent être utilisés dans les diagrammes. Par défaut, lorsque vous sélectionnez un attribut de catégorie, le diagramme généré sera un nombre total de cet attribut.

  8. Cliquez sur le menu Options (Options) pour personnaliser l'affichage de votre diagramme avec les paramètres suivants :
    • L'option Sort (Tri) vous permet de choisir comment vos données attributaires sont affichées. Sélectionnez un attribut, puis sélectionnez l’icône de tri en regard de l'attribut pour afficher les données dans l’ordre croissant ou décroissant.
    • Définissez une valeur de hauteur (pixels) pour votre diagramme dans le champ de texte Height (px) (Hauteur (px)).
    • Choisissez d'afficher un titre pour votre diagramme en cliquant sur le bouton de bascule en regard de Chart Title (Titre du diagramme). Si vous affichez un titre, saisissez son nom dans le champ textuel fourni et choisissez un alignement.
    • Définissez Primary Chart Color (Couleur du diagramme principal) en saisissant un code couleur ou cliquez sur le sélecteur de couleurs pour choisir une couleur.
    • Fournissez le texte pour les champs Category Label (Étiquette de catégorie) et Value Label (Étiquette de valeur).

Diagramme à secteurs

Les diagrammes à secteurs sont créés à partir des requêtes vers un jeu de données sélectionné et sont automatiquement mis à jour lorsque vous mettez à jour votre jeu de données.

  1. Faites glisser une fiche Chart (Diagramme) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Sélectionnez le diagramme à secteurs en cliquant sur le bouton circulaire du diagramme à secteurs.
  4. Cliquez sur (+) Add Data [(+)Ajouter des données].
  5. Sélectionnez un élément parmi les services de données disponibles.
  6. Dans Choose Category Attribute (Choisir un attribut de catégorie), sélectionnez dans vos données l’élément de diagramme principal.

    Les champs de type numérique et chaîne peuvent être utilisés dans les diagrammes. Par défaut, lorsque vous sélectionnez un attribut de catégorie, le diagramme généré sera un nombre total de cet attribut.

  7. Dans Choose Value Attribute (Choisir un attribut de valeur), vous pouvez également sélectionner un champ numérique à utiliser comme métrique de valeur pour votre attribut de catégorie. Une fois sélectionnée, l’opération statistique par défaut de ce champ est Sum (Somme). Vous pouvez modifier le paramètre Statistical Operation (Opération statistique) en cliquant sur la flèche de liste déroulante située à droite du sélecteur Choose Value Attribute (Choisir un attribut de valeur). L'attribut de valeur prend en charge les valeurs suivantes : Min (Min), Max (Max), Sum (Somme), Average (Moyenne) et Count (Total). Si vous sélectionnez Count (Total), l'attribut de valeur est désélectionné (aucun champ supplémentaire n’est requis pour comptabiliser l’attribut de catégorie).

    Les champs de type numérique et chaîne peuvent être utilisés dans les diagrammes. Par défaut, lorsque vous sélectionnez un attribut de catégorie, le diagramme généré sera un nombre total de cet attribut.

  8. Cliquez sur le menu Options (Options) pour personnaliser l'affichage de votre diagramme avec les paramètres suivants :
    • L'option Sort (Tri) vous permet de choisir comment vos données attributaires sont affichées. Sélectionnez un attribut, puis sélectionnez l’icône de tri en regard de l'attribut pour afficher les données dans l’ordre croissant ou décroissant.
    • Définissez une valeur de hauteur (pixels) pour votre diagramme dans le champ de texte Height (px) (Hauteur (px)).
    • Choisissez d'afficher un titre pour votre diagramme en cliquant sur le bouton de bascule en regard de Chart Title (Titre du diagramme). Si vous affichez un titre, saisissez son nom dans le champ textuel fourni et choisissez un alignement.
    • Définissez un texte Category Label (Étiquette de catégorie) pour l’étiquette de chaque secteur dans l’info-bulle et le texte Value Label (Étiquette de valeur) pour l’étiquette de la mesure dans l’info-bulle.

Diagramme linéaire

Les diagrammes linéaires sont créés à partir des requêtes vers un jeu de données sélectionné et sont automatiquement mis à jour lorsque vous mettez à jour votre jeu de données.

  1. Faites glisser une fiche Chart (Diagramme) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Sélectionnez le diagramme linéaire en cliquant sur le bouton du diagramme linéaire.
  4. Cliquez sur (+) Add Data [(+)Ajouter des données].
  5. Sélectionnez un élément parmi les services de données disponibles.
  6. Dans Choose Category Attribute (Choisir un attribut de catégorie), sélectionnez dans vos données l’élément de diagramme principal.

    Les champs de type numérique et chaîne peuvent être utilisés dans les diagrammes. Par défaut, lorsque vous sélectionnez un attribut de catégorie, le diagramme généré sera un nombre total de cet attribut.

  7. Dans Choose Value Attribute (Choisir un attribut de valeur), vous pouvez également sélectionner un champ numérique à utiliser comme métrique de valeur pour votre attribut de catégorie. Une fois sélectionnée, l’opération statistique par défaut de ce champ est Sum (Somme). Vous pouvez modifier le paramètre Statistical Operation (Opération statistique) en cliquant sur la flèche de liste déroulante située à droite du sélecteur Choose Value Attribute (Choisir un attribut de valeur). L'attribut de valeur prend en charge les valeurs suivantes : Min (Min), Max (Max), Sum (Somme), Average (Moyenne) et Count (Total). Si vous sélectionnez Count (Total), l'attribut de valeur est désélectionné (aucun champ supplémentaire n’est requis pour comptabiliser l’attribut de catégorie).

    Les champs de type numérique et chaîne peuvent être utilisés dans les diagrammes. Par défaut, lorsque vous sélectionnez un attribut de catégorie, le diagramme généré sera un nombre total de cet attribut.

  8. Cliquez sur le menu Options (Options) pour personnaliser l'affichage de votre diagramme avec les paramètres suivants :
    • L'option Sort (Tri) vous permet de choisir comment vos données attributaires sont affichées. Sélectionnez un attribut, puis sélectionnez l’icône de tri en regard de l'attribut pour afficher les données dans l’ordre croissant ou décroissant.
    • Définissez une valeur de hauteur (pixels) pour votre diagramme dans le champ de texte Height (px) (Hauteur (px)).
    • Choisissez d'afficher un titre pour votre diagramme en cliquant sur le bouton de bascule en regard de Chart Title (Titre du diagramme). Si vous affichez un titre, saisissez son nom dans le champ textuel fourni et choisissez un alignement.
    • Définissez Primary Chart Color (Couleur du diagramme principal) en saisissant un code couleur ou cliquez sur le sélecteur de couleurs pour choisir une couleur.
    • Définissez un texte Category Label (Étiquette de catégorie) pour l’étiquette de chaque point dans l’info-bulle et le texte Value Label (Étiquette de valeur) pour l’étiquette de la mesure dans l’info-bulle

Nuage de points

Les nuages de points sont créés à partir des requêtes vers un jeu de données sélectionné et sont automatiquement mis à jour lorsque vous mettez à jour votre jeu de données.

  1. Faites glisser une fiche Chart (Diagramme) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Sélectionnez le diagramme linéaire en cliquant sur le bouton du nuage à points.
  4. Cliquez sur (+) Add Data [(+)Ajouter des données].
  5. Sélectionnez un élément parmi les services de données disponibles.
  6. Dans Choose X Axis Attribute (Choisir un attribut de l'axe X), sélectionnez dans vos données l’élément de diagramme principal.

    Les champs de type numérique et chaîne peuvent être utilisés dans les diagrammes. Par défaut, lorsque vous sélectionnez un attribut de catégorie, le diagramme généré sera un nombre total de cet attribut.

  7. Sélectionnez un attribut pour le champ Choose Y Axis Attribute (Choisir un attribut de l'axe Y). Vous pouvez également sélectionner un champ numérique à utiliser comme métrique de valeur pour votre attribut de catégorie.

    Les champs de type numérique et chaîne peuvent être utilisés dans les diagrammes. Par défaut, lorsque vous sélectionnez un attribut de catégorie, le diagramme généré sera un nombre total de cet attribut.

  8. Cliquez sur le menu Options (Options) pour personnaliser l'affichage de votre diagramme avec les paramètres suivants :
    • L'option Sort (Tri) vous permet de choisir comment vos données attributaires sont affichées. Sélectionnez un attribut, puis sélectionnez l’icône de tri en regard de l'attribut pour afficher les données dans l’ordre croissant ou décroissant.
    • Définissez une valeur de hauteur (pixels) pour votre diagramme dans le champ de texte Height (px) (Hauteur (px)).
    • Choisissez d'afficher un titre pour votre diagramme en cliquant sur le bouton de bascule en regard de Chart Title (Titre du diagramme). Si vous affichez un titre, saisissez son nom dans le champ textuel fourni et choisissez un alignement.
    • Définissez Primary Chart Color (Couleur du diagramme principal) en saisissant un code couleur ou cliquez sur le sélecteur de couleurs pour choisir une couleur.
    • Définissez une X Axis Label (Étiquette de l'axe X) et une Y Axis Label (Étiquette de l’axe Y) à afficher sur votre diagramme.

Diagramme JSON

Les diagrammes personnalisés sont créés à partir de JSON à l'aide d'une spécification de diagramme spécifique.

  1. Faites glisser une fiche Chart (Diagramme) dans une ligne existante.
  2. Positionnez le curseur sur la fiche, puis cliquez sur le bouton des paramètres pour passer en mode de mise à jour.
  3. Sélectionnez la tuile JSON.
  4. Entrez votre JSON dans le champ JSON Chart Specification (Spécification du diagramme JSON).
  5. Vous avez également la possibilité, dans la section Options, d'activer/désactiver et de personnaliser les paramètres Chart Title (Titre du diagramme) et Height (Hauteur) (en pixels).

Spécification JSON

Personnaliser JSON vous permet de créer des diagrammes personnalisés qui exploitent la bibliothèque Cedar. Une spécification est créée à partir des composants suivants :

(Datasets) Jeux de données

Le tableau des jeux de données indique l'URL du service d'entités de ArcGIS et les paramètres de requête. Consultez la documentation REST API pour en savoir plus sur les paramètres de requête.

{ "datasets": [ { "url": "SampleArcGISFeatureService_URL", "name" : "Number_of_SUM",
"query": { "groupByFieldsForStatistics": "Zip", "outStatistics": [{
"statisticType": "sum", "onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM" }] } } ]
}

(Series) Série

Le tableau Série vous permet de préciser les appariements entre les champs de la réponse du service et les aspects visuels du diagramme (axes x,y, couleur et taille des diagrammes de nuages de points et rayon des diagrammes à secteurs).

{ "series": [ { "source": "Number_of_SUM", "category": { "field": "Type", "label": "Facility
Use" }, "value": { "field":"Number_of_SUM","label":"Total Students" }} ] }

Overrides (Remplacements)

La propriété de remplacement vous permet de préciser les effets visuels comme la couleur ou le positionnement, pour tout le diagramme.

"overrides": {
      "legend": {
          "enabled": true
      },
      "backgroundColor": "#E6E6FA",
      "backgroundAlpha": 1
  }
}

Spécification

La propriété Spécification vous permet de saisir une spécification Cedar complète pour obtenir un diagramme entièrement personnalisé. Voir des exemples des spécifications d'un diagramme existant.

Exemples

Diagramme à barres :
{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Number_of_SUM",
      "query": {
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [
          {
            "statisticType": "sum",
            "onStatisticField": "Number_of",
            "outStatisticFieldName": "Number_of_SUM"
          }
        ]
      }
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": {"field": "Number_of_SUM", "label": "Number of Students"},
      "source": "Number_of_SUM"
    }
  ]
}

Diagramme à barres horizontales :
{
  "type": "bar-horizontal",  "datasets": [    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",      "name": "Number_of_SUM",      "query": {
        "orderByFields": "Number_of_SUM DESC",        "groupByFieldsForStatistics": "Type",        "outStatistics": [          {
            "statisticType": "sum",            "onStatisticField": "Number_of",            "outStatisticFieldName": "Number_of_SUM"
          }
        ]      }
    }
  ],  "series": [    {
      "category": {"field": "Type", "label": "Type"},      "value": {"field": "Number_of_SUM", "label": "Number of Students"},      "source": "Number_of_SUM"
    }
  ],  "overrides": {
    "categoryAxis": {
      "labelRotation": -45    }
  }
}

Diagramme à barres groupées :

Note : Chaque série est appariée à un groupe.

{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Jordan",
      "query": {
        "where": "City='Jordan'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Dewitt",
      "query": {
        "where": "City='Dewitt'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Fayetteville",
      "query": {
        "where": "City='Fayetteville'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Jordan Students"},
      "source": "Jordan"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
      "source": "Dewitt"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
      "source": "Fayetteville"
    }
  ]
}

Diagramme de nuage de points :
{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Jordan",
      "query": {
        "where": "City='Jordan'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Dewitt",
      "query": {
        "where": "City='Dewitt'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Fayetteville",
      "query": {
        "where": "City='Fayetteville'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Jordan Students"},
      "source": "Jordan"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
      "source": "Dewitt"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
      "source": "Fayetteville"
    }
  ]
}

Diagramme à bulles, nuage de points :
{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Jordan",
      "query": {
        "where": "City='Jordan'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Dewitt",
      "query": {
        "where": "City='Dewitt'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Fayetteville",
      "query": {
        "where": "City='Fayetteville'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Jordan Students"},
      "source": "Jordan"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
      "source": "Dewitt"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
      "source": "Fayetteville"
    }
  ]
}

Diagramme chronologique :

Note : La catégorie doit être un champ date heure.

 {
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Jordan",
      "query": {
        "where": "City='Jordan'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Dewitt",
      "query": {
        "where": "City='Dewitt'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Fayetteville",
      "query": {
        "where": "City='Fayetteville'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Jordan Students"},
      "source": "Jordan"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
      "source": "Dewitt"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
      "source": "Fayetteville"
    }
  ]
}

Pied de page

Par défaut, l'éditeur de site (Site Editor) n'a pas de pied de page. Vous devez créer un pied de page personnalisé pour avoir un pied de page continu sur toutes les pages de votre site.

  1. Depuis la section Footer (Pied de page) , sélectionnez Custom (Personnaliser).

    Un pied de page par défaut s'affiche sur la page et une fenêtre CSS apparaît dans le panneau latéral.

  2. Pour mettre à jour le code HTML, cliquez sur le bouton des paramètres dans l’angle inférieur droit du pied de page.
  3. Cliquez une nouvelle fois sur le bouton des paramètres pour afficher vos modifications.
  4. Modifiez la fenêtre CSS dans le panneau latéral et cliquez sur Apply Changes (Appliquer les changements)pour visualiser les effets sur votre HTML.
Astuce:

Le pied de page HTML ne prend pas en charge le JavaScript intégré. Les balises de script sont ignorées.