ev|Apps Builder - H1.2016 - Présentation des nouveautés


Sommaire
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.
  • Version minimum de Product name - ev itsm.png nécessaire : 2016.1

          Open url.png  voir Questions fréquentes & Erreurs connues

Nouveautés sur le noyau

Paramétrage dans l’URL des propriétés des widgets

Principe général

Vous pouvez dorénavant variabiliser certaines parties d’une application pour en définir le contenu via l’URL.

Example documentation icon FR.png  Ouvrir une application directement sur la fiche d'un incident donné, dont le numéro a été passé en paramètre via l’URL

Ce système est conçu autour des propriétés 'exposées' des widgets, qui sont les propriétés définies comme accessibles via l’URL : chacune d'entre elles devient alors accessible via un paramètre dédié dans l’URL.

Note : Limité aujourd'hui à certaines propriétés, ce mécanisme va être étendu au fur et à mesure des versions.

Exemple d’utilisation

L’application ci-dessous permet d’afficher la fiche d’un utilisateur. Le système affiche par défaut le premier enregistrement.

       partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m754e4723.png

Comment afficher n’importe quelle fiche Employé via l’URL ?

  • Allez sur le datasource Employee List et paramétrez les propriétés de la nouvelle section Search : indiquez le champ de recherche (Search Field) et la valeur recherchée (Search Value).
             partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m7ccfcf99.png
  • Allez sur la boîte des propriétés de l’application et cliquez sur le nouveau bouton [ Exposed Properties ] pour paramétrer l'URL d'accès.
             partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_10838580.png
  • La fenêtre affiche les propriétés ‘exposées’ (aucune par défaut).
             partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_24025c2a.png
  • Cliquez sur [ Add properties ] pour ajouter les propriétés de filtrage via l'URL : toutes les propriétés définies comme accessibles via l’URL sont affichées pour l'ensemble des widgets et datasources présents dans l'application.
             partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_281236f7.png
  • Sélectionnez la propriété SearchValue du datasource Employee List via la case à cocher et cliquez sur [ Ok ] : la propriété est maintenant disponible dans les propriétés ‘exposées’ et va pouvoir être prise en compte dans l'URL.
    Note : Le système des cases à cocher permet d’exposer plusieurs propriétés en une fois.

       partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_ca52ffb.png

  • Vous pouvez modifier la valeur existante de la colonne Content/Value : double-cliquez dessus et indiquez la valeur de l'enregistrement que vous souhaitez afficher.
  • Cliquez sur le bouton [ Generate URL ] :
    • l'adresse URL correspondante est affichée ;
    • testez le bon affichage de l'enregistrement en cliquant sur Execute URL application.
               partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_5a1745b.png
               partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m3a01dad7.png

Notes :

  • Dans l'URL, vous pouvez sélectionner :
    • le nom du paramètre : colonne URL parameter alias. Par défaut, il s'agit du nom de la propriété. Pour des raisons de sécurité, vous pouvez choisir des alias de paramètres ‘anonymes’ comme Param1, Param2 etc…
    • le contenu (partie variable dans l’URL) : colonne Content/Value. Vous pouvez alors modifier par programme le contenu de ce paramètre pour afficher n’importe quelle fiche Employé.
  • Pour s’assurer que l’application puisse être lancée sans paramètre, il est important de mettre des valeurs par défaut dans les propriétés exposées.
  • Si une valeur est définie dans la propriété Search Value du widget ou du datasource, elle est affichée par défaut dans la fenêtre des propriétés ‘exposées’.
             partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_3cea6e4c.png

Modification sur la boîte de partage de l'application

Le nouveau bouton [ Exposed Properties ] est ajouté, permettant l'accès aux propriétés exposées.

Note : L’URL affichée ne tient pas compte des paramètres car le QR Code doit être en permanence valide. Ce sont donc les valeurs par défaut qui sont utilisées.

       partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m53c229b1.png

Interaction sur les raccourcis

Le fonctionnement pour les raccourcis est identique. Ajoutez les différents paramètres au raccourci, afin qu'ils soient automatiquement transmis à l’application pointée.

