La nouvelle UX avec SAP FIORI et SAP UI5

Avec SAP FIORI, faites de l'expérience utilisateur votre priorité !
 

 

Vous aussi vous entendez souvent que SAP est trop compliqué, pas assez ergonomique ?
SAP vous a entendu en sortant SAP Fiori et CODiLOG en est devenu un expert !
SAP s’est adapté à l'évolution des usages en entreprise et a procédé à une refonte totale du design de l’ERP en proposant la solution FIORI.

Basée sur des principes de conception modernes et s'appuyant sur la technologie SAP UI5, FIORI est la solution graphique orientée web et mobilité dont l’atout principal est sa simplicité d’utilisation.

Cette solution vise aussi à être accessible partout et tout le temps.

L’adhésion des utilisateurs aux solutions informatiques est aujourd’hui un axe majeur de la stratégie de digitalisation et SAP FIORI en est la clef du succès.
 


Les enjeux

De nos jours, dans un monde hyperconnecté, mobile et rapide, l'expérience utilisateur est un des enjeux majeurs des projets informatiques.

Les utilisateurs sont habitués à tant de simplicité sur le web qu’ils ne peuvent plus concevoir de travailler comme ils le faisaient dans le passé. Les grands acteurs du web et de la mobilité ont redéfinis les standards et les attentes des utilisateurs ne sont plus les mêmes. Tout le monde est habitué à tout pouvoir consulter sur un mobile, une tablette, ou encore pouvoir commencer à travailler sur un appareil et poursuivre sur un autre.

Fort de ce constat, SAP a investi dans l’Expérience Utilisateur afin d’adapter ses processus métiers largement reconnus dans le monde entier à ces nouveaux standards. C’est la naissance de SAP FIORI. Depuis 2013, SAP ne cesse de développer et d’améliorer ses outils liés à l’expérience utilisateur. Ayant reçu de nombreux prix dont le prestigieux « Red Dot Award », un prix qui récompense aussi bien le design que l'innovation, la solution SAP FIORI se met donc au niveau des attentes utilisateurs et promet de belles innovations.

En effet SAP ne s’arrête pas là et voit plus loin tant sur le volet technologique que sur celui du design. Le cloud, l’intégration et la simplification sont les maitres mots des innovations de demain.

Vous voulez en savoir plus ? Nous vous proposons de (re)découvrir SAP FIORI mais aussi les technologies qui s’articulent autour. 


Qu’est-ce que SAP FIORI?

Le terme SAP FIORI est souvent utilisé, à tort, pour désigner plusieurs concepts. Pour simplifier les choses, nous verrons que derrière ce terme se cachent deux volets. Le premier est une offre proposée par SAP composée de nombreuses applications, le second porte plus sur une méthode de conception de ces applications permettant à chacun de produire des applications apportant une bonne Expérience Utilisateur.

Le flou qui peut se tramer derrière ce mot est souvent lié au fait que cette solution offre beaucoup d’outils et de contenus en général, aussi il est important de reprendre l’historique de la solution pour bien comprendre de quoi il s’agit.
 

Historique et évolution de la solution

 

Historique de la solution SAP FIORI

 

Genèse

A l’origine, SAP FIORI n’était qu’une petite initiative appelée “Projet Phoenix” d’où son logo. Puis l’initiative a été développée pour rejoindre le monde public avec Open UI5. Open UI5 et SAPUI5 sont très similaires puisqu’ils partagent une base commune à laquelle s’ajoutent des librairies complémentaires pour SAP UI5.
FIORI a été lancé par vague en proposant à chaque vague un certain nombre d'applications.

 

 Screenshot d'une application SAP FIORI concernant le Cash Management

 

FIORI 2.0

Après d’autres vagues d’applications, SAP a lancé FIORI 2.0, une nouvelle version permettant d’apporter un accès plus rapide à l’information, introduisant de nouveaux concepts à la fois techniques mais également au niveau applicatif. Cette version s’accompagne également d’un nouveau thème graphique (Belize) qui est proposé en deux versions, l’une claire et l’autre plus sombre.

 
Application SAP FIORI 2.0 sur desktop, mobile et tablette

Parmi les nouveautés, on retrouve de nouveaux Layouts, plus optimisés comme les Dynamic Pages ainsi que de nouveaux Floorplans dont l’Object Page ou l’Overview Page.  

En effet, l’une des nouveautés avec SAP FIORI 2 concerne la navigation. SAP a introduit un niveau intermédiaire entre le Launchpad et les applications. Il s’agit des Overview Pages.

 
SAP Launchpad et Overview page

 

Ce nouveau type de page est constitué d’objets appelés Cards. Ces pages sont générées via le concept des FIORI Elements.

Anatomie de l'interface SAP FIORI 2.0
 

