SAP : Three Ways to Speed Up Development with SAP Fiori Elements

SAP Fiori elements, an app development tool based on SAPUI5, provides pre-made user interfaces (UIs) for the most common SAP Fiori application scenarios.

[Attachment]

As part of a suite of tools created to deliver the SAP Fiori user experience (UX), it can be used for all back-end systems that offer Open Data Protocol (OData) services, such as SAP S/4HANA and SAP Business Suite powered by SAP HANA. All you need to do is plug in your back-end services and you're ready to start building an app end-to-end with minimal coding.

Around since 2015, SAP Fiori elements was originally released under the name 'smart templates.' Over the last four years of talking and working closely with users, we've noticed a few consistently mentioned benefits. Here are three reasons why it is a smart choice for SAP Fiori app development.

1. Speed Development and Build Apps in Hours, Not Days or Weeks

[Attachment] Rapid app development is one of the most attractive benefits of SAP Fiori elements for customers. What do we mean by this? Imagine you're an ABAP developer with little experience coding JavaScript. If you're developing freestyle, building an app from scratch can be time consuming. Consider the design of a list report page for sales orders. Starting from scratch would require you to implement the correct application architecture, as well as error and message handling. You would also have to set up mandatory fields or conditions for fields and draft handling.

These functions are crucial to delivering a good UX and require considering both the SAPUI5 technical guidelines and the SAP Fiori design guidelines to deliver the standard SAP UX. With SAP Fiori elements, you can fulfill all of these guidelines and have an app up and running in a matter of hours. This is because it handles UI development, connecting the predefined and SAP Fiori design-compliant page types to your back-end data in the form of OData services. All a developer needs to do is expose the required business and metadata.

An example of how simple it is to develop with SAP Fiori elements is the list report page shown below. The developer selected the list report page type, exposed the business data that should be displayed, and then specified the filters, actions, and columns that should be available to the end user with OData annotations. The layout of the app as well as its behavior were automatically defined by SAP Fiori elements.

[Attachment]

SAP Fiori elements automatically defines the layout and behavior of SAP Fiori apps using a variety of available page types. Developers connect the required business data and configure how it should be displayed; for example, as a column in a list.

The plug-and-play nature is especially beneficial for providing more technically complicated features, such as draft handling for end users or a flexible column layout, used to display several different page types on the same screen. You could spend time developing this functionality freestyle or you could configure an app with SAP Fiori elements and free up time for innovation elsewhere.

2. Scalable and Centrally Managed App Maintenance

[Attachment]Say that you've built your app or a set of apps (by simply reusing the common features provided by the SAP Fiori elements page types) and then users request some sort of change.

When you're developing freestyle apps, changes such as bug fixes or even simple stylistic changes can be time consuming, as Stefan Engelhardt, lead development architect for SAP Fiori elements explains: 'Let's say one of your stakeholders decides, after a user feedback round, to implement a flexible column layout. When you're developing freestyle, you'll likely spend an average of five days per app to make that improvement. With a set of 30 apps, you're soon up to 150 person-days. The good news is that using SAP Fiori elements reduces your time to mere minutes by allowing you to centrally apply improvements, allowing you to get those changes done across apps just before you go off to lunch.'

That's the magic of using a scalable app development framework: It significantly reduces the time you need to spend on app maintenance by providing centrally managed UX for developers.

3. UX and Design Consistency

[Attachment]Should you use emphasized or semantic buttons? How do you structure a list report? To deliver a good user experience, it is crucial to stay up to date on the latest coding and design standards.

The standardized page types provided by SAP Fiori elements are based on proven UI concepts and have been thoroughly researched and developed by leading UX and UI designers at SAP. SAP Fiori elements was designed to help ensure that different applications provide a similar experience across the board, defining consistent locations, forms, and functions for controls and providing universal screen styling.

It is also easy to keep apps created with SAP Fiori elements up to date, as they are automatically adapted to the most recent design guidelines. This means that you can trust design decisions that are predefined for each page type and focus on executing the business logic, integrating the back-end services, and making final touches. This makes it a cost-effective way to improve the design consistency and overall UX of your SAP applications.

Determine If SAP Fiori Elements Is a Good Fit

When it comes to deciding if SAP Fiori elements is a good fit for your development scenario, there are a few factors that should be considered:

Onboarding: Like any new development environment, SAP Fiori elements can take some time to get used to. 'If you're coming from the ABAP world, you'll see it's not your usual coding framework,' says Engelhardt. 'You essentially tell the program in an abstract way what you'd like to have and let the framework build it for you.' To help you along in this new development environment, SAP Fiori elements uses the SAP Web IDE wizard for app creation, with a plug-in available for overview pages.

Customization and extensibility: SAP Fiori elements can be further customized or extended. You always have the option to personalize and customize your app with some additional coding, for example, if you want to add new actions or filters. The same is true for building extensions, which are also available and documented in addition to the standard capabilities. These do require a little bit of extra effort on behalf of the developer, but allow you to deliver the additional functionality you need while helping ensure that you have a consistently designed app.

Coverage: SAP Fiori elements covers around 80 percent of the most common use cases for application development, with support for the following page types:

If your scenario is not covered by these page types or your desired functionality cannot easily be added through extensions, freestyle development may be a better option. In most cases, however, SAP Fiori elements streamlines SAP Fiori app development and allows you to focus on the business logic and meeting your users' needs.

Try It Today to Boost Enterprise Readiness

[Attachment]< /a>Scaling applications across your organization can be expensive and time consuming. SAP Fiori elements enables you to scale your app creation across your organization in a fast, convenient, centrally managed and expertly designed way.If you are ready to get started, there are many resources available to help you. We recommend taking a look at the introduction page on the SAP Fiori design guidelines site for an overview of the topics discussed in this article, as well as the official technical documentation for an in-depth look at the tool.

For a quick onboarding, check out this video series. An up-to-date overview of all the resources is available on the SAP Fiori elements Community Wiki.