Informations de version sur la boîte de login

La version Product name - ev sas.png est maintenant affichée sur la boîte de login.

       partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m2315ac2e.png

Support des 6 langues pour les messages système

Les messages système peuvent maintenant être affichés dans les 6 langues standard. Le choix de la langue s’effectue toujours dans la boîte des informations utilisateur.

       partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m461e07e4.png

Évolutions du studio

Duplication d’éléments

Une fonction de duplication a été ajoutée sur les pages, widgets et datasources. Note : Les datasources composites ne sont pas duplicables.

  • Elle peut être lancée :
    • via une icône dédiée partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_75749322.png en regard de chaque objet pouvant être dupliqué ;
               partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m4615f918.png
    • pour un widget, directement depuis le volet Conception via le menu contextuel.
               partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m7da1e563.png
  • Les objets dupliqués apparaissent dans la liste avec le libellé (Copy).
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m23415dfe.png
  • L'objet dupliqué est directement ouvert en mode Édition.
  • Lorsque vous copiez un widget, le widget dupliqué est placé sur le volet Conception en dessous du widget source. Vous pouvez alors le déplacer comme les autres widgets.

Recherche

Une fonction de recherche a été ajoutée. Elle est disponible :

  • lors de la création de nouveaux widgets / datasources pour un accès rapide au type d'objet à ajouter. Note : La recherche s'effectue également sur les custom widgets.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_274fbf37.png
  • dans les listes de widgets et datasources, pour un accès rapide à un objet existant.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_5eddfff1.png

Informations sur les connecteurs evSM dans la boîte ‘Au sujet de…’

Les informations de version sur les connecteurs evSM sont maintenant affichées dans la boîte Au sujet de… : versions Product name - ev itsm.png et de l’API

       partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m1eaf57b7.png

Accès direct à une page dans les widgets conteneurs de pages

Sur les widgets conteneurs de pages - Tab et Sliding Page - une nouvelle icône partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m1f213687.png permet d'indiquer la page à afficher en mode Édition.

       partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m61ee7947.png

Nouvel éditeur WYSIWYG

Ce nouvel éditeur permet une gestion des contraintes liées aux questionnaires et une gestion des tags plus aisée.

       partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m4954ccdc.png

Nouvelle gestion de l’insertion des tags

La gestion des tags s'effectue maintenant via un panneau dédié dans l’éditeur HTML, accessible depuis l'icône partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_mffd9cac.png, et dans lequel les tags sont regroupés dans 4 catégories disponibles en fonction du contexte.

       partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m3e45df38.png

  • Catégorie Page : Permet d'insérer un lien hypertexte et de le configurer
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_25104e8b.png
    • Page Link : Permet l'ouverture du lien dans une nouvelle page, remplaçant la page courante.
    • Page Popup : Permet l'ouverture du lien dans une fenêtre Popup.

Dans les 2 cas, le paramétrage s'effectue via un panneau de configuration.
         partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_76a83fee.png

  • Sélection de la page souhaitée via la liste déroulante Select page.
  • Texte du lien inséré via la zone Link title.
  • Titre de la fenêtre Popup via la zone Modal title.
  • Mode d'affichage du lien : Link pour un texte souligné, Button pour un bouton.
  • partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m17c16392.png pour insérer le nouveau lien
  • Catégorie Data Picker : Permet de sélectionner les tags gérés précédemment via le data picker.
    • Ancienne version
               partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m114d476b.png
    • Nouvelle version :
      • Affichage de 2 panneaux consécutifs, le premier permettant de choisir le champ et le deuxième permettant de définir les paramètres d’affichage.
                 partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m1b4299cd.png
      • En fonction du type de champ (Note : Actuellement uniquement pour les datasources Easyvista), plus ou moins de paramètres sont affichés. L'option Cell Value permet de sélectionner une valeur dans le tableau Résultat.
