ev|Apps Builder - H2.2015 - Présentation des nouveautés


Note : Ceci est un document de sortie de version.
  • Certaines copies d’écran peuvent être légèrement différentes de la version finale car l’amélioration du design est un processus continu jusqu’à la date de sortie.
  • La nouvelle version Product name - ev sas.png H2.2015 présente des améliorations et corrections au niveau des thèmes. La migration d'une plate-forme Product name - ev sas.png vers cette nouvelle version peut perturber la présentation graphique des applications créées dans les versions antérieures.

         Open url.png  voir Ajustement des paramètres graphiques sur les anciennes applications

         Open url.png  voir Erreurs connues

Nouveautés sur l’infrastructure

Gestion de la localisation des messages système

Les messages système (messages d’erreur, textes système), apparaissent maintenant dans la langue de l’utilisateur. La règle de détermination de la langue de l’utilisateur est la suivante :

  • Utilisation de la langue définie dans evSM si au moment du login l’utilisateur de l'application a été correctement associé.
  • Utilisation de la langue du navigateur
  • Utilisation de la langue par défaut définie au niveau de la compagnie

Nouveautés sur la gestion des accès

Nouveau team Everyone

Un nouveau team a été rajouté. Ce groupe système correspond à la liste de tous les utilisateurs enregistrés.

  • Il permet d’affecter facilement une application à tous les utilisateurs actuels et futurs.
  • Il apparait systématiquement en tête des listes sur les boîtes de gestion des accès.
  • Il ne peut pas être supprimé.
             sortie 1a_html_m721f8979.png

Nouveau profil Theme Designer

Un nouveau profil Theme Designer a été ajouté. Ce profil est affecté aux utilisateurs (ou teams) ayant accès à l’éditeur de thèmes.
         sortie 1a_html_d72545c.png

Nouveautés générales

Homogénéisation du système des fenêtres popup

Les différentes fenêtres popup apparaissant dans les applications, le studio ou la galerie des applications sont maintenant gérées par un système centralisé et homogène, ce qui rend beaucoup plus simple de faire évoluer les différents mécanismes correspondants.

Nouveautés sur la galerie des applications

Design de la zone supérieure

Plusieurs icônes ont été ajoutées pour gérer les nouvelles fonctions. Pour que ces icônes puissent tenir dans la largeur, les libellés ont été repositionnés sous les icônes lorsque la largeur de l’écran n’est pas suffisante.
         sortie 1a_html_m250b20e2.png

Filtrage / recherche des applications

Une zone de recherche située en haut de la liste des applications permet de filtrer automatiquement la liste des applications en fonction du contenu de la zone de recherche, soit parmi tous les éléments, soit uniquement parmi les applications, soit parmi les raccourcis.
         sortie 1a_html_35219ece.png

Nouveautés sur la gestion du cycle de vie des applications

Notion de raccourci

Le passage d’une application en production est en général suivi par la conception et la réalisation de versions correctives ou évolutives de cette même application. Un nouveau mécanisme basé sur l’utilisation de raccourcis permet maintenant de gérer efficacement le remplacement de l’application en production par une version plus récente.

Un raccourci correspond au lien sur une version d’une application. C’est ce lien qui est fourni aux utilisateurs. Lors de la mise à jour de l’application, il suffit de faire pointer le raccourci vers la nouvelle application : le lien reste toujours valide.
         sortie 1a_html_m47b7f5d3.png

Example documentation icon FR.png  Les utilisateurs à l’instant t1 utilisent le raccourci qui pointe vers la version 1 de l’application Portal. L’application Portal V2 est développée. Une fois terminée à l'instant t2, il suffit de modifier le raccourci vers la version 2 de l’application Portal pour que les utilisateurs puissent utiliser la nouvelle application sans rien avoir à changer sur leur configuration.

