L'éditeur graphique des applications


L'éditeur graphique est l'outil de conception des applications. Il permet de :

  • sélectionner les objets de l'application via 2 bibliothèques :
    • bibliothèque de datasources : tous les moyens d'accès aux sources de données (bases, fichiers, sites internet, produits tiers) - la connexion s'effectue via des connecteurs ;
    • bibliothèque de widgets / Custom widgets : tous les composants graphiques permettant d'afficher les données et de définir l'aspect visuel de l'application.
  • bâtir l'application en positionnant les objets sur un espace de travail, nommé volet Conception ;
  • configurer et définir le comportement des objets via un inspecteur de propriétés ;
  • tester l'application en fonction du support d'affichage (smartphone, tablette, écran PC, ...).

Caractéristiques des applications

  • Chaque application peut :
    • être associée à un thème, définissant sa charte graphique ;
    • être découpée en pages pour regrouper les informations ;
    • contenir des pages publiques (accessibles à tout utilisateur) et des pages privées (informations nécessitant de se connecter) -  Open url.png voir Gestion du mode Public ;
    • être conçue en mode Responsive, permettant une mise à l'échelle automatique suivant le support d'affichage (smartphone, tablette, écran PC, ...).
       
  • Leur déploiement se fait en communiquant aux utilisateurs un lien d'accès à l'application, via une URL directe ou, de préférence, via un raccourci.
  • Des paramètres peuvent être passés dans l'URL de l'application afin d'appliquer un filtre / vue, ou d'accéder directement à certains enregistrements  - Open url.png voir Propriétés exposées
  • Une gestion des versions permet de revenir à tout moment à une version antérieure de l'application.

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.

Bonnes 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.
  • En mode Exécution, l'utilisateur a accès à toutes ses applications via l'icône EVApps - Execution - List Applications icon.png. Celles-ci sont automatiquement chargées au lancement d'une application. Pour éviter ce chargement et améliorer ainsi les performances d'exécution de l'application courante, masquez l'icône via la propriété dédiée Show App List -  Open url.png voir Propriétés générales
  • Pour modifier rapidement votre charte graphique Service Apps, utilisez les variables CSS : celles-ci vous permettent de reporter automatiquement des propriétés graphiques (couleur, taille, ...) sur tous les widgets qui les utilisent dans l'ensemble de vos applications.

La gestion des versions

Historique des versions

  • Il est accessible via EVApps - GUI - History icon.png dans la barre d'outils.
  • Il contient :
    • les points de restauration créés manuellement dans l'historique (champ Add Backup) - leur nombre est limité ;
    • les sauvegardes automatiques effectuées à chaque ouverture de l'application dans l'éditeur graphique - elles apparaissent avec la mention Saved before editing by {Connected_User} ;
    • les sauvegardes manuelles effectuées via EVApps - GUI - Save icon.png - elles apparaissent avec la mention Saved by {Connected_User}.
  • Chacune des sauvegardes indique 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.
     

Sauvegardes système

  • Elles sont effectuées automatiquement par le système suivant une fréquence paramétrée. 
  • Elles n'apparaissent pas dans l'historique des versions.
     

Retour à une version antérieure

  • À tout moment, il est possible de revenir à un état antérieur de l'application en sélectionnant la version souhaitée dans l'historique.
  • 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).

Description de l'éditeur graphique

Accès : Dans la galerie, Apps - Application properties icon.png dans la barre d'outils de l'application

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

La barre d'outils

       EVApps - GUI - Toolbar.png

EVApps - GUI - Close Application icon.png : Ferme l'éditeur graphique et revient sur la galerie.


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

voir Détail des propriétés

  • onglet Apps Icon : Permet de télécharger l'image associée à l'application sur la galerie.
Onglet Représentation sur la galerie
Application Properties - Apps icon tab.png Application Properties - Apps icon tab - Gallery example.png
  • Sélectionnez l'image via Apps - Upload icon.png.
  • Pour rogner l'image :
    • Survolez-la avec la souris et cliquez sur Apps - Crop icon.png.
    • Cliquez-tirez pour sélectionner la zone à conserver.
    • 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) ou un logo (option Logo).
    • option Name : Le titre affiché est le contenu du champ Display Name.
    • option Logo : Téléchargez le logo via Apps - Upload icon.png.
      Best Practice icon.png Pour 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 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


  • 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.
    • 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.
