Skip to Content

Ok so the suspense is over.  Having talked about what Fiori Elements are, how to design a list report, and having confirmed that a List Report is what you want, we move on to actually creating our first List Report… which will look just like the one above.
Tip: You can find this and previous blogs on Fiori Elements on the Fiori Elements wiki.

There are a few different ways of creating a List Report.  We are going to start with the simplest approach to show how simple it really can be.  By looking at the simplest approach we’ll:

  • Gain a general understanding of how to work with Fiori Elements
  • Understand the pre-requisites
  • Delve underneath to see how Fiori Elements impacts the underlying SAPUI5 architecture

The use case we’ll focus on in this blog is:

  • We have identified we want a new list report
  • We have time to plan the list report
  • We have decided to create a new data extract (as a ABAP CDS view) for the list report
  • We will expose this ABAP CDS view as an OData Service
  • Since the ABAP CDS view will be created specifically for this list report, we have decided to put all the annotations that will drive the Fiori Elements into the ABAP CDS view itself

What we won’t do in this blog is look in detail at the underlying annotations (remember these are like formal comments) in detail. We’ll do that in the next blog of this series as we look at an alternative way of working with Fiori Elements using something called a local annotations file.

Tip: You’ll need to know the alternate approach particularly if your OData service comes from an ABAP system lower than NetWeaver 7.4 SP05 or from a non-SAP system.

Of course like all Fiori app frameworks there are extension options we can use to take our list report that little bit further…but that’s getting ahead of ourselves, so let’s come back to basics.

The 3 essential steps to creating a Fiori Element List Report are:

  1. Prepare the OData service
  2. Prepare the UI Annotations
  3. Create a Fiori App using the Fiori Elements List Report template

Note that the easiest way to create the Fiori App is by using the SAP HCP Web IDE (or Personal Web IDE) and the List Report (formerly Smart Template) Application wizard.  However it is possible to create your UI application manually in any text editor once you know what’s required.

We’ll look at each of these steps in turn but let’s start by confirming the pre-requisites for Fiori Elements generally.

Pre-requisites for Fiori Elements

The pre-requisites are simple.

  1. A web browser that can run a Fiori app, e.g. Microsoft Internet Explorer 11, Google Chrome, Firefox, etc.
  2. A frontend server that provides a SAPUI5 version capable of supporting the Fiori Elements (formerly known as Smart Templates) we want to use.
    • If you are running an On-Premise Gateway system that means you need NetWeaver 7.50 SP1 or above. Naturally the higher the release, the more Fiori Elements and Fiori Elements features available.
  3. An OData Service to provide the data for the Fiori Element, e.g. to provide the data for the List Report.

Note also that currently Fiori Elements support OData version 2.0 using vocabulary-based annotations.  Annotations are a standard but optional part of the OData paradigm.

One thing to notice right away is that the backend system or database which holds our data is not a limitation. We don’t need our backend system to be on a specific ABAP release or even S/4HANA, and we don’t need our data to be on a HANA database.

That said, if we are using a backend ABAP system of NetWeaver 7.4 SP05 or above or a S/4HANA system, the backend system provides some features that make it easier to create both the annotations and the OData Service.  That makes building our List Report easier, which is why our first use case uses a S/4HANA system for the example.

Similarly a HANA database is not necessary, but if we have a HANA database underlying our backend system the performance is improved, especially when we want to include analytics or do keyword text searches.

Prepare the OData Service

First and foremost we prepare the OData service that will extract data from our backend system to be displayed in our List Report app.

When developing a List Report it is important our OData service supports the following OData features:

  1. $count – This will be used to show a count of items in the list
  2. $filter – This will be used to filter our list
  3. And of course as it’s a list, the usual paging features such as $top, $skip, etc.

Tip: When designing the OData service it’s worth considering what features we want to support in our List Report. Is it just a read-only list or should we include some CRUD (Create, Read, Update, Delete) features?  Do we want to support Draft document handling?  If so the OData service needs to support these.

Of course there are several ways to create an OData service.  As this blog is focussed on a simple example, we use the quickest way to create an OData service that’s available in the latest ABAP and S/4HANA systems, which is:

  1. Define a ABAP CDS View to extract the data for the List Report
  2. Test the CDS View using the Data Preview Tool in the ADT to check the data is returned correctly
  3. Expose the ABAP CDS View as an OData service using the annotation @OData.publish: true
  4. Activate the OData service in the SAP Gateway so that it can be consumed by an OData client, such as our Fiori app
  5. Test the OData service in an OData Client (a web browser will do at a pinch) to check it returns the expected data

If you have never used CDS views before, then now’s the time to learn it! CDS views underly all the latest Fiori frameworks.

Creating CDS views has already been covered in the NetWeaver help for About ABAP Programming Model for SAP Fiori in section Define a Data Model Based on CDS Views

Similarly exposing a CDS view as an OData Service has been covered in the NetWeaver help section for About ABAP Programming Model for SAP Fiori in Expose CDS View as an OData Service

