Skip to Content
Technical Articles

Fiori elements – How to create an Object Page Extension

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

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

    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?

    • 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

  • 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.

     

     

     

  • 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

     

     

    • 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

       

      • 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

         

         

         

         

        • 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

      • 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

        • 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

    • 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

  • 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 ?

     

    • 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.

    • 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

  • 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.

     

    • 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

      • Thank you Jocelyn. I have managed to do what you mention, overriding, by local annotation and will try ME later.

        Thank you again.

        Best regards,
        Chris Xu

  • Hi Jocelyn Dart,

    Thanks for the nice Blog…. Can you please answer the query from the below thread

    https://answers.sap.com/questions/545850/enhance-custom-fiori-app.html

    If I am trying to enhance the custom UI5 application(Developed by Enhancing Standard Inbox App and deployed in customer Name Space ) ,

    I am getting the following Error “there must be at least one XML view with its matching controller to create an extension project’

    I couldn’t find any material showing solution for the same and I have been facing this issue and got struck.. Can you please help me on this …

    Thanks a lot…

  • Hi Jocelyn,

    I am attempting to add an object page extension to my project using the extension wizard.  I am running into an issue when it asks me to select Facet to extend,  the drop-down is blank so I cannot make a selection.  I have added 2 facets in my local annotations and given the one I want to extend a ID but it does not show up as an option.

     

    Please help.

    Thanks in advance.

  • Hello,

     

    I have created an extension for the object page adding custom botton.

     

    how can i read facet field values in the ObjectPageExtension.controller ?

     

    SAP advices to use sap.suite.ui.generic.template.ObjectPage.extensionAPI.ExtensionAPI but it is still not clear to me.

     

    Thanks.

    Javier

     

    • Hi Javier,

      I am also trying to implement the object page extension for custom Actions. I could be able to create new facets but adding action using extension is giving the error message “Target was not found. Cannot set property ‘oView’ of undefined” and the whole object page is not loading. Did you face similar problems while doing object page extension or is there any particular trick that I am missing to implement.

       

      Thanks in advance.

      Regards,

      Rabi

  • Thanks for your blog, Jocelyn.

    I have a requirement to create a List-Object Fiori app. Therefore I am using Fiori elements.

    When selecting a row from the List it navigates to the Object.

    I added a custom action ( button to show errors ) in the Object page and want to control its visibility based on some validations. When creating custom actions, the file controller extension is added automatically to the project but how can I define new classes here to user messagepopover ? I usually define classes at the beginning of controllers but I am in its extension.

    I would solve this issue by creating a custom view to replace the entire Object page, so I could navigate from the List page to my custom view and here I could define classes, models, etc. But not sure whether this is achievable.

    Thanks,

    Javier

      • Hi Jocelyn,

        Thanks a lot for your message and very sorry for my late reply as I was involved in some other stuff at work.

        Is this even valid if I want to navigate to the second screen of another app? Let’s assume that I have an app with two xml views, not developed with Fiori Elements though. First view is List-like and second view is Object-like, so how can I specify the EntitySet and value ( of the second view ) from the code below?

         

        // Navigation to an external target instead of a detail page: Add this block to set up external navigation.
        “navigation”: {
        “display”: {
        “path”: “sap.apps.crossNavigation.outbounds”,
        “target”: “ExampleNavigationTarget”

         

        Thanks,

        Javier

  • Jocelyn,

    I simply want to pre-populate the values of a few smartfields on my object page with default values.  Is there a way to create a controller-only extension to populate those field values on object page initialization (i.e., when creating a new record)?

    Thanks,
    Michael

    • Hi Michael

      Setting default values is usually done in the target mapping via launchpad configuration, i.e. they are incoming parameters.  There’s a whole sequence managed around which defaults are used e.g. when coming from another app vs direct from the launchpad.  So it wouldn’t usually make sense to override that directly in the app through a controller extension. Perhaps you can explain with an example?

      Jocelyn

      • We are writing an internal app to maintain customer master information.  95% or more of the time we know that the customer is based in the US, so the country field should default to US.  Also, I have the state and city fields annotated to have value list drop-downs, but those value lists must be filtered by the value in the country field; otherwise, both value lists become completely unmanageable because there are too many values.  I have written a smartform view with smartfields and the corresponding controller code to populate country and add the filter to the state/city values lists, but it would be nice to be able to do similar logic with annotations and an object page because right now the facet and datafield annotations are ignored by the smartform/smartfields.

        Thanks,
        Michael