Champ Texte Champ Date Champ Numérique
partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m448381de.png partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_7aaff15d.png partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_66cd4b2c.png
  • Catégorie Easyvista : Permet d’insérer des tags métier issus de Product name - ev itsm.png via partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m17c16392.png en regard de chaque élément.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m68d138c9.png
    • Document upload : Fonctionnalité décrite dans la section Upload / Download de documents
    • New Request : Lorsque le datasource pointe sur la table SD_CATALOG, permet d’afficher une fenêtre Popup contenant les éléments (questionnaire compris) de création d'une nouvelle demande de service à partir de l’entrée de catalogue.
    • Embed Questionnaire : Similaire à New Request, les informations étant intégrées sous forme d’un panneau déroulant.
    • Status Notification : Affichage du bandeau vert de notification indiquant le statut de la demande créée.
  • Catégorie Star Rating : Permet l'affichage des étoiles de notation de l’article de la base de connaissance.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_star_rating0.png          partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_star_rating.png

Import / Export des custom widgets et des thèmes

Une nouvelle fonction d’import / export des custom widgets et des thèmes a été ajoutée.

  • L'export s’effectue via le menu contextuel des listes de custom widgets et thèmes, au format .tar.gz comme pour les exports d'applications.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_12a798f6.png
  • L’import s’effectue via le bouton [ Import ] dans la barre d’outils principale de la galerie.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_2ec4ad04.png
    • Le mécanisme de sécurité est identique à celui de l'import des applications pour éviter tout import de fichiers illicites.
    • Attention :
      • Lorsqu'un custom widget ou un thème de même nom existe déjà, il est écrasé pour effectuer sa mise à jour.
      • Les applications utilisant des custom widgets ayant été mis à jour via un import ne sont pas touchées car ceux-ci sont copiés dans l'application.

Gestion des favicon d’une application

La boîte des propriétés de l’application a été modifiée et présente maintenant 3 onglets.

       partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_34e55dd4.png

  • Apps Icon : Icône de l’application
  • Apps Header : Texte affiché dans la barre de titre de l'application en mode Exécution
  • Favicon : Icône affichée dans la barre d'onglets du navigateur et icône de raccourci sur l’application sur un mobile
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_6103ee5c.png

Chaque favicon peut être fournie sous de nombreuses résolutions afin de s’adapter aux différents supports.

  • Vous pouvez envoyer une seule version de la favicon, le résultat étant automatiquement affiché dans la boîte de propriétés.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m4a88c722.png
  • Pour modifier l’image dans l'une des résolutions, positionnez le curseur sur celle-ci pour accéder à la fonction de téléchargement.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_56a151ca.png

Édition des propriétés d’une application depuis la galerie

Les propriétés d’une application sont maintenant accessibles directement depuis la galerie via une fenêtre simplifiée, permettant ainsi une correction du connecteur empêchant l’ouverture de l’application.

Note : L’affichage de l'icône dédiée partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m1f213687.png est conditionné aux mêmes droits d’accès que l’icône d’édition des applications.

       partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m1cb45e78.png

       partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m4666d803.png

Évolutions sur la liaison avec ev|ITSM

Assistant de mise à jour des incidents

Présentation générale

Un nouvel assistant permet de mettre à jour les incidents Product name - ev itsm.png via un custom widget. Il s’appuie sur de nouveaux mécanismes de création de formulaires, actuellement réservés à EasyVista, mais qui seront intégrés au studio dans une version future pour permettre à tous les utilisateurs de personnaliser totalement les assistants intégrés ou d’en créer de nouveaux.

  • L'assistant doit être associé à un bouton positionné sur un enregistrement de la table SD_REQUEST.
  • Son fonctionnement est identique à celui de Product name - ev itsm.png :
    • Si l’incident sélectionné est clôturé, un message d’erreur est affiché.
    • Sinon, le contenu du champ Description est ajouté à la fin de la description existante de l’incident.
    • Création d’une action de type Mise à jour par l’utilisateur.
    • Mise à jour de l’historique des mouvements.

Exemple d’utilisation

Une liste d'incidents Product name - ev itsm.png est affichée via un widget Data Viewer.

  • Cliquez sur le bouton [ Update Incident Record ] disponible sur la fiche.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_264d5077.png
  • L'assistant de mise à jour est lancé.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m5673bc41.png
  • Renseignez la description puis cliquez sur [ Send ] : l'incident est mis à jour.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_4c51ab78.png
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m3220a672.png

