Skip to Content

Not every feature of a Fiori element can be controlled by annotations. Fiori elements are aimed at supporting common use case patterns. When you want to extend your Fiori element app beyond annotations there are a few options. In this blog we use an Object Page extension to add a new section to show some special texts.    

Sometimes you need a breakout area to be displayed as a new section of an Object Page. For example you might want to add some special texts advising employees of the latest policy changes related to the Object.  In this blog we will explain the Fiori element extension process in the SAP Web IDE.

TIP: As usual, you can also extend your Object Page directly in code, although more skill and knowledge is required.

TIP: You can call information for your breakout dynamically using an OData Service function import, or through a Remote Function Call, or anything else you can access through a JavaScript call.  You will need some SAPUI5 development knowledge for that.

The easiest way to extend your Fiori element app is using the SAP Web IDE. We start by assuming that your Fiori element project is already in your SAP Web IDE workspace.

To create an Object Page Extension, you will need to:

  1. Create the Extension
  2. Preview your Extended App
  3. Review the Generated Code Stubs

This blog will stop here.  Of course, to take this all the way to a productive app you would also:

  1. Extend the Generated Code Stubs
  2. Deploy your updated application

While the blog will stop at generating the stubs, you will find some tips for coding your stubs at the end of this blog.

IMPORTANT: Annotations should always be your first option. Only use extensions if you cannot achieve what you need to do by any other means.

WARNING: If the Object Page is provided as a delivered SAP Fiori app listed in the Fiori Apps Library, it is not yet possible to extend these apps using the approach described in this blog.  [Yes we are working on it… please be patient… this may take some time]

Create the Extension

You can use the SAP Web IDE Extension wizard to add your extension to your Fiori element app.

The wizard steps you through 3 steps.  You will:

  1. Choose your extension type
  2. Complete your extension settings
  3. Confirm to Generate your Extension stub code

Start in the SAP Web IDE workspace positioned on the root folder of your Fiori element app’s project.

Then use the context menu on your Fiori element project to start creating your Extension by selecting New > Extension.

NOTE: Do not select “Extension Project” – that’s for extending a delivered SAP Fiori app.

Choose your Extension Type

You choose Object Page Extension as the extension type to add a section to your Object Page.

Complete your Extension Settings

You need to tell the extension wizard what sort of Object Page extension you want to create and where you want to place your extension within your Fiori elements app.

In this example you can see how to add a new section – aka Facet – after the General Information section. For this you will want to create your own view .  The new view will hold the contents of the new section.

Confirm to Generate your Extension stub code

Confirm to finish the extension wizard and generate the stub code in your Fiori elements app.

Preview your extended Fiori elements app

You can run your app from the Component.js file as usual to check the impact of your new extension.

You can see your new section has been added to the navigation bar and placed after the General Information section as we requested.

Review the Generated Extension code stubs

So now you will want to check and understand what the wizard added to your Fiori elements app.  These are the components that you will need to change to make your new section show your special texts.

You can see 4 changes:

  1. Changes to your Project Structure
  2. Generated View Stub
  3. Generated Controller Stub
  4. Changes to your App Descriptor (i.e. manifest.json file)

Changes to your Project Structure 

Most of the changes are held in a new folder named “ext” (short for extension), which the wizard has added to your project structure.

Generated View Stub

The new view you requested has been created and added to the view folder within the ext folder. You can see that some stub code has been added.

This where you can add fields and format the look and feel of your new section.

Generated Controller Stub

A controller stub has also been generated.

This is where you can make calls to import data for your extension, and executed any actions you need.

Changes to the App Descriptor

And lastly you can see how extension is applied in the manifest.json

Tips for Extending Generated Stubs

Before you start extending your generated stubs, make sure you have and read and understood the API for Developers of Template Extensions

You can find more information on Extending Generated Apps in the Developer Guide for the SAPUI5 UI Development Toolkit for HTML5.

Taking your Fiori elements app to the Next Level

If you are interested in Fiori elements you might also like to look at these videos on Youtube:

If you are going to SAP Teched 2017 and Interested in learning more about Fiori elements you might like to attend these sessions:

  • DX201   What’s New with SAP Fiori Elements
  • S4H276  Build a List Report SAP Fiori App: ABAP Programming Model for SAP S/4HANA
  • S4H279  Build Transactional SAP Fiori App: ABAP Programming Model for SAP S/4 HANA
  • DX264   Overview Page in SAP Fiori Elements
  • DX266   SAP Fiori Elements – Analytical List Page