Il existe plusieurs types de Cartes (Cards) et les plus connues sont celles de type Liste, Analytiques ou encore tableaux.


Les différents types de cartes SAP FIORI 2.0


Toujours en lien avec les FIORI Elements, SAP FIORI 2.0 met en œuvre les List Reports qui permettent d’afficher sous forme de tableau un grand volume de données.


List Report


Ensuite, un autre type de page, l’Object Page, qui comme son nom l’indique, permet de faire un focus sur un objet. D’un point de vue usage, FIORI intègre dans ses applications des liens sur les identifiants d’objets vers des applications basées sur ce type de page. Par exemple, un lien sur le numéro de fournisseur redirigera l’utilisateur vers une page dédiée portée par une application de ce type.


Object Page


Enfin, le dernier Floorplan en relation avec les FIORI Elements est l’Analytical List Page. Il s’agit d’un type de page dédié à l’analytique, présentant de nombreux indicateurs, tableaux de données et chiffres clés.


Analytical List Page sur SAP FIORI 2


Puis, SAP a enrichi son Launchpad avec SAP FIORI 2 en introduisant les Notifications, basées sur OData V4 et les Web Sockets. Il s’agit de présenter les tâches de Workflow directement dans le Launchpad et donne donc un accès rapide, simple et intuitif aux tâches de l’utilisateur.


SAP Fiori Launchpad et les workflows

 

FIORI 3.0


La dernière version de FIORI est SAP FIORI 3 avec là encore un nouveau thème graphique (Quartz), lui aussi en versions claire et sombre, mais aussi plusieurs autres innovations transverses. 

Les maîtres mots de cette version sont « Intégration » et « Intelligence » car la volonté de SAP fut de proposer au travers du Launchpad un accès à l’ensemble de ses outils, qu’ils soient liés à l’ERP, à d’autres outils cloud comme « Success Factors », « Concur » ou « Ariba » mais aussi des services cloud comme « CoPilot ». 

Cette version est également l’occasion d’harmoniser les thèmes graphiques de tous ces outils afin d’apporter aux utilisateurs une seule et unique interface.

Les nouveaux thèmes SAP FIORI 3.0

Côté intelligence, SAP a également embarqué de nouvelles choses. Tout d’abord son assistant digital qui est nativement et centralement intégré dans le Launchpad.

Ensuite, du côté de la page d’accueil, SAP a revu à la fois le contenu et le design présentant par exemple, des informations en temps réel permettant un gain en productivité

Les home pages intelligentes de SAP FIORI 3

Côté Intégration, comme nous le disions, SAP a souhaité rendre l’utilisateur agnostique des outils manipulés depuis le Launchpad. En effet, quel que soit l’outil, qu’il soit « On Premise » ou « Cloud », Standard ou spécifique, l’utilisateur aura une expérience commune. Un seul accès à tous les applicatifs.

Toutes les applications sont accessibles depuis une même page
 

Autres innovations et perspectives

Au fil du temps, SAP a continué à améliorer sa solution, proposant à la fois plus de contenu mais également plus de contexte. On distingue aujourd’hui FIORI pour le web de FIORI pour Mobile. En effet, bien que la solution soit responsive et s’adapte donc à n’importe quelle taille d’écran, la mobilité est un monde à part avec des usages différents et SAP l’a compris. Il a ainsi noué des partenariats avec les deux grands acteurs de ce domaine, Apple et Google afin de produire une solution permettant de développer des applications iOs et Android natives pour FIORI. Il s’agit de SAP FIORI for IOS et SAP FIORI for Android.

Plus récemment, SAP s’est attaqué à l’assistant virtuel, SAP Copilot et plus généralement à l’intelligence conversationnelle. Là encore, SAP a revu son design et les processus afin d’optimiser l'expérience utilisateur pour ce contexte.

Voici un résumé des différents Design FIORI selon le contexte :

Les différents designs FIORI disponibles pour mobile

 

SAP FIORI - Une suite d'applications Web basées sur SAP UI5

FIORI est un ensemble d’applications fourni par SAP out-of-the-box. Il s’agit d’applications web responsives basées sur le Framework SAPUI5 qui a été conçu lui aussi par SAP. La liste complète de ces applications, leur documentation ainsi que l’aide pour les déployer est disponible sur la librairie d'applications FIORI.

Le Framework SAPUI5 propose un ensemble de contrôles graphiques tels que des boutons, des tableaux ou encore des contrôles plus complexes comme les « Process Flow » ou encore des « Planning Calendar ».

Chaque contrôle est documenté pour une prise en main rapide et une simplicité de développement.

La documentation propose, entre autres choses, des conseils aux développeurs pour bien démarrer, de l’information générale, des tutoriaux, la documentation de l’API mais aussi une mise en démonstration de contrôles et même d’applications complètes. 