Mise en place de l’assistant

  • Créez une nouvelle application Incident Management.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_mb035bab.png
  • Ajoutez un datasource Easyvista basé sur la liste des incidents.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m5750c478.png
  • Ajoutez un widget Data Viewer pour la liste des incidents et un widget Secured Html pour la description de l’incident courant (mode Form).
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m7849e629.png
  • Créez une nouvelle page dédiée à l'assistant de mise à jour. Note : La case à gauche du nom de la page n’est pas cochée afin de rendre la page invisible dans le menu de l’application.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m726954de.png
  • Insérez le custom widget Update Incident Wizard. Note : Mettez une largeur maximale à la fenêtre pour éviter qu’elle ne soit trop large.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m11802754.png
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m1db2a333.png
  • Le custom widget contient un widget de type Memo pour la saisie de la description et 2 widgets de type Button [ Cancel ] et [ Send ]. Note : Ces 3 widgets ne sont pas disponibles dans la liste des custom widgets car ils font partie d’une catégorie spécifique forms qui sera mise à disposition dans une version future pour la réalisation de tous les types de formulaires de saisie.
  • Vérifiez que le bouton [ Send ] est correctement paramétré tel qu’indiqué ci-dessous.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_39ff0872.png
  • Ajoutez le bouton d'appel de la liste des incidents sur le widget Data Viewer affiché sur la page principale de l'application :
    • Via la nouvelle fenêtre de saisie des tags, configurez le bouton pour ouvrir une fenêtre Popup et cliquez sur partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_507dcef.png.
               partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m1930c0f3.png
    • L'éditeur HTML est mis à jour (alignement du bouton à droite).
               partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_372ed84b.png

Gestion des uploads / downloads de documents

Upload de documents

La fonction d’upload de documents est accessible depuis le panneau dédié à la gestion des tags dans l’éditeur HTML (disponible en fonction du contexte).
         Example documentation icon FR.png  Via un formulaire depuis un widget Data Viewer (section Form)

Exemple d'utilisation de la fonctionnalité

  • Depuis un objet permettant l'upload de documents, ouvrez l'éditeur HTML.
  • Ouvrez le panneau dédié à la gestion des tags via partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_mffd9cac.png.
  • Ouvrez la catégorie Easyvista et cliquez sur partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_507dcef.png en regard de l'option Document upload : automatiquement l'instruction correspondant à la fonctionnalité est ajoutée sur l'éditeur.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_5eec40d7.png
  • En mode Exécution, un bouton d'upload est affiché. Note : Le libellé du bouton est le même que dans Product name - ev itsm.png.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_3969879a.png

Download de documents

Attention

  • Cette fonctionnalité nécessite impérativement la présence de 2 fichiers EXP sur Product name - ev itsm.png, pour mettre en place les vues gérant les téléchargements de documents : EXP pour la liaison avec les tables SD_REQUEST et AM_ACTION et EXP pour la liaison avec les autres tables.
  • Il est recommandé de ne pas modifier les filtres et vues fournis dans les 2 fichiers.
  • Vous pouvez renommer les fichiers.

       Download Zip icon.png  Téléchargez  EXP tables SD_REQUEST et AM_ACTION

       Download Zip icon.png  Téléchargez  EXP autres tables

Exemple d'utilisation de la fonctionnalité

  • Ajoutez un datasource Easyvista.
  • Si les 2 EXP ont été intégrés, la liste déroulante Query contient 2 requêtes parent APPS - download document liées à l'option de menu Product name - ev itsm.png Operation > Reports > Reports.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_46225cf4.png
  • Sélectionnez la requête relative aux documents de la table SD_REQUEST.
  • Sélectionnez le filtre à appliquer à la requête. Note : Les 3 filtres correspondent aux filtres disponibles dans Product name - ev itsm.png :
    • My Attachments : Afficher uniquement les documents personnels de l'utilisateur connecté 
    • Public : Afficher uniquement les documents publics
               partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m415d1c2d.png
  • Via une relation maître-détail, reliez le datasource au datasource principal (sur SD_REQUEST) pour les incidents.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_76ac08e5.png
  • Ajoutez un widget Data Viewer en mode Grille pour afficher la liste des documents disponibles.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_5c20a812.png
  • Passez en mode Exécution. Depuis la liste des documents :
    • Un clic sur le libellé d'un document permet de le télécharger.
    • La colonne Public permet de distinguer les documents publics et les documents personnels.
    • Un clic sur partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_4b3b8755.png permet de supprimer un document. Note : Pour ne pas afficher cette fonctionnalité, enlevez la colonne Delete via le Data Transformer.

