Heads up with New Age UX Enablement

[vignesh_kamath]

SAP UX Evolution

Most customers still rely on ABAP and Web Dynpro based “classic transactions/applications”. This application gets further complicated in functionality with each release and each custom enhancement. The focus so far has been to meet business requirements and not on usability and user experience. With the introduction of new UX solutions, SAP has plugged this gap and provided tools to the clients to make their user’s experience better.

Key UI Technologies Big picture-



In 2006, SAP introduced the Floor Plan Manager (FPM) for ABAP Web Dynpro enabling development through a model driven approach, which is still quite relevant for adapting SAP web applications.



FPM helps in combining application-specific views of one or more business applications to create a new application. These can be done fairly quickly by taking advantage of templates such as floor plans and generic UI building blocks.

FPM also supports in creating and configuring the application specific view using UIBB (User Interface Building Blocks). Some UIBBs are: Form Component, List Component, Tabbed Component, Search Component and Hierarchical list component.

In 2011, SAP introduced the SAP UI5 – the development toolkit for HTML5, on which SAP Fiori applications which UI5 based applications can be developed using a model driven approach. As per SAP’s UX strategy, the Fiori Launchpad, which can run on any device, is seen as the single point of access for business applications.

SAP Screen personas, introduced in 2012, can be used to personalize existing ABAP screens by drag and drop approach to make them more usable and visually appealing.

These UX solutions help to remodel the user Interfaces, make the screens intuitive and thus enhance the user experience. All these can be done in a short period by using drag & drop features and by using several predefined contents like Work lists, Landing pages and Side panels, which are already available.

It must be understood that successful UX enhancement depends on the specific UX strategy, which has to be defined based on requirements of users and the solution landscape.

For More Information, you can also refer - SAP Enterprise Architecture Explorer

SAP Fiori UX | SAPUI5 | SAP Screen Personas | Web Dynrpo ABAP | SAP Gateway | UI Technologies | SAP UX Strategy | Enterprise UX Strategy

(Thanks to @Juergen Jakowski)

Fiori UX

SAP Fiori is a series of app suites, being introduced in waves (When wave 1 was release they came up with 25 apps, From wave 8, the product portfolio has more than 500 apps). The apps in these waves are written by SAP app developers. But Fiori is a design approach, which has a number of soft constraints. And when an app is built to conform to those constraints, it exhibits Fiori-like features: simple and recognisable design, easy to use, a role-based approach, and following one of a core set of UI patterns.

What you can do with SAP Fiori applications:

• Implement them


• Customize them


• Create them from scratch

Any form of implementation or development requires SAP Gateway (the integration technology that connects the frontend SAP Fiori app to the backend SAP system). In addition, knowledge of SAPUI5 (the programming language on which the UI of SAP Fiori apps is based) is needed in order to customize or create apps. Also Fiori is the main UI for most transactions and business processes on S4 Hana.

Fiori Apps are developed using SAP’s HTML5 framework called SAPUI5, which is also often called UI Development Toolkit for HTML5.

Fiori 2.0 is the latest release on New UX Designs which was just announced in Sept 2015 about UI/UX changes, but not yet officially available as on date. Meanwhile Fiori 1.0 is most widely used.

To know more about Fiori Design Patterns-

https://experience.sap.com/fiori-design-web/foundation/get-started/

SAP Fiori is based on apps in different areas of application and technical requirements.

There are 3 types of apps:

Transactional apps - as the name implies this represents transactions to be completed, such as vacation applications to be entered and approved. For performance reasons it is recommended to use SAP HANA in conjunction with these transactional apps, but it is nonetheless not a requirement and it runs on other database systems too.

Analytical apps - these provide real time information, so to speak, provided by the SAP Business Suite. With this information you can Key Performance Indicators, live. These applications are performance intensive and run only on SAP HANA.

Fact Sheets - This is to display information. One can navigate from one fact sheet to the next. This information is based on the requirements of various business operations. Like analytical apps, fact sheets run only on SAP HANA.

Classic Fiori Architecture-

SAP ABAP Front-End Server

SAP ABAP front-end server contains all the UI components of Fiori system and NetWeaver gateway. These UI components consist of central UI add on, SAP UI5 control library and SAP Fiori Launchpad. It also contains product specific UI. Add-ons contain UI development for respective business suite such as ERP, SCM, SD, MM, etc.

SAP NetWeaver Gateway is used to setup a connection between SAP business suite and target clients, platforms and framework. It offers development and generation tools to create OData services to different client development tools.

SAP ABAP Back-End Server

SAP ABAP Back-End Server is used to contain the business logic and the back-end data. Search model for fact sheets and SAP business suite is contained in ABAP back-end server.

SAP HANA database and HANA XS Engine

HANA XS engine is used to run all analytical apps in SAP Fiori. It contains Fiori app content and virtual data-model reuse content, which is provided through SAP HANA Live.

HANA XS Engine consists of two components −

HANA Live App content for Business suite.

Smart Business component with KPI Modeler.