Onglet Représentation
Application Properties - Favicon tab.png
  • Sélectionnez l'image via Apps - Upload icon.png.
  • Supprimez toutes les résolutions téléchargées via Apps - Remove uploaded file icon.png.
  • Pour 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 la 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 : Thème de l'application, définissant sa charte graphique (couleurs de l'arrière-plan, bordures, polices, ...).
    • Les changements sont automatiquement visualisés sur le volet Conception.
    • Des configurations particulières peuvent être définies au niveau des pages 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 (Note : Uniquement lorsque la propriété Show Main Toolbar est active) : En mode Exécution, indique si l'icône EVApps - Execution - List Applications icon.png (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 : cochée
    • Show App List : cochée
    Properties title bar - Show all.png
    • Show Main Toolbar : cochée
    • Show App List : non cochée
    Properties title bar - Show main toolbar On - Show app list Off.png
    • Show Main Toolbar : non cochée
    • Show App List : cochée ou non cochée
    Properties title bar - Show nothing.png
  • Choose a public User : Utilisateur ayant un profil Public associé à l'application.
    • Lorsqu'un utilisateur est sélectionné, il devient possible de définir des pages publiques (informations accessibles à tous les utilisateurs) et des pages privées (informations nécessitant de se connecter) - Open url.png voir Gestion du mode Public
    • Apps - Delete icon.png désassocie l'utilisateur de l'application : celle-ci repasse automatiquement en mode Privé.
  • Help Link : URL de la page d'aide associée à l'application.
    • Cliquez sur Black Right arrow icon.png et saisissez l'URL.
    • En mode Exécution, l'icône ev sas - Help icon.png s'affiche dans la barre de titre de l'application.
  • Exposed Properties : Accès aux propriétés exposées   - Open url.png voir Description
    • Il s'agit des 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.
    • Note : Le QR Code ne tient pas compte de ces propriétés, afin d'être valide en permanence.

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

  • Sélectionnez l'une d'entre elles pour afficher son contenu 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, le QR Code ou 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 : Exporte l'application sous la forme d'un fichier compressé (format .tar.gz).
    • Un lien est automatiquement généré : cliquez dessus 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 : Accès aux propriétés exposées  - Open url.png voir Description
    • Il s'agit des 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.
    • Note : Le QR Code ne tient pas compte de ces propriétés, afin d'être valide en permanence.
       

EVApps - GUI - Save icon.png : Sauvegarde l'application.


EVApps - GUI - History icon.png : Ouvre l'historique des versions de l'application -  Open url.png  voir Gestion des versions
         EVApps - GUI - History.png

  • Add Backup: Crée un point de restauration.
    • Saisissez une description explicite pour repérer facilement les changements effectués pour cette version.
    • Cliquez ensuite sur Apps - Plus icon.png.
  • Available Backups : Liste des versions disponibles pour l'application.
    • (1) Points de restauration créés manuellement 
    • (2) Sauvegardes manuelles créées via EVApps - GUI - Save icon.png
    • (3) Sauvegardes automatiques créées à l'ouverture de l'éditeur graphique

      EVApps - GUI - History icon.png : Restaure la version pour revenir à un état antérieur de l'application.
      Apps - Delete icon.png : Supprime la version de l'historique. Cliquez sur Delete all pour supprimer toutes les versions.
       

EVApps - GUI - Connector icon.png : Accès aux connecteurs utilisés par l'application (configuration des paramètres de connexion aux datasources de l'application).

  • Note : Les connecteurs peuvent également être définis au niveau de la galerie. Ils sont alors disponibles pour l'ensemble des applications.
     

