Skip to Content

Creating an SAP Fiori Smart Template Application

Recently I attended the openSAP course Build You Own Fiori App in the Cloud (2016) where Smart Templates was part of it. With this blog post I want to share my experiences and show you a demo how to build a Smart Template app with SAP Web IDE.

Smart Templates strictly follow SAPs Fiori design guidelines. Without any coding you describe the application screens and behavior using Floorpans and annotations. Annotations provided by the OData service in the SAP backend help the app to understand the data model and its semantics.

openSAP_fiux2_Week_05_All_slides_pdf__Seite_36_von_63_.jpg

Let’s start by creating a new project from template in SAP Web IDE. At the time of writing, only one Smart Template application template is available.

Anlage_Projekt_1.jpg

This completes my demo.

Conclusion

Smart Templates are an easy and quick way to visualize and mobilize data from an SAP backend system. To setup the demo app, it took me about four hours, and I only did the exercises from the openSAP course before and had no other training on Smart Templates. If you understand the principles of Smart Templates, you can build the app really fast. And if SAP provides other Floorplans as Smart Templates (what I am sure they’ll do) in the future, Smart Templates will become an even more productive way of implementing Fiori apps.

Some findings and personal opinions about restrictions I see compared to programmed Fiori-based apps. I know this is by design because Smart Templates are supposed to be coding-free and therefore it’s obvious that apps developed in SAPUI5 are more powerful. Nevertheless I want to point out my findings to help you decide whether Smart Templates are the better choice for your app. Btw, the list contains my findings and is neither complete nor 100 % validated. Maybe there is a solution that I didn’t find.

  • The OData service needs to be very powerful and, eventually, tailored to your Smart Template app or at least to your business case. For example, what I already mentioned, you cannot bind controls to complex types’ properties. In SAPUI5 you could implement that via the controller if necessary.
  • Obviously, the OData service must support annotations to be used in Smart Template apps (in contrast to general SAPUI5 apps where this is not mandatory).
  • There is no way to format a date, like in the sales order items list where the delivery date is displayed as timestamp and not as date.
  • There is no way to format anything, for example remove the leading zeros at IDs (business partner ID, sales order ID, item position). Solution would be that the OData service delivers the IDs without leading zeros already but this puts another restriction on the OData service.

I would appreciate very much any feedback in the comments section.

6 Comments
You must be Logged on to comment or reply to a post.
  • Hi Robert,

    Very nice blog, thank you.

    In the annotation modeler, I am getting a message " This OData entity in not annotated" even though I followed the exact steps you mentioned above. Also, nothing happens when I try to add new annotations using the "Annotate" button next to the OData entity set.

    Do you know what could be the issue?

    Thanks
    Sunil

    • Sunil, please check that help - https://help.hana.ondemand.com/webide/frameset.htm?a06faccfc98443d89b07011e1b9cf485.html. I had the same message as you when I was trying to annotate entity from my service. I had slash in the service schema namespace. When I got rid of it - I was able to work with annotation modeler with my service. BTW - my directly written XML code was also not working as well when I was not able to annotate entity via modeler (however I can't believe it's due to slash in the namespace).

  • Hey Robert,

    Nice blog. It was the starting point for our application but now we are faced with a new issue. We have an edit functionality in object page. So when a user enters some data and presses save it hits the back-end odata service which calls a BAPI(update).  Positive scenarios are fine but in case the BAPI generates an error we would like to show those on app. But are unable to do that. Any idea how we could achieve that. Couldn't find much documentation anywhere for this just that message handling is supported by smart templates -

    https://help.sap.com/saphelp_uiaddon20/helpdata/en/03/265b0408e2432c9571d6b3feb6b1fd/content.htm

    Best regards,

    Saurabh