You can also find more on this topic in the SAPUI5 SDK > Developing apps with Fiori Elements (Smart Templates) > Preparing OData Services.

The example we are using was prepared for the Teched 2016 workshop DEV268 Building an End-to-End SAP Fiori App Based on SAP S/4HANA and ABAP.  I was privileged to assist some of the team with the workshop – Jens Weiler, Ingo Braeuninger, and Chris Swanepoel – at the Las Vegas session.

Prepare the UI Annotations

Given we have created a CDS View to specifically support our List Report, we can add the annotations directly to the CDS View, that will look something like this… I’ve highlighted where the annotations are applied.

Whether placing the annotations directly into the CDS view definition is a good idea from an architecting standpoint as you scale UX is debatable. Mixing the annotations directly in with the CDS view raises some Separation of Concerns issues, and it can be rather annoying if we later want to reuse the same CDS View for a different Fiori Elements app.

Fortunately as of NetWeaver 7.51 that’s no longer a problem as explained in these blogs:
ABAP News Release 7.51 Meta Data Extensions ABAP CDS

Modularizing CDS Annotations

We’ll talk more about annotations in the next blog.

Create a Fiori App using the List Report template

So finally we are ready to create our app based on Fiori Elements. The simplest way to do this is to generate the app using the List Report Application wizard in the SAP HCP Web IDE.

As usual, we use the menu option File > New > Project from Template to access the app generation wizards.

On the Template Selection tab, we select the List Report Application (previously Smart Template Application) wizard.

On the Basic Information tab, we enter the Basic Information of our app – Project Name and Title. We can add a namespace as well if you wish.

On the Data Connection tab, we select our OData service as usual.

On the Annotation Selection tab, any annotation files sourced from the OData service are listed. Typically if we are using a SAP Gateway hosted OData service this includes:

  1. A service metadata xml generated by SAP Gateway
  2. The annotations assigned to the OData Service itself

On the Template Customization tab, we select the OData Collection (i.e. entity set) on which we want the list report to be based.   If there are associated navigations then these can optionally be selected also.

Tip: These associated navigations are useful for displaying additional information when navigating from the List Report to the related Object Page and to subsequent Object Pages.  We’ll get to the Object Page in a future blog.

Press Finish and our app is generated.

Provided our OData Service contains all the annotations needed to create a basic List Report … we can run our fully functioning app straight away! 

Filters, grouping, sorting, multi-item selection, button and link navigation, and even the totals bar are all working immediately.  We can even go further than that and add rating starts, progress bars, and charts… and we’ll get to those in a future blog.

Taking a Quick Look Under the Covers

So how does a Fiori Element app work? We can see some clues by taking a look at the structure of our generated app.

If you’ve created some custom apps before or implemented some SAP delivered Fiori apps, you’ll notice the app is structured a little differently from the SAPUI5 apps you are used to.  There are no view, controller, or model folders and files. That’s because these will all be handled by the Fiori Element templates themselves.

Instead of view, control, and model folders and files, we see an annotations folder and annotation.xml file.  This annotation.xml file is the local annotations file which we will look at more closely in the next blog.  There are also several i18n property files.

Taking a close look also at the manifest.json file….  We see the annotations files have been added as “data sources”.  As usual the i18n properties files are listed as “models”.

The real magic of a Fiori Element app is in the “sap.ui.generic.app” section (which you will find after the “sap.ui5” section).

This is where the List Report and Object Page dynamic templates are applied to our app.  At runtime, the app applies these dynamic templates to the annotations  in our project (including the ones we inherited from our OData Service) to generate a working, high quality, production-ready, SAPUI5 app.

What if…

So by now a few questions may be coming to mind:

  • What happens if the OData Service doesn’t have annotations? (Remember annotations are an optional part of the OData paradigm)
  • Where do we find a list of all the annotations?
  • How does the List Report user interface map to the annotations?
  • What features does the List Report provide and how can they be controlled by annotations?

And that’s what we’ll start to look at in the next blog as we delve into the local annotations file.

Screenshots shown on:

  • ABAP Development Tools on Eclipse Mars
  • Web IDE Version: 161103
  • SAPUI5 version 1.40.12
To report this post you need to login first.

