Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
stefaniehager
Product and Topic Expert
Product and Topic Expert
The flexible programming model makes it easy for you to extend apps based on SAP Fiori elements for OData V4. While you're free to use any SAPUI5 coding or controls in extension points, you can also take advantage of our new building blocks. Leveraging the building blocks gives you even more possibilities to adapt your apps with a minimal amount of custom SAPUI5 coding. In this blog I will give you an overview of the flexible programming model and point you to the relevant documentation.


 

Key benefits


A great UX needs the right balance between UX consistency and use case specific design. Hence the ability to extend SAP Fiori elements apps with SAPUI5 freestyle code and controls has been a key factor in its success. However, the drawback of having the flexibility to extend SAP Fiori elements apps is that both development and maintenance efforts increase with the number of individual changes you make.

With the flexible programming model, and in particular the building blocks, we give our customers and partners the ability to create extensions, while maintaining UX consistency and limiting the cost and complexity of the extensions.

In short, the flexible programming model allows you to

  • Increase the lifecycle stability of your apps and lower maintenance efforts by reducing the amount of custom SAPUI5 coding

  • Further boost development efficiency by taking advantage of standard SAP Fiori elements functionality, such as draft handling or side effects also in your extensions

  • Retain UX consistency for your extensions


How it works


The flexible programming model incorporates three features to add custom functionality to standard SAP Fiori elements apps:

Extension points


Manifest-based extension points allow you to add custom artifacts like custom sections, custom actions, custom table columns, or even custom pages. The concept is comparable to that of SAP Fiori elements for OData V2, plus you have the ability to add whole custom pages into your navigation flow.


 


 

Building blocks


Within these custom artifacts, developers can use any SAPUI5 control and can make use of the new SAP Fiori elements building blocks.

These building blocks are reusable artifacts that are orchestrated by the SAP Fiori elements runtime. A building block has a data binding to parts of the OData V4 service that the app is based on. It is basically a wrapper around one or several UI5 controls and feeds them with UI configuration that it derives from the app configuration and metadata.

Using building blocks, you automatically benefit from SAP Fiori compliance and standard application behavior orchestrated by the SAP Fiori elements runtime like draft handling, side effects, or navigation.

The building blocks are a subset of the scope that is also used within the SAP Fiori elements framework to build our SAP Fiori elements floorplans. So far we have published a first set of building blocks and intend to publish more depending on usage and demand.

Essentially, the building blocks for our OData V4 stack are an evolution of the smart controls for OData V2 – with improved architecture, cleaner code, better performance, and enhanced functionality.


 

Controller extensions
Controller extensions offer hooks into SAP Fiori elements functionalities so you can override or extend the standard logic, for example in the edit flow or message handling.


 

Learn more and explore sample code using the Flexible Programming Model Explorer

 

Flexibility in arranging your pages within your app


Another important aspect of the flexible programming model is the advanced flexibility for page composition of your apps: SAP Fiori elements for OData V4 uses standard UI5 routing instead of pre-defined patterns. This enables for example

  • the navigation to different object pages from one list report

  • an app that consists of a single object page only

  • a custom page anywhere within the app structure


With the flexible programming model, we are taking another step in harmonizing the development of custom coding and standardized SAP Fiori elements apps. How will you use the flexible programming model and building blocks to extend the capabilities of your SAP Fiori apps? Looking forward to your feedback!

On behalf of the SAP Fiori elements team, stefanie.runde.
25 Comments
Kishore
Participant
0 Kudos
This is very interesting. Thanks for sharing
camichel
Participant
0 Kudos
Very interesting blog 🙂 Thanks for sharing!
pascal_wasem1
Explorer
0 Kudos
Looking forward to give this a try. Is there a link to the "SAP Fiori Elements Flexible Programming Model Explorer" shown above?
stefaniehager
Product and Topic Expert
Product and Topic Expert
Hi Pascal,

the link to the Flexible Programming Model Explorer should be ready next week and I will update this blog post with it.

regards,

Stefanie
Rakesh_Kr
Participant
0 Kudos

Looks developer friendly too. Thanks! for sharing.

Looking forward to get the link to access flexible-programming-model details.

Thanks,

Rakesh

pjcools
Active Contributor
0 Kudos
Thanks stefanie.runde for sharing this. This is a really good step forward to allow further flexibility when using SAP Fiori Elements. Look forward to the  Flexible Programming Model Explorer link.
termanico
Participant
0 Kudos
Thanks a lot for Sharing Stefanie Hager - very inspiring!

What UI5 Version is prerequisite for the flexible Programming model?

br

Thorsten Klingbeil
i021200
Employee
Employee
0 Kudos
Thanks Stefanie. Very interesting and promising.

Regards,

