Developing and extending apps with SAP Fiori Elements

Increased digitization, growing demand for IT services and the urge to accelerate “time-to-market” have led to a rising interest in low-code and no-code platforms, which are now popularized as an alternative to traditional software tools and an answer to the noticeable staffing shortages associated with lack of project capacity among qualified developers.

Considering the dynamic changes in the business environment, organizations need to minimize the time and resources spent on updating and developing corporate software to fully focus on innovations that will benefit end-users.

To support developers in building applications consistent with SAP S/4HANA and other enterprise solutions, SAP provides several tools to increase the speed of developing, testing, and deploying ready-to-use products in the chosen environment.

What benefits does SAP Fiori Elements offer?

SAP Fiori Elements vs SAPUI5 freestyle

Solution developers can use two programming approaches to build SAP Fiori applications – SAPUI5 freestyle or SAP Fiori Elements.

SAPUI5 is a JavaScript-based framework with many predefined libraries and controls designed to create user interfaces efficiently.

SAP Fiori Elements, on the other hand, provides a set of popular templates needed to develop a fully functional solution. The difference is that in SAPUI5 all the code has to be built from scratch.

SAP’s new framework allows developers to complete a project faster and with less effort while reducing the amount of front-end code needed to build a fully functional SAP Fiori application. SAP Fiori Elements Floorplan also eliminates the requirement to develop key modules from scratch.

Source: SAP Fiori Design Guidelines

On the SAP Fiori Design Guidelines website, developers can search for the model elements needed to build an application – a list, table or shopping cart – so they don’t have to write all the code responsible for searching, filtering, sorting and aggregating information in a large data set.

What information can we find on the SAP Fiori Design Guidelines website?

One of the worth recommended templates is Wizard, an intuitive-to-use creator enabling to complete a time-consuming task such as filling out a lengthy questionnaire by dividing it into segments and guiding the user step-by-step through each window. The Wizard consists of a guide screen, where sections of the form are displayed sequentially as each field is filled in, and a screen summarizing the previous activities, where the questionnaire is displayed in read-only mode for evaluation and final approval.

Equally interesting is an Overview Page template based on the SAP Fiori Elements framework, working as a user interface structure for organizing multiple tabs on a single page. Developers can use it when they want to provide a basic view of content related to a specific domain or role, as well as present different formats of information such as charts, lists and tables on a single page.

When is it worth choosing SAP Fiori Elements?

While low-code platforms are a promising solution to support developers in delivering ready-to-use products, this technology stack has its limitations.

Organizations sometimes need custom software and more complex applications to reflect their unique business scenarios. In such situations, it’s worth considering the SAPUI5 freestyle development approach.

The final decision on whether to use SAP Fiori Elements or the SAPUI5 freestyle approach should be driven by the following criteria:

• Analysis of the customer’s requirements,
• The complexity of the business logic that needs to be turned into a code,
• Considering how many percent we can use out-of-the-box solutions to map a given process.