L'éditeur graphique des applications


Apps - GUI overview.png

Chaque application est bâtie grâce à un éditeur graphique permettant de sélectionner les objets via différentes bibliothèques - datasources, widgets, Custom widgets - et de les configurer via un inspecteur de propriétés.

  • Un thème peut être associé à l'application, permettant d'appliquer une charte graphique.
  • Un découpage par pages permet des regroupements d'informations.
  • Une simulation d'affichage suivant le support graphique utilisé (PC, tablette, mobiles, TV, …) permet de concevoir une seule interface auto-adaptable suivant la résolution du support.
  • Une gestion des versions permet de revenir à tout moment à une version antérieure de l'application.

Une fois bâtie, l'application est distribuée aux utilisateurs via une URL ou un raccourci. Des propriétés exposées permettent de filtrer et d'accéder directement à un ou plusieurs enregistrements précis d'un datasource.

Remarques

  • Les widgets utilisant des datasources dynamiques sont automatiquement réactualisés à l'ouverture de l'éditeur graphique et à chaque réaffichage de la page.
  • Les propriétés exposées sont affichées dans la fenêtre de propriétés de l'application.
    • Seuls certains objets possèdent des propriétés exposés. La liste est définie par Logo - EasyVista.png.
    • Toutes les propriétés exposées des objets présents dans l'application sont automatiquement affichées.
    • Chaque objet peut posséder plusieurs propriétés exposées. 
    • Les raccourcis tiennent compte des propriétés exposées des applications sur lesquelles ils pointent : seuls les enregistrements correspondant aux valeurs des propriétés sont affichés.

Gestion des versions

  • L'historique des versions contient :
    • les points de restauration créés manuellement dans l'historique (champ Add Backup) - leur nombre est limité ;
    • les sauvegardes automatiques créées à chaque ouverture de l'application dans l'éditeur graphique - elles apparaissent sous le libellé Saved before editing by {Connected_User} ;
    • les sauvegardes manuelles créées via EVApps - GUI - Save icon.png - elles apparaissent sous le libellé Saved by {Connected_User}.
  • Chacune de ces sauvegardes est suivie de la date/heure de création.
  • Toutes les versions non supprimées manuellement sont conservés tant que l'application n'est pas supprimée.
  • Des sauvegardes régulières sont également effectuées automatiquement par le système suivant une fréquence paramétrée - elles n'apparaissent pas dans l'historique des versions.
  • À tout moment, il est possible de revenir à un état antérieur de l'application en sélectionnant la version souhaitée.
  • En cas d'arrêt anormal du système ou de fermeture involontaire de l'application, le système récupère la version la plus récente de l'application (dernière sauvegarde manuelle ou automatique du système).

Best Practice big icon.pngBonnes pratiques

  • Une annulation des modifications n'étant pas possible, créez un point de restauration via EVApps - GUI - History icon.png avant tout changement important.
  • Pour permettre le lancement (via une URL) de l’application sans paramètre, renseignez des valeurs par défaut dans les propriétés exposées.
BestPracticeShow
  • Toutes les autres applications auxquelles l'utilisateur peut avoir accès via l'icône EVApps - Execution - List Applications icon.png sont automatiquement chargées au démarrage d'une application. Pour éviter ce chargement et améliorer ainsi les performances d'exécution de l'application, vous pouvez masquer l'icône via la propriété dédiée Show App List -  Open url.png voir Propriétés générales
EndBestPracticeShow

Description de l'éditeur graphique

Accès : Sur la galerie, Apps - Application properties icon.png en regard de l'application à modifier

L'écran se décompose en 4 zones :

  • la barre d'outils (1), permettant de définir les propriétés générales de l'application, de gérer les versions, de simuler l'affichage sur les supports graphiques ;
  • le volet Objets (2), permettant la gestion des pages, des widgets, des datasources ;
  • le volet Conception (3), espace de travail sur lequel sont positionnés les widgets de l'application ;
  • l'inspecteur de propriétés (4), contextuel à chaque objet de l'application, permettant de les configurer et de définir leur comportement à l'écran.
             EVApps - GUI.png

La barre d'outils

        EVApps - GUI - Toolbar.png

EVApps - GUI - Close Application icon.png : Permet de fermer l'éditeur graphique et de revenir sur la galerie.


Apps - Application properties icon.png : Permet d'afficher les propriétés générales de l'application.
         EVApps - GUI - Application Properties.png

  • onglet Apps Icon : Permet de télécharger l'image associée à l'application sur la galerie, via Apps - Upload icon.png.
Onglet Représentation sur la galerie
Application Properties - Apps icon tab.png Application Properties - Apps icon tab - Gallery example.png

Note : Une fois téléchargée, vous pouvez rogner l'image :

  • survolez l'image avec la souris et cliquez sur Apps - Crop icon.png ; 
  • cliquez-glissez pour sélectionner la zone à conserver puis cliquez sur [ CROP IMAGE ].

         Application Properties - Apps icon tab - Crop.png

  • onglet Apps Header :  En mode Exécution, indique si la barre de titre de l'application affiche un titre (option Name : le titre affiché est le contenu du champ Display Name) ou un logo (option Logo : téléchargez celui-ci en cliquant sur Apps - Upload icon.png).