Sélection du service sur les éléments de menu New Request

Sur un widget Menu ayant une entrée de type New Request, la sélection du sujet du catalogue des services est maintenant basée directement sur le catalogue et non plus sur la table table_path.

Cela permet de rendre immédiatement accessible tout nouveau service rajouté dans Product name - ev itsm.png, à la différence de la table table_path généralement réactualisée qu'une seule fois par jour.

       partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m1813e15f.png

Gestion des variables et contraintes dans les questionnaires

Les questionnaires prennent maintenant en charge les nouvelles fonctions ajoutées dans la dernière version partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_40dd4f88.png : les variables dynamiques et les contraintes.

Les contraintes apparaissent différemment par rapport à Product name - ev itsm.png : lorsqu'une contrainte n’est pas respectée, le libellé de l’erreur est affiché en rouge au-dessous du champ.

       partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m3dc26e0b.png

Nouvelles propriétés sur le datasource Easyvista

Le datasource Easyvista intègre maintenant une section Search contenant 2 nouvelles propriétés permettant de filtrer le résultat sur un champ donné (Search Field) et pour une valeur donnée (Search Value).

Note : Ces propriétés sont indispensables pour l’utilisation de la nouvelle fonctionnalité de paramétrage de l’URL (par exemple pour accéder directement à une fiche précise).

       partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m122c3c37.png

Évolutions de la partie REST

Les interfaces REST clientes ont fortement été modifiées afin de les rendre plus simples et plus homogènes. 

Principe général de création de datasources REST

Note : Dans cette nouvelle version Product name - ev sas.png, les fonctionnalités REST ont évolué. Cependant, les applications utilisant les fonctionnalités des versions précédentes continuent de fonctionner.

  • La création peut s'effectuer à partir de 2 modèles de datasources REST disponibles dans la catégorie Online :
    • REST : type de datasource déjà existant, permettant de créer des sources de données de façon directe et utilisé pour des créations rapides d'applications ;
    • REST (Connector) : nouveau type de datasource, permettant de créer des sources de données basées sur un connecteur prédéfini, de profiter de ressources déjà paramétrées et d'utiliser l'authentification OAuth.

      captures REST_html_57817716.png

  • Trois types d’authentification REST sont maintenant disponibles, qui conduisent à trois types de datasources avec des paramétrages correspondants. Le tableau ci-dessous résume les différentes possibilités accessibles en fonction du type de connecteur choisi.
Type de datasource Type d'authentification
None Basic OAuth
REST Création d'un datasource Property OK icon.png Property OK icon.png Property NOK icon.png
Ressources 1 1 Property NOK icon.png
Sélecteur 1 1 Property NOK icon.png
REST (Connector) Création d'un datasource Property OK icon.png Property OK icon.png Property OK icon.png
Ressources n n n
Sélecteur 1 par ressource 1 par ressource 1 par ressource
  • Le schéma ci-dessous résume l’héritage entre services, connecteurs et datasources REST.

      captures REST_html_mc08d89f.png

Évolutions des interfaces de paramétrage

Les interfaces de paramétrage ont été homogénéisées et simplifiées. Les fonctions sont aussi disponibles de façon transverse (en particulier la gestion de ressources qui a été étendue aux APIs REST sans authentification ou avec une authentification Basic).

Mise en place de sources de données REST via les connecteurs