Mise en œuvre des raccourcis dans l’interface

  • La création d’un nouveau raccourci s’effectue via la nouvelle icône de la barre principale de la galerie des applications :
             sortie 1a_html_2d4cf40a.png
  • La boîte qui apparaît permet d’entrer le nom du raccourci, un éventuel descriptif, l’application vers laquelle pointe le raccourci ainsi que le contexte d’exécution à utiliser, qui prend le pas sur le contexte d’exécution indiqué dans l’application :
             sortie 1a_html_12e45b95.png
  • Les raccourcis sont totalement intégrés dans la liste des applications. Une icône dédiée est rajoutée dans la zone inférieure droite de l’icône pour montrer qu’il s’agit d’un raccourci. L’icône elle-même est celle de l’application.
             sortie 1a_html_41c16bb0.png
  • En passant en mode Édition d’un raccourci, vous pouvez noter que la zone inférieure de l’écran contient les informations qui figurent normalement dans la boîte de partage (accessible depuis le studio) pour les applications. Le lien affiché est celui à fournir aux utilisateurs afin d’exécuter l’application.
             sortie 1a_html_m421cfddb.png
  • La zone de recherche située en haut de la liste des applications permet d’afficher uniquement celles ayant un raccourci.
             sortie 1a_html_mbdbd74b.png
  • Lorsque le raccourci est créé, il devient le point d’entrée de l’application pour les utilisateurs. La gestion des accès sur un raccourci fonctionne exactement comme la gestion des accès sur une application ; les accès définis sur un raccourci prennent le pas sur ceux indiqués sur l’application liée.
             sortie 1a_html_m422225c.png
  • Lors de l’édition d’une application pointée par un raccourci, un message d’avertissement apparaît, indiquant qu’un lien existe et qu’il faut donc faire attention.
             sortie 1a_html_4459c704.png

Exemple

Soit une application Portal V1 en production et une nouvelle version Portal V2 en cours de développement :
         sortie 1a_html_m4d01b38c.png

  • Les accès sont définis sur le raccourci de l'application Portal V1 ; ce raccourci est fourni aux utilisateurs.
  • Lors de la mise en production de la version 2 du portail, il suffit d’éditer le raccourci et de changer l’application pointée : application Portal V2. Le lien, les accès, le contexte d’exécution définis sur le raccourci n’ont pas à être modifiés et restent valides.
             sortie 1a_html_3bf80693.png

       sortie 1a_html_m7c1f51c.png

Nouveautés sur les datasources

Jointures internes dans les datasources composites

Il est maintenant possible de qualifier les jointures utilisées dans une datasource composite en choisissant d’avoir des jointures internes. Une nouvelle case à cocher sur la boîte de définition des jointures a été rajoutée à cet effet.
         sortie 1b_html_m5bb99408.png

Connecteur REST

Un nouveau connecteur a été ajouté. Il permet d’accéder à des sources de données REST et remplace (et complète) l’ancien connecteur JSon Online. Vous trouverez toutes les informations sur la syntaxe à utiliser pour le sélecteur sur le site http://jsonselect.org.
         sortie 1b_html_788ccafd.png

Mise en œuvre d'un connecteur REST

  • Le premier paramètre de l'inspecteur de propriétés permet de spécifier l’URL de la source de données REST.
             sortie 1b_html_m62609e51.png
  • Une source de données REST retourne un tableau JSON dont le contenu n’est pas standardisé. Les données souhaitées peuvent être profondément enfouies dans ce tableau. Un outil permet de simplifier la recherche du sélecteur à utiliser, en cliquant sur sortie 1b_html_m1d7b075f.png en regard de la propriété Sélecteur :
             sortie 1b_html_276f812c.png
(1)Sélecteur courant. Il peut être saisi manuellement ou automatiquement sélectionné dans la zone (3).
(2)Bouton d’application permettant de voir le résultat en cas de saisie manuelle.
(3)Cette zone affiche la totalité du tableau JSon. Une signalétique de couleur permet de distinguer les balises de leur contenu. La balise actuellement sélectionnée est indiquée par un surlignage vert. Pour lancer un filtre simple, il suffit de cliquer sur une balise.
(4)Zone d’affichage du tableau JSon obtenu après application du sélecteur.
(5)Zone de prévisualisation du résultat sous forme de tableau.
  • Les données du sélecteur peuvent ensuite être affichées via un dataviewer.

Exemple

Soit une source de données REST ouverte : http://api.open-notify.org/astros.json, qui retourne l’équipage actuel de la station ISS :
         sortie 1b_html_58a01dd5.png

  • Le tableau renvoyé commence par un message indiquant le statut de la réponse (success) puis le nombre d’astronautes actuellement présents (6).
  • Pour récupérer la composition de l'équipage, identifiée par la balise « people », il suffit soit de saisir .people dans la zone Sélecteur, soit de cliquer sur le tag people dans le tableau. L’affichage reflète immédiatement les modifications.
  • Si on affecte la datasource REST à un dataviewer, le résultat obtenu est le suivant :
             sortie 1b_html_347fd9c4.png

Gestion de l’authentification

Si le serveur le supporte, il est préférable de passer par l'authentification OAuth.

BASIC Authentication