Onglet Représentation sur la barre de titre
Application Properties - Apps header tab.png

option Name

Apps - Title bar with title.png

option Logo

Apps - Title bar with logo.png

Best Practice icon.png Pour avoir une visualisation optimale du logo, utilisez une image avec un ratio permettant l'affichage en longueur. Note : Les images sont automatiquement compressées à l'affichage pour garantir les performances du système.
  • onglet Favicon : Permet de sélectionner l'icône s'affichant dans la barre d'onglets du navigateur Internet ou comme raccourci de l'application sur le bureau.
    • Apps - Upload icon.png : Permet de sélectionner l'image souhaitée. L'image est automatiquement téléchargée en plusieurs résolutions pour s'adapter aux différents supports. Le choix de la bonne résolution s'effectue automatiquement lorsque l'utilisateur exécute l'application sur un support donné ou installe le raccourci sur son bureau.
    • Apps - Remove uploaded file icon.png : Permet de supprimer toutes les résolutions téléchargées.
       
Onglet Représentation dans la barre d'onglets Représentation sur le bureau
Application Properties - Favicon tab.png Application Properties - Favicon tab - Tab example.png

Open url.png voir Créer un raccourci sur mobile ou PC vers une application

Note : Vous pouvez sélectionner une image différente pour une résolution donnée : 

  • survolez la résolution à modifier ;
  • cliquez sur Apps - Upload icon.png et sélectionnez l'image souhaitée.
Application Properties - Favicon tab - one resolution.png

Favicon - Download ok.png : Indique que l'image de cette résolution est différente de l'image d'origine.

Favicon - Delete resolution.png : Permet de revenir à l'image d'origine dans la résolution sélectionnée.

  • Name : Nom de l'application affiché sur la galerie.
  • Display Name : Nom de l'application affiché dans la barre de titre en mode Exécution.
  • Theme : Charte graphique de l'application, permettant de définir les couleurs de l'arrière-plan, des bordures, des polices, …. de l'ensemble des objets (pages, widgets).
    • Lorsque vous sélectionnez un thème, les changements sont automatiquement visualisés sur le volet Conception.
    • Une liste de thèmes est fournie par Logo - EasyVista.png.
    • Vous pouvez définir des configurations particulières au niveau de la page et des widgets via les propriétés de la catégorie Theme.
  • Description : Descriptif rapide du contenu de l'application, affiché sur la galerie.
  • Choose an execution context : Nom du contexte d'exécution courant, indiquant sur quelle base de données s'exécute l'application.
    • Les contextes d'exécution sont définis au niveau des connecteurs
    • Si le contexte d'exécution courant n'est pas renseigné et si des alias sont définis sur les datasources, l'application s'exécute sur les valeurs par défaut de ces alias.
  • This application never disconnects : Indique si le compte Product name - ev sas.png de l'application est déconnecté automatiquement au bout d'une certaine durée d'inactivité (case non cochée) ou si le compte reste connecté, même en cas d'inactivité (case cochée).

    Best Practice icon.png  Pour des raisons de sécurité, limitez cet usage à des applications affichées sur grand écran comme les écrans du centre d'opérations du Service Desk ou des enseignes dans les lieux publics. Ne l'utilisez pas pour des applications où l'utilisateur connecté peut créer ou manipuler des données, car celui-ci peut ne pas être l'exécutant actuel de l'application.

OptionsShow
  • Show Main Toolbar : En mode Exécution, indique si la barre de titre de l'application est affichée (case cochée) ou non (case non cochée).
  • Show App List : Uniquement lorsque la propriété Show Main Toolbar est active (case cochée), indique si, en mode Exécution, l'icône EVApps - Execution - List Applications icon.png, permettant d'afficher/masquer la liste des applications auxquelles l'utilisateur a accès, est affichée (case cochée) ou non (case non cochée).
Propriétés Représentation en mode Exécution
  • Show Main Toolbar : case cochée
  • Show App List : case cochée
Properties title bar - Show all.png
  • Show Main Toolbar : case cochée
  • Show App List : case non cochée
Properties title bar - Show main toolbar On - Show app list Off.png
  • Show Main Toolbar : case non cochée
  • Show App List : case cochée ou case non cochée
