openSAP: Developing and Extending SAP Fiori Elements Apps

SAPUI5 is an HTML framework tailored to building modern, cross-platform, enterprise-grade web applications. SAPUI5 is the reference UI technology for the SAP Fiori user experience.

SAP Fiori elements provides standard floorplans and uses metadata to streamline and accelerate developing SAPUI5 applications.

Most enterprise use cases involve providing an overview of business-relevant data, working with lists of business objects, and managing these business objects.

Unit 1: Painting the big picture

Before:

Create a new Meta data extension for a CDS view.

Unit 2: Understanding the architecture

The floorplans and application controller provide the basis for your application

SAP Fiori elements floorplans 

•  Implemented as XML templates
• Incorporate current UX design

OData connects your app to the back end

• Meta description of data model 
• CRUD and actions 
• Query language 
• Capabilites and restrictions

OData annotations define how the app looks and behaves

Consumption hints

Which fields allow a human to identify the entity?

Which fields are clickable?

Semantics

“These fields shall be displayedtogether in a form”

Behavior

“This entity can be edited”

Semantics

“This is the currency for the amount”

Use the power of SAP’s back ends to create OData services 

Custom code complements your app beyond standard SAP Fiori elements functionality

Unit 3: Introducing OData services and annotations

OData contains a meta description of your data model: 

▪ An entity can for example be a ‘Person’ with the property ‘FirstName’ 

▪ The property can be further qualified, for example by providing a datatype or information like ‘nullable’ 

▪ Entities can have relationships. A 1:n relationship could be, for example, ‘1 person can be related to n trips’ 

▪ The meta description can contain complex types, actions, singletons, and so on

https://www.odata.org/getting-started/understand-odata-in-6-steps/

Unit 4: Creating a list report

With the list report, users can

▪ Search, filter, sort, and group large sets of items

▪ Work with different views on the same set of data, for example, on items with different statuses like ‘open’ or ‘in progress’

▪ Select one or more items in the list for further action

Filter bar

▪ Allows users to filter the table based on various selection fields

Variant management

▪ Allows users to store custom views, such as filter settings, sorting, or table columns to be displayed

Visibility

▪ Is expanded initially and collapses when the user scrolls in the table

▪ Can be pinned to stay expanded during scrolling 

Table toolbar

▪ Contains the table title, personalization and export options, as well as the standard actions create, edit, delete

▪ Can also contain app-specific actions

Personalization options

▪ Show and hide table columns, specify sorting and grouping

Table

▪ Multiple table types are supported, such as responsive table or grid table

https://sapui5.hana.ondemand.com/#/topic/03265b0408e2432c9571d6b3feb6b1fd

Building Your First SAP Fiori Elements App

Creating an Object Page

An object page lets you display, edit, and create objects, as well as save drafts The object page is suitable for both simple and more complex, multi-faceted objects. It is often used to categorize the relevant information about an object using sections.

https://sapui5.hana.ondemand.com/#/topic/645e27ae85d54c8cbc3f6722184a24a1

SAP Fiori tools

• Visual Studio Code Download the SAP Fiori tools extension pack in the Visual Studio Code marketplace. 
• SAP Business Application Studio SAP Fiori tools are preinstalled in the SAP Fiori dev space.

Preparing Your Front-end Development Environment

SAP Business Application Studio is an IDE optimized for SAP application development.

Generating the List Report – Object Page App

Creating an Analytical List Page

The analytical list page offers a visual way to analyze data from different perspectives. It is commonly used to filter large data sets visually and drill down to explore specific segments or individual items.

Creating an Overview Page

The overview page displays an overview of data relevant for a specific business area or role. It presents business-critical information and allows users to easily identify and act on the most important information. Cards show data as text, charts, lists, or tables.

Use the overview page to ▪ Provide an entry-level view of content related to a specific domain or role ▪ Show content from different sources on a single page ▪ Use card types to convey information in different ways ▪ Filter information across different cards/apps to complete role-specific tasks