Skip to Content
Technical Articles
Author's profile photo Mohit Bansal

Fiori Elements Standard App Extension using virtual Elements: Manage Billing Document ( Real Time Extension Scenario)

This blog is about extending the Standard Fiori Elements based application using the Virtual Elements.

Business Scenario & Requirement Overview

Recently, I have requested to extend the Standard Manage Billing Document app with additional filter as “Sales Document”.

Manage Billing Documents is Fiori Element’s based application, which navigates from Billing Document( List Report) to Billing Document  detail ( Object Page).

Sales Document exist at Item Level in the Billing Document.

 

Challenges

  • Sales Document (SO) number exist in the Billing Document Item.
  • Needs to bring the Item Level field in the main filter bar (Selection Screen)

Technical Solution & design the solution

Step by Step Approach

Step1  : Identify the Main ODATA Service and Consumption CDS

Step 2 : Identify the Associated CDS from main consumption CDS

Step 3: Extend the Main CDS with required field.

Step 4: In the Extended CDS add the annotations for

UI Selection Field

End user Text Label

Virtual Element Annotations

@ObjectModel.virtualElement ,

@ObjectModel.filter.transformedBy: ‘ABAP:ZCL_TESTKAM’

( Please refer my existing blog on virtual element for detail on Virtual Elements )

https://blogs.sap.com/2019/04/26/fiori-elements-utilizing-cds-with-virtual-elements/

Step 5: Implement the Exit Class for deriving data for virtual element

 

Implementation : 

Based on the above Steps, lets us extend the standard Manage Billing Document App

Identify the ODATA Service and Backend CDS Data Model, can just put F12 and get the information

ODATA Service:          SD_CUSTOMER_INVOICES_MANAGE

Consumption CCDS: C_BillingDocument_F0797

 

 

Extend the main CDS field and add the virtual Element as follows

 

 

Associated Entity detail for which field needs to be used

  • Associated Entity – Item
  • Associated Entity Field – SalesDocument

Implement the class with interface required for virtual Elements

  • IF_SADL_EXIT_FILTER_TRANSFORM

That’s it, just run the application to see the new Sales Document Filter. enter the sales document number and press go.

Wow, we are done 😊 Lets clear the cache and see the app

Sales Document is available in filter bar 😊

 

So don’t wait to share your SAP findings and knowledge.

#KeepLearing#KeepGrowing

 

Regards,

Mohit Bansal

 

Assigned Tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Gaurav Karkara
      Gaurav Karkara

      Very well written and great knowledge sharing here Mohit ! This solution shows how little capabilities that we know of different solutions can make big impact when clubbed together.

       

      Gaurav

      Author's profile photo Mohit Bansal
      Mohit Bansal
      Blog Post Author

      Thanks Gaurav Karkara

      Author's profile photo Thorsten Klingbeil
      Thorsten Klingbeil

      Excellent Mohit - thanks for Sharing 👏🏼

      Author's profile photo Mohit Bansal
      Mohit Bansal
      Blog Post Author

      Thanks Thorsten.

      Author's profile photo Syambabu Allu
      Syambabu Allu

      Hi Mohit,

      Good blog.Thanks for sharing.

      Thank you,

      Syam

      Author's profile photo MANMEET SINGH
      MANMEET SINGH

      Great Blog Mohit. Short and very relevant. Thanks for sharing.

      Author's profile photo Mohit Bansal
      Mohit Bansal
      Blog Post Author

      Thanks Manmeet

      Author's profile photo RAMAKRISHNAN MURUGAN
      RAMAKRISHNAN MURUGAN

      Nice blog Mohit Bansal.

      But what is the last line in the class. ro_condition =  lv_salesorder->equals( iv_value ).

      How you have managed this iv_value, I guess it's an importing param but you haven't passed anything in your screen shot.

      BR,

      RAM.

      Author's profile photo Mohit Bansal
      Mohit Bansal
      Blog Post Author

      Hi Ram,

       

      Thanks for sharing your view. We don't need to explicitly pass the value in iv_param. framework will pass it from the value selected in Fiori Element.

       

       

      Author's profile photo Ravi Singh
      Ravi Singh

      Your blogs are always an easy read, Great stuff ! 🙂

      Author's profile photo Nitin Makhija
      Nitin Makhija

      Nice Blog. Thanks. Is it also possible extend transactional Behavior of fiori elements? E.g. Adding new field for create/edit which was not available in standard using virtual elements