C’est le premier type d’authentification qui a été disponible. Il nécessite de saisir le login et mot de passe, qui sont ensuite passés à la source sur http(s) sous forme encodée.

Après avoir sélectionné BASIC Authentication comme type d’authentification, la saisie des informations login / mot de passe s’effectue en cliquant sur sortie 1b_html_m1d7b075f.png en regard de la propriété Authentication Parameters :
         sortie 1b_html_m1103a35d.png

OAuth (versions 1 et 2)

Ce type d’authentification permet à un utilisateur d’autoriser une application à accéder à ses données sans qu’aucun login / mot de passe ne soit fourni à l’application : les données sont gérées par le système cible / le service.

  • Les boîtes de login qui apparaissent sont celles du système appelé, qui retourne à l’application des tokens enregistrés sous forme cryptée.
  • Note : Dans le cas d'une authentification OAuth 2, il est inutile de saisir l’URI du service REST car le système OAuth mis en place positionne automatiquement la valeur

Example documentation icon FR.png  Affichage d’un flux Twitter dans un dataviewer :

  • Création d'une nouvelle datasource REST 'Twitter', avec une authentification OAuth 2 sélectionnée via la liste déroulante (1) :
             sortie 1b_html_m194bbbb5.png
  • Affichage de la boîte de choix du service REST pour OAuth en cliquant sur  sortie 1b_html_m1d7b075f.png (2) :
             sortie 1b_html_m469b9591.png
    (1)

    Choix du service REST à utiliser, parmi ceux disponibles. Note : La liste sera petit à petit étendue lorsque de nouveaux services seront validés.
             sortie 1b_html_m70dc6175.png

    Example documentation icon FR.png Twitter

    (2)

    Choix de la ressource REST à utiliser, parmi celles disponibles. Note : De nouvelles ressources peuvent être ajoutées.
             sortie 1b_html_m2fae3996.png

    Example documentation icon FR.png  Home timeline : permeet de saisir les tweets de la timeline du compte sélectionné

    (3)

    Saisie des informations d'authentification du compte via le bouton +. La boîte suivante s’affiche :
             sortie 1b_html_m371d5ca7.png

    Notes :

    • La boîte d’authentification dépend du service sélectionné (c’est le service lui-même qui affiche la boîte).
    • En aucun cas vos informations de connexion apparaissent au niveau de l’application.
    (4)

    Indique si les informations d’authentification sont, ou non, sauvegardées avec l’application :

    • Case cochée : lors de l’exécution de l’application, les informations d’authentification saisies par le créateur sont réutilisées. C’est le cas par exemple pour l’affichage de flux Twitter pour lesquels on stocke le compte à utiliser.
    • Case non cochée : les utilisateurs qui exécutent l’application doivent se loguer la première fois.

    Note : Techniquement parlant, il s’agit d’un abus de langage car les informations d’authentification (des jetons d’accès) ne sont pas réellement stockées dans l’application mais dans une table encryptée dédiée.

  • Le nouveau compte est alors affiché et on accède au sélecteur JSon permettant de contrôler l'accès à Twitter :
             sortie 1b_html_462d6ec6.png
  • Création d'un dataviewer permettant d’afficher le flux Twitter correspondant, via le paramétrage suivant :
             sortie 1b_html_m3f2adb43.png

                 sortie 1b_html_m128b3def.png

Sauvegarde des informations d’authentification

La case à cocher Use these credentials (4) indique si les informations d’authentification sont, ou non, sauvegardées avec l’application :

  • Case cochée : lors de l’exécution de l’application, les informations d’authentification saisies par le créateur sont réutilisées. C’est le cas par exemple pour l’affichage de flux Twitter pour lesquels on stocke le compte à utiliser.
  • Case non cochée : les utilisateurs qui exécutent l’application doivent se loguer la première fois.

Gestion des ressources utilisées

Lorsque vous avez saisi plusieurs informations d’authentification pour plusieurs datasources REST, il est intéressant d’en avoir la liste et de pouvoir éventuellement en supprimer.

  • Une boîte dédiée est disponible au niveau de l’affichage des informations de l’utilisateur :
             sortie 1b_html_m6652dadc.png
  • Toutes les informations d’authentification enregistrées par service sont affichées. Il est possible d’en supprimer une ou de toutes les supprimer.
    Note : Si vous voulez supprimer des informations d’authentification sauvegardées dans une application, un message d’avertissement est affiché. Si vous effectuez la suppression, les utilisateurs devront alors se loguer, comme si vous ne les aviez pas enregistrés.
             sortie 1b_html_m45a0d035.png

