1. Guides
  2. SAPUI5 App Templates vs. SAP Fiori Elements: What’s the Difference?

SAPUI5 App Templates vs. SAP Fiori Elements: What’s the Difference?

GuidesSAP
SAP UI5 App Templates vs. SAP Fiori Elements: What’s the Difference?

This article is about SAPUI5 app templates vs. SAP Fiori Elements. Both are templates that serve as a base from which to develop SAPUI5 applications.

You’ll learn the differences between SAPUI5 app templates and SAP Fiori Elements and when to use which one of them.

Let’s get started!

Contents

What’s an SAPUI5 App Template in Simple Terms?

Programming light blue background

SAPUI5 app templates are templates for the development of SAPUI5 applications. They serve as a base that you can build upon when you want to develop a SAPUI5 application.

Out-of-the-box, SAPUI5 app templates provide you with pre-configured basic app structures and ensure that everything is set up properly.

When you need to build a new SAP application, the SAPUI5 app templates are the way to go. They are the best practice for the development of a SAPUI5 application from the ground up.

Depending on the SAPUI5 version you choose, the SAPUI5 app template will incorporate SAP’s latest recommendations and features. They also include generic application functionalities and tests that can be easily extended with custom functionality if needed.

Overall, SAPUI5 app templates speed up your SAPUI5 application development and make it more efficient. They save you from setting up the basics of your SAPUI5 application manually over and over again and give you a rock-solid foundation.

Everything else would be a waste of time.

SAPUI5 app templates serve as a solid base for the development of an SAPUI5 application: they’re a must-use.

SAPUI5 app templates come in three different flavors. Depending on the requirements of your planned SAPUI5 application, you can choose from one of the following templates:

  1. Basic template
  2. Worklist template
  3. Master-Detail template

Let’s take a closer look at each of those templates.

Basic Template

The basic template is the most simple of the SAP app templates. It contains only the start view, but it still comes with everything else you need as a base for your new SAPUI5 application, such as SAP’s latest SAPUI5 recommendations and functionalities.

SAP app template: SAP UI5 basic template screenshot.

Worklist Template

The worklist template adds to the basic template a table that uses your OData Service, along with a detailed view for each table item.

After selecting the template in the Web IDE (Integrated Development Environment), a configuration wizard will guide you through choosing and configuring the OData Service you want to use for the template. When you click on an item in the table, you’ll navigate to the detailed view that shows the selected item’s details.

SAP app template: SAP UI5 worklist template screenshot.
SAP app template: SAP UI5 worklist template detail view screenshot.

Master-Detail Template

The master-detail template is like the worklist template, but more sophisticated.

It uses dynamic views that you can size up to full screen, close, and display in different sizes alongside each other.

SAP app template: SAP UI5 worklist template master view screenshot.
SAP app template: SAP UI5 master-detail template screenshot.
SAP app template: SAP UI5 master-detail template detail view screenshot.

What are SAP Fiori Elements (SAPUI5 Smart Templates) in Simple Terms?

Browser idea light blue background

SAP Fiori Elements are also SAPUI5 application templates, but they include more functionality with smart controls. Before SAP renamed them to SAP Fiori Elements, they were called SAPUI5 smart templates.

SAP Fiori Elements serve as a base for a new application, just like the standard SAPUI5 app templates. Developing an application with them is even more efficient than with SAPUI5 app templates, but the downside is that they’re more restrictive.

SAP Fiori Elements incorporate SAPUI5 smart controls, in contrast to SAPUI5 app templates, which use ordinary controls. For example, SAP Fiori Elements use the smart table (sap.ui.comp.smarttable.SmartTable) and SAPUI5 app templates use the responsive table (sap.m.Table).

You might be wondering what a SAPUI5 smart control actually is, so let’s discuss that next.

What are SAPUI5 Smart Controls?

A SAPUI5 smart control is smart because you can construct and configure it with annotations (operating instructions) that enhance the OData service that the SAPUI5 smart control consumes. You don’t need to shape the SAPUI5 smart control and its aggregations in the SAPUI5 application itself, in an XML view or controller. Instead, you can just declare them and your annotations take care of the rest, specifying their configuration or logic.

For those who are new to SAPUI5: a SAPUI5 control is simply an element of an application, for example, a button or a table. SAPUI5 has hundreds of controls ready to use. You can configure the controls via their properties and put logic behind them through the development of their events. For instance, you can indicate what the text of the button control is supposed to be through the text property and determine what happens when the button is clicked through the button’s press event.

