SAP Fiori Stammdatenpflege

How to create applications that connect SAP Fiori and SAP BI

Author: Ana-Maria Pop, Teamlead Cross Technology

Let’s talk about SAP Fiori. How do we use it for our clients and what we have done so far?

SAP Fiori is a great opportunity for us at Inspiricon. Why? Because in Cluj, our Romanian location, the core competencies are SAP BI and platform development – two different areas and different technologies. Through Fiori and SAP HANA, we succeeded to build a “bridge” between these departments. Our Cross Technology team is handling the development of SAP Fiori applications.

Until now, we already have some success stories. Moreover, we created the Inspiricon Toolbox, which is a suite of applications created based on the new architecture recommended by SAP (read more about the Inspiricon Toolbox here).

We wanted to cover specific operations from SAP with this toolbox, leveraging functions of DSOs, functions on an Input-Ready Query (based on a Planning Infocube) and to replicate BEx Analyzer. Based on this, we defined the business objectives and until now we have built three applications:

  1. Manage Users
  2. Time Tracker
  3. BEx Query Analyzer

Today we present you the first application: Manage Users

This application allows all CRUD operations on a DSO. The big picture of the application is: “As a user of this application I want to be able

  • to have an overview of all the users,
  • to create, update, delete a user
  • and also filter and search through the list of users.”

Step by step towards a new application

Basically, we needed to create an OData Service and then to consume this service through the SAP Fiori application. A Fiori application is created based on the SAPUI5 framework and the SAP Fiori Design Guidelines (read more on SAP Fiori applications in our blog). All architecture is created based on the MVC model and we use sap.m library because we want our applications to be responsive – across all devices (desktop, tablet and smartphones).
The next step was to split all the functionalities and to create the architecture.

First we decided how many views we will need, which functionality goes on what view and what component fits the functionality. What do we need?:

  1. An overview of all users; in terms of SAPUI5 this is a list or a table component,
  2. Create a new user, that means that we will add a new view or just include a popup where to add user data
  3. Update users, it’s the same scenario like adding one.

Structure and components come to life

After doing a set of mock-ups and comparing our alternatives, the following structure and usage of components was implemented:

  1. Overview: a table component, sap.m.Table, connected to table data model which will update whenever a change is made in this model – e.g. delete or update a user (FIG.1 and FIG.2)
    FIG.1: delete or update a user (desktop)

    FIG.1: Delete or update users (desktop)

    FIG.2: delete or update a user (mobile))

    FIG.2: Delete or update users (mobile)

  2. Add new user: for this functionality, we have decided to add a new view to our app. Basically we needed to add the route component, sap.m.routing.Router and implement a route handler. The main component used in this view is a submit form, sap.ui.layout.form.SimpleForm (FIG.3 and FIG.4)
    FIG.3: Submit Form (desktop)

    FIG.3: Submit Form (desktop)

    FIG.4: Submit Form (mobile)

    FIG.4: Submit Form (mobile)

  3. Update user: it is also a new view with a simple form (FIG.5, FIG.6 and FIG.7)
    FIG.5: New view (desktop)

    FIG.5: New view (desktop)

    FIG.6: New view (mobile)

    FIG.6: New view (mobile)

    FIG.7: Update view (mobile)

    FIG.7: Update view (mobile)

  4. Delete user: for deleting a user, we just needed a selection handler in the table, a delete button and a component to notify if the delete was successful or not (sap.m MessageToast).
  5. Filter: we use sap.m.IconTabBar, which allows us to filter the model when clicking an icon.
  6. Search: it is a component included in the table we’ve just had to connect it to the table model.

A very important aspect of the UI development process is the handling of data binding. Lucky for us, SAPUI5 provides out of the box ready to use components such as sap.ui.model.odata.ODataModel, which needs only the OData service URL and will handle all the CRUD operations and also search and filter.

And this is how the Inspiricon toolbox was born and also his first child: Manage Users.

And now? What is next?

As you can see, we only presented the concept for the first application and we said that there are three applications in our Launchpad. Next time we will talk about the Time Tracker application. So stay tuned :)!

We connect SAP BI applications with SAP Fiori: Inspiricon-Toolbox. Learn more on SAP Fiori, Inspiricon Toolbox as well as the connection of SAP Fiori with BI. Our flyer offers everything at a glance.

You are looking for more information on infrastructure and landscape? Do not hesitate to contact us.

 

Author
Ana-Maria Pop Team Lead Cross Technology
Phone: +49 (0) 7031 714 660 0
Email: cluj@inspiricon.de