Ajout de nouvelles ressources pour un service REST

Pour chaque service REST supporté, une liste de ressources est fournie, avec un accès prédéfini sans que l’utilisateur ait à se préoccuper des informations techniques correspondantes.

Il est possible de rajouter de nouvelles ressources :

  • Dans la boîte de paramétrage OAuth du service, cliquez sur le bouton 'Manage' : affichage de la liste de ressources déjà définies.
  • Cliquez sur le bouton Add Ressource : saisie des informations sur la ressource à ajouter (notamment son URI). Note : Une ressource peut être privée (seulement accessible au créateur d’application qui l’a créée).
             sortie 1b_html_m4339eaaa.png

Connecteur MSSQL

Les champs mémo (VARCHAR(MAX)) sont maintenant affichables.

Nouveautés sur le studio

Modifications sur l’écran principal de conception

Visualisation des widgets d’une ligne ou d’une colonne

Le volet droit de conception des applications a évolué afin de le rendre plus souple et plus agréable à utiliser.

  • La visualisation des lignes et des colonnes est rendue plus aisée grâce à l’ajout d’un filet vert autour des widgets contenus.
  • La visualisation des lignes est rendu plus aisée grâce à l’ajout d’une couleur gris sombre qui permet de les distinguer plus aisément.

Example documentation icon FR.png  Le survol de la colonne affiche une ligne verte en pointillés autour des deux widgets contenus dans la colonne.
         sortie 2_html_7292a9ba.png

Simplification du redimensionnement des widgets

Lors du redimensionnement d’un widget, une nouvelle information affiche la hauteur en pixels :
         sortie 2_html_4de02630.png

Ajout d’un menu local sur les colonnes et les grilles

Pour améliorer l'affichage, les fonctions pouvant être exécutées sur les lignes et colonnes sont regroupées dans un menu à droite de la zone concernée, qui apparait au survol de la souris via sortie 2_html_m13d10148.png :
         sortie 2_html_m6f2cd66e.png

Cliquer sur l’icône fait apparaître le menu :
         sortie 2_html_m251d6423.png

Simplification du Drag & Drop

Le fonctionnement du Drag & Drop a été modifié.

  • L’affichage des zones dans lesquelles il est possible de déposer l’élément a été réduit.
  • La zone s’agrandit lors du survol de la souris pour faciliter la dépose.
             sortie 2_html_m2d29438f.png
  • Dans la zone de travail, l’affichage du curseur de la souris est modifié pour mieux distinguer les zones qu’il est possible de déplacer.

       Example documentation icon FR.png  Changement du curseur sur une ligne de la souris pour initier le Drag & Drop
         sortie 2_html_m2ad8525b.png

       Example documentation icon FR.png  Changement du curseur de la souris sur un widget
         sortie 2_html_6dd3d1ae.png

Généralisation du menu local

L’interface listant les Custom widgets était surchargée par la présence de l'icône sortie 2_html_m785c9704.png en regard de chaque widget.
         sortie 2_html_m6feb8faf.png

L'interface a été allégée en ajoutant un menu local à droite du widget, qui apparaît au survol de la souris de chaque widget via sortie 2_html_m51106581.png :
         sortie 2_html_cb54455.png

Ajout d’une zone de saisie sur les sliders

Les sliders sont maintenant adossés à une zone de saisie permettant l’entrée directe de valeurs numériques. Ces valeurs peuvent être copiées d’une zone à une autre afin d’en harmoniser les valeurs.
Example documentation icon FR.png  Mettre des marges identiques sur les quatre côtés d’un widget
         sortie 2_html_m75f570eb.png

Meilleure visualisation des champs hérités

L’inspecteur de propriétés a été modifié afin de mieux faire ressortir les champs inherited (ceux sur lesquels une valeur a été renseignée). Un liseré bleu dans la partie supérieure a été rajouté.
         sortie 2_html_m67ce7252.png

Meilleure visualisation de la provenance des données héritées

Lorsqu’une valeur est héritée, il est possible d’en connaître la valeur ainsi que la provenance en survolant l'option herited dans l’inspecteur de propriétés. La fenêtre hint qui s’affiche indique la valeur ainsi que sa provenance (le thème, la page etc…).
         sortie 2_html_m1eff8201.png

Nouveautés sur les custom widgets

Réédition de custom widgets