HANA Live content contains VDM reuse content, which can be used for extensibility purpose.

Notes −

Transactional apps in SAP Fiori does not necessarily require SAP HANA database to run and can run on any database.

Fact Sheets, Analytical apps and Smart Business run only on SAP HANA database with no exceptions allowed

HANA is required for search model function of Fact Sheets to work.

The data requested in Fact Sheets via search models is directly pulled from HANA database.



You can check list of all currently available Fiori Apps-

SAP Fiori apps reference library- https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/

OpenSAP: Introduction to SAP Fiori UX- https://open.sap.com/courses/fiori1

Implementation Guides for Fiori, Look for on sap support.

1. Fiori with S4 Hana Technical Guide (MAA_S4HANAX_BB_ConfigGuide_EN_XX)


2. Fiori Technical Foundation Guide (EE0_NWG20_BB_ConfigGuide_EN_XX)


3. Fiori Security Config Guide (EE1_NWG20_BB_ConfigGuide_EN_XX)


4. Fiori Launchpad Config Guide (EE3_NWG20_BB_ConfigGuide_EN_XX)


5. SAP Fiori Transactional Implementation (MF1_NWG20_BB_ConfigGuide_EN_XX.pdf)


6. SAP Fiori Factsheets Implementation (MF3_NWG20_BB_ConfigGuide_EN_XX)


7. SAP Fiori Analytical Implementation (MF2_NWG20_BB_ConfigGuide_EN_XX)


8. List of All Fiori T-Codes

In short, remember

Fiori is Methodology.

SAPUI5 is Technology.

Extend Fiori Apps (Enhancement)

SAP Fiori applications can be extended by enhancing one or multiple content layers, depending on the extension requirements and the application type.



Various levels of proficiency is required to extend (development rework) features of Standard Fiori Apps, depending upon the content layer mentioned above.

UI- Understanding of SAPUI5 library, JavaScript, OData Query, XML, JSON, HTML5, CSS

Gateway – Web Service, ODATA Protocol query options, ABAP, Gateway

HANA – HANA Native development, ABAP CDS, Open SQL, SQL Script, UI Annotations, HANA Configuration & Administration

Business Suite – ABAP, Functional knowledge

Search Model – Netweaver Enterprise Search, ABAP, HANA Content Administration

SAPUI5

SAPUI5 is a series of core and functionally focused libraries and a runtime environment. The core provides essential services such as module loading and management, eventing, navigation, data management and various application development concepts (such as Model-View-Controller). The libraries provide collections of controls that are used as UI building blocks in apps – tables, lists, date-pickers, input fields and forms, buttons, and so on. Some controls are simple (like the Button), others are more complex (like the Shell, or the Table), but all work together to provide the interactive components from which applications can be built.

When you invoke an app, the application itself is downloaded to the browser, along with the SAPUI5 runtime.

The main skills that one needs to have for creating SAPUI5 applications are

• JavaScript: Used for creating the Views and Controllers.


• XML: Used for creating the Views and Fragments.


• CSS: Used for theming and adding custom styles in the Views.


• Gateway and OData services: Integration with backend systems. The purpose of the Open Data protocol (OData) is to provide a REST-based protocol for CRUD-style operations (Create, Read, Update and Delete) against resources exposed as data services. An understanding of the metadata file of a service and consumption of OData services is essential.

SAPUI5 Simplified Architecture-



This is a paradigm shift from Webdynpro UI/FPM, BSP UI, SAPGUI.

Most modern-day browser (technically called HTML5 compliant browser) contain specific JavaScript runtimes. Which are able to support client applications built using different frameworks like SAPUI5, Angular.js, jQuery, React.js…etc

To program "SAP Fiori-like" applications it is necessary to develop in UI5 and to keep to specific provided design patterns.

Devepment Guidelines are provided according to which the webapps should be developed.

Technically, what does this look like?

var myButton = new sap.ui.commons.Button("btn");  



myButton.setText("Hello World!"); 



Mit JSON: 



var myButton = new sap.ui.commons.Button({text:"Hello World!",tooltip:"Hello Tooltip!"});

 

Below courses will give you good heads up for your SAPUI5 development journey.

“Developing Web Apps with SAPUI5” https://open.sap.com/courses/ui51

Test SAPUI5 waters with- https://sapui5.hana.ondemand.com/explored.html, (These contain frequently used list of controls you often see in your Fiori Apps).

SAPUI5 Developers Guide- https://sapui5.hana.ondemand.com

High level Application Technical Architecture of Fiori-compliant SAPUI5 App.



You can refer this link to know more on how to build this App.- www.boaunited.com

SAPUI5 & OData

SAPUI5 can exchange data using XML HTTP Request object to call complete datasets from the backend systems. But SAPUI5 controls are optimized to exchange data using the open data OData protocol, also known as 'The SQL of the Web'. SAP has chosen OData as the de facto standard for all SAP solutions. SAP Hana XS Engine will support OData out of the box. SAP NetWeaver Gateway will used as the OData bridge between SAP Business Suite applications and SAPUI5 applications like SAP Fiori. So if you want to develop SAPUI5 applications, you definitely must know the OData specifications.