Apps - GUI - Desktop view icon.png et Apps - GUI - Mobile view icon.png : Permet de gérer l'affichage des widgets 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 : Tous les widgets sont affichés, sauf ceux s'affichant uniquement sur un écran de petite taille (widgets avec la propriété Hide on Small Devices inactive).
  • Apps - GUI - Mobile view icon.png : Mode Mobile : Seuls les widgets définis pour les écrans de petite taille sont affichés (widgets avec la propriété On Small Devices Only active).
     

EVApps - GUI - Conception mode icon.png et EVApps - GUI - Wysiwig mode icon.png : Sur le volet Conception, bascule entre l'affichage en mode Conception (les barres d'outils sont visibles au niveau de chaque ligne et chaque widget) et l'affichage en mode Wysiwyg (toutes les barres d'outils sont masquées). Note : Le mode actif est représenté par une icône bleue.

Affichage en mode Conception   EVApps - GUI - Conception mode icon.png Affichage en mode Wysiwyg   EVApps - GUI - Wysiwig mode icon.png
Apps - GUI - Conception mode.png Apps - GUI - Wysiwyg mode.png

EVApps - GUI - Responsive mode icon.png : Accès au mode Responsive, permettant de surcharger les propriétés par défaut de chaque widget en fonction du type de device sur lequel l'application est exécutée (Smartphone, Tablette, Écran d’ordinateur, Écran d’ordinateur haute définition, Écran de téléviseur mural haut de gamme)  - Open url.png voir Description

  • L'éditeur graphique affiche une nouvelle barre d'outils.
  • Cliquez ensuite sur Apps - Responsive mode - Back to GUI icon.png pour retourner sur l'éditeur graphique en mode standard.
     

EVApps - GUI - Execute icon.png : Exécute l'application dans un nouvel onglet du navigateur Internet.

AuthenticationZone

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

  • Apps - Logout icon.png : Ferme la plate-forme.
  • Clic sur la photo ou le nom : Ouvre la fenêtre d'informations personnelles de l'utilisateur.
             EVApps - Gallery - User Profile.png

voir Détail des propriétés

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.
  • 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 pour les utilisateur ayant accès à des services en mode d'authentification OAuth 2.0 avec leurs propres comptes) : Permet à l'utilisateur connecté de gérer ses comptes d'accès personnels aux services accessibles en mode d'authentification OAuth 2.0.

EVApps - Gallery - User Profile - Manage external resources.png

  • Service : Nom du service (ou produits tiers).
  • 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 : Supprime les informations d'authentification du service sélectionné.
    • Cliquez sur Remove all pour supprimer les informations de l'ensemble des services.
    • Lorsque les informations supprimées sont utilisées dans une application, les utilisateurs doivent s'identifier à nouveau comme s'ils n'étaient pas enregistrés.

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
  • Tweets personnels ==> l'utilisateur doit saisir ses propres identifiants - ce compte apparaît dans la liste

 

Le volet Objets

Le volet Objets permet de gérer les objets de l'application : pages, datasources, widgets.

Apps - Manage pages icon.png Pages : Accès à la liste des pages de l'application.

  • Cliquez sur Apps - Edit icon.png pour ouvrir l'inspecteur de propriétés (accès aux propriétés graphiques de la page) et afficher le contenu de la page sur le volet Conception.
  • Les outils permettent de :
    • Apps - Add icon.png créer une nouvelle page ;
    • Box checked.png afficher / masquer les pages en mode Exécution ;
    • gérer des pages publiques Apps - Private page icon.png / privées Apps - Public page icon.png - Open url.png voir Gestion du mode Public ;
    • Wheel icon.png supprimer et dupliquer les pages via le menu contextuel ;
    • Apps - Order objects icon.png ordonner les pages.
               EVApps - GUI - Manage Pages.png
       

Apps - Add widget icon.png Add Widgets : Création des widgets de la page sélectionnée, à partir des types de widgets définis dans la bibliothèque.
         Open url.png voir procédure Comment ajouter un widget dans une application

  • Les outils permettent de :
    • Apps - Search icon.png rechercher et filtrer les types de widgets / types de Custom widgets à partir de leur nom ;
    • ev sas - Help icon.png ouvrir la page d'aide contextuelle au type de widget.
               Apps - Types widgets.png
       