Cette solution est en perpétuelle évolution et on dénombre actuellement 3 grandes versions de FIORI, chacune faisant un focus particulier sur un élément.

 

La première version de SAP FIORI, sortie en 2013 avec une première vague de 50 applications, a révolutionné l’expérience utilisateur des solutions SAP. Toute la base de la solution fut mise en place avec le Launchpad, les composants techniques tels que SAP Gateway, l’architecture et les premières applications. Plusieurs vagues d’applications ont été lancées dans le cadre de cette première version de FIORI. Il s’agissait en effet de proposer un maximum de contenu tant sur la partie applications qu’au niveau de la librairie SAPUI5 dont nous parlerons plus tard.

Ces applications sont classées en 3 grandes familles selon leur usage : Les applications transactionnelles, les Fact Sheets (ou Object Pages) ainsi que les applications analytiques.
 

Applications Transactionnelles

Il s’agit d’applications permettant aux utilisateurs de réaliser des tâches transactionnelles telles que la validation de commandes d’achat par exemple.

Architecture d'une application SAP Fiori transactionnelle

 

Fact Sheets / Object Pages

Il s’agit d’applications assez simples permettant d’afficher des informations contextuelles sur un objet donné. Par exemple, l’affichage des informations sur un fournisseur. Ce genre d’application peut également être utilisé pour gérer et créer les données associées à un objet métier comme le fournisseur.

Ces applications ne fonctionnent qu’avec une base HANA.

Architecture d'une application Fact Sheet
 

Applications Analytiques

Il s’agit d’applications qui proposent des indicateurs et les affichent sous forme de graphiques le plus souvent. Basées sur HANA, elles permettent d’avoir des données en temps réel pour un meilleur pilotage des activités.

Par ailleurs, il est possible de créer vos propres indicateurs avec l’application “SAP Smart Business Modeler”.

Architecture d'une application SAP FIORI analytique

 

Le Design FIORI

SAP FIORI représente également un Design ou une méthode de développement d’applications répondant à des critères permettant aux développeurs de produire des applications intuitives, cohérentes dans leur fonctionnement ou encore dans leur design. Ce design assure une bonne expérience utilisateur.
 

Les grands principes

Afin d’assurer l’expérience utilisateur, l’ensemble des applications FIORI font l’objet de Design Thinking et doivent répondre à 5 principes fondamentaux.

Ces principes sont les suivants :

Principes des applications SAP fiori

ROLE-BASED

Une application SAP FIORI est optimisée pour un métier, un besoin et une façon de travailler. Chaque application apporte la bonne information au bon moment pour le bon utilisateur.

ADAPTIVE

Qu’importe votre écran ou votre appareil, SAP FIORI s’adapte à toutes les situations. Derrière chaque application, une optimisation pour différentes tailles d’écran est en place pour assurer à chaque usage la meilleure expérience utilisateur.

SIMPLE

Les applications FIORI répondent à un besoin pour un rôle métier. Elles sont ergonomiques et permettent de personnaliser les écrans afin de faciliter leur usage et optimiser le traitement des tâches.

COHERENT

Qu’importe l’action réalisée avec FIORI, la façon de travailler, de naviguer, ou de présenter les informations est identique, ceci permet une prise en main rapide et l’économie de formations

DELIGHTFUL

Les applications FIORI se veulent ergonomiques et apportent un réel plaisir à les utiliser.
 

Les briques de base

Les briques de base du design fiori
 

SAP FIORI propose une gestion du design centralisée via des thèmes graphiques. En standard, et suivant les versions, SAP fournit des thèmes couvrant à la fois l’usage normal et l’usage contrasté permettant une meilleure accessibilité. 

Par ailleurs, via le Framework SAPUI5, SAP met à disposition un ensemble de contrôles graphiques plus ou moins complexes et surtout responsives. Ces contrôles suivent des règles d’ergonomie et d’accessibilité afin de garantir la meilleure expérience utilisateur possible. Cette bibliothèque de contrôles évolue constamment (1 version / mois depuis la version 1.60) en apportant de nouveaux contrôles ou en en améliorant d’autres.

Le design de SAP FIORI passe également par une méthodologie de développement. En effet, une application n’est pas qu’un ensemble de contrôles, elle se base sur des Layouts et des Floorplans permettant de se structurer et d’ajouter de la sémantique. Alors à quoi correspondent ces concepts dans le développement d’une application?

Il s’agit de « modèles » de développement qui sont à privilégier selon les besoins et surtout l’usage prévu de l’application. 

Tout d’abord, les Layouts correspondent aux types de page telles que la Dynamic Page ou encore le Flexible Column Layout qui a remplacé le Master-Detail très utilisée dans les premières versions.

Les Floorplans portent plutôt sur le contenu de ces pages et s’adressent plus à la sémantique de l’application, on retrouve dans cette catégorie les Worklist, Overview Page, ou encore le très apprécié Wizard.