In comparison to regular SAPUI5 controls, it’s much easier and more efficient to use a SAPUI5 smart control, configuring it and making use of its built-in logic via annotations. How that works is a story of its own. But to give you a rough idea how much more efficient smart controls are compared to ordinary controls, here’s an example: For a responsive table that isn’t a smart control you need ~100 lines of code in an XML view; for a responsive table as a smart control you need ~2 lines of code in an XML view.

Plus, smart controls provide you with features that the common controls don’t have. For example, the user can export a smart table to Excel or dynamically select the columns that the table displays. Overall, using smart controls leads to more efficiency in the development of SAPUI5 applications, because smart controls require less code and provide additional features. You trigger already built-in logic through annotations and therefore don’t need to manually code it yourself.

However, the downside of smart controls is that they’re more restricted. That’s the case with everything that is more standardized and automated. You can’t customize smart controls as much as you can ordinary controls.

Now that you understand the basics of smart controls, let’s talk about what SAPUI5 smart controls have to do with SAP Fiori Elements.

SAP Fiori Elements Are SAPUI5 Smart Controls for Themselves

SAP Fiori Elements are a kind of SAPUI5 smart control themselves. Put in a different way, a SAP Fiori Element is a container for SAPUI5 smart controls. A SAP Fiori Element gets configured with annotations, and it in turn contains and automatically configures SAPUI5 smart controls.

That may seem confusing, but it’s pretty simple when you break it down. Imagine an SAP Fiori Element as a SAPUI5 app template that holds SAPUI5 smart controls. You can configure the SAP app template through annotations and then the SAP app template configures its SAP smart controls based on those annotations.

Instead of building a SAPUI5 application with a SAPUI5 app template, adding SAPUI5 smart controls yourself, and then configuring each SAPUI5 smart control with annotations, you configure a container with annotations that automatically configures its included SAPUI5 smart controls. It’s one level up in terms of efficiency because you don’t need to configure each SAPUI5 smart control on its own, just the SAP Fiori Element.

An SAP Fiori Element is a kind of SAPUI5 smart control in the form of an SAP app template that contains and automatically configures SAPUI5 smart controls.

Again, the downside of SAP Fiori Elements is that they are less customizable in comparison to SAP app templates. You’re only able to customize SAP Fiori Elements through extensions, and those are very restrictive. If an SAP Fiori Element meets your needs for your application, it’s a lot more efficient than using an SAP app template for the starting point of your SAPUI5 application development.

But think twice about using an SAP Fiori Element if you’d like to enhance your application at some point. If the smallest possibility exists that you’ll need more customization, then you’re better off using an ordinary SAP app template.

Take a look at the SAP Fiori Element Templates that SAP provides:

All SAP Fiori Element Templates

SAP features five SAP Fiori Element templates:

  1. Object page
  2. Worklist
  3. List report
  4. Analytical list page
  5. Overview page

Key Differences Between SAPUI5 App Templates and SAP Fiori Elements

Scales light blue background

The most important key difference between a SAPUI5 app template and an SAP Fiori Element is that the SAPUI5 app template is almost unlimitedly customizable while the SAP Fiori Element can only be customized to a certain degree. But on the other hand, a SAPUI5 app template is less efficient than an SAP Fiori Element when both templates meet the requirements of an application.

Therefore, if an SAP Fiori Element covers your requirements and the requirements aren’t likely to be expanded soon, then use the SAP Fiori Element. In all other cases use an SAPUI5 app template.

Comparison BasisSAP App TemplateSAP Fiori Element
Application template for SAP UI5YesYes
Uses SAP smart controls out-of-the-boxNoYes
Customizable for any requirementYesNo
Most efficientNoYes
Use caseAny requirementsStandard requirements that are coverd

Now It’s Your Turn

Speech bubbles light blue background

Hopefully, you found this guide to “SAPUI5 App Templates vs. SAP Fiori Elements: What’s the Difference?” helpful.

And now it’s your turn:

  • Did this guide answer your questions?
  • Could you explain the difference between the two?
  • Is there anything you need to know that wasn’t covered here?
  • Do you know which of the two is better for you?
  • Or you just want to share your thoughts.

Either way, go ahead and leave a comment below right now.

GuidesSAP

More Similar Articles

Leave a Comment

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Menu