How to build Fiori apps for SAP Business One on HANA - part1

[MostafaSharaf]

SAP Fiori UX is the new user experience for SAP software, enabling a responsive, personalized, and satisfying experience across devices. It is based on SAPUI5.

It applies modern design principles for a completely re-imagined user experience. The apps run across different devices; desktop, tablet or smartphone with the same user experience. The following are the characteristics of Fiori UX;

• Role-based: decompose complex applications into a task-based experience with one central entry point for each user.


• Responsive: adapt to all sizes, devices, versions, and channels


• Simple: follow the 1-1-3 experience (1 user, 1 scenario, 3 different screens).


• Coherent: user experience with apps that speak the same design language.


• Instant value: with a low barrier to adoption, enabling customers to adapt and users to personalize.

 

The B1Summit app that was introduced during the SAP Business Innovation Summits in EMEA and NA, is an example of Fiori app based on HANA, which runs on top of HANA XS. This app can simply run on Desktop browsers, Tablets and as well smart phones. Please Watch this video for more insights.


 

The B1Summit app demonstrates mainly 5 business functionality;

1. View the Innovation-Summit agenda (keynotes, breakout sessions), with sorting/filtering/grouping by session's track, date and session title.


2. Social media integration with Twitter, Facebook and LinkedIn, where users can tweet/share/post about the event.


3. Enable users to get more details about each breakout session and the speaker info.


4. Users can also rate the session and provide comment.


5. View the latest statistics about all breakout sessions' ratings and average ratings.


6. Analytical chart which shows the current top rated five sessions during the event, with access to each one of these top sessions.

Here you can Download the app, and using the attached create_schema_tables.sql to create the app's schema and all its tables. I have attached as well another script for resting all the keynotes and break-out sessions ratings, it is attached below as well with the name reset.sql. In addition, I have attached the documentation of the B1Summit SAP Fiori app within the app's package referred in the download link above.


 

There are 4 tables that represent the data model of the B1Summit app as the following:

1. Sessions: contains all info about the keynotes and the break-out sessions, plus all speakers’ info.


2. Users: contains all users who have registered for using the app.


3. Ratings: contains all ratings of all keynotes and break-out sessions.Duplicate_Ratings: contains any duplicated ratings made by same user for same session or keynote.

To build Fiori apps, you would  need to use the local version of the SAP WEB IDE, which is available only for testing and not productive use.

Later on with future HANA SPs, the SAP WEB IDE will be integrated with the SAP HANA Web Workbench.

SAP Web IDE - Local Trial Version

 

To access SAP Web IDE via the URL http://localhost:8080/webide/index.html. The default port is 8080. If you have changed the port, use the port that you defined.

Following the MVC design, SAP Fiori App consists mainly;

• Component.js: Acts as a root or component container of the whole application.


• Views with related controllers: with related controllers: App, Master and Detail. App is our top-level view, containing the Master and Detail views.


• Models: i18n for locale-dependant texts, OData models, a device model for device specific data needed at run-time.

How to connect LOCAL SAP WEB IDE to Backend data?

• Using the SAP HANA XS – create the HANA OData Service Descriptor
  
  
  
  • Represents the B1 data or your own application data.
  
  
  
  


• Using the SAP Local Web IDE, configure the HANA OData Service Endpoint
  
  
  
  • You need first to create a configuration file of the endpoint service,
  
  
  • Then set its properties as instructed in the Local Web IDE guide.
  
  
  
  

 

How to configure the HANA OData Service Endpoint?

1. Create a service configuration end point and set the following properties:
   
   
   
   • Descrition, Type, TrustAll, Authentication
   
   
   • WebIDEUage, Name, URL, ProxyType
   
   
   
   


2. Then put it in the Local Web IDE path;
   
   
   
   • [Install_Drive]:\SAPWebIDE\eclipse\config_master\service.destinations\destinations
   
   
   
   

 

Below is an example of the B1SUmmit app's HANA XS OData service. It is called "Sessions.xsodata" and represents the following entities:

1. Sessions


2. Ratings


3. Sessions Statistics view "HANA calculation view"

 





 

How to build your Fiori apps on HANA from the SAP WEB IDE Templates?

Create a new project based on Fiori Template

Select your app template based on Fiori (in this case I selected SAP Fiori- Full Screen Application) template

Enter the new project name

Bind your Fiori App with backend Odata Service

Customize then your app template

Finally finish the app creation





Run the app

