lundi 8 février 2016

Compensaticity : les augmentations en 2 clics de souris ?

J'ai récemment développé un petit proof of concept dans le domaine de la gestion de la rémunération.
Pas un brin de SAP pour changer mais plutôt du Web : AngularJS + Rickshaw.js + Intro.js.



De quoi essayer de concurrencer SuccessFactors...  avec une future intégration SAP HCM  ;)

AngularJS: le framework MV*  de Google


Rickshaw.js : un des nombreux frameworks permettant de réaliser des graphiques en utilisant D3.js. Les 2 graphiques sont manipulables à l'aide des 2 sliders "Salaire fixe" et "Bonus". Le manager ou le RH peut ainsi visualiser en temps réel l'influence des augmentations qu'il/elle octroie au niveau de l'historique du collaborateur ou dans le graphe d'ensemble des collaborateurs occupant des fonctions similaires.

Intro.js : un outil de "onboarding" (simplissime de mise en oeuvre !) qui permet une prise en main assistée de l'outil. Vous pouvez le rappeler à l'aide du lien Help dans le coin supérieur droit.



Je pense avoir déjà parlé de Mockaroo et c'est grâce à ce service en ligne (gratuit pour le faible volume de données de la démo) que j'ai généré les mockup data pour ce PoC


Vous trouverez la démo en ligne ici et là.

lundi 7 septembre 2015

Catalogue Fiori dans une feuille de calcul

SAP met à disposition un catalogue Fiori que vous pouvez consulter en ligne.
C'est un outil très précieux pour parcourir les près de 600 applications Fiori (à l'heure où j'écris ce billet) !
Néanmoins, il manque certaines capacités de filtrage avancées...

DJ Adams a posté une vidéo YouTube


montrant comment générer une feuille de calcul (Google Spreadsheet) à partir de ce catalogue en utilisant son service OData.

J'ai repris cette vidéo et généré une version mise à jour de cette feuille de calcul (attention le service OData a changé d'adresse !) que vous pouvez voir et exploiter ici: https://goo.gl/HTQJ7G

mercredi 20 mai 2015

Extension Fiori et Tissage d'aspect

Ne présentons plus les applications Fiori qui sont devenues le nouveau fer de lance de SAP (avec HANA) et dont Internet regorge d'articles et intéressons nous directement à la façon dont on peut les étendre.

Les extensions Fiori

SAP a publié des applications Fiori au sein desquels se trouvent un nombre croissant de points d'extension (consultez "Demande de congé v2" par exemple).
Effectivement, nos clients sont toujours friands de personnaliser, ajuster, étendre leurs applications toujours plus loin... tant en restant dans une zone de maintenabilité et de performances !

Étudions un cas très courant : l'affichage des vacances scolaires dans l'application "Demande de congé v2"

Web IDE vs Eclipse

Pour cela, nous nous sommes appuyés sur l'éditeur en ligne SAP Web IDE sur SAP HANA Cloud Platform. Il existe également un plugin pour Eclipse (SAP Fiori Toolkit) mais SAP a décidé de ne plus le maintenir et de proposer le SAP Web IDE (qui sera payant à terme d'après les informations que j'ai pu glanées)

Notre extension "Vacances scolaires"

La fonctionnalité ajoutée est tout simplement d'être en mesure de visualiser les vacances scolaires (pour les parents qui doivent s'occuper des enfants, comme pour les "non-parents" qui peuvent partir en congés à moindre frais) lors de la sélection de la période de pose.

Voici le résultat :


Comme vous pouvez le voir, les vacances scolaires sont représentés au pied de chaque jour de calendrier. (1 couleur pour chaque zone : A, B ou C)

Même si l'application dispose de nombreux hooks (points d'extension au niveau du contrôleur qui pilote la logique métier de l'écran), il n'en existe pas qui soit déclenché à chaque navigation entre les mois. Le seul hook approchant (extHookInitCalendar) est celui qui permet de configurer le paramétrage du calendrier (affichage de 1 à n mois, etc...)

Tissage d'aspect à la rescousse

Par conséquent, nous avons eu recours à des mesures drastiques ... la Programmation Orientée Aspect qui permet (pour faire court) l'injection de code dans les méthodes standards.
Nous utilisons la librairie jquery-aop sur GitHub: https://github.com/gonzalocasas/jquery-aop

Le cœur de la solution est le suivant :


Nous avons enrichi la méthode de l'instance _renderDay this.cale du calendrier (et juste cette instance) en ajoutant une after method qui modifie le DOM en insérant un span dans la div existante pour chaque date du calendrier concernée.
Ensuite, cette balises est transformé en décoration par simple CSS.

Cette approche est très puissante car elle nous a permis d'aller modifier le comportement interne d'un composant, sans avoir à intervenir sur le code de celui-ci (SAP peut être amené à le faire évoluer par la suite)

PS : Merci à Pierre B. pour m'avoir initié au Tissage d'Aspect... il y a 7 ou 8 ans