Via la fonction Edit du menu local de chaque custom widget, il est maintenant possible de rééditer un custom widget existant afin d’en changer le nom, l’icône associée, la couleur, les accès ainsi que les différents paramètres.
         sortie 2_html_4f8ceece.png

       sortie 2_html_m5410b639.png

Intégration des ressources utilisées

Un custom widget incorpore maintenant les ressources locales nécessaires pour son fonctionnement. En particulier, toutes les images utilisées ainsi que les fichiers pour datasources sont automatiquement recopiées lors de la réutilisation du custom widget.

Custom widgets composés de plusieurs widgets – Custom pages

Le mécanisme des custom widgets a été considérablement enrichi en permettant maintenant d'en regrouper plusieurs pour les transformer en un seul custom widget. Il permet ainsi de créer des custom pages correspondant à la totalité des widgets présents sur une page.

La réalisation d'applications peut donc s’initialiser facilement par la réutilisation de custom pages qu’il suffit ensuite de personnaliser.

Rappel sur les colonnes

Le système des layouts permet de séparer les écrans en zones afin de définir le découpage souhaité pour l'application.

Le nouveau système permet d’enregistrer en une fois tous les widgets contenus dans un de ces zones.

Example documentation icon FR.png

  • (1) : deux widgets situés l’un sous l’autre dans la même colonne.
  • (2) : deux widgets positionnés dans un layout (qui a lui-même été divisé en deux).
             sortie 2_html_m2bab15c8.png

Création de custom widgets composite

La création de custom widgets est similaire au module mono-widget actuel (et qui est toujours présent). La seule différence provient de l’emplacement de l’icône permettant d’accéder à la fonction.

  • Actuellement, l’icône est située dans la zone supérieure de l’inspecteur de propriétés du studio, juste à côté de l’icône du widget :
             sortie 2_html_m31a522b9.png
  • Avec la nouvelle version, la création s'effectue via la fonction Create custom widget du menu local des widgets sélectionnés :
             sortie 2_html_7d576a47.png
  • La ligne verte en pointillés permet de mieux voir quels sont les widgets qui vont constituer le futur custom widget.
    Example documentation icon FR.png  Les deux widgets Service Availability et Find Wifi & Printer vont être utilisés pour la création du nouveau custom widget.

Gestion de thèmes personnalisés

Le mécanisme de gestion des thèmes qui existait de façon embryonnaire a été totalement réécrit afin de le rendre plus souple, plus puissant et surtout de permettre la réalisation aisée de nouveaux thèmes directement depuis le studio.

Notion de thème

Une application est constituée d’un contenu et d’un contenant. Le contenu correspond à tout ce qui est affiché sur l’écran tandis que le contenant correspond à la façon dont les éléments sont représentés à l’écran.

Afin d’homogénéiser l’apparence graphique des applications, une bonne pratique de travail consiste à dissocier contenu et contenant, qui peuvent d’ailleurs être réalisés par des personnes différentes afin d’optimiser les compétences : un designer peut s’occuper des aspects graphiques tandis qu’une autre personne prend en charge le contenu de l’application.

Pour que la gestion des thèmes soit efficace, il faut que l’application soit la plus neutre possible.
Example documentation icon FR.png  Une application neutre peut fortement changer sous le contrôle de trois thèmes différents
         sortie 3_html_5c228579.png

Rappels sur le principe de l’héritage du design

Chaque widget dispose d’une section Theme, qui regroupe tous les éléments visuels constitutifs du widget. Le principe d'héritage de l'affichage est le suivant :
         sortie 3_html_m4b4954e6.png

Fonctionnement des thèmes et impact sur l’affichage d’un widget

L’édition d’un thème est une tâche particulière à dissocier de l’édition d’une application, qui s’effectue au travers d’une version particulière du studio. L'éditeur dispose de barre d’outils et de fonctions dédiées.

Un thème est constitué de plusieurs parties :

  • Les éléments graphiques par défaut de chaque page
  • Les éléments graphiques par défaut de tous les widgets
  • Les éléments graphiques par défaut de chaque widget d’un type donné

Avec le nouveau système l’affichage d’un widget se définit de la façon suivante :
         sortie 3_html_506ec493.png

Fonctionnement de l’éditeur de thème

  • L’accès à l’éditeur de thème s’effectue via le nouveau bouton rajouté dans la galerie des applications, disponible uniquement pour les utilisateurs ayant le nouveau profil Theme Editor.
             sortie 3_html_m68fe6cd.png
  • L’écran principal est composé de quatre zones :
             sortie 3_html_569f90c.png
