Skip to Content

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.

/wp-content/uploads/2015/06/example_736880.png

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.

 

Untitled.png

/wp-content/uploads/2015/06/app_736861.png

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.

Screen Shot 2015-07-02 at 1.28.45 AM.png

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

 

Screen Shot 2015-06-30 at 5.24.28 PM.png

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.

/wp-content/uploads/2015/06/1_734583.png

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”

 

Screen Shot 2015-06-28 at 10.39.05 AM.png

Screen Shot 2015-06-30 at 5.28.26 PM.png

 

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

Create a new project based on Fiori Template

/wp-content/uploads/2015/06/2_734649.pngSelect your app template based on Fiori (in this case I selected SAP Fiori- Full Screen Application) template Screen Shot 2015-06-30 at 5.50.08 PM.png

Enter the new project name

Screen Shot 2015-06-30 at 5.54.17 PM.pngBind your Fiori App with backend Odata Service Screen Shot 2015-06-30 at 6.03.27 PM.png

Customize then your app template

Screen Shot 2015-06-30 at 6.06.18 PM.pngScreen Shot 2015-06-30 at 6.07.50 PM.pngFinally finish the app creation

Screen Shot 2015-06-30 at 6.08.00 PM.png

Screen Shot 2015-06-30 at 6.09.43 PM.png

Run the app

Screen Shot 2015-06-30 at 6.12.17 PM.png

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.

Screen Shot 2015-07-01 at 12.57.22 AM.png

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”.

Screen Shot 2015-07-02 at 1.20.21 PM.png

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.

Screen Shot 2015-06-28 at 10.39.31 AM.png

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.

Screen Shot 2015-06-28 at 10.49.41 AM.png

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.

Screen Shot 2015-06-28 at 10.43.11 AM.png

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

/wp-content/uploads/2015/06/component_init_method_738507.png

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.

/wp-content/uploads/2015/06/component_init_odata_model_738506.png

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

Screen Shot 2015-06-28 at 10.44.01 AM.png

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.

/wp-content/uploads/2015/06/fiori_app_main_view_738508.png

/wp-content/uploads/2015/06/fiori_app_main_controller_738518.png

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.

Screen Shot 2015-07-08 at 1.05.08 AM.png

Screen Shot 2015-07-08 at 1.06.24 AM.png

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

Screen Shot 2015-06-28 at 10.41.35 AM.png

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

Screen Shot 2015-06-28 at 10.55.18 AM.png

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.

 

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. José García

    Really good, I’m starting a project with OPENUI5 and this it’s just what i was wondering…does fiori can run my apps in SAP B1… i hope you continue your work, maybe some update with some new features of the web ide.

    (0) 
    1. Mostafa Sharaf Post author

      Thanks! Yes it can run on SAP B1 on HANA.

      I will publish a new bog “3rd part of this series” about Fiori apps for B1 on HANA, using the Service Layer. in Q2 🙂 .

      (0) 

Leave a Reply