14 Comments

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

  1. Ibrahim Khan

    Hi  Jocelyn,
    If we need to provide a range of values in the filter then what should we do, for example we need multiple company codes in filter criteria or a date range to be entered as input, in this case what should we do, Please advice.

    Regards
    Ik

    (0) 
    1. Jocelyn Dart Post author

      Hi Ik
      The list report uses a fully functioning Smart Filter bar.

      Ranges work in the filter criteria as do date ranges for input in date fields…. with the usual provisos about checking for SAP Notes first as there were some early issues with dates in the filter bar.

      So once you click into the filter field you can create all sorts of conditions.

      There’s an example of the Smart Filter Bar in the SAPUI5 Explored library.

      The Fiscal Year filter shows you the default behaviour of filter fields.
      https://sapui5.hana.ondemand.com/explored.html#/sample/sap.ui.comp.sample.smartfilterbar/preview

      Rgds
      Jocelyn

      (0) 
  2. Ibrahim Khan

    Thanks for the  clarification jocelyn. but for the normal case in a CDS the range input parameter is still not supported(with parameters option), please correct me if i am wrong.

    (0) 
    1. Jocelyn Dart Post author

      Perhaps we are talking about different things IK?

      You can certainly enter a range in a filter parameter in the Smart Filter Bar of a Fiori Element List Report e.g. Company code between 1000 and 1100.

      However your response sounds like you may be talking about parameters directly in the CDS definition itself. Please note that the CDS definition itself is not the focus of this blog. If you need confirmation of CDS functionality that would be best handled as an ABAP question perhaps.

      (0) 
  3. Vinod Patil

    Hello Jocelyn,

    Very nice blog.

    With more Fiori elements on their way (i.e. no more SAPUI5 development for most of the use cases), what role UX developers will play?

    (0) 
    1. Jocelyn Dart Post author

      Hi Vinod,
      Don’t worry! There’s no intention to replace UX developers by covering all use cases with Fiori Elements. We just want to cover the most common repeatable pattern – the stuff that should be pretty boring to a developer.
      For a good UX developer there’s always a use case – especially for tasks tailored to the mental model of a specific user group or  business role.
      Rgds,
      Jocelyn

      (0) 
  4. Tim Molloy

    Hi Jocelyn! I followed the link you posted to the wiki, very useful page, thanks! I have used another blog post in the past to setup an Elements app. I tried to edit the wiki page, but either I don’t have access, or possibly I just can’t find the edit action. Can you please add this to the list of how to guides:

    How to use Smart Templates with SAP Web IDE

    Also, I am looking forward to more blog posts and information on using Fiori Elements. There does not seem to be much documentation on the subject as of yet. We started to build an app using Elements, then ran into some roadblocks and restarted from scratch. Namely, we could not figure out how to navigate to other custom pages that weren’t using the builtin ObjectPage and ListReport templates. As an example, we wanted to link to a page which we could control the view to switch between an add/edit function. Either we did not set something up properly, or there just isn’t enough documentation or examples on how to do this. Because there is no routing and targets in the Elements app, we were not able to wrap our heads around how to get that part working. Time also became an issue, as it ended up being quicker for us to just create an app from scratch then spend a bunch more time digging through documentation, blog posts and Q/A to figure out what we wanted to do.

    Hopefully there is more detailed documentation released on how to customize the Fiori Elements apps. There is also this link:

    Sample Applications

    Is there any way to download these sample apps so we can see how all of this is done? These sample apps look very well put together, and would be useful to have as an example when creating a new Elements app.

    Thanks for you contributions!

    Cheers,

    Tim

    (0) 
  5. Marvin Qian

    HI Jocelyn,

     

    Really like it, it helps a lot to clarify what the list report really is as the concept is actually not clearly described in the “Official Online Help”.

    Looking forward to your further blogs on this series.

     

    Regards,

    Marvin

    (1) 
  6. Krishnanunni Sudhakaran Pillai

    Hi Jocelyn,

    Really nice blog. You have written it in a way that made it really easy to understand for me.

    I tried it out myself and it works well.

    I have one question though:

    I have followed your blog and created a simple sales order CDS model. I have created three CDS views.

    • Sales Order -> This is the root view
    • Business Partner
    • Sales Item

    I have navigation defined to and fro between SO <-> BP and SO <-> SI.

    I used the List report template as illustrated by you. It works fine.

    But I created a second project using List report template and this time in the ‘Template Customizing’ screen, instead of choosing ‘Sales Order’ entity set I choose ‘Business Partner’ entity set. I wanted to start the app with BP List and then navigate to the associated Sales order from there. This time the application ended up in error when I hit the search button on the List view initial screen.

    I get the following error in my browser debugger console.

    “Draft 2.0 object CDS_C_ZKU_SALESORDERTP_SADL_XA_X~C_Zku_So_BPTP requires selection condition on IsActiveEntity”,”propertyref”:””,”severity”:”error”,”target”:””

    Question: Does this mean List Report template only work when data binding is done with the OData Entity Set corresponding to the CDS Root View(SO in my example)?

    Thank you!

    Best regards,

    Krishnan

    (0) 
  7. Thomas Schmidt

    Hi Jocelyn,

     

    Really nice blog, it helped me a lot .

     

    Is there also a documentation how to publish these apps to the Fiori GUI in an ABAP Backend server
    or as stand alone app ?

    Because we don’t have a Hana Cloud Fiori subscription and don’t want it just to run in the WebIDE 🙂

     

    Regards,

    Thomas

    (0) 
    1. Jocelyn Dart Post author

      Hi Thomas

      You deploy your app to your runtime environment – whether that’s an on-premise ABAP Gateway server or a Cloud Portal or Fiori Cloud edition or some other server – just like any other custom built Fiori app. That’s a standard feature of the Web IDE – the help is here.

      Rgds

      Jocelyn

      (0) 

Leave a Reply