(1)Barre d’outils
(2)Accès aux fonctions principales
(3)Inspecteur de propriétés. Cette zone permet de spécifier les différents paramètres du thème.
(4)Zone de prévisualisation. Une application par défaut regroupant plusieurs widgets est chargée dans cette zone. Cette application (qu’il est possible de modifier) permet de se rendre compte en temps réel de l’impact des modifications. Notez bien que l’application affichée n’est en aucun cas modifiée.
  • Le flux de création / modification d’un thème est le suivant :
    • Création via sortie 3_html_m2737fae1.png puis sortie 3_html_m102ab504.png ; Définition du thème ; Sauvegarde via sortie 3_html_m371dbfc4.png
    • Modification via sortie 3_html_m2737fae1.png puis choix du thème via sortie 3_html_50317239.png ; Mise à jour du thème ; Sauvegarde via sortie 3_html_m371dbfc4.png

La barre d’outils

       sortie 3_html_m2c7b759c.png

(1)

Accès à la boîte d’édition des propriétés du thème.
         sortie 3_html_48ff4a5c.png

Elle est similaire à la boîte de paramétrage des propriétés des custom widgets. L'option Publié permet d’indiquer si le thème en cours d’édition est public ou pas (un thème non public est un thème en cours de réalisation que vous ne souhaitez pas encore mettre à disposition).

(2)Nom du thème (non éditable ici).
(3)Sauvegarde du thème. Note : Un message d’avertissement apparaît lors du lancement de certaines opérations si le thème n'a pas été sauvegardé.
(4)Nom de l’application utilisée pour prévisualiser le thème. Note : L’application n’est en rien modifiée. Le thème est appliqué ‘à la volée’.
(5)Page courante dans l’application utilisée pour la prévisualisation.

La barre d’accès aux fonctions

sortie 3_html_m47c69ec5.pngPermet de repasser en mode Édition du thème courant.
sortie 3_html_m642b230e.png

Donne accès à la liste des thèmes courants :
         sortie 3_html_227e353d.png

Cette liste permet de passer en mode Édition d’un nouveau thème (via l’inspecteur de propriétés ou en cliquant dessus) ou de supprimer un thème existant via l’inspecteur de propriétés local :
         sortie 3_html_109a63b5.png

sortie 3_html_m102ab504.pngPermet de créer un nouveau thème

L’inspecteur de propriétés

       sortie 3_html_m542ab794.png

(1)

onglet Application : permet de régler les paramètres globaux du thème.
         sortie 3_html_m32c093b6.png

L'icône sortie 3_html_47ea9b6d.png permet de réinitialiser les paramétrages à leurs valeurs par défaut.

(2)

onglet Widgets : permet de régler les paramètres individuels de style de chaque widget.
         sortie 3_html_3fd22eca.png

Partie Application

Section Menu

       sortie 3_html_m49ca1a24.png

  • Cette section permet de paramétrer le style du menu principal de l’application (zone supérieure dans laquelle figurent la liste des pages accessibles).
             sortie 3_html_19c58138.png

       Example documentation icon FR.png
             sortie 3_html_40cbc2f4.png

  • Elle permet également de paramétrer la police du titre de l’application ainsi que des éléments de menus en mode actifs ou inactifs.
             sortie 3_html_m2fe4c74.png
Section Page

       sortie 3_html_mba9fec.png

Cette section permet de définir les paramètres par défaut de toutes les pages des applications.

  • Les propriétés Inside Color et Outside Color s’appliquent sur la zone centrale et sur les zones extérieures des applications.
  • Note : Pour que la couleur Outside soit visible, il faut que le site ait une largeur maximale.
             sortie 3_html_m5b27aef9.png
     
Section Widgets

       sortie 3_html_m53392142.png

Cette section permet de définir les paramétrages par défaut de tous les widgets.

  • La liste déroulante Element permet d’indiquer la partie concernée. L'option Widget modifie les couleurs de fond et de texte de tous les widgets :
             sortie 3_html_38805d52.png
  • La modification de la couleur active ne concerne que les widgets Tab et Accordion. Il s’agit de la couleur de l’élément sélectionné.

       sortie 3_html_m74f83f7a.png

  • De la même façon, la couleur secondaire concerne les onglets non sélectionnés pour les widgets Tab et Accordion.
             sortie 3_html_217fa011.png
Section Fonts

       sortie 3_html_m7945b7ef.png
Cette section permet de définir les polices par défaut des balises HTML pouvant être utilisées pour les différents textes définis dans les widgets.

  • La liste déroulante Title 1 (H1) permet de choisir la balise à modifier.
             sortie 3_html_m69259ab8.png