Properties title bar - Show nothing.png
EndOptionsShow

 

  • Choose a public User : Utilisateur Public associé à l'application, permettant de définir des pages publiques (informations accessibles à tous les utilisateurs) et privées (informations nécessitant de se connecter) -  Open url.png voir Gestion du mode Public
    • Les utilisateurs Public ont un profil particulier activé au niveau de la gestion des accès.
    • Cliquez sur Apps - Delete icon.png pour désassocier l'utilisateur Public de l'application et repasser celle-ci en mode Privé. Dans ce cas, elle redevient accessible aux seuls utilisateurs ayant des droits de consultation.
  • Help Link : URL de la page d'aide associée à l'application.
    • Cliquez sur le libellé pour afficher la zone de saisie. 
    • En mode Exécution, lorsqu'une URL est renseignée, l'icône ev sas - Help icon.png s'affiche dans la barre de titre de l'application.
       
  • [ EXPOSED PROPERTIES ] : Permet l'accès aux propriétés exposées, qui sont les paramètres pouvant être passés dans l'URL de l'application afin d'appliquer un filtre / vue, ou d'accéder directement à certains enregistrements. Une fois les propriétés définies, le lien URL peut être généré -  Open url.png  voir Exemples et Procédure
             EVApps - GUI - Exposed properties.png
    • Les paramètres passés dans l'URL s'appliquent à l'ensemble des widgets de l'application.
      • Tous les widgets pointant sur un datasource dont l'une des propriétés exposées est passée en paramètre dans l'URL sont filtrés.
      • Si une valeur de paramètre est passée dans l'URL, seuls les enregistrements des widgets ayant cette valeur sont accessibles.
    • Chaque propriété exposée se rapporte à une propriété donnée (Property name) d'un objet (Widget name), et se compose d'un paramètre référencé via un alias (URL parameter alias) et de la valeur à lui appliquer (Content/Value).
      • Utilisez l'alias de paramètre pour donner un nom facilement identifiable à la propriété exposée. Double-cliquez sur la cellule pour modifier le nom proposé par défaut.

        Best Practice icon.png  Pour des raisons de sécurité, choisissez des alias de paramètres anonymes, tels Param1, Param2.

      • Les valeurs peuvent être des chaînes de caractères, des GUID... Double-cliquez sur la cellule pour modifier la valeur.
      • Les valeurs renseignées au niveau de l'objet (valeur d'un filtre, d'un champ de recherche...) sont affichées comme valeur par défaut.

        Example documentation icon FR.png  Datasource Employees List utilisant la vue Location ==> Valeur de la propriété exposée View = {F9CDD0AB-C29A-4013-BF84-FA1D260BCA8D}

    • L'accès aux propriétés exposées se fait également via la boîte de dialogue de partage de l'application, via EVApps - GUI - Share icon.png.
       

[ ADD PROPERTIES ] : Permet de sélectionner les propriétés exposées à passer en paramètre dans l'URL. Note : Tous les objets de l'application possédant des propriétés exposées sont affichés.
    Example documentation icon FR.png 

  • propriété Search Value se rapportant à la propriété Search > Search Field d'un datasource EasyVista 
  • propriété View se rapportant à une vue Product name - ev itsm.png d'un datasource
  • propriété Filter se rapportant à un filtre Product name - ev itsm.png d'un datasource
             EVApps - GUI - Exposed properties - Add.png

[ DELETE PROPERTIES ] : Permet de supprimer de la liste les propriétés exposées sélectionnées. Celles-ci ne sont alors plus passées en paramètres dans l'URL, et redeviennent disponibles dans la boîte de dialogue Add properties.

[ GENERATE URL ] : Permet de générer l'URL à partir de toutes les propriétés exposées affichées.

  • Le caractère & sépare chaque propriété exposée.
  • Le caractère = sépare l'alias et sa valeur transmise.
    https://....easyvista.com/index.php?name=com.80003.57f7d989d68cc&param1=value1&param2=value2&param3=value3...


Apps - Drop-down list Pages.png : Liste des pages de l'application. 

  • Sélectionnez l'une d'entre elles pour la visualiser dans le volet Conception
  • Pour afficher les propriétés, sélectionnez la page via le volet Objets en cliquant sur Apps - Manage pages icon.png.


EVApps - GUI - Share icon.png : Permet de partager l'application en distribuant son URL de lancement ou en créant un fichier d'export. Note : Pour exécuter l'application via l'URL, les identifiants de connexion à la plate-forme sont requis.
        EVApps - GUI - Share Apps.png

  • [ EXPORT ] : Permet d'exporter l'application sous la forme d'un fichier compressé (format .tar.gz).
    • Cliquez sur le lien qui s'affiche en bas de la boîte de dialogue pour sauvegarder le fichier.
    • L'export peut également se faire depuis la galerie.
    • L'application exportée peut ensuite être importée via la galerie.
              Example documentation icon FR.png  Export depuis un environnement de test  ==>  Import dans l'environnement de production
  • [ EXPOSED PROPERTIES ] : Permet l'accès aux propriétés exposées.
    • L'accès se fait également depuis les propriétés générales de l'application, via Apps - Application properties icon.png -  Open url.png  voir Description
    • Pour que le QR Code soit valide en permanence, celui-ci ne tient pas compte de ces propriétés.
       

EVApps - GUI - Save icon.png : Permet de sauvegarder l'application. La version est ajoutée dans l'historique -  Open url.png  voir Gestion des versions