So you need to have understanding of XML, JSON for Rest-based webservices like ODATA.

Sample ODATA service as seen in SAP Netweaver Gateway (TCode- /iwfnd/gw_client)



To know more about how to implement ODATA service-

https://blogs.sap.com/2015/03/26/1-odata-crud-crash-course-create/

OpenUI5

You may have also heard about OpenUI5, there is often misconceived notion that SAPUI5 was derived from OpenUI5.

Infact, SAP started open-sourcing SAPUI5 as OPENUI5 from late 2013,

OpenUI5 is SAPUI5's sibling. While the use of SAPUI5 is subject to an SAP licence, OpenUI5 is Open Source.

All the functionalities built using SAPUI5 are suitable for productive use, and SAP support, which is not the case with OpenUI5, which is backed by open source community ecosystem.

The difference between OpenUI5 and SAPUI5 is in some control libraries which have not (or not yet) been put under an Open Source license. But the essentials (sap.ui, sap.m) are there. If you've written a UI5 powered app, as long as it doesn't use charting, for example, there's a good chance that you can just switch the toolkits and it will still work. Of course, there's more to the detail, but that gives you a rough idea.

It is intended for Non-SAP customers.

Hybrid/Native Apps



Fiori/UI5 apps are typically Browser based solutions and does not support offline scenarios, application usage analytics, push notifications etc...

We use Hana Cloud Platform (HCP) Mobile Services (MS) or SAP Mobile Platform (SMP On-Premise) when a company needs some of these advanced features and access to mobile native features like bar code scanning, camera, push notifications, device storage, geo-location, offline sync,app update etc.... as said if you use HCPMS or SMP, you may build your own applications based on ui5 for iOS, Android, Windows Phone.. to achieve these features.

If you are looking for such Fiori apps with advanced features, SMP provides libraries such as Kapsel SDK to build your apps much easier.

Mobile Native Apps can be built using SAPUI5 based Kapsel SDK and Android SDK utilizing Apache Cordova framework & SAP Hybrid Application Toolkit (with SAP WebIDE), in conjunction with HCPMS, can be used as installable app.

Such Hybrid Native Apps, contain all UI, Web-Assets in the App container, which provides for improved performance, and use of native device functionality.

That said, there is a LOT you can do with online apps using Fiori and SAPUI5 alone.  So unless you have an urgent use case for native or offline features in your apps, you might want to start with simple online apps first, and leave the advanced features until some future time.   You can always add SMP or HCPms later.

Extensive Resource for this Topic here-

Hybrid (Kapsel) App Development

http://help.sap.com/saphelp_smp3012sdk/helpdata/en/7c/05514870061014ae31b35a27134786/frameset.htm

smp_kapsel_development.pdf

HybridAppToolkitCompanionGuideForAndroid.pdf

Getting Started with Kapsel

UX/UI to Non-SAP Back-End System

The SAP Gateway plays important role in exposing SAP ABAP-based Business Suites for consumption by numerous UI-channels, SAP and non-SAP. Including mobile apps, Fiori / UI5 / Hybrid / or Non-SAP UI frameworks.

So what about use cases involving integrating Non-SAP BackEnd Data, as Web Service inorder to consume it as SAPUI5 or Fiori App.

With increasing demand for IoT specific integrations. 3^rd Party Integration becomes very crucial to next generation technology roadmap.

Solutions to integrate 3^rd Party Web for UI5 consumption-

1. Integration Gateway (Comes with SMP 3.0)

Integration Gateway is a technology component that provides design-time tools and the associated run-time for modeling, composing and provisioning OData services based on one or more APIs from various SAP and non-SAP data sources. Among the data sources supported today are, SOAP (Simple Object Access Protocol), JPA (Java Persistence API) and JDBC (Java Database Connectivity) to access non-SAP data sources as well as OData Channel (ODC) for accessing OData services provisioned via SAP NetWeaver Gateway.

2. Hana Cloud Integration – Odata Provisioning (HCI-ODP Comes with Hana Cloud Platform)

 

OData provisioning in HCI allows you to create OData from SOAP service. So you could consume it in applications such as Fiori and Mobile.

With this you can mash up 3 data sources: SOAP, REST and OData.




In this approach we see, Gateway as a Service Model (GWaaS) over Cloud

https://blogs.sap.com/2016/04/18/creating-odata-service-from-soap-using-hci/

 

3. SAP Gateway (With Limitations)

To consume 3^rd Party OData Webservice with SAP Gateway, refer below link

https://blogs.sap.com/2013/10/09/how-to-consume-an-odata-service-using-odata-services-consumption-an...

The Limitation with this approach is that, only V2 complaint ODATA services can be integrated.

CRUD or Batch process will have restrictions.

You may have to circumvent CORS Issue in your Fiori or UI5 Application

The performance may not be the same, as compared to when using the external service directly, as this is more or less forward proxy mechanism.

-vigneshkamath@boaweb.com