Export the app into zip file, so you can then import it in HANA Studio and continue your development from there. Otherwise you can just use the SAP WEB IDE.

After importing the app package in HANA Studio, you can continue the development via the HANA Development Environment. Below you can see the new views I have developed for the app, in addition to the customization I added into the existing views that were created previously by the SA P WEB IDE.

Below you can see how the app's structure after importing it in HANA Studio. You can just drag the project files of the exported folder from the SAP WEB IDE, and  simply drag them to your HANA XS Project in HANA Studio "Development Environment".

As we see, each view has its own controller since Fiori/SAPUi5 apps are based on MVC design. The main views of the app are the following:

1. Main: it is the main view of the app, which contains the app control that host the other view of the application.


2. Master: It displays a table of all keynotes and break-out sessions, where users can search for the desired session or filter/sort/group keynotes and sessions. In addition, it offers the possibility to integrate with Twitter, Facebook and LinkedIn, where users can tweet with predefined tags (#SAPB1 and #SAPPartnerSummit), share and post about the event via social media.


3. Details: Displays more info about each keynote and break-out session, plus a flat table with current ratings of all users and their comments if any. Users have the ability to rate sessions in this view, where they can provide a rate value from 1....5, and if needed a comment as a feedback, however the comment is optional for simplicity. Once users rate the session, they can their rating immediately, plus the updated average rating of the session. In addition users get to know each session's KPIs from this view as well, by having insights into the number of current ratings, average rating and percentage of 4&5 rate.


4. Rating: Displays an Analytical chart with type bubble, to show the top 5 rated break-out sessions by number of rates, average rating and percentage of 4&5 rate.


5. Carousel: Contains the top 5 rated break-out sessions, in the form of tiles or cards, where users can navigate to those top sessions and get more info.


6. StatsList: Displays a flat list that shows the current (latest) statistics about all break-out sessions ratings, sorted by average rating.

Below you can see the script tag that calls the SAPUI5 Core library. It is always found in the index.html file that is generated automatically by the SAP WEB IDE once you finish the creation of your Fiori or SAPUI5 project.

Component.js that acts as the root of the application, and manage the routing and the navigation between the app's views. In addition, it contains the configuration of the OData web service address, where it binds the app with the back-end data of your HANA DB schema and tables.

The  method init is responsible for initializing the component container, i18n model,  router and as well calling the _initODataModel method for intitialing the oDataModel resposibile for binding the back-end data to the app.

As mentioned above, the below method is responsible for the setup and the creation of the oData model. It is part of the component.js container.

Below is method that is called by the component.js container in order to create the main view of the Fiori app.

Below is a screenshot of the main view in XML format, which mainly contains the app control that will host the whole application afterwards. This app control can host all other views when needed.

In the below screenshot, I show how for example to create a table control "XML view", how to bind it to an HANA based OData service as already mentioned above "taking as an example the Sessions.xsodata service", and finally how to bind each column to a specific field of an entity that is represented by the HANA XS OData service.

Here is how the SAP Fiori app can connect to the HANA database and post users' ratings of the keynotes and the sessions, the file is called rateme.xsjs

Below is how you can call HANA XS JavaScript from the Detail's controller. I have used an AJAX call to perform the call.

To conclude, developing SAP Fiori apps is easy, enjoyable and efficient with the help of SAP WEB IDE. You can simply build applications  for specific business scenarios in a short time, that cab run across three different devices; browsers, tablets and smart phones. In my example I have not mentioned anything about how to bind your Fiori apps with SAP Business One tables, since the B1Summit app was specifically made for sake of the SAP Business One innovation Summits in EMEA and NA in 2015. However you can simply use the SAP Business One Service Layer from your SAP Fiori or SAPUI5 apps for reading and posting data from/into SAP B1 Tables isnide the HANA Database, the same as you did via SAP B1 DI-Server or the SAP B1 SDK. The SAP B1 Service layer is an OData based protocol which offers via HTTP the SAP B1 business objects and services in the form of restful web services in JSON format. In addition, the Service Layer supports high volume and throughput via multi-threading as well as high availability.

I have provided a simple examples about this topic in the following SCN blogs:

How to build SAPUI5 apps for SAP Business One on HANA?

How to build Fiori apps for SAP Business One on HANA - part2

How to build Fiori apps for SAP Business One on HANA - part3

More advanced stuff is coming up soon, so get ready ...I will be glad to hear your feedback and listen to all your questions.