Enfin, les Frameworks ont des fonctionnements à part qui permettent de générer des applications. On retrouve par exemple APF pour Analysis Path Framework et SAP Smart Business. 

SAP partage sa vision de l’expérience utilisateur au travers du site FIORI Design Guidelines qui en plus de concepts généraux, présente les principales fonctions derrière FIORI afin que celles-ci soient comprises et bien utilisées, afin que les développements soient cohérents entre eux et offrent la même qualité d’Expérience Utilisateur.

Par ailleurs, SAP FIORI introduit le Launchpad, il s’agit d’un portail centralisé pour les applications permettant de fournir aux utilisateurs, depuis la même interface, l’accès à l’ensemble des applications dont ils pourraient avoir besoin. Qu’importe le système utilisé par ces applications et qu’importe leur technologie. En effet le Launchpad permet d’intégrer des applications FIORI mais aussi Web Dynpro, Web GUI ou encore d’autres applications web. 

Au fil des années, les évolutions de FIORI ont également conduit à apporter de nouveaux services et outils permettant une fois encore d’accélérer les prises de décision ou encore de diminuer les temps de traitement.

Le Launchpad lui-même comporte un ensemble d’outils permettant d’apporter toujours plus de simplicité et de productivité aux utilisateurs en adressant des services transverses.

Parmi ces innovations, les notifications du Launchpad qui permettent d’accéder directement aux tâches de workflow et d’un simple clic, d’agir sur celles-ci.

Une overview page accédée depuis le launchpad

 

Le Launchpad est lui aussi extensible grâce aux plugins qui vous permettent de développer des fonctionnalités transverses à toutes les applications.
 

Les gains

Les projets UX, dont FIORI fait partie, et en particulier l’application des 5 grands principes, offrent de nombreux avantages tant sur le plan financier grâce à l’amélioration de la productivité des utilisateurs, l’économie de coûts de formation ou encore la diminution des erreurs, que sur le plan humain en assurant la satisfaction utilisateur, l’adoption des utilisateurs aux solutions développées (change management facilité) mais aussi, le renforcement la relation IT/Business qui par le passé a pu être compliquée.  Ceci assure donc un ROI pour vos projets FIORI. Par ailleurs, SAP met à disposition un outil permettant d’estimer les gains de votre projet UX. Il s’agit de l‘UX Value Calculator.

SAP FIORI permet une amélioration considérable de la productivité des utilisateurs grâce à la fois à des concepts techniques mais aussi via l’optimisation des processus métiers ou encore l’utilisation de services complémentaires tels que l’assistant digital CoPilot.
 

Optimisation des processus

D’un point de vue processus, une des principales différences entre FIORI et les transactions Backend est qu’une simple transaction peut couvrir les besoins de plusieurs utilisateurs alors que FIORI, dans ce cas, fournira plusieurs tuiles différentes faisant chacune un focus et optimisant les besoins de chaque métier. Ceci permet entre autres choses d’avoir un accès rapide aux informations essentielles mais aussi de regrouper entre elles les informations qui sont connexes. Pour résumer, FIORI va d’une part scinder une transaction en plusieurs dès lors qu’elle porte sur différents besoins métiers, et d’autre part regrouper des informations que l’on trouverait habituellement dans plusieurs transactions car elles sont liées entre elles. 

De même, l’arrivée de S/4HANA a permis une refonte du modèle de base de données et la refonte de plusieurs processus en les simplifiant d’une part mais également en allant plus loin dans ces processus notamment via leur digitalisation.
 

Centralisation des accès

Le Launchpad a lui aussi évolué au travers des différentes versions de SAP FIORI pour permettre un accès plus rapide et mieux organisé des contenus. Ceci s’est fait par le biais de nouveaux Layout ou Floorplans mais aussi par des innovations technologiques côté serveur ou encore basées sur des services cloud.

Les « Overview Pages » qui permettent d’ajouter une vision transverse à un domaine fonctionnel en proposant une forme de tableau de bord aux utilisateurs. Il s’agit en effet d’une étape intermédiaire entre le Launchpad et une application. Ces tableaux de bord sont composés de « Cards » qui peuvent prendre la forme de graphiques, de listes ou encore de tableaux.

SAP intègre également dans FIORI un service de Chabot appelé « CoPilot ». Il s’agit d’un assistant accessible dans le Launchpad permettant d’interagir avec l’ERP au travers de commandes écrites ou vocales préconfigurées.

Enfin, SAP a basé certaines solutions sur le Machine Learning permettant à la fois de réaliser des opérations complexes rapidement mais également d’automatiser des traitements qui prendraient un temps considérable s’ils étaient réalisés manuellement. Ceci grâce à des algorithmes mathématiques et une grande puissance de calcul.
 