Partie Widgets

  • Le choix du widget à paramétrer peut être effectué soit en le sélectionnant dans la section correspondante, soit en cliquant dessus dans le volet Conception de l'application.
             sortie 3_html_45f8dd81.png
  • En fonction du widget choisi, plus ou moins d’éléments de style sont paramétrables. Tous les widgets intègrent au moins une section Thème reprenant la section correspondante lorsque le widget est positionné sur une page :
             sortie 3_html_3fd22eca.png

Gestion des accès sur les thèmes

  • Par défaut les thèmes créés par un Designer de thèmes ne peuvent être modifiés que par cet utilisateur ou par les App Center Manager.
  • Le créateur de thème peut donner l’accès à ses propres thèmes à d’autres Designers de thèmes.
  • L’interface d’accès est située dans la zone inférieure de la boîte de propriété du thème courant. La liste contient les autres Designers de thèmes. Il suffit de cocher la case à droite de l’adresse e-mail pour donner l’accès à l’utilisateur correspondant.
             sortie 3_html_m6a32ab7f.png

Autres améliorations sur le studio

Nouveautés sur le paramétrage des pages

Les paramètres modifiables sur une page correspondent aux paramètres sur l’éditeur de thème, onglet Application.
         sortie 3_html_m37fa557a.png

Nouveautés sur les sliders

Il est maintenant possible de saisir des valeurs numériques pour tous les composants sliders.
         sortie 3_html_m5b968852.png

Mise à jour de la charte graphique

La charte graphique générale a été homogénéisée et simplifiée en termes de structuration du HTML / CSS.

Nouveautés sur les widgets

Widget Menu

Modification graphique de la gestion des entrées du menu

Les entrées des menus sont maintenant gérées via une fenêtre popup, évitant de recourir à des scrolling trop importants lorsqu’un menu comporte de nombreuses entrées.
         sortie 4_html_m4269981e.png

(1)sortie 4_html_m1d7b075f.png : Affiche la fenêtre des entrées de menus
(2)sortie 4_html_3c36e9e4.png : Permet de dupliquer l'entrée de menu
(3)sortie 4_html_m29fb859c.png : Permet de supprimer l'entrée de menu

La fenêtre des entrées de menus est divisée en deux onglets : General et Indicator.
         sortie 4_html_m3762962c.png

(1)onglet General : informations qui étaient disponibles avec les versions précédentes directement au niveau de chaque entrée du menu.
(2)onglet Indicator : permet de paramétrer la nouvelle fonction Indicateur.

Nouvelles fonctions rattachées aux menus

  • Color On Hover : Permet de choisir la couleur de l’élément de menu lors du survol par la souris.
  • Lien Logout : En mode Exécution, permet de déconnecter l'utilisateur depuis une entrée de menu.
  • Liens inactifs : Une nouvelle option permet de désactiver le lien d’un élément de menu.
             sortie 4_html_359d74cc.png
  • Amélioration de la saisie des liens pour le catalogue des services : Lorsque l’élément de menu est destiné à permettre la création d’un nouveau service ou d’un nouvel incident, la saisie de l’élément concerné se fait maintenant depuis une liste des services et non plus en renseignant le GUID.
             sortie 4_html_af95af5.png
  • Affichage optionnel de la flèche droite sortie 4_html_m1f81725f.png : Lorsque le menu est disposé sur une seule colonne, l’affichage de la flèche est devenu optionnel.
             sortie 4_html_49a34027.png

Icône personnalisée pour les menus et mode recherche

  • La galerie des icônes comporte maintenant une zone de recherche (1) facilitant la sélection.
  • Une option similaire à celle disponible pour les custom widgets a été ajoutée. Elle permet de rajouter une icône personnalisée sur un élément de menu via une URL saisie dans la zone (2).
             sortie 4_html_4b20ea90.png

Ajout d’un indicateur

Un indicateur est une pastille contenant une valeur qui est affichée sur l’élément de menu. Il est possible d’en personnaliser l’aspect ainsi que la position :

  • La valeur est extraite d’une base de données.
  • La position de la pastille peut être finement définie via les nouvelles options rajoutées.
  • La couleur peut être fixe ou dépendante du contenu de la valeur.
             sortie 4_html_2b1d0068.png

Le paramétrage s'effectue via la boîte de dialogue :
         sortie 4_html_7ae69f99.png