EVApps - GUI - History icon.png : Permet de gérer l'historique des versions de l'application -  Open url.png  voir Gestion des versions
         EVApps - GUI - History.png
 

  • Add Backup: Permet de créer un point de restauration. Saisissez une description explicite permettant de repérer facilement les changements effectués pour cette version puis cliquez sur Apps - Plus icon.png.
  • Available Backups : Liste des versions disponibles pour l'application, pouvant être des points de restauration créés manuellement (1), des sauvegardes manuelles créées via EVApps - GUI - Save icon.png (2) et des sauvegardes automatiques créées à l'ouverture de l'éditeur graphique (3) -  Open url.png  voir Gestion des versions
    • EVApps - GUI - History icon.png : Permet de restaurer la version pour revenir à un état antérieur de l'application.
    • Apps - Delete icon.png : Permet de supprimer la version de l'historique. Cliquez sur [ DELETE ALL ] pour supprimer toutes les versions.


EVApps - GUI - Connector icon.png : Permet de configurer les connecteurs définissant les paramètres de connexion aux datasources. 

  • Les connecteurs définis au niveau de l'application sont disponibles uniquement pour cette application.
  • Les connecteurs définis au niveau de la galerie sont disponibles pour l'ensemble des applications.
     

EVApps - GUI - Conception mode icon.png et EVApps - GUI - Wysiwig mode icon.png : Permet de sélectionner le mode d'affichage du volet Conception. Note : Le mode actif est représenté par une icône bleue.

  • EVApps - GUI - Conception mode icon.png : Affichage en mode Conception, permettant de disposer de la barre d'outils au niveau de chaque ligne et chaque widget.
                     EVApps - GUI - Toolbar Object.png
  • EVApps - GUI - Wysiwig mode icon.png : Affichage en mode Wysiwyg, masquant les barres d'outils de chaque ligne et chaque widget.


Apps - GUI - Desktop view icon.png et Apps - GUI - Mobile view icon.png : Permet de masquer/visualiser les widgets à afficher sur des supports de petite taille. Note : Le mode actif est représenté par une icône bleue.

  • Apps - GUI - Desktop view icon.png : Mode Desktop, permettant de visualiser tous les widgets, sauf ceux s'affichant uniquement sur un écran de petite taille (les widgets dont la propriété Hide on Small Devices est cochée ne sont pas affichés).
  • Apps - GUI - Mobile view icon.png : Mode Mobile, permettant de visualiser uniquement les widgets définis pour les écrans de petite taille (seuls les widgets dont la propriété On Small Devices Only est cochée sont affichés).
     