And you can find more information on Developing apps with SAP Fiori elements in the SAPUI5 SDK

Brought to you by the S/4HANA RIG

To report this post you need to login first.

18 Comments

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

  1. M. Happé

     

    Hi Jocelyn,

    Currently I’m developing a new fiori elements application based on the S4/HANA programming model. I’m facing an issue with BOPF determinations. In the backend I configured and code some determinations. Based on certain changes the value of another field is adjusted (and saved in the draft table). After the determination has been executed the UI doesn’t react on this determation. Only after creating a new entity using the + button the changed data is available in the new entity UI, but after a field update the UI is not reacting on this.

    Only after refreshing the changed field value is being updated.

    Is this a missing feature in the current version of Fiori elements or is there a solution to achieve the UI to be updated after executing a determination?

    (0) 
    1. Jocelyn Dart Post author

      Hi M. Happe

      Sorry you are having some refresh problems.

      However this is a question for answers.sap.com – not a blog comment – so it’s not appropriate for me to answer it here.

      Would you please create it as a question in answers.sap.com  with the tag SAP Fiori for SAP S/4HANA and use the Jocelyn Dart  mention so I I am notified.

      I can then answer your question or find someone to assist.

      Thanks

      Jocelyn

      (0) 
  2. Durga Vemula

    Hi Jocelyn Dart,

     

    I got the Requirement to extend the Standard Fiori App “Manage Customer Master Data” Which is developed using Fiori Elements i.e in 1610 FPS02.

    I got the requirement from my client is that I need to Add two new tabs in   Sales area Section  as you had mentioned in your warning Message that if the  Object Page is provided as a delivered SAP Fiori app listed in the Fiori Apps Library, it is not yet possible to extend these apps using the approach described in this blog.  and you had mentioned that you are working and could you please help me how to extended the standard fiori element.

     

     

     

    (0) 
  3. Durga Vemula

    Hi Jocelyn Dart,

     

    I got the Requirement to extend the Standard Fiori App “Manage Customer Master Data” Which is developed using Fiori Elements i.e in 1610 FPS02.

    I got the requirement from my client is that I need to Add two new tabs in   Sales area Section  as you had mentioned in your warning Message that if the  Object Page is provided as a delivered SAP Fiori app listed in the Fiori Apps Library, it is not yet possible to extend these apps using the approach described in this blog.  and you had mentioned that you are working and could you please help me how to extended the standard fiori element.

    If any Documentation or any material or any reference document are available or any links where i can at least get the basic approach to start

     

     

    (0) 
    1. Jocelyn Dart Post author

      Hi Durga

      As I explained in the blog, what you want to do is not currently possible using this approach for any delivered SAP Fiori app based on Fiori elements.

      You have 2 options:

      1. If what you want to do can be achieved with annotations, e.g. you just want to add extra tabs+ fields from the existing CDS View used by the app, you can use a METADATA EXTENSION of the delivered CDS View to add additional facets (i.e. sections/tabs) and fields. This is provided the CDS view permits extensions – look for the annotation @Metadata.allowExtensions: true.
      2. If you need a true breakout – e.g. if you want to call a 3rd party service or RFC – then the best you can do is copy the original application to your own custom version.

      Good luck!

      Rgds

      Jocelyn

       

      (0) 
      1. DurgaPrasanth vemula

        Hi Jocelyn Dart,

        Thanks for replying to me.As you had asked me to look at the  METADATA EXTENSION of the delivered CDS View to add additional facets and i had gone through it.

         

        It has SAP UI5 Application:MD_CUSTOMERS1 and

        ODATA Service:MD_CUSTOMER_MASTER_SRV_01.

        I am planning to do extension using WebIDE and now my question is how i can upload this object in Webide and i had tried with 2 options and it is not working

        A) While creating extension project:MD_CUSTOMERS1 and i am getting error message ‘there must be at least one XML view with its matching controller to create an extension project’. and could you please how to resolve it

        B)Next Thing i had tried is creating a New Template and by selecting List Report and used the OData service:MD_CUSTOMER_MASTER_SRV_01 and here i am facing problem it is asking only one Entity and how i can pull all total Entities which the Standard FIori App has into in one so that i can see exactly the Manage Customer Master Data and then i can do extensions.

        C) Using CDS Views Extension i had extended the C_BusinessPartnerSalesArea as per the below code

        @AbapCatalog.sqlViewAppendName: ‘ZBUPSALAREXT’
        @EndUserText.label: ‘exte’
        extend view C_BusinessPartnerSalesArea with ZC_BUSINESSPARTNERSALESAREA_EX

        association [0..1] to zc_businesspartnersalesarea as _SiblingEntity1 on $projection.businesspartner = _SiblingEntity1.kunnr

        {

        @UI.fieldGroup: [{
        qualifier: ‘Par Level’,
        groupLabel:’Par Level’,
        groupLabel_AsOTR: ‘005056AC2D281ED5A8C479E4FC4715C9′,
        label:’Customer group 1’,
        label_AsOTR: ‘005056AC2D281ED5A8C3F3C2E7D8B3F0’,
        position: 2,
        importance: #HIGH
        }]

        _SiblingEntity1.kvgr1

        }

         

        And now my question how i can fetch in SEGW Tcode and created OData Service ,normally we extend the Gateway project by right click on DataModel->Redefine . But now how i can bring the Extension changes along with the Standard OData service in the Custom Project created in SEGW Tcode.

        Could you please help me in this and I am not finding any documentation or any base to gofurther and i have dead line of this change to complete ASAP.

         

        Thanks

        Durga

         

         

         

         

        (0) 
        1. Jocelyn Dart Post author

          Hi Durga

          Re A) – that is WHY it is not possible to create an extension on a delivered SAP Fiori elements project as yet.

          Re B) You can use transaction SE80 to look at the SAPUI5 code as a BSP application.  Additional OData Services are typically included in the manifest.json and can then be accessed in the annotation modeler.

          Re C) Often CDS views that are also OData Services are activated from Eclipse via the CDS View Data Definition and not from transaction SEGW.

          If you have a deadline at your customer site and need specific advice then please raise a SAP Incident. Please understand that blog comments are NOT an official support mechanism.

          Rgds,

          Jocelyn

          (0) 
      2. Vasantham S

        Hi Jocelyn Dart ,

         

        Thanks for the blog.

         

        I have a requirement to hide a button in details page of SAP standard S4 hana application(manage purchase requisition professional).The button which i need to hide is present in “ext” folder. This means, that application has already been extended.

        As per your 2nd comment, if we do zcopy of the app, Can we get further updates from SAP in future?

         

        kindly advice here.

        Thank you,

        Vasantham

        (0) 
        1. Jocelyn Dart Post author

          Hi Vasantham, No once you have created a custom copy then the app is a custom Fiori app and won’t be updated further.  We are hoping to have a better answer by the end of 2018 on current planning – it’s turned out to be more complicated than first thought as changes need to be made at several levels – not just in the Web IDE.

          Rgds

          Jocelyn

          (0) 
    1. Jocelyn Dart Post author

      HI Prosun, You need to use the context menu – i.e. right click – on the root folder of your Project and then select the option New.

      Remember New > Extension will show for a Fiori elements app.  If you are using a different type of app you may not see it.

      Rgds,

      Jocelyn

      (0) 
  4. Gokhan Guler

    Hi All,

    We’re working on SAP Web IDE and using Fiori Elements to develop a UI screen. We developed a JAVA application for back-end system and created OData service for our application by using Apache Orlingo libraries.

    After all, we binded our service to Fiori by giving destinations which are related about the service that we have developed on SAP Cloud Platform. But there is a problem with create, delete and edit buttons in Fiori Element Application. When we press these buttons, we achieved to send data to our service and the data appear in Fiori Element Application.

    The problem is that, after clicking the buttons the page stays in loading position and this is not finishing after the process. Following picture is showing the situation. Is there any idea about this issue ? How can I catch the buttons actions or how can I add new button instead of those buttons ?

     

    (0) 
    1. Jocelyn Dart Post author

      This is clearly a separate question and not a comment on this blog.  Please ask your question in answers.sap.com and add the relevant tags.

      (0) 
    1. Jocelyn Dart Post author

      Hi Akshaya,

      Navigation is controlled from the manifest.json – you can adjust the targets there.

      If you need to call an OData Service operation or function import  before navigating you can do that from the matching ext controller extension just as you would with a freestyle app

      Rgds

      Jocelyn

      (0) 
  5. Chris Xu

    Thanks Jocelyn.

    Is it possible to add additional field group on the first section? In this example, let’s say add a form after ‘Admin Data’.

    Thanks.

     

    (0) 
    1. Jocelyn Dart Post author

      Hi Chris,

      You can do that by overriding the annotations. You don’t need an extension view for that.

      Best options for overriding annotations are either via metadata extensions (provided the CDS view permits metadata extensions) or local annotations.

      Rgds

      Jocelyn

      (0) 

Leave a Reply