Apps - Manage widgets icon.png Widgets : Accès à la liste des widgets / Custom widgets de la page sélectionnée, classés par catégorie.

  • Cliquez sur le nom d'un widget pour ouvrir l'inspecteur de propriété et visualiser le contenu sur le volet Conception.
  • Chaque widget est précédé de l'icône identifiant son type.
  • Les outils permettent de :
    • Apps - Search icon.png rechercher et filtrer les widgets / Custom widgets à partir de leur nom ;
    • Apps - Duplicate icon.png dupliquer les widgets : ceux-ci sont placés sur le volet Conception, en dessous du widget source ;
    • Apps - Delete icon.png supprimer les widgets de la bibliothèque de la page.
               EVApps - GUI - Manage Widgets.png
       

Apps - Add datasource icon.png Add Data Sources : Création des datasources de l'application, à partir des types de datasources définis dans la bibliothèque.

  • Les outils permettent de :
    • ev sas - Help icon.png ouvrir la page d'aide La bibliothèque des datasources ;
    • Apps - Search icon.png rechercher et filtrer les types de datasources à partir de leur nom.
               Apps - Types datasources.png
       

Apps - Manage datasources icon.png Data Sources : Accès à la liste des datasources de l'application, classés par catégorie.

  • Cliquez sur le nom d'un datasource pour ouvrir l'inspecteur de propriétés.
  • Chaque datasource est précédé de l'icône identifiant son type.
  • Les datasources pointant sur un alias sont inscrits en gras.
  • Les outils permettent de :
    • Apps - Search icon.png rechercher et filtrer les datasources à partir de leur nom ;
    • Utilization counter icon.png visualiser le nombre de fois où le datasource est utilisé dans l'application et d'afficher la liste des widgets en survolant le compteur ;
    • Apps - Duplicate icon.png dupliquer les datasources. Note : Sauf pour les datasources composites ;
    • Apps - Delete icon.png supprimer les datasources de la bibliothèque de l'application.
               EVApps - GUI - Manage Datasources.png

 

Le volet Conception

Le volet Conception définit l'espace de travail sur lequel sont positionnés les widgets de l'application. Il reflète automatiquement chaque modification des propriétés des objets (page, datasource, widget).
         GUI - Design panel - Overview.png
 

  • L'espace est découpé en lignes, chacune fractionnée virtuellement en 12 colonnes maximum de taille égale.
            EVApps - widget Layout - Virtual Screen.png
  • Les emplacements 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.
     

Principes d'utilisation

  • L'emplacement des widgets peut être visualisé en les survolant avec la souris.
    • 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 widget peut être déplacé.
    • Survolez l'objet pour faire apparaître le curseur Cursor move icon.png.
    • Cliquez-glissez l'objet vers le nouvel emplacement. Note : Les emplacements disponibles sont affichés en vert, avec la mention Drop a Layout Widget Here.
               EVApps - GUI - Toolbar Object Move.png
       
  • La hauteur d'un widget peut être modifiée.
    • Positionnez le curseur sur le bas de l'objet pour faire apparaître le curseur EVApps - GUI - Dimension icon.png.
    • Cliquez et redimensionnez l'objet vers le haut ou vers le bas.
               EVApps - GUI - Toolbar Object Height.png

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.

 

  • Chaque ligne/colonne/widget possède un menu contextuel permettant d'effectuer différentes actions.
    • Survolez la barre de l'objet avec la souris.
    • Cliquez sur Wheel icon.png.
               GUI - Design panel - Contextual menu.png
       

