Configurer une carte Web et l’utiliser pour créer un tableau de bord
Vous allez tout d’abord configurer une carte Web pour qu’elle serve de base à votre tableau de bord. Vous allez commencer avec une carte Web préexistante contenant déjà des emplacements de bornes de recharge pour véhicules électriques. Vous allez enregistrer une copie de la carte dans votre compte ArcGIS de façon à pouvoir l’éditer et créer un tableau de bord à partir de la carte.
Configurer une carte Web
Vous allez commencer par configurer des fenêtres contextuelles dans la carte qui seront réutilisées plus tard dans le tableau de bord.
- Ouvrez la carte Web Electric charging stations in Canada (Bornes de recharge électrique au Canada).
- Cliquez sur Sign In (Se connecter) et connectez-vous à l’aide de votre compte d’organisation ArcGIS.
Remarque :
Si vous ne disposez pas d’un compte d’organisation, consultez les options disponibles pour accéder aux logiciels.
Une carte s’ouvre, affichant les bornes de recharge pour véhicules électriques au Canada. Vous allez enregistrer une copie de cette carte avant de continuer.
- Si nécessaire, dans la barre d’outils Contents (Contenu) (foncée), en bas, cliquez sur le bouton Expand (Développer).
- Cliquez sur Save and open (Enregistrer et ouvrir) et sélectionnez Save As (Enregistrer sous).
- Dans la fenêtre Save map (Enregistrer la carte), pour Title (Titre), supprimer le texte -Copy.
- Cliquez sur Save (Enregistrer).
Vous pouvez maintenant éditer la carte. Vous allez commencer par afficher les couches disponibles pour savoir de quelles données vous disposez pour la création du tableau de bord.
- Dans la barre d’outils Contents (Contenu), cliquez sur Layers (Couches) pour ouvrir la fenêtre Layers (Couches).
Trois couches sont répertoriées dans la fenêtre Layers (Couches). Les points bleus visibles sur la carte représentent les Electric Charging Stations (Bornes de recharge électrique). Ces données émanent du gouvernement du Canada, du ministère des ressources naturelles du Canada, via ArcGIS Living Atlas of the World, et contiennent des informations sur l’emplacement et les attributs des bornes de recharge pour véhicules électriques. Il s’agit des données principales que vous utiliserez pour créer votre tableau de bord.
La couche OpenStreetMap Amenities for North America n’est pas visible sur la carte car elle est configurée pour n’être affichée qu’aux grandes échelles. Vous allez zoomer pour visualiser cette couche.
- Appliquez un zoom avant jusqu’à ce que d’autres symboles apparaissent sur la carte.
La couche OpenStreetMap fournit des informations de contexte aux utilisateurs qui recherchent une borne de recharge. Puisqu’il faut du temps pour recharger un véhicule, la proximité d’infrastructures telles que des restaurants, magasins, bibliothèques peut rendre une borne plus attractive. La couche des infrastructures ne s’affiche que lorsque l’utilisateur zoome sur la carte de façon à ce que celle-ci ne soit pas surchargée d’informations.
La troisième couche Provinces and Territories of Canada (Provinces et territoires du Canada) est désactivée. Vous utilisez cette couche plus tard pour configurer les actions spatiales dans le tableau de bord. L’affichage des limites ne sera pas utile aux utilisateurs, la couche ne sera donc jamais visible sur la carte, mais elle permettra de filtrer les bornes de recharge par province.
Vous allez ensuite configurer les fenêtres contextuelles de la couche Electric Charging Stations (Bornes de recharge électrique).
- Dans la fenêtre Layers (Couches), cliquez sur la couche Electric Charging Stations (Bornes de recharge électrique) pour la sélectionner.
- Développez la barre d’outils (claire) Settings (Paramètres) et cliquez sur Pop-ups (Fenêtres contextuelles).
Une fenêtre contextuelle d’exemple apparaît sur la carte.
Les fenêtres contextuelles permettent de résumer une entité cartographique. Par défaut, elles affichent tous les champs et toutes les valeurs d’une entité. La fenêtre contextuelle actuelle répertorie de nombreux champs, dont une grande partie sont vides. Les fenêtres contextuelles de cette couche seront visibles sur le tableau de bord que vous créez, vous allez donc les configurer de façon à inclure uniquement les informations utiles pour les personnes cherchant une borne de recharge.
- Dans la fenêtre Pop-ups (Fenêtres contextuelles), cliquez sur Title (Titre) et confirmez que le champ est vide.
Vous allez configurer le titre de l’entité non pas dans la fenêtre contextuelle, mais dans le tableau de bord.
- Cliquez sur Fields list (Liste des champs), puis sur Select fields (Sélectionner des champs).
- Dans la fenêtre Select fields (Sélectionner des champs), cliquez sur Deselect all (Tout désélectionner), pour désélectionner tous les champs.
- Cliquez sur le champ Station Name (Nom de la borne) pour le sélectionner.
Une coche apparaît en regard du champ et le champ s’affiche dans la fenêtre contextuelle d’exemple.
- Dans la fenêtre Select fields (Sélectionner des champs), cliquez sur Search fields (Rechercher des champs) et saisissez EV Connectors (Connecteurs VE). Dans les résultats de la recherche, cliquez sur le champ EV Connectors (Connecteurs VE) pour le sélectionner et l’ajouter à la fenêtre contextuelle.
- Recherchez et ajoutez les champs suivants :
- Adresse
- Téléphone de la borne
- Tarification VE
- Accès
- Jours et heure d’accès
- Cartes acceptées
- Date de dernière confirmation
- Cliquez sur Done (Terminé).
La fenêtre contextuelle d’exemple comprend neuf champs. Ils apparaissent selon l’ordre dans lequel ils ont été ajoutés.
- Fermez la fenêtre Pop-ups (Fenêtres contextuelles).
Créer un tableau de bord à partir de la carte Web
Vous allez ensuite enregistrer la carte Web et créer un tableau de bord à partir de celle-ci.
- Sur la carte, cliquez sur le bouton Default map view (Vue cartographique par défaut) pour revenir à la vue par défaut de la carte.
L’étendue actuelle de la carte au moment où vous l’enregistrez devient la nouvelle vue par défaut de la carte. Cette étendue par défaut est celle que les utilisateurs verront en premier en affichant le tableau de bord.
- Dans la barre d’outils Contents (Contenu), cliquez sur Save and open (Enregistrer et ouvrir), puis sur Save (Enregistrer) pour enregistrer la carte.
- Dans la barre d’outils Contents (Contenu), cliquez sur le bouton Create app (Créer une application) puis choisissez Dashboards (Tableaux de bord).
- Dans la fenêtre Create new dashboard (Créer un tableau de bord), saisissez les informations suivantes :
- Pour Title (Titre) saisissez Bornes de recharge pour véhicules électriques.
- Pour Tags (Balises), entrez véhicules électriques et appuyez sur Entrée.
- Pour Summary (Résumé), effacez le texte existant et entrez Ce tableau de bord permet de rechercher les bornes de recharge pour véhicules électriques à proximité.
- Cliquez sur Create dashboard (Créer un tableau de bord).
Le nouveau tableau de bord s’affiche. Il comporte un élément : la carte Web que vous avez configurée précédemment et qui occupe la totalité du tableau de bord.
Vous avez créé un tableau de bord à partir d’une carte Web. Pour l’instant, il n’a pas l’air différent de la carte, mais vous allez ensuite ajouter et configurer des éléments offrant davantage d’informations sur les bornes de recharge affichées sur la carte.
Configurer les éléments d’information du tableau de bord
Vous allez créer un tableau de bord permettant aux utilisateurs de voir l’emplacement des bornes de recharge au Canada. Vous allez ajouter un en-tête doté d’un titre, un indicateur affichant le nombre total de bornes, un tableau répertoriant les bornes pour une zone sélectionnée et des informations (à partir des fenêtres contextuelles configurées) sur les bornes sélectionnées.
Ajouter un en-tête
Vous allez commencer par ajouter un en-tête au tableau de bord. L’en-tête sert de titre au tableau de bord. Plus tard dans le didacticiel, vous configurerez également l’en-tête afin d’inclure des sélecteurs.
- En bas du tableau de bord, cliquez sur le bouton Expand (Développer).
- Dans la barre d’outils, cliquez sur le bouton View (Afficher) pour ouvrir la fenêtre View (Afficher).
Vous pouvez organiser tous les éléments du tableau de bord dans cette fenêtre.
- Cliquez sur l’onglet Header (En-tête), puis sur Add header (Ajouter un en-tête).
La fenêtre de configuration Header (En-tête) s’ouvre, avec les paramètres à gauche et un aperçu sur la droite.
- Pour Title (Titre) saisissez Bornes de recharge pour véhicules électriques.
Par défaut, l’élément d’en-tête inclut un menu avec une option pour se déconnecter. Ce tableau de bord étant conçu pour être accessible publiquement, il ne sera pas nécessaire pour les utilisateurs de se connecter, ni de se déconnecter. Vous allez supprimer ce menu.
- Développez la section Menu links (Liens du menu) et désactivez l’option Sign out (Se déconnecter).
- Cliquez sur Done (Terminé).
L’en-tête apparaît au-dessus de la carte dans le tableau de bord.
Ajouter un indicateur pour les bornes actives
Vous allez ensuite ajouter un indicateur résumant le nombre de bornes de recharge actives au Canada. Plus tard dans le didacticiel, vous configurerez l’indicateur de façon à ce que le chiffre affiché réponde aux filtres choisis par l’utilisateur.
- Dans la barre d’outils, cliquez sur Add element (Ajouter un élément).
Lorsque le bouton Add element (Ajouter un élément) devient bleu, les couleurs sur la carte s’estompent et des boutons Add (Ajouter) apparaissent sur les bords de la carte. Vous pouvez ajouter des éléments via la fenêtre Layout (Mise en page) comme vous l’avez fait pour l’en-tête, mais la méthode Add element (Ajouter un élément) vous permet de spécifier la position des éléments lorsque vous les ajoutez.
- Sous la carte, cliquez sur le bouton Add (Ajouter), puis cliquez sur Indicator (Indicateur).
Dans la fenêtre Select a layer (Sélectionner une couche), vous êtes invité à choisir parmi les couches de la carte celle qui fournira les données à l’indicateur.
- Dans la fenêtre Select a layer (Sélectionner une couche), cliquez sur Electric Charging Stations (Bornes de recharge électrique).
L’aperçu de l’indicteur s’ouvre.
Par défaut, la valeur de l’indicateur correspond au nombre d’entités dans la source de données. Dans le cas présent, la valeur correspond au nombre total de bornes actives au Canada. La couche étant mise à jour quotidiennement, le chiffre de l’aperçu peut être différent de celui visible dans les images de ce didacticiel.
L’indicateur n’offre aucune information de contexte expliquant à quoi ce chiffre correspond. Vous allez ajouter des étiquettes pour expliquer à quoi il correspond.
- Cliquez sur l’onglet Indicator (Indicateur). Pour Bottom Text (Texte inférieur), saisissez Operational stations (Bornes actives).
- Cliquez sur Add icon (Ajouter un icône).
- Développez Miscellaneous (Divers) et cliquez sur la coche dans un icône de cercle.
- Cliquez sur OK.
- Dans la fenêtre Indicator options (Options d’indicateur), vérifiez que Position est défini sur Left (Gauche).
Dans l’aperçu, l’icône apparaît en regard du chiffre. Vous allez modifier sa couleur pour qu’il corresponde aux symboles de la carte.
- Cliquez sur la couleur Fill (Remplissage). Pour Hex, saisissez 005ce6 et appuyez sur Entrée.
- Développez la section Value formatting (Mise en forme des valeurs) et désactivez Unit prefix (Préfixe d’unité).
L’aperçu affiche maintenant le nombre exact de bornes et non plus un chiffre arrondi.
Vous allez ensuite connecter l’élément indicateur aux autres éléments du tableau de bord, de façon à ce que le chiffre change en fonction des filtres appliqués par l’utilisateur. Vous allez pour l’instant donner un nom explicite à l’élément indicateur de façon à pouvoir l’identifier facilement plus tard lorsque vous configurerez les actions.
- Cliquez sur l'onglet Général.
- Dans le champ Name (Nom), saisissez Operational stations indicator (Indicateur de bornes actives).
- Cliquez sur Done (Terminé).
L’élément indicateur s’affiche sur le tableau de bord sous la carte. Sa taille est trop grande, mais elle changera à mesure que vous ajouterez d’autres éléments.
Ajouter une table
Une table est utile pour afficher les champs et les valeurs des données de manière organisée. Dans un tableau de bord interactif, une table peut également être la source d’une action. Par exemple, dans le tableau de bord, les utilisateurs sélectionneront les bornes dans la table pour afficher plus d’informations. Vous allez configurer une table de façon à afficher quelques champs clés donnant aux utilisateurs un aperçu rapide de la borne avant de décider s’ils veulent obtenir plus d’informations à son sujet.
- Dans la barre d’outils, cliquez sur Add element (Ajouter un élément).
- Pointez le curseur de la souris sur l’élément indicateur.
De nouveaux boutons Add (Ajouter) apparaissent au-dessus de l’indicateur.
- Cliquez sur le bouton Add (Ajouter) à gauche de l’indicateur. Cliquez sur Table.
- Dans la fenêtre Select a layer (Sélectionner une couche), cliquez sur Electric Charging Stations (Bornes de recharge électrique).
La fenêtre de configuration Table (Table) apparaît.
- Pour Table type (Type de table), sélectionnez Features (Entités).
- Pour Value fields (Champs de valeur), cliquez sur Add field (Ajouter un champ) et choisissez Station_Name.
Le champ Station Name (Nom de la borne) apparaît dans la liste Value fields (Champs de valeur) et comme première colonne dans la table d’aperçu.
La section Value fields (Champs de valeur) détermine les colonnes de la table, chaque ligne représentant une entité individuelle.
- Cliquez sur Add field (Ajouter un champ) quatre fois de plus et ajoutez les champs suivants :
- Street_Address
- Ville
- ZIP
- Facility_Type
La table d’aperçu se met à jour pour inclure les nouveaux champs.
- Cliquez sur l’onglet Table et activez Row striping (Rayures).
Les lignes de la table d’aperçu alternent maintenant entre blanc et gris pâle, rendant la table plus facile à lire.
Vous allez maintenant configurer l’aspect de l’en-tête de la table pour le faire davantage ressortir sur le tableau de bord
- Cliquez sur l’onglet Header (En-tête).
- Dans la section Label override (Remplacement de l’étiquette), retirez le trait de soulignement des étiquettes pour obtenir les étiquettes Station Name (Nom de la borne), Street Address (Adresse) et Facility Type (Type d’infrastructure).
- Définissez la valeur du champ Text color (Couleur du texte) sur #ffffff. Définissez la Background color (Couleur d’arrière-plan) sur #004da8.
La couleur de l’en-tête de la table devient bleu foncé avec un texte blanc.
L’aspect visuel de la table est maintenant configuré. Vous allez maintenant nommer la table pour pouvoir l’identifier plus facilement par la suite lorsque vous définirez des actions.
- Cliquez sur l'onglet Général. Dans le champ Name (Nom), saisissez Station table (Table des bornes).
Puisque vous allez configurer cette table de façon à ce que les informations ne s’affichent qu’après que l’utilisateur a sélectionné au moins un emplacement, vous allez également définir un texte à afficher lorsque aucune sélection n’est effectuée dans la table.
- Développez la section No selection (Aucune sélection) et en regard de Label (Étiquette), cliquez sur Edit (Mettre à jour).
- Dans l’éditeur de texte, cliquez sur le bouton Format, puis choisissez Heading 3 (En-tête 3).
- Dans l’éditeur de texte, saisissez Select a province to start viewing stations (Sélectionnez une province pour voir les emplacements des bornes).
- Cliquez sur Done (Terminé).
La table s’affiche en regard de l’indicateur sur le tableau de bord.
Ajouter un élément Détails
L’élément Détails affiche des informations sur les entités. Vous allez vous en servir pour afficher le contenu des fenêtres contextuelles des bornes de recharge que vous avez configurées précédemment dans la carte Web.
- Dans la barre d’outils, cliquez sur Add element (Ajouter un élément).
- Cliquez sur le bouton Add (Ajouter) sur la gauche du tableau de bord, puis cliquez sur Details (Détails).
- Dans la fenêtre Select a layer (Sélectionner une couche), choisissez Electric Charging Stations (Bornes de recharge électrique).
Un aperçu de l’élément Détails s’affiche. Il répertorie les mêmes champs que vous avez configurés précédemment pour la fenêtre contextuelle.
- Cliquez sur l'onglet Général. Pour Name (Nom), saisissez Station details (Détails de la borne).
- Pour Title (Titre), cliquez sur Edit (Mettre à jour).
- Cliquez sur le bouton Format et sélectionnez Heading 2 (En-tête 2). Saisissez Station details (Détails de la borne).
Le titre apparaît dans l’aperçu.
- Développez la section No selection (Aucune sélection). Pour Label (Étiquette), cliquez sur Edit (Mettre à jour).
- Cliquez sur le bouton Format et sélectionnez Heading 3 (En-tête 3). Saisissez Select a station to view details (Sélectionner une borne pour en afficher les détails).
Ce message s’affichera dans l’élément Détails lorsque aucune borne n’est sélectionnée.
- Cliquez sur Done (Terminé).
La fenêtre Détails apparaît sur le tableau de bord, à gauche des autres éléments. Elle occupe la moitié de la largeur du tableau de bord.
- Faites glisser le bord droit de la fenêtre Détails jusqu’à ce que la fenêtre occupe environ 25 pour cent de la largeur du tableau de bord.
Le tableau de bord est maintenant configuré et dispose d’une carte, d’un en-tête, d’un indicateur, d’une table et d’un élément Détails. Vous allez ensuite permettre aux utilisateurs de filtrer les données du tableau de bord.
Configurer les sélecteurs du tableau de bord
Le tableau de bord affiche actuellement des informations sur les bornes de recharge au Canada. La plupart des utilisateurs n’auront toutefois pas besoin de disposer d’informations concernant les bornes se trouvant dans une autre ville ou une autre province. De même, ils ne vont être intéressés que par les bornes disposant du type de connecteur adapté à leur voiture.
Vous allez ensuite ajouter trois sélecteurs, pour que les utilisateurs puissent affiner leur recherche de borne par province, ville et type de connecteur. Les sélecteurs permettront de filtrer le tableau de bord pour n’afficher que les informations pertinentes pour l’utilisateur.
Ajouter un sélecteur de province
Le premier sélecteur que vous allez ajouter permettra aux utilisateurs de choisir une province ou un territoire. Le sélecteur sera également la première interaction que les utilisateurs auront avec le tableau de bord.
- Si nécessaire, dans la barre d’outils, cliquez sur le bouton View (Afficher) pour ouvrir la fenêtre View (Afficher).
- Dans la fenêtre View (Afficher), cliquez sur l’onglet Header (En-tête). Cliquez sur Add selector (Ajouter un sélecteur) puis cliquez sur Category selector (Sélecteur de catégorie).
Vous allez configurer ce sélecteur pour créer une liste déroulante de toutes les provinces et de tous les territoires du Canada. Vous disposez d’une couche dans la carte représentant les provinces et les territoires, vous allez donc créer les catégories du sélecteur à partir des entités de cette couche.
- Pour Categories from (Catégories d’origine) sélectionnez Features (Entités).
- Dans la fenêtre Select a layer (Sélectionner une couche), cliquez sur Provinces and Territories of Canada (Provinces et territoires du Canada).
- Pour Line item template (Modèle d’élément de ligne), cliquez sur le bouton Add field (Ajouter un champ) et sélectionnez PRENAME (NOMPRO).
PRENAME (NOMPRO) est l’abréviation de province English name (Nom anglais de province) L’aperçu s’actualise pour afficher un nom de province.
- Cliquez sur l’onglet Selector (Sélecteur). Pour Label (Étiquette), saisissez Select a province (Sélectionner une province).
Le texte de l’aperçu s’actualise.
- Cliquez sur Add icon (Ajouter un icône).
- Développez la section Hub et cliquez sur l’icône Boundaries (Limites).
- Cliquez sur OK.
- Activez l’option Show search (Afficher la recherche).
- Cliquez sur l’aperçu.
La liste des provinces s’affiche. Vous trouverez en haut de la liste une barre de recherche qui permet de rechercher du texte dans la liste.
Vous allez ajouter un élément à cette liste permettant aux utilisateurs de ne sélectionner aucune province ou territoire.
- Activez None option (Option Aucune). Pour Label for None (Étiquette de la catégorie Aucune), saisissez No province selected (Aucune province sélectionnée).
L’aperçu s’actualise pour afficher le nouveau texte.
- Développez la section General (Général). Pour Name (Nom), saisissez Province selector (Sélecteur de province).
- Cliquez sur Done (Terminé).
Le sélecteur de province apparaît sur l’en-tête du tableau de bord, au-dessus de la carte.
Ajouter un sélecteur de ville
Vous allez ensuite ajouter un sélecteur de ville. Ce sélecteur permettra aux utilisateurs de filtrer les bornes de recharge par ville.
- Dans la fenêtre View (Afficher), dans l’onglet Header (En-tête), cliquez sur Add selector (Ajouter un sélecteur) et choisissez Category selector (Sélecteur de catégorie).
Pour le dernier sélecteur, vous avez créé des catégories à partir des entités. Cette fois-ci, vous ne disposez d’aucune entité représentant les villes. Vous pouvez toutefois configurer le sélecteur pour lister toutes les valeurs trouvées dans le champ City (Ville) de la couche Electric Charging Stations (Bornes de recharge électrique). Vous pouvez faire cela à l’aide de l’option Grouped values (Valeurs regroupées).
- Dans la section Categories from (Catégories d’origine), sélectionnez Grouped values (Valeurs regroupées).
- Dans la fenêtre Select a layer (Sélectionner une couche), choisissez Electric Charging Stations (Bornes de recharge électrique).
- Pour Category Field (Champ de catégorie), sélectionnez City (Ville).
Le champ City (Ville) est également ajouté à la section Sort by (Filtrer par). Ceci triera les villes par ordre alphabétique dans le sélecteur pour faciliter leur recherche.
Le champ Maximum categories (Nbre maximal de catégories) est défini sur 50, ce qui signifie que seules les 50 premières villes apparaîtront dans le sélecteur. La plupart des provinces comportent plus de 50 villes, vous allez donc augmenter cette limite.
- Pour Maximum categories (Nbre maximal de catégories), entrez 350.
- Cliquez sur l’onglet Selector (Sélecteur). Pour Label (Étiquette), saisissez Select a city (Sélectionner une ville).
La nouvelle étiquette apparaît dans l’aperçu.
- Cliquez sur Add icon (Ajouter un icône).
- Développez la section Hub, sélectionnez la City (Ville) et cliquez sur OK.
L’icône apparaît dans l’aperçu. Vous allez ensuite vous assurer que les utilisateurs peuvent sélectionner plus d’une ville à la fois.
- Pour Placeholder Text (Texte de l’espace réservé), saisissez No city selected (Aucune ville sélectionnée). Pour Selection (Sélection), choisissez Multiple.
- Activez les boutons Show search (Afficher la recherche) et Show reset and select all (Afficher les options Réinitialiser et Sélectionner tout).
- Cliquez sur l’aperçu pour développer la liste des villes.
Les boutons Reset (Réinitialiser) et Select all (Sélectionner tout) apparaissent sous la liste. Ces outils peuvent aider les utilisateurs à interagir plus facilement avec les listes plus longues.
- En bas de la fenêtre, développez la section General (Général).
- Pour Name (Nom), saisissez City selector (Sélecteur de ville).
- Cliquez sur Done (Terminé).
Le nouveau sélecteur apparaît sur l’en-tête du tableau de bord.
Ajouter un sélecteur de connecteur
Le dernier sélecteur que vous allez ajouter permettra aux utilisateurs de choisir un type de connecteur compatible avec leur véhicule. Le sélecteur sera utilisé pour filtrer les autres éléments afin de n’afficher que les stations disposant du type de connecteur sélectionné.
- Dans la fenêtre View (Afficher), dans l’onglet Header (En-tête), cliquez sur Add selector (Ajouter un sélecteur) et choisissez Category selector (Sélecteur de catégorie).
- Pour Categories from (Catégories d’origine) choisissez Grouped values (Valeurs regroupées).
- Dans la fenêtre Select a layer (Sélectionner une couche), choisissez Electric Charging Stations (Bornes de recharge électrique).
- Pour Category field (Champ de catégorie), choisissez EV_Connector_Types (Types_Connecteur_VE).
- Cliquez sur l’onglet Selector (Sélecteur).
- Dans le champ Label (Étiquette), saisissez Select connector type (Sélectionner un type de connecteur).
- Cliquez sur Add icon (Ajouter un icône).
- Développez la section Points of interest (Points d’intérêt), sélectionnez l’icône de station-service et cliquez sur OK.
- Pour Selection (Sélection), choisissez Multiple.
- Pour Placeholder Text (Texte de l’espace réservé), saisissez No connector selected (Aucun connecteur sélectionné).
- Activez Show search (Afficher la recherche) et Show reset and select all (Afficher les options Réinitialiser et Sélectionner tout).
- Développez la section General (Général). Pour le champ Name (Nom), saisissez Connector selector (Sélecteur de connecteur).
- Cliquez sur Done (Terminé).
Les trois sélecteurs sont à présent configurés. Ils ne peuvent toutefois pas encore être utilisés dans le tableau de bord. Vous allez ensuite configurer les actions afin de connecter tous les éléments du tableau de bord et de permettre aux utilisateurs d’adapter celui-ci à leurs besoins.
Configurer des actions
Lors de la création d’un tableau de bord interactif, il est recommandé de commencer par configurer tous les éléments, puis de configurer les actions qui les relient afin de rendre le tableau de bord interactif. Il est conseillé de créer le tableau de bord dans cet ordre car les actions disponibles sont déterminées par la façon dont chaque élément est configuré.
Maintenant que tous les éléments du tableau de bord sont configurés, vous pouvez configurer l’interactivité du tableau de bord en définissant les actions.
Configurer les actions pour le sélecteur de province
Vous allez commencer par configurer les actions pour le sélecteur de province. Les sélecteurs sont le principal moyen pour les utilisateurs d’interagir avec le tableau de bord. Ils permettront aux utilisateurs d’affiner les stations affichées en fonction de leur emplacement et du type de connecteur recherché. Le sélecteur de province constituera le niveau de filtrage le plus élevé, et filtrera les autres sélecteurs et l’élément de table.
- Si nécessaire, dans la barre d’outils, cliquez sur le bouton View (Afficher) pour ouvrir la fenêtre View (Afficher). Cliquez sur l’onglet Header (En-tête).
- Pointez le curseur sur Province selector (Sélecteur de province). Cliquez sur le bouton d’options, puis sur Configure (Configurer).
La fenêtre de configuration Category selector (Sélecteur de catégories) s’ouvre.
- Cliquez sur l’onglet Actions.
Vous avez la possibilité de configurer une action Filter (Filtrer), Flash (Clignoter), Show pop-up (Afficher fenêtre contextuelle), Pan (Déplacer) ou Zoom (Zoomer) lorsqu’une nouvelle province est sélectionnée.
La première action que vous allez configurer est une action de filtre. Lorsqu’un utilisateur sélectionne une province dans le sélecteur de province, cela applique un filtre sur le sélecteur de villes pour n’afficher que les villes se trouvant dans cette province.
- Cliquez sur Filter (Filtrer) pour développer cette section.
- Activez City selector (Sélecteur de ville).
Les actions connectent deux éléments distincts. Elles sont configurées sur l’élément qui déclenche l’action (dans ce cas, le sélecteur de province), plutôt que sur l’élément qui réagit à l’action (dans ce cas, le sélecteur de ville).
Les sources de données des deux éléments étant différentes, vous devez les connecter avec des champs équivalents. Heureusement, les deux couches contiennent des champs avec des abréviations de province formatées de la même façon.
- Pour Source field (Champ source), sélectionnez Province Postal Abbreviation (Abréviation du code postal de province). Pour Target field (Champ cible), sélectionnez State (État).
Vous allez définir d’autres actions afin que la carte, l’indicateur et la table soient également filtrés lorsqu’une province est sélectionnée.
- Sous Electric charging stations in Canada (Bornes de recharge électrique au Canada), activez l’action de filtre pour Electric Charging Stations (Bornes de recharge électrique). Définissez le Source field (Champ source) sur Province Postal Abbreviation (Abréviation du code postal de province) et définissez Target field (Champ cible) sur State (État).
- Activez l’action de filtre pour Operational stations indicator (Indicateur de bornes actives) et Station table (Table des bornes). Pour chacun de ces éléments, définissez Source field (Champ source) sur Province Postal Abbreviation (Abréviation du code postal de province) et définissez le Target field (Champ cible) sur State (État).
La table n’est pas vraiment utile lorsqu’elle affiche toutes les bornes du Canada. Vous allez la configurer pour qu’elle n’affiche des informations que lorsqu’une province est sélectionnée.
- Dans la section Station table (Table des bornes), cochez la case Render only when filtered (Rendu en cas de filtrage uniquement).
Vous allez ajouter une autre action au sélecteur de province pour appliquer un zoom sur la carte sur la province sélectionnée.
- Développez la section Zoom (Zoomer) et activez Electric charging stations in Canada (Bornes de recharge électrique au Canada).
- Cliquez sur Done (Terminé).
Le tableau de bord a le même aspect qu’avant, mais la table a été remplacée par un message.
Vous allez tester que les actions que vous avez configurées fonctionnent comme prévu.
- Dans l’en-tête, cliquez sur Select a province (Sélectionner une province) et choisissez Prince Edward Island (Île-du-Prince-Édouard).
La carte zoome sur l’Île-du-Prince-Édouard. La table est renseignée uniquement avec les bornes de recharge se trouvant dans cette province. Le chiffre affiché par l’élément indicateur est plus petit qu’auparavant.
- Dans l’en-tête, cliquez sur Select a city (Sélectionner une ville).
Seules les villes disposant de bornes de recharge sur l'Île-du-Prince-Édouard sont répertoriées.
Configurer des actions pour les sélecteurs de ville et de connecteur
Vous allez ensuite configurer des actions pour les deux autres sélecteurs. Le sélecteur de ville va filtrer davantage le sélecteur de connecteur, la carte, l’indicateur et la table. Le sélecteur de connecteur va filtrer davantage la carte, l’indicateur et la table.
- Dans la fenêtre View, pointez le curseur de la souris sur City selector (Sélecteur de ville), cliquez sur le bouton des options, puis cliquez sur Configure (Configurer).
- Cliquez sur l’onglet Actions.
Le sélecteur de ville a été créé avec des valeurs regroupées (et non avec des entités), Filter (Filtrer) est donc le seul type d'action disponible.
- Développez la section Filter (Filtrer).
- Activez Connector selector (Sélecteur de connecteur), Electric charging stations (Bornes de recharge électrique), Operational stations indicator (Indicateur de bornes actives) et Station table (Table des bornes).
Il n’est pas nécessaire de définir des champs équivalents cette fois puisque tous les éléments connectés sont basés sur la même couche : Electric charging stations in Canada (Bornes de recharge électrique au Canada).
- Cliquez sur Done (Terminé).
Pour finir, vous allez configurer les actions du sélecteur de connecteur.
- Dans la fenêtre Layout (Mise en page), pointez le curseur de la souris sur Connector selector (Sélecteur de connecteur), cliquez sur le bouton d’options, puis sur Configure (Configurer).
- Cliquez sur l’onglet Actions et développez la section Filter (Filtrer).
- Activez Electric charging stations (Bornes de recharge électrique), Operational stations indicator (Indicateur de bornes actives) et Station table (Table des bornes).
- Cliquez sur Done (Terminé).
Vous allez tester que les actions fonctionnent ensemble comme prévu.
- Si nécessaire, dans l’en-tête, cliquez sur Select a province (Sélectionner une province) et choisissez Prince Edward Island (Île-du-Prince-Édouard).
- Cliquez sur Select a city (Sélectionner une ville) et choisissez Charlottetown.
La carte, la table et l’indicateur se mettent à jour pour afficher un nombre réduit de bornes.
- Dans l’en-tête, cliquez sur Select connector type (Sélectionner un type de connecteur).
La liste contient moins d’options qu’auparavant.
- Dans le sélecteur de connecteur, cliquez sur TESLA.
La carte, la table et l’indicateur se mettent à jour pour afficher un nombre réduit de bornes.
Configurer les actions de la table
Les dernières actions que vous allez configurer concernent la table. La table n’affiche des valeurs que lorsqu’une province est sélectionnée dans l’en-tête. De même, vous allez vous assurer que l’élément Détails ne soit renseigné que lorsqu’une borne est sélectionnée dans la table. Sans quoi, les utilisateurs verront les détails des bornes qui ne sont probablement pas pertinentes pour eux. Lorsque aucune sélection n’est faite dans la table, le message que vous avez configuré précédemment s’affiche.
- Dans la fenêtre View (Afficher), cliquez sur l’onglet Body (Corps).
- Dans l’onglet Body (Corps), pointez le curseur de la souris sur Station table (Table des bornes) et cliquez sur Configure (Configurer).
- Dans la fenêtre de configuration Table, cliquez sur l’onglet Actions et développez la section Filter (Filtrer).
- Activez Station details (Détails des bornes) et cochez la case Render only when filtered (Rendu en cas de filtrage uniquement).
Vous allez également configurer une action faisant clignoter sur la carte les entités qui sont sélectionnées dans la table.
- Développez la section Flash (Clignoter) et activez Electric charging stations in Canada (Bornes de recharge électrique au Canada).
Vous allez ajouter une autre action pour appliquer un zoom sur la carte sur l’entité sélectionnée.
- Développez la section Zoom (Zoomer) et activez Electric charging stations in Canada (Bornes de recharge électrique au Canada).
- Cliquez sur Done (Terminé).
- Dans le tableau de bord, cliquez sur n’importe quelle ligne de la table.
L’élément Détails est renseigné à l’aide des informations contextuelles de l’entité sélectionnée. La carte zoome sur l’entité sélectionnée qui clignote.
Partager le tableau de bord
Pour finir, vous allez partager le tableau de bord pour consultation.
- Dans la barre d’outils du tableau de bord, cliquez sur Save (Enregistrer), puis sur Save (Enregistrer).
- En regard du titre du tableau de bord, cliquez sur le bouton de menu, puis cliquez sur Dashboard item details (Détails des éléments du tableau de bord).
La page des éléments du tableau de bord apparaît. Vous allez afficher le tableau de bord et le tester avant de le partager.
- Cliquez sur View Dashboard (Afficher le tableau de bord).
Le tableau de bord s’affiche dans un nouvel onglet du navigateur. La table et les éléments Détails sont vides.
- Utilisez le tableau de bord pour rechercher les bornes de recharge de type J1772 à Thunder Bay, Ontario.
- Retournez à la page de l’élément et cliquez sur Share (Partager).
- Dans la fenêtre Share (Partager), sélectionnez Everyone (public) (Tout le monde (public)) et cliquez sur Save (Enregistrer).
Pour consulter le tableau de bord sans vous connecter, vous devez partager la carte Web utilisée dans le tableau de bord avec tout le monde.
- Sur le ruban, cliquez sur Content (Contenu).
- Sur la page Content (Contenu), sous Title (Titre), pour Electric charging stations in Canada (Bornes de recharge électrique au Canada), cliquez sur l’icône Update sharing (Mettre à jour le partage).
- Dans la fenêtre Share (Partager), sélectionnez Everyone (public) (Tout le monde (public)) et cliquez sur Save (Enregistrer).
Dans ce didacticiel, vous avez créé un tableau de bord interactif qui permet aux utilisateurs de rechercher des bornes de recharge pour véhicules électriques au Canada. Vous avez configuré le tableau de bord pour permettre aux utilisateurs de filtrer les bornes affichées selon leurs besoins, notamment l’emplacement et le type de connecteur.
Vous trouverez d’autres didacticiels dans la bibliothèque des didacticiels.
