How to create an SAP Fiori app using SAP Fiori elements, SAPUI5 freestyle or a mix of both with the Flexible Programming Model

[PeterSpielvogel]

If you want to build an SAP Fiori app, we have lots of information available in tutorials, documentation, sample apps, openSAP courses as well as blogs and questions here in the Community. One challenge is knowing when to use SAP Fiori elements, SAPUI5 freestyle, or a hybrid approach, which is now possible using the flexible programming model. In this blog I will outline the flow of creating an SAP Fiori app based on SAPUI5. The main topics will be:

• Which approach to use: SAP Fiori elements, SAPUI5 freestyle or a mix of both leveraging the flexible programming model


• Which SAP Fiori tools extensions to use at what point in the development process


• What information sources will be most useful

An SAP Fiori app based on SAP Fiori elements. This uses the flexible column layout with an analytical list page on the left and the object page on the right.

 

SAPUI5 provides developers a solid foundation

Let’s assume you are a developer and have been asked to create an SAP Fiori app for a specific use case. SAP Fiori is best implemented using SAPUI5 since it provides a solid foundation for building enterprise applications. SAPUI5 offers:

• a consistent user experience with hundreds of UI components


• a single app implementation for all browsers, platforms, and devices


• support for enterprise qualities like security and accessibility

For many use cases, you can greatly accelerate development by following one of the standard floorplans that we offer in SAP Fiori elements. SAP Fiori elements generates apps based on SAPUI5. By following one of the SAP Fiori elements floorplans, you:

• boost your development efficiency


• get future-proof UX consistency out-of-the-box


• create high quality, secure, stable UI code that complies with product standards such as accessibility or mobile readiness

Decide on the right approach based on your requirements and app design

Your journey starts with an OData V4 service that exposes the data and relationships you need for your app. While there are many ways to create an OData V4 service, we recommend you use either the ABAP RESTful Programming Model (RAP) or the Cloud Application Programming Model (CAP).

Before you start the implementation, you should come up with at least a rough design of your app, maybe in the form of a low-fidelity mockup / sketch. Then the first question to answer is: can your app fit one of the standard SAP Fiori elements floorplans?

Yes. My app’s design can mostly follow one of the SAP Fiori elements floorplans	No. My app’s design does not fit one of the SAP Fiori elements floorplans
If the answer is YES, continue to section ‘Create your app using SAP Fiori elements’. In this case we strongly recommend that you leverage the SAP Fiori elements framework, which means there will be a minimum of metadata-based UI Code in form of OData annotations. You will still be able to leverage the flexibility of using SAPUI5 freestyle coding.	If the answer is NO, continue to section ‘Create your app using SAPUI5 freestyle’. In this case you can create your app using SAPUI5 freestyle, which gives you flexibility to cater to your specific requirements and design needs at the cost of more UI Code. You will still be able to leverage some parts of the SAP Fiori elements framework.

Make sure to check carefully if your app is close to one of the SAP Fiori elements floorplans. We’ve seen cases where the requirements could have fit one of the standard floorplans with only minor compromises on the design. By not using SAP Fiori elements as the starting point, the developer forfeited the efficiency gains in development and maintenance.

 

Create your app using SAP Fiori elements

Note: This section focuses on apps that are created based on the SAP Fiori elements framework for OData V4 services, although many aspects also apply to apps created based on the SAP Fiori elements framework for OData V2. Please consult the documentation for information on the differences.

1. Familiarize yourself with the SAP Fiori elements framework and check if you will need to go beyond the standard patterns
   The best place to start is the overview page with the interactive image in our documentation and in particular the feature map. You will find details on how to implement the required features. Don’t worry if some of your requirements are not covered, as you will be able to go beyond the standard functionality with custom artifacts.
   We also recommend that you check our feature showcase - a sample SAP Fiori elements list report - object page app based on CAP CDS annotations. Its purpose is to make it easier for developers to look up how to implement various features. We are working on extending it to other floorplans and annotation types.


2. Generate your app using the application generator in SAP Fiori tools
   This allows you to generate the project structure of your app in a wizard-like approach. After generation, the application info page opens, where you see a comprehensive summary of the app status, with links to options within SAP Fiori tools that will be useful for your implementation.
   SAP Fiori tools is available on SAP Business Application Studio (BAS) or Visual Studio Code. Using BAS gives you the advantage of a ready-to-use integrated development environment that’s pre-integrated into the SAP ecosystem.


3. Configure your app using the Page Map and Page Editor and add standard content
   The page map and page editor play an important role in increasing developer efficiency by providing low-code capabilities with SAP Fiori tools. You can perform no-code configurations like changing the overall layout of your app to a split screen, which we call ‘Flexible Column Layout’ or changing table types, (de-)activating standard features, etc. You can also easily add content such as fields, sections, table columns, etc. using a schematic view of the application, which will generate the corresponding annotations and manifest settings.


4. Add more content using Guided Development
   For more complex content – or if you want integrated guidance – we recommend you use Guided Development in SAP Fiori tools. The guides take you through the steps required to implement a feature and then generate the required code or changes in your project.


5. Maintain annotations with Language Server
   If you prefer to create annotations directly in the corresponding annotation files, you can make use of one of the language servers in SAP Fiori tools, which support both XML and CAP CDS annotations.