Description des options du menu contextuel

  • Apps - Duplicate 2 icon.png Create Custom Widget : Crée un nouveau Custom widget à partir des objets contenus dans la ligne/colonne sélectionnée  - Open url.png voir Procédure
     
  • Apps - Delete icon.png Delete Row / Apps - Delete icon.png Delete Column : Supprime la ligne/colonne sélectionnée.
    • Tous les widgets situés sur la ligne/colonne sont supprimés du volet Conception.
    • Ils restent disponibles dans la bibliothèque des widgets de l'application.
       
  • Apps - Duplicate icon.png Copy widget : Duplique le widget sélectionné.
    • Le même nom est appliqué, avec la mention (Copy).
               Apps - Duplicate widget.png
    • Le nouveau widget est placé sur le volet Conception, en dessous du widget source.
    • Il est directement ouvert en mode Édition.
       
  • Apps - Delete icon.png Remove widget : Supprime le widget sélectionné du volet Conception.
    • Le widget reste disponible dans la bibliothèque des widgets de l'application.
       
  • Apps - Stack on small icon.png Stack on small (mode d'affichage par défaut) : Positionne automatiquement les widgets en fonction du type de device (mobile, tablette, écran d'ordinateur, ...).
    • 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 : Force le placement des widgets sur une seule ligne.
    • Les widgets restent 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

 

L'inspecteur de propriétés

L'inspecteur de propriété permet de configurer chaque objet utilisé par l'application : page, datasource, widget. Le volet Conception reflète automatiquement chaque modification des propriétés.

  • Les propriétés sont contextuelles à chaque type d'objet.
  • Elles 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
       

   Example documentation icon FR.png  Inspecteur de propriétés pour un widget
         GUI - Inspector properties - Widget.png

Accès suivant le type d'objet

  • Page : Clic sur Apps - Manage pages icon.png Pages dans le volet Objets, puis Apps - Edit icon.png en regard de la page
     
  • Datasource :
    • Clic sur Apps - Manage datasources icon.png Data Sources dans le volet Objet, puis clic sur le nom du datasource
      ou
    • depuis un widget lié à un datasource : Clic sur Apps - Edit icon.png en regard du champ Content > Datasource
       
  • Widget :
    • Clic sur le widget dans le volet Conception
      ou
    • Clic sur Apps - Manage widgets icon.png Widgets dans le volet Objets, puis clic sur le nom du widget
       

Outils accessibles depuis les propriétés des widgets

Procédures

Comment utiliser l'éditeur graphique

Étape 1 : Ouverture de l'éditeur graphique

1. Allez sur la galerie.

2. Cliquez sur Apps - Application properties icon.png dans la barre d'outils de l'application.
 

Étape 2 : Ajout et configuration des datasources de l'application

1. Définissez les connecteurs nécessaires au fonctionnement des datasources de type EasyVista, EasyVista KPI, MS SQL Server, REST (Connector).

2. Cliquez sur Apps - Add datasource icon.png Add Data Source dans le volet Objets et sélectionnez le type de data source.

3. Renommez le datasource.

4. Renseignez ses propriétés via l'inspecteur de propriétés.
Les modifications sont automatiquement enregistrées.

5. Ajoutez de la même façon tous les datasources de l'application.
 

Étape 3 : Ajout et configuration des widgets de 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

1. Définissez les emplacements des objets de la page courante via des widgets de type Layout.

  • Cliquez sur Apps - Add widget icon.png Add Widget dans le volet Objets.
  • 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 : Les emplacements disponibles sont affichés en vert, avec la mention Drop a Layout Widget Here.
             GUI - Procedure - Add widget 1.png

2. Positionnez et configurez les widgets.

  • Cliquez sur Apps - Add widget icon.png Add Widget dans le volet Objets.
  • Cliquez-glissez le type de widget / Custom widgets vers l'un des emplacements précédemment définis dans le volet Conception.
             GUI - Procedure - Add widget 2.png  ==>  GUI - Procedure - Add widget 3.png
  • Renseignez les propriétés de chaque widget via l'inspecteur de propriétés.
    Les modifications sont automatiquement enregistrées et affichées dans le volet Conception.
     

Étape 4 : Création et configuration des autres pages de l'application

1. Cliquez sur Apps - Manage pages icon.png Pages dans le volet Objets, puis sur Apps - Add icon.png.

Note : Vous pouvez dupliquer une page existante avec tous ses widgets déjà placés et configurés, via Wheel icon.png > option Apps - Duplicate 2 icon.png Duplicate.

