Liste et écran de saisie « Amélioré »
Ce qu'on retrouve dans cette page
Quelques règles CSS et quelques modifications nous ont permis d’améliorer l’expérience utilisateur de façon significative. En voici les grandes lignes :
Rapport classique
Deux champs de recherche sont maintenant présents et le look du bloc de recherche a été grandement amélioré. La recherche se fait maintenant à l’aide d’une requête Ajax (sans « soumission » de la page), ce qui la rend beaucoup plus performante.
L’affichage de la liste a été amélioré avec quelques règles CSS. Par exemple, la police de caractères a été augmentée et modifiée pour une police Google (Google Font), le quadrillage du rapport a aussi été modifié. Ceci n’est qu’un exemple pour démontrer qu’on peut faire à peu près n’importe quoi sur l’affichage des éléments standard d’Apex sans trop de difficulté.
Écran de saisie de l’utilisateur
L’écran de saisie de l’utilisateur est une fenêtre modale (flottante). Elle comporte trois sections (onglets) et utilise également des fenêtres modales pour modifier la photo et l’adresse de l’utilisateur.
La disposition des données est différente à celle de notre écran « Standard ». Les champs et la police de caractères sont plus gros, les boutons sont positionnés en haut et les libellés au-dessus.
Réduire
Liste et écran de saisie « Personnalisé »
Ce qu'on retrouve dans cette page
Les modèles (templates) de notre thème principal ont été personnalisés. Nous avons arrimé nos modèles de rapport, de région et de libellé pour qu’ils ressemblent à ceux de notre thème « Bootstrap » (acheté sur le web) autant au niveau visuel que sous le capot (code bootstrap généré).
Rapport classique
Nous utilisons quelques icônes, images et de la couleur pour rehausser l’apparence de notre rapport.
Pour davantage de simplicité, le bloc de recherche a été réduit à un seul champ et est fait avec une requête Ajax (sans « soumission » de la page), ce qui est très rapide. Le texte recherché est mis en surbrillance dans le résultat de recherche.
Les données peuvent être triées différemment en cliquant sur les entêtes de colonne.
Rapport interactif (Interactive Report)
Les données sont présentées sous plusieurs formes : sous forme d'icônes, de rapport et de liste détaillée. Utilisez les boutons « » pour sélectionner votre vue.
Nous avons créé différentes vues de notre liste d’utilisateurs. Utilisez la liste déroulante dans la barre d’outils du rapport interactif pour les essayer. Vous y verrez des exemples de tris et regroupements différents, des éléments en surbrillance, des colonnes différentes et plus encore! Vous pouvez même mettre le rapport plein écran en cliquant sur . Vous pourriez aussi personnaliser votre rapport avec le menu et l’enregistrer pour utilisation future (non disponible dans notre exemple).
Vous pouvez voir les données des utilisateurs sous plusieurs formes. Utilisez la liste déroulante dans la barre d’outils du rapport. Nous avons inclus des exemples de données regroupées et agrégées différemment pour vous montrer toute la puissance des rapports interactifs! Tout ceci est possible simplement en configurant le rapport, sans programmation.
Écran de saisie de l’utilisateur
L’écran de saisie de l’utilisateur est une fenêtre modale (flottante). Elle comporte trois sections (onglets) et utilise également des fenêtres modales pour modifier la photo et l’adresse de l’utilisateur.
L’écran de saisie est la même pour le rapport standard et interactif. Elle ressemble beaucoup à notre écran de saisie de la section « Amélioré » mais, sous le capot, on y retrouve que des composantes « Bootstrap »! Les modèles de régions, d’items, de dialogues modales et de boutons ont été refaits pour s’agencer parfaitement au framework voulu.
Réduire