6. Add custom artifacts and logic leveraging the Flexible Programming Model
   If you have requirements that are not covered by SAP Fiori elements out of the box, you can use the Flexible Programming Model, which allows you to add custom artifacts through manifest-based extension points like custom sections, columns, or even pages. Most of them can be easily added using the page map (for custom pages) and page editor (for everything else).
   Within the custom artifacts, you can leverage SAP Fiori elements building blocks or any UI5 control. Building blocks are reusable artifacts that are consistently orchestrated by the framework, so you automatically benefit from SAP Fiori compliance and standard application behavior such as draft handling, side effects, or navigation.
   Furthermore, you can also add controller extensions, which offer hooks into SAP Fiori elements functionality so you can override or extend the standard logic, for example in the edit flow or message handling.
   If you are interested in hands-on experience on how to use the Flexible Programming Model, there is an exercise available at the SAP-samples Git repository

Create your app using SAPUI5 freestyle

1. Become familiar with the SAPUI5 freestyle approach
   A great way to get started is to walkthrough the major development paradigms of SAPUI5. Also check the SAPUI5 tutorials.


2. Generate your project using the application generator in SAP Fiori tools
   You can kick-start your SAPUI5 freestyle app creation using a template offered in SAP Fiori tools. Think of app templates as a kind of best practice for app development. They incorporate current recommendations and include generic application functionality and tests that can be easily extended if needed.


3. Add freestyle content and functionality to your app
   The SAPUI5 essential concepts will give you a comprehensive overview of the development concepts of SAPUI5, such as the Model View Controller, data binding, and components. Using the SAPUI5 freestyle approach lets you go beyond standard patterns and follow your own design specifications.


4. Leverage SAP Fiori elements building blocks
   Even with this approach, you may benefit from using building blocks provided by SAP Fiori elements for certain screen areas e.g., a standard table with a filter bar. This means your app will run with the SAP Fiori elements framework, but all pages are treated like custom i.e., freestyle pages. You will automatically benefit from SAP Fiori compliance and standard application behavior like draft handling, side effects, or navigation for the respective building block, while having all the freedom of SAPUI5 freestyle code on the overall page. What you need to do in order to enable the use of the SAP Fiori elements framework is explained in the section Usage in Custom Apps in the Flexible Programming Model Explorer.
   Note that some functionality of SAP Fiori tools like page map, page editor or guided development are not available for SAPUI5 freestyle apps.

Deploy your app to the platform you choose

SAP Fiori tools supports deployment to ABAP as well as deployment to Cloud Foundry (CF) on SAP Business Technology Platform. In contrast to the SAP Web IDE approach, you don’t need to specify the deployment target until you are ready to deploy the application. Check the Build and Deploy documentation of SAP Business Application Studio. If you want to deploy to a different platform, you will need to check the related documentation of the platform where your app is going to run.

Outlook - we are making SAP Fiori app development easier

We have been working to bridge the gaps in the developer experience between SAPUI5 freestyle and SAP Fiori elements. Either start building an app with an SAP Fiori elements floorplan and add SAPUI5 freestyle code as needed. Or begin by using the SAPUI5 freestyle approach and add individual metadata-based, ‘smart’ building blocks.

One of the key innovations we have introduced with the SAP Fiori elements framework for OData V4 is the Flexible Programming Model. It allows us to blur the borders between SAP Fiori elements and SAPUI5 freestyle development. Both can now leverage SAP Fiori elements building blocks and thus benefit from the out-of-the-box SAP Fiori compliance and standard application behavior like draft handling, side effects, or navigation provided by the SAP Fiori elements framework. Also, we have been enhancing SAP Fiori tools to support both approaches. Here, the open UX tools journey, which we continue to evolve, is a key piece. There is more to come – stay tuned.

For the SAPUI5, SAP Fiori elements, and SAP Fiori tools teams – oliver.graeff, stefanie.runde, and peter.spielvogel.

[LaurensDeprost]

A clear overview on these different approaches to developing Fiori apps and the steps involved.
Good to see more and more parts of the underlying tooling is becoming open source.
Keep it coming!

[RaminS]

Great blog indeed, with useful references. Bookmarked!

I'm not sure what other people's experience has been, but every time we decide to use Fiori Elements for something, soon after we realize we don't have the flexibility we need to address some of the requirements, and we end up switching to freestyle. This causes more time wasted than if we had started freestyle from the beginning.

Most of the problems are because of the old BAPIs and function modules that still hold a lot of SAP logic, which we don't want to rewrite, or convert into CDS Views. If we have to call several BAPIs to get the Notes of a Work Order (longtext), then you might as well use freestyle UI5 with smart-controls instead of being tied up in Fiori Elements framework, since you will end up writing the backend logic anyways.

 

 

[cristiano_santos]

Hi peter.spielvogel 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.

[stefan_engelhardt]

Already replied here 🙂: https://blogs.sap.com/2021/08/19/leverage-the-flexible-programming-model-to-extend-your-sap-fiori-el...

[MartinSommer]

Dear peter.spielvogel, can you provide a higher resolution screenshot of the Fiori Elements app and provide some details of the elements used, especially interested in the flow diagram for "Maximum processing time" on the object page thanks

[rammel_sapdev]

May I know what kind of requirements cannot be achieved by using RAP/Fiori Elements? Regarding the old BAPIs/FMs, is using the unmanaged scenario not sufficient to cater for the requirements? I also think that as the requirement grows bigger, most of the time, we will have to eventually resort back to using freestyle. I am thinking whether Fiori elements/RAP is suitable only for requirements which is more straightforward.