Optimisation des usages

Enfin, des services permettant de mieux prendre en main les applications sont proposés comme les Flexible Services (ou Adapt UI) qui permettent à un utilisateur de personnaliser l’affichage d’une application afin de masquer des champs qui ne lui sont pas utiles, d’en ajouter d’autres ou encore de remodeler l’organisation des écrans. Ceci permet d’éviter les demandes de modifications de la part des utilisateurs et d’améliorer la maintenabilité de vos applications. Ces adaptations peuvent se faire au niveau du développement, de Key Users pour une population ou encore directement par les utilisateurs finaux.

De même, le service Context Sensitive User Assistance permet de proposer aux utilisateurs de l’aide directement embarquée dans le Launchpad. Cet outil propose du contenu en standard mais se base également sur « SAP Enable Now » afin de compléter les contenus.
 

Développements accélérés


Outre ces innovations technologiques, et conformément au guide de design présenté précédemment, les applications FIORI permettent une meilleure productivité en utilisant des outils plus simples qui sont liés au développement et non pas à des outils annexes.

Il s’agit par exemple des masques de saisie permettant de limiter les erreurs dans les formulaires ou encore d’effectuer des contrôles directement côté Client et ainsi gagner en temps.

De même, les saisies sont assistées, soit par des aides à la saisie classiques, soit via des suggestions ou de l’auto complétion.

Enfin, FIORI étant multi support, il est également possible de commencer un traitement sur PC au bureau et de le poursuivre sur une tablette dans les transports par exemple grâce aux « brouillons ». 

Il est important de noter que toutes ces optimisations sont proposées dans les applications FIORI standard, mais que vous pouvez également en profiter dans vos développements spécifiques.

Enfin, SAP a développé un nouveau Framework appelé FIORI Elements qui lui aussi permet de diminuer drastiquement les temps de développement. Ce concept sera présenté plus en détail dans la partie technique.

N’hésitez pas à consulter par vous-même les dernières innovations de SAP FIORI en consultant la Roadmap FIORI ou encore la page officielle de la solution FIORI, incluant une vidéo de présentation ainsi que d’autres ressources.

 

Et techniquement, comment ça se passe ?

Présentation générale

Comme toute application Web, une application FIORI a une partie Frontend et une partie backend. Ici, nous ne parlons que des applications FIORI et non pas des services associés que l’on a pu présenter plus tôt.

Sur ces 2 axes techniques, SAP a continué d’innover au fil du temps pour apporter plus de contenu, plus d’outils, plus de performances, ou encore plus d’ouverture.

En effet, un des axes de développement de SAP est de permettre l’usage de sa librairie web avec d’autres Framework comme Angular ou encore React. L’ouverture se traduit également par l’intégration de librairies externes afin d’introduire encore plus de contenus ou encore par des partenariats avec Google et Apple pour créer des SDK permettant le développement d’applications FIORI natives.

Au travers de cette présentation, nous allons présenter ces évolutions au travers de 3 axes : le Backend, le Frontend et les outils.

Backend


Architecture

Outre les évolutions de l’ERP, SAP a également innové du côté du module Gateway. En effet, c’est grâce à ce module que les applications FIORI communiquent avec le système Backend via des appels OData. Pour plus d’informations sur l’OData, vous pouvez consulter ce site : https://www.odata.org/

Ce module est nativement intégré à partir de la version SAP Netweaver 7.40 via le composant GW_FND mais nécessite des composants complémentaires selon les usages (CRM, SRM, etc…). Pour les versions antérieures, il convient de déployer les composants nécessaires côté serveur Backend et/ou Frontend. Il s’agit principalement du composant IW_BEP pour le Backend et des composants IWFND et GW_CORE pour le serveur Frontend.

Tout en restant dans l’architecture, il convient de rappeler que SAP FIORI peut être déployé dans les entreprises de différentes manières :

 

Déploiement Fiori embedded
Déploiement Embedded

Cette approche est préconisée dans un contexte mono backend mais présente quelques contraintes. En effet, la montée de version UI5 ayant des prérequis au niveau du système Netweaver, il est plus compliqué d'effectuer cette montée de version. De même, si l’on souhaite donner accès aux applications FIORI depuis Internet, la sécurité sera moins bonne dans ce contexte qu’avec un déploiement en HUB par exemple.

Dans un contexte S/4HANA, cette option reste celle privilégiée par SAP pour des raisons techniques (compatibilité inter-systèmes). En cas de backend multiple, un Frontend serveur central peut également être déployé et connecté aux autres systèmes S/4HANA.



 

Déploiement SAP Fiori en HUB
Déploiement en HUB

L’une des options les plus utilisées car il s’agit de la préconisation SAP dans un contexte hors S/4HANA.