Les interfaces REST sont maintenant totalement supportées par le système des connecteurs, ce qui permet d'utiliser les alias et les contextes d’exécution. Cela vous permet, par exemple, de développer des applications REST sur des comptes de développement avant de les passer sur des comptes de production, sans nécessité de changer quoi que ce soit aux applications.

  • Ouvrez la boîte de paramétrage des connecteurs via EVApps - GUI - Connector icon.
  • Sélectionnez le type de connecteur REST.
             captures REST_html_m218980c.png
  • Sélectionnez le type d'authentification souhaité.
             captures REST_html_m25539be5.png

Fonctions communes aux différents types d'authentification

1. Choix du service :

  • Via la liste URL, vous accédez à une liste de services pré-enregistrés.
             captures REST_html_65b0c5e7.png
             captures REST_html_m7251bb49.png
  • Si vous accédez à une API REST sans authentification ou avec une authentification Basic et que le service n’existe pas, vous pouvez le définir pour le réutiliser plus rapidement par la suite.
             captures REST_html_m283103c2.png
    • Cliquez sur Add icon.png.
               captures REST_html_m507f86dd.png
    • Spécifiez le nom du service, l’URL de base et l'icône permettant de l'identifier rapidement.
  • Pour modifier ou supprimer un service existant, cliquez dessus pour afficher le menu contextuel. Note : Les services fournis en standard ne sont ni modifiables ni supprimables.
             captures REST_html_m73b1d370.png

2. Gestion des ressources : Celle-ci a été étendue pour intégrer la notion de sélecteur par défaut pour une ressource donnée.

  • Via la liste Default Resource, sélectionnez la ressource souhaitée.
             captures REST_html_m77ceabc9.png
  • Cliquez sur captures REST_html_m7f6b2e26.gif en regard du champ pour accéder au module de gestion des ressources : la liste des ressources existantes est affichée.
             captures REST_html_427ba4fd.png
  • Cliquez sur une ressource pour modifier les propriétés. Note : Le nom complet de l’URL, ressources comprises figure en clair sous le champ URI.
             captures REST_html_m7c9f7ccf.png

3. Gestion du sélecteur : Un sélecteur par défaut peut être défini au niveau de chaque ressource. Note : Cette pratique est vivement recommandée. 

  • Cliquez sur captures REST_html_m1898989f.gif en regard du champ Default Property OK. Vous accédez à la boîte de dialogue de choix du sélecteur.
             captures REST_html_m2939d0b8.png

4. Gestion des variables dans l’URL : L’URL du service doit parfois être personnalisée afin d’y faire figurer des informations comme l’account ou l’API_KEY.
     captures REST_html_m75bc307c.png

  • La personnalisation s’effectue via des tags dédiés ajoutés dans l'URL :
    • soit sous la forme {nom_du_tag} dans la partie principale de l’URL ;
    • soit via des paramètres introduits par ? ou &
  • Le système réorganise automatiquement l’URL afin qu’elle soit en permanence valide (les paramètres étant toujours situés en fin d’URL).
  • Chaque tag est transformé en zone de saisie dans la boîte de dialogue, à renseigner lors de la création du connecteur. 

Example documentation icon FR.png  Pour le connecteur REST easyvista, l’URL contient 2 paramètres : hostname et account dont la saisie est obligatoire pour disposer d’une URL valide
https://{hostname}/api/v1/{account}/

  • Il est aussi possible de rajouter des tags sur la partie Ressource.
             captures REST_html_3a557901.png
  • L’URL obtenue pouvant vite devenir complexe, vous pouvez la prévisualiser via > situé à droite de la zone Preview.
             Example documentation icon FR.png  https://xxxxxx.easyvista.eu/api/v1/80000/requests?max_rows=100
             captures REST_html_m3f22af77.png

Connecteur REST sans authentification

      captures REST_html_m2c7a7d05.png

Dans la boîte de paramétrage, tapez l’URL du service ainsi que les éventuelles ressources.

Connecteur REST avec une authentification Basic

      captures REST_html_69b3a33f.png

Lorsque des informations de connexion sont enregistrées, tout datasource basé sur le connecteur hérite des informations.

 Notes

  • Les informations peuvent être surchargées. 
  • Pour ne pas les récupérer dans le datasource, vous devez les effacer.