Pablo
mariusobert
Developer Advocate
Developer Advocate
0 Kudos
FYI: The link to the Flexible Programming Model Explorer is now available
sascha_weidlich2
Participant
0 Kudos
Hi Marius,

just one short question for the general approach of the extension of a Fiori Elements App. Let's say as a Customer I want to extend and FE-App which already is shipped with Building Blocks or Custom UI Sections. Is there any way to extend this app with a new extension app? (and therefore not touching the shipped code)

Normally from my understanding you can just extend the base component in UI5, but this seems not to work in a Fiori Elements-App, right?

Best Regards!
mariusobert
Developer Advocate
Developer Advocate
0 Kudos
Hi sascha.weidlich2,

good question, I'm not sure tbh. I'll leave this question up for stefanie.runde to answer
stefaniehager
Product and Topic Expert
Product and Topic Expert
0 Kudos
Hi Thorsten,

sorry for my late response, I took a longer summer break this year. The first building blocks were released with SAPUI5 1.91. We have been releasing additional ones with every release and will continue to enhance the scope based on demand.

cheers, Stefanie
stefaniehager
Product and Topic Expert
Product and Topic Expert
Hi Sascha,

just to be sure I get the scenario correctly: you have an app that was built using SAP Fiori elements and now you want to extend it using an adaptation project because you don't want to touch the shipped code - correct?

Right now SAP Fiori elements OData V4 apps are not yet supported in adaptation projects - but we are working on this. We then also want to make building blocks available in adaptation projects, but we are still evaluating the feasibility of this. Stay tuned!

cheers, Stefanie
_jonas_
Participant
0 Kudos
Hi Stefanie

Will sap.fe replace the 'old' Smart Controls (sap.ui.comp) in the long term? Is a comparison of the two libs available to get a deeper understanding of what was improved or to learn what use cases should be implemented in the future with what library?

cheers
--jonas
stefaniehager
Product and Topic Expert
Product and Topic Expert
Hi Jonas,

sap.fe is our SAP Fiori elements stack for OData V4. It will not make use of Smart Controls, they are only available for OData V2. Instead this stack offers the building blocks as described above.
However, the SAP Fiori elements stack for OData V2 where Smart Controls are used, will continue to be very much relevant and we will continue to support and enhance it.

cheers,

Stefanie
_jonas_
Participant
Ah ok, I see. So basically the used OData version dictates which of the two stacks we are gonna use.

 

Thx!
--jonas
aschemmel
Discoverer
0 Kudos
Hi Stefanie, hi Marius,

are there any news about this topic? Is it possible to create an extension project for delivered SAP Fiori elemets OData V4 apps, as a customer?

best regards, André!

 
Abhi9
Explorer
0 Kudos
Hi Stephanie,

 

For the map ... Did you used RouteType: Geodesic or any customized route ?

Is there a way in GeoMap that we can customize the route like drawing a curved line instead of flight route ?

 

Thanks,

Abhi

 

 
stefaniehager
Product and Topic Expert
Product and Topic Expert
0 Kudos
Abhi9
Explorer
0 Kudos
Yeah I am using GeoMap control and trying to customize the geodesic routeType for Routes as this is not serving the purpose  of drawing the curved line which is not a flight route.
cristiano_santos
Participant
0 Kudos
Hi stefanie.runde I perceived that extension points are available for Object Page floorplan, and Building blocks are available for Object Page floorplan and Custom Page template.

My question is: is there any plans to use building blocks or extension points in List Report or Analytical page floorplan? Because I would like to use Analytical floorplan and add another section in content area between the graph and the table, without go to Custom page.
Hi Cristiano,

it's possible to have a custom view on the list report, we have an example here:
https://ui5.sap.com/test-resources/sap/fe/core/fpmExplorer/index.html#/customElements/CustomView/cus...

In the analytical list page we don't have that. May I ask what your use case is for that?
cristiano_santos
Participant
0 Kudos

Hi stefan.engelhardt I have checked this example, and it creates a new tab in table area. We would like a section above the table.

This is the use case: before approve condition contracts , managers want to check the sales volumn by month and by a custom field as depicted below. This custom field is added in sales order, in Additional Data B tab.

Fiori app F2954 Monitor Condition Contracts do all what we need related to filtering and actions in contract, except show the custom field.

We are trying to modelate the data to sum by month and use the standard graphs available. But the footer with sum by quarter will not be possible with the standard graphs. And we need a click event in each cell, to show all sales orders related to that custom field/month.

I am also trying the Adaptation project in BAS.

If we could replace the graph in content area by a custom view or add a new section above the table, it will be a perfect custom analytical app.

Think about it 😉

rajithaw
Explorer
0 Kudos
hi Experts,

about this point

  • Further boost development efficiency by taking advantage of standard SAP Fiori elements functionality, such as draft handling or side effects also in your extensions


how can the draft mode be enabled for a custom page - FPM ?