Cette architecture présente de nombreux avantages tels que l’indépendance de version (montée de version UI5 sans impact sur l’ERP), l’accès depuis Internet sécurisé (on n’expose pas l’ERP) ou encore la gestion multi backend.

 





 


 

Déploiement SAP Fiori hybride
Déploiement semi-cloud ou hybride

Cette solution permet de conserver son système backend ECC ou S/4HANA on premise tout en remontant dans le cloud la partie Gateway. On retrouvera donc le Launchpad depuis le cloud et les appels Web services Odata passeront par le service Odata Provisioning de SAP Cloud Platform.

Cette solution peut être utilisée pour un système S/4HANA ou non.

 





 

Déploiement en mode full cloud
Déploiement full Cloud

Elle est similaire à la précédente si ce n’est que dans ce dernier scenario, le système S/4HANA remonte lui aussi dans le cloud. L’accès au système se fait exclusivement via la couche Web, aussi bien que cette architecture simplifie grandement les choses côté infrastructure puisque tout est dans le cloud, elle apporte quelques problématiques pour le traitement du spécifique.

Ce scénario n’est possible qu’avec un système S/4HANA. En effet SAP ne propose pas de système ECC dans le cloud.

 

 

Comment choisir ? Cela dépend des usages prévus de la solution FIORI et du paysage système. Vous n’aurez, en effet, pas les mêmes choix selon les contextes.

Les choix qui sont déterminants concernent le nombre de systèmes backend, l’accès « public » via Internet ou privé en intranet uniquement, la stratégie de montée de versions, si vous êtes sur ECC ou S4HANA ou encore la quantité de spécifique. Il existe en effet bien des critères de choix et on ne peut pas tous les lister, mais il convient ici de comprendre qu’il n’existe pas qu’une seule recommandation à ce sujet mais plutôt des recommandations générales qui restent à adapter selon les contextes.
 

Modèles de développement

Côté développement, SAP a introduit différents modèles depuis le lancement de FIORI, en voici un résumé.

Avant SAP Netweaver 7.50, le modèle de développement côté backend était l’ABAP, comme n’importe quel autre développement sur SAP.

A partir de la version 7.50, soit l’introduction de SAP FIORI 2 et de S/4HANA, le modèle préconisé par SAP est d'utiliser les vues CDS au moyen de « l’ABAP Programing Model for SAP FIORI ».  Ce modèle s’appuie donc sur les vues CDS et le Framework BOPF en remplacement du code ABAP classique qui était l’usage jusqu’ici.

Voici un schéma de ce modèle :

Le modèle de développement SAP UI5

 

Un nouveau modèle de développement a été lancé par SAP pour la version S/4HANA 1909 on Premise ou 1808 cloud. Il s’agit de « l’ABAP Restful Programing Model », ou plus simplement RAP. Là encore, la façon de développer évolue encore pour aller vers plus de simplicité.


Nouveau modèle de développement SAP FIORI


Ce qui est à noter avec ce nouveau modèle c’est qu’il tend vers l’ouverture pour permettre aux entreprises qui le nécessitent d’utiliser d’autres technologies. En somme SAP rend le développement plus agnostique par rapport à la technologie. C’est ce qui est possible avec SAP Cloud Application Programing model (CAP). Il s’agit d’un tout nouveau modèle offrant un support au développement Java et Node.js afin de permettre l’intégration d’outils ou de Frameworks de développement externes. Pour en savoir plus, vous pouvez visiter cette adresse cette adresse ou suivre le cours open SAP sur le sujet : Building applications with CAP

Frontend


SAPUI5

SAPUI5 et Open UI5


La partie Frontend présentée ici concerne le développement des écrans. En effet, il faut distinguer la partie serveur Frontend qui est souvent appelé Gateway et la partie client qui elle représente les écrans.

La pièce maîtresse est le Framework SAPUI5. En effet il s’agit de la technologie de base depuis le lancement de SAP FIORI pour l’ensemble des écrans et même des autres produits SAP tel que Success Factors.

Il s’agit d’un Framework web, basé sur JavaScript ainsi que d’autres Framework tels que Less.js, Data.js ou encore le fameux JQuery. Outre le JavaScript et comme pour tout Framework Web, SAPUI5 intègre CSS3 et HTML5 pour le rendu graphique. La librairie est globalement responsive, ce qui signifie que le rendu graphique est adapté en fonction de la taille de l’écran, qu’il s’agisse d’un grand écran d’ordinateur de bureau, de celui d’un PC portable, d’une tablette ou encore d’un téléphone portable.
 

Extensibilité