Connecteur REST avec une authentification OAuth

       captures REST_html_162805f9.png

L’authentification est déléguée au service choisi. 

Cliquez sur captures REST_html_m1898989f.gif en regard du champ Authentication parameter pour renseigner les informations correspondantes dans l’application hôte.

Création des datasources basés sur un connecteur REST

  • Sélectionnez le connecteur souhaité.
             captures REST_html_m3fbc3581.png
  • Vous accédez à l'inspecteur de propriétés.
             captures REST_html_m797d0499.png
    • Les champs indiqués avec captures REST_html_m34200d31.png peuvent être directement renseignés après avoir choisi le connecteur (pour autant qu’ils aient été renseignés à ce niveau).
    • Le champ Additionnal Query String permet de saisir des paramètres supplémentaires (&) non disponibles via le connecteur.

Création directe de sources de données REST

Sans authentification

Le fonctionnement reste inchangé : il suffit de saisir l’URI et de positionner le sélecteur correct pour accéder aux données.
         captures REST_html_3dbbfe2.png

Avec une authentification Basic

      captures REST_html_m35c678ba.png

Liste des nouveaux connecteurs REST fournis en standard

Avec une authentification Basic

      captures REST_html_2502d842.png

Avec une authentification OAuth

      captures REST_html_mdffcb42.png

Évolutions sur les widgets

Widget YouTube

Ce widget dispose maintenant d’une propriété Loop permettant une lecture en boucle de la vidéo (la vidéo est relancée automatiquement à la fin de chaque visionnage).

       partie 4 - wiki Easyvista Service Apps 2016_JUNE_FR_html_7f84b7c5.png

Accès aux données des datasources via JavaScript

Liste des fonctions ajoutées

2 fonctions ont été ajoutées permettant l’accès public aux informations des widgets.

EVServicesApps.getWidgetById(‘string WIDGET_ID ‘) ;
  • Retourne null si rien trouvé. 
  • Sinon, retourne un objet JSON contenant les informations relatives au widget.
{ guid : ‘WIDGET_ID’, name : ‘WIDGET_NAME’, fqdn : ‘WIDGET_FQDN’}

EVServicesApps.getWidgetsByName(‘string WIDGET_NAME’) ;
  • Retourne null si rien trouvé. 
  • Sinon retourne un objet JSON contenant des objets JSON indexés sous la forme ci-dessous, où on retrouve les informations relatives aux widgets trouvés par leur nom, dans le même format JSON que pour la première fonction.
Object : {0 : Object, 1 : Object}

Si le widget est de type datasource, 2 autres fonctions s’ajoutent à l’objet JSON Widget obtenu :

EVServicesApps.getData(start, length, callback) ; 

Retourne toutes les données du widget (commençant par start, de la taille length) dans le paramètre de la fonction callback.

EVServicesApps.getColumns(callback) ;

Retourne toutes les colonnes des données du widget (plus les informations allant avec) dans le paramètre de la fonction callback.

Exemple d’utilisation

Comment afficher dans un widget HTML un graphe à bulles

     Example documentation icon FR.png  Extrait du site d3js.org, accessible via la page http://bl.ocks.org/mbostock/4063269

       partie 4 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m29da23b6.png

  • Récupérez les données au format JSON disponible sur le site d3js.org : copiez le contenu et collez-le dans un fichier texte nommé flare.json.
             partie 4 - wiki Easyvista Service Apps 2016_JUNE_FR_html_6368a4f5.png
  • Allez sur votre application Product name - ev sas.png, ajoutez un datasource JSON et téléchargez le fichier flare.json.
partie 4 - wiki Easyvista Service Apps 2016_JUNE_FR_html_3d63ddeb.png

Renommez le datasource pour l'identifier facilement.

Example documentation icon FR.png    flare

  • Ajoutez un widget Html Script, ouvrez l'éditeur HTML, passez en mode source via l'icône partie 4 - wiki Easyvista Service Apps 2016_JUNE_FR_html_mbd0e3dc.png) et insérez le script disponible sur le site d3js.org.

Open url.png Voir le script du site d3js.org

