Configurer une application en responsive design avec ArcGIS Experience Builder

Une des caractéristiques importantes du générateur de pages web ArcGIS Experience Builder est de permettre de définir très finement le comportement et le placement des différents éléments de vos pages selon la taille des écrans sur lesquels elles seront visualisées. Je vous propose de voir dans cet article les grands principes à respecter et comment cela fonctionne dans Experience Builder.

   

   

J'ai choisi ici une carte simple et en plein dans l'actualité à savoir la carte des niveaux de déconfinement par département. Celle-ci est intéressante car elle concerne aussi bien les départements de métropole que les DROM, ce qui veut dire qu'il faut pouvoir représenter l'ensemble dans un même écran.

Pour ce type de représentation avec des encarts de cartes, la solution consiste tout simplement à insérer plusieurs éléments de type "Carte" basés sur la même carte web puis de définir des étendues personnalisées pour chacun d'eux.

  

Le second point important est de réfléchir au redimensionnement de vos éléments selon la taille de l'écran ou lors d'un redimensionnement de la fenêtre du navigateur de l'utilisateur. Vous aurez alors besoin de spécifier des largeurs et des positions pour vos éléments en indiquant des valeurs fixes (en pixels) ou des valeurs relatives à la largeur ou hauteur de la page (en %). La combinaison des deux doit vous permettre de traiter de nombreux scenarios de taille d'écran.

  

Dans certains cas, vous souhaiterez aller plus loin que de simple redimensionnement des éléments et vous aurez besoin de changer totalement l'agencement de votre page, y compris peut-être ne pas afficher certains éléments si l'écran est trop petit. Dans ce cas, Experience Builder fournit des options intéressantes pour gérer 3 scenarios d'application en fonction d'une taille d'écran grande, moyenne ou petite.

   

Il est alors possible de modifier l'ensemble des propriétés des différents éléments et de tester interactivement leur rendu à l'aide du bouton "Vue dynamique". Différentes tailles d'écran type vous sont proposés pour tester vos rendus. A noter que tout cela peut se faire sans avoir à enregistrer ou publier l'application.

Par exemple ci-dessous, j'ai ré-agencé les encarts des DROM pour qu'ils soient positionnés sous la carte de la Métropole lorsque l'utilisateur affiche l'application sur écran de smatphone. De la même manière, le logo a également été déplacé sous la zone affichant les informations des entités cliquées sur la carte.