Qu'importe l'environnement, grâce à SAPUI5, vous pourrez construire des applications ou encore étendre d'autres applications. En effet SAPUI5, et par conséquent les applications FIORI, sont hautement extensibles. On distingue 2 types d'extensions :

 

  • Les extension d’applications qui permettent de modifier une application au niveau des données (Model), de l’écran (Vue) ou encore de la logique des contrôleurs. En effet, il est possible d’apporter des modifications très ciblée et cela très facilement grâce notamment aux assistants embarqués dans les outils de développement tels que SAP Web IDE.
    Extension des applications SAP Fiori
  • Les extensions de contrôles qui permettent à n’importe quel développeur de créer ses propres contrôles graphiques et d’enrichir ainsi les librairies proposées par SAP UI5. Il est même possible et recommandé de créer une ou plusieurs librairies avec vos contrôles pour faciliter leur réutilisation dans d’autres projets.


Toutefois, avant de se lancer dans les extensions, il convient de se poser les bonnes questions. En effet, il n’est pas toujours bon de créer des extensions au risque d’avoir du mal à maintenir l’application par la suite.

Voici une matrice de choix pour vous aider à déterminer ce qu’il convient de faire :
 

Matrice de choix entre une application standard et une application custom
 


SAP FIORI Elements

Historiquement appelés Smart Templates, ils ont évolué et continuent d’évoluer en même temps que la solution SAP FIORI pour apporter plus de contenus mais également plus de fonctionnalités embarquées. Mais qu’est-ce donc ? Il s’agit d’applications générées à l’exécution sur la base d’annotations qui proviennent soit du modèle de données directement, soit d’un fichier créé localement. Ces applications assurent un respect des bonnes pratiques de développement et d’ergonomies puisqu’ils sont basés sur les Floorplans et Layouts présentés précédemment.

Avec les FIORI Elements, les développements d’applications sont accélérés, harmonisés et embarquent des fonctionnalités nativement tels que les filtres, brouillons, graphes ou encore la gestion des variantes. Ces applications permettent également l’adaptation des écrans à l’exécution via les Flexibility services.

Pour vous donner une idée de ce qui peut être réalisé avec les FIORI Elements, voici une capture représentative:

Fiori Elements


Toutefois, il convient de préciser que l’usage des FIORI Elements est réservé à des applications simples, autrement la somme des extensions rendrait leur usage bien moins intéressant.


Temps de développement

Pour vous aider à choisir, SAP Propose cet arbre de décision :

Choix entre les Fiori Elements, les extensions et les élements Open UI5



Pourquoi choisir les FIORI Elements dans vos développements ?
  • Pas d’erreur de conception : Puisque l’interface est générée, les développeurs n’ont pas à se soucier de l’ergonomie ou d’autres règles graphiques. Cela facilite grandement les développements. Il en va de même avec la performance, l’accessibilité ou encore la sécurité. En effet, les FIORI Elements ont été testés et éprouvés par SAP avant d’être mis à la disposition de tous. Il n’y a pas de dérive possible.
  • Cohérence des développements : Dans un monde ou se côtoient souvent plusieurs intégrateurs au sein d’un même client, l’usage des FIORI Elements permet d’assurer des développements cohérents et ainsi limiter l’empreinte que pourraient avoir certains développeurs. Cela facilite donc la maintenance et assure des transferts de connaissances facilités.
  • Rapidité de développement : L’interface étant générée, l’effort de développement de la partie Frontend est quasi nul. Basée sur les annotations du modèle OData et générée à l’exécution, le temps de mise en place d’une telle application est réduit drastiquement.
  • Extensibilité : Tout comme les applications FIORI et le Framework SAPUI5 sur lequel ils sont basés, les FIORI Elements sont extensibles à différents niveaux. Par exemple, pour un développeur, il peut s’agir d’étendre la vue CDS permettant d’ajouter un champs dans l’interface via une nouvelle annotation.

 

Web Components

Les Web Components sont une nouvelle génération de contenus intégrant les avantages de FIORI 3, à savoir son design et son thème graphique mais aussi l’accessibilité ou encore l’internationalisation proposée par FIORI.

Il s’agit en effet de packager un ensemble de ressources Javascript, CSS et HTML5 sous la forme de balises HTML.

Pourquoi ces Web Components et quelle différence avec SAPUI5 ?

Tout simplement pour s’affranchir de la partie Framework. En effet, avec les Web Components, il vous sera possible de coupler la puissance et le design des contrôles SAPUI5 avec vos Frameworks préférés, qu’ils soient Angular, Vue ou React par exemple. Ainsi, l’intégration de ces composants est facilitée puisqu’il n’y a aucune trace de Framework UI5.

Vous pourriez tout aussi bien créer vos applications UI5 en utilisant ces nouveaux types de contrôle.

Cette technologie est encore toute récente et va sûrement évoluer et se développer, à la fois en contenus mais aussi en usage. Elle semble vraiment prometteuse et nous vous encourageons à suivre son évolution, en effet la plupart des initiatives en matière de modèle de développement s’orientent vers le fait de rendre agnostique de la technologie les développements. C’est une idée très intéressante car s’affranchir des Frameworks ou des outils permettra d’en changer le plus facilement au moment opportun. Cela présage également une standardisation des développements.

 