<style>
text {
  font: 10px sans-serif;
}
</style>
<script src="//d3js.org/d3.v3.min.js"></script>

<script>
var diameter = 960,
    format = d3.format(",d"),
    color = d3.scale.category20c();
var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);
var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

d3.json("flare.json", function(error, root) {
  if (error) throw error;
  var node = svg.selectAll(".node")
      .data(bubble.nodes(classes(root))
      .filter(function(d) { return !d.children; }))
      .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  node.append("title")
      .text(function(d) { return d.className + ": " + format(d.value); });
  node.append("circle")
      .attr("r", function(d) { return d.r; })
      .style("fill", function(d) { return color(d.packageName); });
  node.append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.className.substring(0, d.r / 3); });
});
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
  var classes = [];
  function recurse(name, node) {
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
    else classes.push({packageName: name, className: node.name, value: node.size});
  }
  recurse(null, root);
  return {children: classes};
}
d3.select(self.frameElement).style("height", diameter + "px");
</script>
  • Supprimez les lignes ci-dessous.
d3.json("flare.json", function(error, root) {
  if (error) throw error;
  • Ajoutez en haut du script les lignes ci-dessous. Notes :
    • window.parent permet d'accéder à la fonction.
    • Indiquez le nom du datasource dans l'instruction getWidgetsByName, entre des caractères ' '.
               Example documentation icon FR.png getWidgetsByName('flare')
window.parent.EVServiceApps.getWidgetsByName('flare')[0].getData(0, -1,
    function(data)
    {
    root = data[0];

Open url.png Voir le script complet corrigé

<style>
text {
  font: 10px sans-serif;
}
</style>
<script src="//d3js.org/d3.v3.min.js"></script>

<script>
window.parent.EVServiceApps.getWidgetsByName('flare')[0].getData(0, -1,
  function (data) {
    root = data[0];

    var diameter = 960,
        format = d3.format(",d"),
        color = d3.scale.category20c();

    var bubble = d3.layout.pack()
        .sort(null)
        .size([diameter, diameter])
        .padding(1.5);

    var svg = d3.select("body").append("svg")
        .attr("width", diameter)
        .attr("height", diameter)
        .attr("class", "bubble");

      var node = svg.selectAll(".node")
          .data(bubble.nodes(classes(root))
          .filter(function(d) { return !d.children; }))
        .enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

      node.append("title")
          .text(function(d) { return d.className + ": " + format(d.value); });

      node.append("circle")
          .attr("r", function(d) { return d.r; })
          .style("fill", function(d) { return color(d.packageName); });

      node.append("text")
          .attr("dy", ".3em")
          .style("text-anchor", "middle")
          .text(function(d) { return d.className.substring(0, d.r / 3); });

    // Returns a flattened hierarchy containing all leaf nodes under the root.
    function classes(root) {
      var classes = [];

      function recurse(name, node) {
        if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
        else classes.push({packageName: name, className: node.name, value: node.size});
      }

      recurse(null, root);
      return {children: classes};
    }
    d3.select(self.frameElement).style("height", diameter + "px");
  }
);    
</script>
  • Passez en mode Exécution pour afficher le diagramme à bulles.
             partie 4 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m2b319c14.png

Widget Search Filter

Le widget Search Filter permet maintenant la recherche multi-colonnes, via 5 champs de recherche combinés par l'opérateur OU.

Note : Le widget reste totalement compatible avec les versions précédentes possédant un seul champ de recherche.

       partie 4 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m4eba5601.png

Modifications diverses

Lancement direct d’applications dans la galerie

Si l’utilisateur a accès en mode Exécution à une seule application dans la galerie, cette application est lancée directement sans affichage de la galerie.

Gestion de la touche <Retour arrière> sur mobile

Lorsqu’une application est utilisée sur les navigateurs de mobiles (Chrome sous Android, Safari sous iOS, Internet Explorer sous Windows Phone), la touche <Retour arrière> permet de revenir à la page précédente. Auparavant, elle provoquait la sortie de l’application.

Tags :

Raccourcis

Portail client

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

Powered by XWiki © EasyVista 2022