(1)Datasource utilisée pour l’affichage du KPI
(2)Accès au data transformer
(3)Choix du champ utilisé par l’indicateur
(4)Sélection de la position de l’indicateur par rapport à l’icône ou au texte de l’icône. Les radio-boutons servent à matérialiser les différentes positions possibles.
(5)Distance entre la position choisie de l’indicateur et le texte ou l’icône
(6)Couleur de fond de l’indicateur
(7)Couleur du texte de l’indicateur
(8)Forme de l’indicateur : circulaire ou carré
(9)Taille de la police de l’indicateur
(10)Saisie optionnelle du seuil permettant de faire varier la couleur de l’indicateur en fonction de sa valeur. Cette zone de la boîte de dialogue est la même que pour la saisie des KPI.

Widget Dataviewer

  • Le dataviewer a été étendu et corrigé afin de le rendre plus souple et plus agréable à utiliser. En particulier, il est possible maintenant de définir précisément les polices utilisées pour le contenu via la section Grid Style. Note : Ces paramètres sont également accessibles via l’éditeur de thème.
             sortie 4_html_c0ff4fc.png
  • La propriété Element permet de définir les polices utilisées pour les entêtes, les lignes paires et les lignes impaires.
             sortie 4_html_m1e895e67.png
  • Le mode de visualisation par défaut du dataviewer est dorénavant le mode grille.
  • Le paramétrage du dataviewer intègre une nouvelle propriété Embedded Form dans la section Form du dataviewer qui permet d’intégrer au sein de la liste des entrées la vue Détail.
             sortie 4_html_m15f365d1.png

Example documentation icon FR.png  Catalogue des services

  • Actuellement, cliquer sur un service affiche la fenêtre Détail à la place de la liste des services ; le bouton sortie 4_html_7c3e5479.png permet de revenir sur la liste.
             sortie 4_html_m22fdc1de.png
             sortie 4_html_m58d2287e.png
  • Avec la nouvelle version, en cochant la nouvelle propriété Embedded Form dans la section Form du dataviewer, la fenêtre Détail apparait au-dessous du service sélectionné ; la liste des services reste affichée, en décalant les autres entrées vers le bas.
             sortie 4_html_4b88130d.png

Widget Filter

Le widget Filter peut maintenant être affiché horizontalement ou sous forme compressée via la propriété Display Type :
         sortie 4_html_42232ce8.png

Présentation verticale

       sortie 4_html_790be3ee.png

Si tous les éléments ne tiennent pas dans la zone, une flèche apparait à droite pour permettre l’accès aux éléments non affichés.
         sortie 4_html_m4fd9ac9e.png

Présentation horizontalesortie 4_html_6ce7af9d.png
Présentation ComboAdapté à l’affichage de filtres sur smartphones.

Widget Tab

Pour afficher des boîtes avec tabulations, deux widgets étaient jusqu'à présent utilisés :
         sortie 4_html_m278f337e.png

Ces deux widgets ont été regroupés en un seul, en ajoutant de nouvelles possibilités.

Note : Les anciens widgets Horiz Tab et Vert Tab ne sont plus affichés dans la liste des widgets, mais ils sont toujours présents dans le système ; toutes les applications qui en utilisent continuent de fonctionner.
         sortie 4_html_m6fc463b4.png

L’inspecteur de propriétés du nouveau widget se présente sous la forme suivante :
         sortie 4_html_m45a07007.png

Widgets Dashboard

Les widgets de la catégorie Dashboard ont été étendus afin d’ajouter un paramétrage plus fin des différentes polices utilisées.
         sortie 4_html_23bb3526.png

Nouveautés diverses

  • La couleur de fond des widgets concernent maintenant le header et le footer.
  • Il est maintenant possible de choisir d’afficher certains widgets uniquement en mode mobile via la nouvelle propriété disponible dans la section Theme :
             sortie 4_html_12ee3230.png

Interactions avec evSM

Nouvelle charte graphique des questionnaires

La procédure de génération des questionnaires a été réécrite pour gérer le responsive design des applications (le questionnaire s’affiche mieux sur mobile), mieux supporter les différents navigateurs et pour gérer les nouvelles fonctionnalités de la dernière version d’evSM.
         sortie 4_html_m754be8ce.png

Tags:
Modifié par Utilisateur inconnu le 2017/04/25 15:23
Créé par Administrator XWiki le 2015/11/06 18:41

Raccourcis

L'actualité mensuelle
•  Newsletter

Tous les changements
•  Service Manager
•  Service Apps
•  Self Help
•  Service Bots

Powered by XWiki ©, EasyVista 2021