Les outils


Les environnements de développement

Pour le développement, SAP préconise l’usage de SAP Web IDE qui se décline en version cloud (via le SAP Cloud Platform) ou en local avec la Personal Edition. Cet Environnement de développement apporte beaucoup d’aides au développement permettant de créer rapidement des applications et en assurant une qualité de développement optimale. 

Depuis peu, SAP travaille sur de nouveaux outils, le premier est un nouvel environnement de développement appelée SAP Business Application Studio. Celui-ci est disponible depuis ce début d’année et n’est ni plus moins que le successeur de SAP Web IDE. Les détails associés à ce nouvel outil se trouvent sur la page de la communauté : https://community.sap.com/topics/business-application-studio.

Par ailleurs, SAP fournit un ensemble de ressources pour les développements, Il s’agit des SAP FIORI Tools. Ce package contient un ensemble d’extensions pour SAP Business Application Studio ou Visual Studio Code permettant d’accélérer les développements ou les extensions d’applications basées sur les SAP FIORI Elements.
 

Autres outils


Les outils de développement


De même, sur SAP Web Ide, de nombreux outils ont intégré tels que HAT (Hybrid Application Toolkit) pour le développement Mobile. Il intègre également un accès direct à Git permettant de faciliter le travail en équipe, permettant ainsi d’accélérer les développements mais aussi de mieux gérer les différentes activités (Evolution vs Maintenance). Le service Git s’utilise nativement avec le serveur SAP Cloud Platform (SCP) mais peut également pointer vers un gestionnaire externe. 

Toujours sur SCP, un grand nombre d’outils sont disponibles et permettent de renforcer les fonctionnalités des applications développées mais aussi d’accélérer ces mêmes développements.

En effet, la plateforme fournit des services permettant de manipuler les données des objets connectés, mais aussi de faciliter le développement mobile par exemple. C’est le cas avec SAP Cloud Platform Mobile Services (SCPMS) qui offre à la fois une facilité de développement mais également de construction des applications ou encore de test. Tout ceci directement intégré dans SAP Web IDE.

Côté tests, SAP a également lancé OPA5 (One Page Acceptance tests) qui est une solution d’automatisation des tests unitaires. C’est très utile pour s’assurer de la non-régression des développements par exemple. De même il existe des outils de diagnostiques (CTRL + ALT + SHIFT + S) ou encore l’outil de support (CTRL + ALT + SHIFT + P). SAP propose même une extension pour le navigateur permettant de fournir des informations plus précises que les outils de développeurs classiques pour les applications UI5.

Enfin, un dernier outil qui existe depuis l’origine de FIORI est le Theme Designer. Il s’agit d’un outil web permettant de créer/modifier un thème graphique directement au clic. Pour les plus experts, il est possible d’ajouter du code CSS également mais l’idée est de proposer une interface simple permettant de créer son propre thème et cela sans aucune connaissance technique.

D’autres outils sont également disponibles et SAP travaille encore et toujours sur leur renforcement mais également sur des nouveaux outils permettant d’aller toujours plus vite pour produire des applications présentant une excellente expérience utilisateur. 
 

Comment Codilog peut-il m'aider sur SAP FIORI et SAP UI5 ?

 
Codilog s’est intéressé à FIORI dès son lancement en 2013, ce qui fait qu’à ce jour il est l’un des leaders sur ce domaine. Par ailleurs, son pôle innovation permet d’assurer l’expertise de ses consultants mais aussi de concevoir de nouveaux produits.

Outre son partenariat avec SAP, Codilog est également formateur officiel pour SAP Education dans le domaine UX et est donc au fait des dernières innovations.

Codilog vous accompagne donc également pour vos besoins de formation grâce notamment à l’offre 3 to Run de SAP sur l’ensemble des cours UX proposé par SAP.

Par ailleurs, Codilog a également développé sa propre offre de formation basée sur des supports existants et prêts à l’emploi, mais propose également une offre de formation sur mesure.

Enfin, Codilog a une offre de TMA SAP qui permet de faire évoluer vos applications Fiori selon vos besoins.

Fort de son expertise et de son expérience, Codilog est le partenaire qu’il vous faut ! Pour plus d'informations, ou une présentation approfondie de notre savoir-faire ou des solutions SAP UX, n'hésitez pas à nous contacter !

Quelques références

Nos expériences et clients UX sont nombreux et nous ne citerons que les derniers qui nous ont accordé leur confiance :

- Heineken : Refonte d’une partie du processus d’approvisionnement.
- Linxis : Refonte de la gestion des imputations HR.
-EDF : Refonte de plusieurs processus métiers (achats, données de base).