Fiori for S/4HANA - Tips for Fiori Element based Developments

[former_member182874]

With introduction of new ABAP programming model in S/4HANA landscape we certainly reduce a lot of coding which was required before release of ABAP CDS. ABAP CDS not only improves performance of your Fiori Smart template but also boosts user with power to explore more in Fiori reports. With smart templates and integration with CDS and new UIs, user can have a wider view of the data with personalized results, filter, sorting, easy navigation, text search and grouping of data.

Nowadays, users want continuous work with no network interruptions or any switching over devices. With BOPF and draft capabilities, user don't require to manually save their entries and drafts are saved waiting to sync with the Internet.

Usage of CDS and Annotations saves a lot of UI5 and ABAP effort.

Some of the useful tips I have come across while developing custom Fiori List reports are :

1. Fiori List reports can be showcased with any style of tables - Responsive (For mobile, tablets, desktops), Grid Table (For Desktops and Tablets only), Analytical table (To show analytical reports)

• You should choose your report style wisely based on the requirements of your customer. For when to use what kind of reports visit Fiori guidelines -> Usage section : Responsive Table 

 

• Use standard grouping options with UI annotation : @UI.PresentationVariant or choosing the same through Local Annotations from your webide.

 

• Default Grouping works only for List Report - Grid and Analytical Table. For Responsive table, you need to extend the controller and add your custom logic.

As per standards, user can set grouping based on his/her personalization using smart variant management system available in Fiori template. Smart variant helps user to create multiple variants without impacting any results.

 

2. If you want to increase the flexibility of app extensions, try not doing entire development from ABAP CDS and BOPF. You can always use consume CDS in your O-Data developments and modify the result set coming from CDS. BOPF is not yet matured for Fiori developments and thus has limited features which can be shown in Fiori. In order to get the most out of BOPF actions, always try adding your custom fragments and controller in UI5.

 

3. Utilize modern technologies : It's always said if you have power within, Utilize it. So if you are working on S/4HANA systems, promote new ways of developing reports. You need not use old ways of writing reports with screen programming and alv reports. With this you are not using the power of HANA DB. Always recommended to go for CDS /AMDP / BOPF. With CDS, data models are defined and consumed on the database rather than on the application server.

4. To extend standard Fiori app from CDS, go for Metadata extension.

5. Most important : Do right things at the right layer : There are series of failure and lesson learnt on doing things at right layer. Like we know there are 3 areas where we can insert our custom code while developing Fiori apps, UI5 (presentation layer), OData and CDS/BOPF. You cannot do everything in CDS. So you always have a saviour -> OData layer, where you can use your abap knowledge to extend the CDS to play on your result.

6. For simple read only apps, where you have just Joins involved from different tables : Focus only on CDS and annotations. Simple reports requires simple and light weight code.

7. For any actions : Consider BOPF , OData CRUD operations or CDS Table Functions. 

Update : Use ABAP on Eclipse to write your BO and all the methods which are generated.

Transaction : BOBX / BOBF (Obsolete, but can be used for referring old style of coding)

Important Method : /BOBF/IF_FRW_ACTION~EXECUTE

8. Value Helps / Multi combo box : You don't need any ABAP or UI5 coding here. You can achieve both in your Selection fields using CDS annotations like :

@Consumption.valueHelp: '_assocName'  (Creates Smart Value help)

@ObjectModel.resultSet.sizeCategory: #XS   (Creates Multi Combo box)  source 

9. Know your annotations : Spending a lot of coding efforts on UI5, when a simple annotation can help you out. Visit here

10. Actions Placement : Actions on List Report can be shown either Inline, Table header or Footer : You can play around with this in Local Annotations, marking Inline and Determining as True. For more placement options, click on the link attached.

11. Export as spreadsheet : You can enable export to excel using SAP Visual editor on your web IDE.

12. If you want to disable Object Page for your List Report template, hide it from manifest.json and Local annotations section. You can delete the {pages section for Object page layout.

13. Enabling navigation to Other apps or Factsheets from List report : Few years back when annotations were not released, we used to follow cross app navigation technique, by manually calling semantic objects and action from UI5. Now to enable hyperlink and navigations : You can simple use annotation : @Consumption.semanticObject and pass Semantic object name. The CDS field in your List report will be hyperlinked and follow the targe defined.

Few other methods of creating hyperlinks can be through CDS and calling the URl in your local annotation in web IDE (This is used when you have to create a dynamic URL formation using a key field like SalesOrder etc). In this case you need to use annotation : @DataFieldwithURI and pass the value and path of your URL.

** It makes sense, not bulking your CDS reports. Instead add Object Page for Line item details or add navigation to other apps for a simple and beautiful UI. You can also add multiple views in same page. For more efficient use go here : List Report floorplan



14. Enable Factsheets for seamless navigations between key entities to the Object pages.

15. Use Quick Links to show important data, rather than creating object page : If you have only 3 or 4 important fields to be shown, create quick link instead.

16. Always delete UI cache after import / deploying changes : Some of the important reports in your frontend systems are /UI2/DELETE_CACHE_AFTER_IMP , /UI2/INVALIDATE_CLIENT_CACHES

As of now I have gathered above points, but I will keep adding based on my experience. Happy Smart coding. Cheers.

You can also go through Performance Tips and Tricks here :  from jbaltazar

--------------------------------------------------------------------------------------------------------------------------------------

Few Important Sources : 

Fiori Design Guidelines - Smart Templates

Fiori Elements wiki