SAP Fiori

An overview of what SAP Fiori Freestyle is and how it differs from SAP Fiori Elements.

05 Jun

Ms.Divyadharshini,  SAP Integration Consultant, Kaavian System.

SAP Fiori Freestyle refers to the approach of building custom SAPUI5 applications with complete flexibility.

Unlike SAP Fiori Elements, which provides predefined templates and floorplans, SAP Fiori Freestyle allows developers to create applications tailored to specific business requirements.

Some Key Points:

  • Customization: With SAP Fiori Freestyle, you can fully customize your application’s design, layout, menu structure, colors, fonts, and performance.
  • JavaScript UI code: In a freestyle app, you write the Javascript UI Code for each screen. This flexibility allows us to implement complex features and interactions which is not supported in the Fiori template and floorplans.
  • Use Cases: SAP Fiori Freestyle is ideal when you need to create custom features, interfaces. When the standard floorplans don’t meet within your own requirement can be achieve using this Fiori Freestyle application.

Key Differences Between SAP Fiori Freestyle and SAP Fiori Elements:

Floorplans:

  • SAP Fiori Elements provides predefined floorplans such as List Report, Object page, Overview Page, Custom Page etc.
  • SAP Fiori Freestyle allows you to create your own customized designs.

Development Approach:

  • SAP Fiori Elements follows a metadata-driven approach.
  • SAP Freestyle involves writing the customized code.

Flexibility:

  • SAP Fiori Freestyle offers more flexibility for the users to customised the UI.

 Developing a simple freestyle Fiori Application:

 Prerequisites:

  • SAP Business Application Studio or SAP Web IDE.
  • SAP Business Technology Platform with CAPM(Cloud Application Programming Model) project setup.
  • Basic Understanding of Fiori.

Implementation:

            Set up your Project:

Open SAP Business Application Studio.

Create a Dev Space and Start Create Project from the Template once the dev space is created successfully.

In Project From The Template just simply choose the Template style as Basic to achieve the Fiori Freestyle Design.

In this Select Template select the SAP Fiori application.

In the template selection tab select the Basic:

After selecting the Basic just click the Finish button.

Folder Structure:

This is the folder structure MVC:

  • Model: Handles the Entity models for the UI.
  • View: The file where we can create our UI.
  • Controller: The file that performs the handler actions for the UI elements.

Use Case:

  • In this example we are going to learn about the
    • Navigation
    • Simple Custom Page Designing
  • Here we are going to create UI pages like:
    • Welcome
    • Two Custom Pages

Step 1:

  • Create the needed View..xml files in the view folder – Welcome.view.xml, Home.view.xml and FioriIntro.view.xml and so on.

Step 2:

Right click on the Welcome.view.xml and click Open with -> Layout Editor. To start the UI designs.

We can use the drag and drop options in this page to design the UI.

Step 3:

  • Repeat the similar process to design the UI for the remaining pages.

Step 4:

  • Under the Controller folder we need to create the corresponding controller files.Using the controller we are going to achieve the navigation and furthermore operations we need to do.

Step 5:

It is the simple button action code that needs to happen while clicking on the corresponding buttons in the UI.

Step 6:

  • We need to add the available views in the manifest.json file to achieve the navigation.

Under routing -> routes we can able to added the pages or views of the UI we have designed.

Under the Targets We need to mention the viewname that needs to be invoked by the routes.

Step 7:

  • If you need to add further improvements in the UI components you can use the style.css file to improve the UI designs.

Note: We need to add the !important after the custom use design to say they need to take this css instead of the Predefined one.

Step 8:

  • To run the application, we need to give the command npm start in the terminal.

Step 9:

The UI will render on the Port 8080 by clicking on the button it will navigate to the corresponding routers.

When I click on the Fiori Intro it navigates to this table view page:

When Clicking on the other button Go to Sample Example it will render the needed page.

Conclusion

In summary, SAP Fiori Freestyle provides the flexibility to create highly customised and user-specific applications, unlike the more template-driven SAP Fiori Elements. This blog highlighted the key differences and showcased the development of a three-view application with navigation via button clicks, demonstrating the ease and power of Fiori Freestyle. By leveraging Fiori Freestyle, developers can build tailored, intuitive interfaces that meet unique business needs, enhancing user experience and productivity.