2. Ajoutez et configurez tous les widgets de la nouvelle page.
 

Étape 5 : Mise en page de l'application

1. Affichez la page souhaitée via la liste déroulante Apps - Drop-down list Pages.png.

Configuration en mode Responsive

2. Affichez les propriétés des widgets à modifier.

  • Cliquez sur le widget dans le volet Conception.
    L'inspecteur de propriétés est automatiquement réactualisé.

   ou

  • Cliquez sur Apps - Manage widgets icon.png Widgets dans le volet Objets, puis sur le libellé du widget.
    L'inspecteur de propriétés et le volet Conception sont automatiquement réactualisés.
     

Ajustement de la hauteur d'un widget

  • Renseignez la propriété Theme > Widget Height.

   ou

  • Positionnez le curseur sur le bas de l'emplacement du widget dans le volet Conception.
  • Glissez la barre grise vers le bas ou vers le haut.
             GUI - Procedure - Change height.png
     

Déplacement d'un widget

  • Survolez le widget à déplacer dans le volet Conception.
    Le curseur se transforme en Cursor move icon.png.
             GUI - Procedure - Move widget 1.png
  • Cliquez-glissez l'objet vers l'emplacement souhaité.
             GUI - Procedure - Move widget 2.png  ==>  GUI - Procedure - Move widget 3.png
     

Suppression d'un widget

  • Cliquez sur Apps - Manage widgets icon.png Widgets dans le volet Objets.
  • Cliquez sur Apps - Delete icon.png en regard du widget.

   ou

  • Survolez le widget dans le volet Conception.
  • Cliquez sur Wheel icon.png > option Apps - Delete icon.png Remove widget.
             GUI - Procedure - Delete widget.png
     

Suppression d'une colonne
Attention : Tous les widgets positionnés dans la colonne sont supprimés.

  • Survolez la colonne dans le volet Conception.
  • Cliquez sur Wheel icon.png > option Apps - Delete icon.png Delete Column.
              GUI - Procedure - Delete column.png
      

Étape 6 (optionnelle) : Gestion des pages publiques / privées de l'application

   Open url.png voir Gestion du mode Public

1. Associez un utilisateur ayant le profil Public à l'application via Apps - Application properties icon.png > Choose a public User.

2. Affichez la liste des pages via Apps - Manage pages icon.png dans le volet Objets.

3. Indiquez le type d'accès de chaque page.
    Note : La page d'accueil est toujours publique.

  • Cliquez sur Apps - Public page icon.png pour rendre une page privée.
  • Cliquez sur Apps - Private page icon.png pour la rendre publique.

Les modifications sont automatiquement enregistrées.
 

Étape 7 : Test de l'application

# 1. Sélectionnez le type de device sur lequel l'application doit être testée.

  • Apps - GUI - Desktop view icon.png : Affichage sur un poste de travail
  • Apps - GUI - Mobile view icon.png : Affichage sur un mobile
     

2. Exécutez l'application via EVApps - GUI - Execute icon.png.
L'application est ouverte dans un nouvel onglet de votre navigateur Internet.

3. Testez le bon affichage des objets et le bon fonctionnement de la navigation.
 

Aperçu en mode Wysiwyg dans le volet Conception

  • Basculez en mode Wysiwyg via EVApps - GUI - Wysiwig mode icon.png.
    Toutes les barres d'outils des objets sont masquées.
  • Revenez en mode Conception via EVApps - GUI - Conception mode icon.png

Comment créer une application

        Open url.png voir Bonnes pratiques de création d'applications

Étape 1 : Création de la nouvelle application

1. Sélectionnez la méthode de création de votre nouvelle application :

Création à partir d'un modèle de la bibliothèque

Autumn_20