EVApps - GUI - Target devices icon.png : Permet de simuler l'affichage de l'application sur un device particulier (moniteurs d'ordinateur, smartphones, tablettes, TV, …).
         EVApps - GUI - Target Devices.png

  • Cliquez sur une catégorie pour afficher les supports graphiques supportés par la plate-forme.
  • La liste Latest affiche les derniers supports graphiques utilisés.
  • Sélectionnez le support souhaité en cliquant sur EVApps - GUI - Portrait orientation icon.png (mode Portrait) ou EVApps - GUI - Landscape orientation icon.png (mode Paysage) : l'application est exécutée dans une fenêtre redimensionnée à la taille de la résolution sélectionnée.
  • Fermez la fenêtre pour retourner sur l'éditeur graphique.


EVApps - GUI - Execute icon.png : Permet d'exécuter l'application. Note : Celle-ci est affichée dans un nouvel onglet du navigateur Internet.

AuthenticationZone

Apps - Authentication zone.png : Zone d'authentification de l'utilisateur connecté. 

  • Apps - Logout icon.png : Permet de quitter la plate-forme.
  • Clic sur la photo ou le nom : Permet d'accéder à la fenêtre d'informations personnelles de l'utilisateur.
             EVApps - Gallery - User Profile.png
    • Name, Email : Nom et e-mail de l'utilisateur connecté. Pour associer une photo, cliquez sur Apps - Upload icon.png.
    • Customer : Compte de la plate-forme Product name - ev sas.png à laquelle est connecté l'utilisateur.
    • Current Password : Mot de passe actuel de l'utilisateur connecté. Pour le modifier, renseignez le champ New puis confirmez la saisie dans le champ Confirm new Password.
    • System Message : Langue utilisée pour l'affichage des messages d’erreurs et des messages système.

      Les propriétés ci-dessous sont héritées de la plate-forme utilisée par l'utilisateur connecté (sous Windows : Panneau de configuration > Paramètres Région et langue) et peuvent être surchargées au niveau de la fenêtre d'informations personnelles.

      • Date format : Format appliqué aux dates.
      • Time format : Format appliqué aux heures.
      • Thousands separator : Séparateur des milliers.
      • Decimals separator : Séparateur décimal.
       
    • [ MANAGE MY EXTERNAL ACCOUNTS ] (Note : Uniquement si l'utilisateur connecté peut accéder à des services en mode d'authentification OAuth 2.0 avec ses propres comptes) : Permet à l'utilisateur connecté de gérer ses comptes d'accès personnels aux services (produits tiers) accessibles en mode d'authentification OAuth 2.0. Note : Les services paramétrés au niveau des connecteurs sont accessibles via le compte paramétré au niveau du connecteur.

          Example documentation icon FR.png  Connexion au service Tweeter :

      • Tweets de la société  ==>  l'utilisateur a automatiquement accès aux fils d’actualité de la société via le compte paramétré au niveau du connecteur - ce compte n'apparaît pas dans la liste
      • Accès aux tweets personnels  ==>  l'utilisateur doit saisir ses propres identifiants - ce compte apparaît dans la liste

      EVApps - Gallery - User Profile - Manage external resources.png
      • Service : Nom du service.
      • Visibility : Indique si l'authentification est disponible uniquement pour l'utilisateur connecté (option Private) ou pour l'ensemble des utilisateurs ayant accès au service via une application Product name - ev sas.png (option Public).
      • Account : Compte associé au service.
      • Apps - Delete icon.png : Permet de supprimer les informations d'authentification du service sélectionné.
        • Cliquez sur [ REMOVE ALL ] pour supprimer les informations de l'ensemble des services.
        • Si les informations sont utilisées dans une application Product name - ev sas.png, un message est affiché. En confirmant la suppression, les utilisateurs de l'application doivent alors s'identifier à nouveau comme s'ils n'étaient pas enregistrés.

 

Le volet Objets

Pages
Apps - Manage pages icon.png Permet de gérer les pages de l'application.
  • En mode Exécution :
    • les pages sont affichées dans l'ordre de la liste ;
    • seules les pages sélectionnées via la case à cocher en regard de chaque page sont affichées ;
    • la première page est la page par défaut sur laquelle s'ouvre automatiquement l'application.
ToolbarPageDescription

Apps - Add icon.png : Ajoute une nouvelle page. Celle-ci est affichée à la fin de la liste des pages.

ev sas - Help icon.png : Ouvre la page d'aide contextuelle.

Box checked.png : Indique si la page est visible en mode Exécution (case cochée) ou masquée (case non cochée).

Apps - Edit icon.png : Affiche le contenu de la page sélectionnée dans le volet Conception et ouvre l'inspecteur de propriétés.


Apps - Public page icon.png   Apps - Private page icon.png (Note : Uniquement si un utilisateur Public est associé à l'application) : Indique s'il s'agit d'une page publique ou privée - Open url.png voir Gestion du mode Public

Wheel icon.png : Ouvre le menu contextuel à la page. Apps - Page - Toolbar contextual menu.png

Apps - Delete icon.png : Supprime la page sélectionnée.

Apps - Duplicate 2 icon.png : Duplique la page sélectionnée. La nouvelle page est automatiquement créée sous la page dupliquée, avec le même libellé suivi de la mention (Copy).


Apps - Order objects icon.png : Modifie l'ordre des pages, via un cliquer-glisser.

EVApps - GUI - Manage Pages.png
Widgets
Apps - Manage widgets icon.png Permet d'afficher la liste des widgets définis dans l'application, classés par catégorie.
  • Chaque widget est précédé de l'icône identifiant son type.
  • Cliquez sur le nom d'un widget pour le visualiser sur le volet Conception : l'inspecteur de propriétés est automatiquement ouvert.

Zone de recherche Apps - Search icon.png : Filtre les widgets à partir de leur nom. Note : La recherche s'effectue également sur les Custom widgets.

Apps - Duplicate icon.png : Duplique le widget sélectionné.

  • L'inspecteur de propriétés est automatiquement ouvert sur ce nouveau widget.
  • Dans la liste des widgets, il est affiché sous l'objet dupliqué, avec le même libellé suivi de la mention (Copy).
  • Sur le volet Conception, il est placé en dessous du widget source, et peut être déplacé comme les autres widgets.

Apps - Delete icon.png : Supprime le widget sélectionné.

EVApps - GUI - Manage Widgets.png
Apps - Add widget icon.png Permet de créer un nouveau widget à partir de l'un des types de widgets définis dans la bibliothèque.
  • Ouvrez l'une des catégories pour afficher les types de widgets associés, via Apps - Category close.png en regard de celle-ci puis cliquez-glissez le type de widget souhaité sur le volet Conception : l'inspecteur de propriétés est automatiquement ouvert.

Zone de recherche Apps - Search icon.png : Filtre les types de widgets à partir de leur nom. Note : La recherche s'effectue également sur les Custom widgets.

ev sas - Help icon.png : Ouvre la page d'aide contextuelle au type de widget.

Apps - Types widgets.png
Datasources
Apps - Manage datasources icon.png Permet d'afficher la liste des datasources définis dans l'application.
  • Chaque datasource est précédé de l'icône identifiant son type.
  • Cliquez sur le nom d'un datasource pour ouvrir l'inspecteur de propriétés.
  • Les datasources pointant sur un alias sont inscrits en gras.

Zone de recherche Apps - Search icon.png : Filtre les data sources à partir de leur nom.

Utilization counter icon.png : Compteur indiquant le nombre de fois où le datasource est utilisé dans l'application. La liste des widgets est affichée en le survolant.

Apps - Duplicate icon.png : Duplique le data source sélectionné. Note : Les datasources composites ne sont pas duplicables.

  • L'inspecteur de propriétés est automatiquement ouvert sur ce nouveau data source.
  • Dans la liste des data sources, il est affiché sous l'objet dupliqué, avec le même libellé suivi de la mention (Copy).

Apps - Delete icon.png : Supprime le data source sélectionné.

EVApps - GUI - Manage Datasources.png
Apps - Add datasource icon.png Permet de créer un nouveau datasource à partir de l'un des types de datasources définis dans la bibliothèque.
  • Ouvrez l'une des catégories pour afficher les types de datasources associés, via Apps - Category close.png en regard de celle-ci puis cliquez sur celui souhaité : l'inspecteur de propriétés est automatiquement ouvert.

ev sas - Help icon.png : Ouvre la page d'aide Bibliothèque des datasources.

Zone de recherche Apps - Search icon.png : Filtre les types de data sources à partir de leur nom.

Apps - Types datasources.png

 

Le volet Conception

Il définit l'espace de travail, qui est découpé en lignes, chacune fractionnée virtuellement en 12 colonnes maximum de taille égale. Le volet Conception reflète automatiquement chaque modification des propriétés des widgets.
         EVApps - widget Layout - Virtual Screen.png

  • Sur chaque ligne, les emplacements des widgets sont créés via des widgets de la catégorie Layout.
  • Suivant la taille du support graphique (moniteurs d'ordinateur, smartphones, tablettes, TV, ...), un widget peut occuper la totalité des 12 colonnes (pleine ligne) ou plusieurs widgets peuvent être affichés sur la même ligne.
  • Les objets sont délimités en les survolant :
    • des pointillés verts délimitent les objets contenus sur une ligne/colonne ;
    • un cadre vert délimite un objet.

Best Practice icon.png  Si la délimitation de la zone n'apparaît pas correctement, réduisez le niveau de zoom du navigateur.

Ligne Colonne Widget
EVApps - GUI - Toolbar Object Row.png EVApps - GUI - Toolbar Object Custom.png EVApps - GUI - Toolbar Object Widget.png
  • Chaque ligne/colonne/widget possède un menu contextuel : survolez la barre de l'objet avec la souris puis cliquez sur Wheel icon.png :
                  Apps - GUI - Contextual menu.png
    • Apps - Duplicate 2 icon.png Create Custom Widget : Permet de créer un nouveau Custom widget à partir des objets contenus dans la ligne/colonne sélectionnée ;
    • Apps - Delete icon.png Delete Row / Apps - Delete icon.png Delete Column : Permet de supprimer la ligne/colonne sélectionnée.
    • Apps - Duplicate icon.png Copy widget : Permet de dupliquer le widget sélectionné.
      • Un nouveau widget est automatiquement créé et apparaît dans la liste des widgets avec le libellé (Copy).
                 Apps - Duplicate widget.png
      • Il est placé sur le volet Conception en dessous du widget source, et peut être déplacé comme les autres widgets.
      • Il est directement ouvert en mode Édition.
         
    • Apps - Delete icon.png Remove widget : Permet de supprimer le widget sélectionné.
       
    • Apps - Stack on small icon.png Stack on small (mode d'affichage par défaut) : Permet de laisser le Responsive design gérer le placement des widgets en fonction de la largeur de l'écran du support (PC, mobile, tablette,...) : les widgets sont automatiquement placés en ligne, puis placés les uns sous les autres en-deça d'une certaine largeur de l'écran.
       
    • Apps - Single row on small icon.png Single row on small : Permet de forcer le placement des widgets sur une seule ligne et de les garder solidaires quelle que soit la largeur de l'écran du support.

      option Stack on small   Apps - Stack on small icon.png option Single row on small   Apps - Single row on small icon.png

      Affichage sur un PC

      Apps - GUI - Stack on small - Desktop.png

      Affichage sur un PC

      Apps - GUI - Single row on small.png

      Affichage sur un smartphone (Android, iPhone)

      Apps - GUI - Stack on small - Mobile.png

      Affichage sur un smartphone (Android, iPhone)

      Apps - GUI - Single row on small.png

  • Les objets sélectionnés peuvent être déplacés vers un nouvel emplacement : survolez l'objet avec la souris pour faire apparaître le curseur Cursor move icon.png. Note : Les emplacements disponibles sont affichés en vert, avec le libellé Drop Here.
             EVApps - GUI - Toolbar Object Move.png
  • La taille de chaque colonne peut être modifiée via EVApps - GUI - Move left icon.png et EVApps - GUI - Move right icon.png.
  • Une colonne peut être fractionnée en 2 via Apps - Plus icon.png. La nouvelle colonne est ajoutée à droite de la colonne existante.
  • La hauteur d'un objet peut être modifiée via EVApps - GUI - Dimension icon.png affiché en positionnant le curseur sur le bas de l'objet.

Best Practice icon.png  Pour appliquer exactement la même hauteur à un ensemble d'objets, renseignez la propriété Theme > Widget Height de chacun d'entre eux.

                   EVApps - GUI - Toolbar Object Height.png

 

L'inspecteur de propriétés

Il permet de configurer chaque objet utilisé par l'application : page, datasource, widget

  • Les propriétés sont contextuelles à chaque type d'objet.
  • Le volet Conception reflète automatiquement chaque modification des propriétés.
     
Page Datasource Widget
Accès :
  • Dans le volet Objets, cliquez sur Apps - Manage pages icon.png puis sur Apps - Edit icon.png en regard de la page souhaitée.
Accès :
  • Dans le volet Objets, cliquez sur Apps - Manage datasources icon.png puis sur Apps - Edit icon.png en regard du datasource souhaité.

    ou

  • Depuis un widget lié à un datasource, cliquez sur Apps - Edit icon.png en regard de celui-ci.
Accès :
  • Dans le volet Conception, cliquez sur le widget souhaité.

    ou

  • Dans le volet Objets, cliquez sur Apps - Manage widgets icon.png puis sur le libellé du widget souhaité.
EVApps - GUI - Inspector Properties Page.png EVApps - GUI - Inspector Properties Datasource.png EVApps - GUI - Inspector Properties Widget.png

ev sas - Help icon.png : Ouvre la page d'aide contextuelle à l'objet.

Apps - Duplicate 2 icon.png sur un widget : Permet de créer un Custom widget en utilisant le widget sélectionné comme modèle.

Les propriétés sont regroupées par catégorie :

  • Catégorie Content : Propriétés minimum nécessaires pour que l'objet fonctionne.
  • Catégorie Data : Propriétés de paramétrage du datasource utilisé par le widget.
  • Catégories Chart et Chart Label -/- Legend : Propriétés relatives à la présentation graphique des widgets Dashboards (légende, libellés et couleur des axes, …).
  • Catégorie Theme : Propriétés graphiques relatives à un widget ou une page (bordure, couleur du fond, couleur du texte, ...). Note : Les propriétés sont héritées des propriétés définies au niveau supérieur. Chaque objet peut ensuite être surchargé dans un contexte particulier -  Open url.png  voir Principe de l'héritage
     

Plusieurs outils sont accessibles depuis les propriétés des widgets :

Procédure : Comment utiliser l'éditeur graphique

1. Sur la galerie, cliquez sur Apps - Application properties icon.png en regard d'une application pour l'ouvrir en mode Édition.

2. Vous pouvez découper l'application en sous-applications via des pages

  • Dans le volet Objets, cliquez sur Apps - Manage pages icon.png puis sur Apps - Add icon.png pour ajouter une nouvelle page.
  • Si vous souhaitez rendre privées certaines pages :
    • associez un utilisateur Public à l'application -  Open url.png voir Gestion du mode Public :
      • si nécessaire, définissez celui-ci via la gestion des accès (cochez la case Public User Apps - Public user Profile.png pour l'utilisateur souhaité) ;
      • affichez les propriétés générales de l'application via Apps - Application properties icon.png et sélectionnez l'utilisateur via le champ Choose a public User.
    • affichez la liste des pages via Apps - Manage pages icon.png puis cliquez ensuite sur Apps - Public page icon.png pour rendre la page privée ou sur Apps - Private page icon.png pour la rendre publique.

3. Définissez les emplacements des nouveaux widgets à afficher sur la page courante.

Best Practice icon.png  Créez un point de restauration via EVApps - GUI - History icon.png avant d'effectuer toute modification des propriétés ou de la mise en page des widgets. Cela vous permet de revenir à une version antérieure si nécessaire -  Open url.png  voir Gestion des versions

  • dans le volet Objets, cliquez sur Apps - Add widget icon.png ;
  • cliquez-glissez l'un des widgets de la catégorie Layout Apps - Widget - Layout 12 icon.png, Apps - Widget - Layout 6 icon.png, Apps - Widget - Layout 4 icon.png, Apps - Widget - Layout 3 icon.png, Apps - Widget - Layout 2 icon.png vers le volet Conception. Note : Lorsque vous glissez le widget, l'emplacement s'affiche en vert, avec le libellé Drop Here.
             EVApps - GUI - Procedure 1.png

4. Si nécessaire, créez les datasources devant pointer sur les nouveaux widgets : cliquez sur Apps - Add datasource icon.png dans le volet Objets.

5. Positionnez et configurez les widgets utilisés par la page courante :

  • dans le volet Objets, cliquez sur Apps - Add widget icon.png ;
  • cliquez-glissez le nouveau type de widget souhaité vers l'un des emplacements disponibles du volet Conception ;
             EVApps - GUI - Procedure 2.png ==> EVApps - GUI - Procedure 3.png
  • renseignez les propriétés du nouveau widget via l'inspecteur : les modifications sont automatiquement prises en compte et affichées dans le volet Conception. Note : Les propriétés obligatoires sont regroupées dans la catégorie Content.

6. Pour modifier un widget : 

  • dans le volet Conception, cliquez sur le widget souhaité - ou - dans le volet Objets, cliquez sur Apps - Manage widgets icon.png puis sur le libellé du widget souhaité ;
  • pour modifier sa hauteur : renseignez la propriété Theme > Widget Height - ou - dans le volet Conception, positionnez le curseur sur le bas de l'emplacement du widget et glissez la barre grise vers le bas ou vers le haut ;
             EVApps - GUI - Procedure 4.png

7. Pour supprimer un widget :

  • dans le volet Conception, cliquez sur Apps - Delete icon.png dans la barre d'outils du widget - ou - dans le volet Objets, cliquez sur Apps - Manage widgets icon.png puis cliquez sur Apps - Delete icon.png en regard du widget souhaité.
             EVApps - GUI - Procedure 5.png

8. Pour déplacer un widget :

  • dans le volet Conception, positionnez la souris au-dessus du widget à déplacer : le curseur se transforme en Cursor move icon.png ;
             EVApps - GUI - Procedure 6.png
  • glissez l'objet vers l'emplacement souhaité ;
             EVApps - GUI - Procedure 7.png ==> EVApps - GUI - Procedure 8.png

9. À tout moment, passez en mode Wysiwyg EVApps - GUI - Wysiwig mode icon.png pour masquer les barres d'outils des objets ; cliquez sur EVApps - GUI - Conception mode icon.png pour revenir en mode Conception.

10. Vérifiez l'affichage et le bon fonctionnement de votre application en l'exécutant :

  • cliquez sur EVApps - GUI - Execute icon.png pour exécuter l'application dans un nouvel onglet du navigateur Internet ;
  • cliquez sur EVApps - GUI - Target devices icon.png et sélectionnez le device sur lequel l'utilisateur va visualiser l'application : cliquez sur EVApps - GUI - Portrait orientation icon.png pour un affichage en mode Portrait ou sur EVApps - GUI - Landscape orientation icon.png pour un affichage en mode Paysage.

11. Une fois la nouvelle application créée, donnez les droits en exécution aux utilisateurs souhaités :

  • cliquez sur EVApps - GUI - Close Application icon.png pour fermer l'éditeur graphique : vous revenez sur la galerie d'applications. Note : L'application est automatiquement sauvegardée ;
  • cliquez sur Apps - User profile.png en regard de l'application et renseignez les droits d'accès pour chaque utilisateur souhaité.

Utilisation des propriétés exposées

Exemples

    Open url.png  voir Description des propriétés

1. Afficher des fiches de l'annuaire des employés Product name - ev itsm.png

  • Par défaut, tous les enregistrements sont affichés via un widget Data Viewer pointant sur un datasource EasyVista.
  • Pour afficher uniquement les employés dont le login contient la valeur ALBERS, la propriété exposée SearchValue du datasource est passée en paramètre de l'URL -  Open url.png  voir Procédure
             EVApps - GUI - Exposed properties - Example Employee directory.png

2. Renvoyer l'utilisateur vers les détails d’un incident précis via un e-mail automatique envoyé depuis Product name - ev itsm.png

  • Pour sélectionner l'incident, la propriété exposée SearchValue du datasource EasyVista est passée en paramètre de l'URL -  Open url.png  voir Procédure

Comment générer une URL d'accès direct à des fiches Employés

    Open url.png  voir Description des propriétés exposées

Example documentation icon FR.png  Générer une URL permettant d'accéder directement aux fiches des employés dont le login contient la valeur ALBERS

1. Créez un datasource EasyVista Employee List :

2. Ajoutez un widget Data Viewer pointant sur le datasource EasyVista, avec le mode par défaut Grid. Tous les enregistrements du datasource sont affichés en mode Liste.
         EVApps - GUI - Exposed properties - Example - All.png

3. Sélectionnez les propriétés exposées permettant d'effectuer la recherche sur le login des employés :

  • ouvrez la boîte de dialogue Exposed properties via Apps - Application properties icon.png ou EVApps - GUI - Share icon.png ;
  • cliquez sur [ ADD PROPERTIES ] ;
  • sélectionnez la propriété Search Value du datasource Employee List et cliquez sur [ OK ].
             EVApps - GUI - Exposed properties - Example - Add properties.png

4. Définissez la valeur de la propriété exposée, pour afficher uniquement les fiches des employés dont le login contient la valeur ALBERS :

  • double-cliquez sur la cellule URL parameter alias et renommez l'alias de paramètre par LOGIN ;
  • double-cliquez sur la cellule Content/Value et saisissez la valeur recherchée ALBERS.
             EVApps - GUI - Exposed properties - Example - Define properties.png

5. Générez le lien URL, via [ GENERATE URL ].

6. Lancez l'application, soit en cliquant sur le lien et en le collant dans votre navigateur Internet, soit en cliquant sur le lien Execute url application.
         EVApps - GUI - Exposed properties - Example Employee directory.png

Tags:
Modifié par Utilisateur inconnu le 2018/05/31 17:55
Créé par Administrator XWiki le 2014/09/02 11:33

Raccourcis

Recent Updates

Haven't been here in a while? Here's what changed recently:

-   Product name - ev itsm.png
-   Product name - ev sas.png

Interesting Content

How to Automate Integration
Add a Shortcut to an App
History
Quick Dashboard
Full text search - Stop Words

Powered by XWiki ©, EasyVista 2019