À partir de : Service Apps Autumn 2020

  • Cliquez sur Apps - Gallery - Create Shortcut icon.png Create App dans la barre d'outils de la galerie.
    La bibliothèque des modèles est ouverte.
             Template Library.png
  • Cliquez sur le modèle souhaité.
    La description du modèle est affichée dans le panneau latéral droit, ainsi que la date de dernière mise à jour et la date de la dernière version.
  • Importez dans Service Manager les rapports rattachés au modèle.
    • Cliquez sur le lien Reports.
      La page dédiée au modèle est ouverte dans le wiki.
    • Téléchargez le lot de rapports.
    • Importez les fichiers dans Service Manager via le menu Administration > Import / Export > Import.

      Note : Les requêtes parent ne sont pas exportées avec les rapports. Ainsi, vos éventuelles mises à jour ne sont pas écrasées lors de l'import des rapports.

  • Retournez dans Service Apps.
  • Cliquez sur le lien Create This App.
    • Une nouvelle application est automatiquement créée à partir du modèle.
    • Elle s'affiche dans le volet Conception de l'éditeur graphique.
    • Tous les objets de l'application sont initialisés.
     

Création d'une application vide

  • Cliquez sur Apps - Gallery - Create Shortcut icon.png Create App dans la barre d'outils de la galerie.
    La bibliothèque des modèles est ouverte.
  • Cliquez sur Apps - Add icon.png.
    Les propriétés générales de l'application sont affichées.
  • Renseignez les  informations et cliquez sur OK.
    L'éditeur graphique est ouvert.
  • Utilisez l'éditeur pour créer, positionner et définir tous les objets de l'application  - Open url.png voir Procédure
     

Création à partir d'une application existante
(Note : Uniquement si vous avez le profil App Creator) :

  • Cliquez sur Apps - Duplicate icon.png dans la barre d'outils de l'application modèle.
    • Une nouvelle application est créée, portant le même nom avec la mention (Copy).
    • Tous les objets de l'application modèle sont recopiés.
  • (optionnel) Renommez la nouvelle application via Apps - Gallery - Edit properties icon.png.
  • Ouvrez l'éditeur graphique via Apps - Application properties icon.png pour effectuer les changements souhaités.
     

Étape 2 : Test de l'application

1. Cliquez sur EVApps - GUI - Execute icon.png.
L'application est ouverte dans un nouvel onglet de votre navigateur Internet.

2. Testez le bon affichage des objets et le bon fonctionnement de la navigation.

Étape 3 : Définition des droits d'accès à l'application

1. Revenez sur la galerie via EVApps - GUI - Close Application icon.png.
Note : L'application est automatiquement sauvegardée.

2. Cliquez sur Apps - Rights - Administer icon.png dans la barre d'outils de l'application.

3. Donnez les droits d'accès aux utilisateurs / équipes souhaités.

  • Cochez les utilisateurs / équipes souhaités.
    Note : Si vous sélectionnez une équipe, les droits s'appliquent à l'ensemble des utilisateurs de celle-ci.
  • Cochez les droits d'accès à attribuer.
    UserApplicationsRights
    • Apps - Rights - Administer icon.png Admin : Droits d'administration sur l'application, sans possibilité de la modifier ni de l'exécuter.
    • Apps - Rights - Edit icon.png Edit : Droits d'édition (accès à l'éditeur graphique).
    • Apps - Rights - Execute icon.png Execute : Droits d'exécution de l'application, sans possibilité de la modifier.
  • Cliquez sur OK.
     

Étape 4 : Diffusion de la nouvelle application aux utilisateurs

1. Créez un raccourci vers la nouvelle application via Apps - Gallery - Create Shortcut icon.png Create Shortcut dans la barre d'outils de la galerie.
Note : Vous devez avoir le profil App Center Manager.
Le raccourci est affiché en haut de la galerie, repérable avec l'icône Apps - Shortcut icon.png.

2. Cliquez sur Apps - Gallery - Edit application icon.png dans la barre d'outils du raccourci.

3. Copiez le QR Code ou l'URL affichés dans la zone Share application URL.

4. Distribuez l'accès aux utilisateurs souhaités.

Tags:
Modifié par Christine Daussac le 2021/11/15 11:25
Créé par Administrator XWiki le 2014/09/02 11:33

Raccourcis

L'actualité mensuelle
•  Newsletter

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

Powered by XWiki ©, EasyVista 2021