Fiori Elements: Using Custom code and their extension

Hi everyone! This blog post describes how to Create Custom Column and Cell using Fiori Elements.

In this blog, I have mentioned the code along with result. Hope this will help the readers who are searching how to use Custom code and their Extension.

NOTE: This blog is intended for absolute beginners with no prior knowledge of Fiori Elements , it aims to provide a comprehensive overview of this topic.

Introduction of Fiori Elements:

• Sap Fiori Elements is a framework developed by SAP to simplify and accelerate the development of user-friendly, responsive and consistent user interfaces for SAP applications.
• It provides pre-built templates and tools to create Fiori apps that follow SAP’s design guidelines, using a consistent look and feel.
• Fiori elements covers different app types like List Reports, Object Pages, Overview Pages and more, reducing the need for extensive custom coding and enhancing user-experience.

Advantage of using SAP Fiori Elements:

• Rapid Development: – Fiori Elements provides the pre-built templates and tools, this means less time spent on coding and more time focused on refining the user experience.
• Responsive Design: – Fiori Elements apps are designed to be responsive, adapting seamlessly to different devices and screen sizes, this responsiveness improves usability and accessibility for users on various platforms.
• Integration with SAP Technologies: – Fiori Elements integrates seamlessly with other SAP technologies like SAP Gateway, CDS, and OData services, providing a cohesive development and integration environment.

Steps to Create Custom Column and Cell in Fiori Elements: –

Step 1:- In File option, select the new option and after that select the Project from Template for creating a project (you can also use Ctrl+Alt+Shift+O as shortcut).

 

Step 2:- Under Template Selection tab in Category, Select the SAP Fiori Elements and after that select List Report Application and then go to Next button.

Step 3:- Under Basic Information tab now provide the Project name , Title and Description and click on Next button.

Step 4:- Under Data Connection tab now setup the Connection with backend System (like “PXX_100-PXX”) and provide OData service in the ‘Services’ and In Services, select the service from one of the sources which is created in listed below and click Next button.

Step 5:- Under Annotation Selection tab click on Selected Service Metadata checkbox and go to next button.

Step 6:-Under Template Customization tab in OData Collection, select Entity Set Option and go to Next button.

Step 7:- Under Confirmation tab click on finish button.

Step 8:- The App looks like this when Custom column was not created.

Step 9:- In this step, lets Create Custom Column( Right Click on project name and go to New-> Extension).

Step 10:- Under Template Selection tab select the List Report Extension and go to Next button.

Step 11:- Under Extension Settings tab select Column Radio button, also select your Page (Entity Set), give the Column fragment name and go to Next button.

Step 12:- Under Confirmation tab click on finish button.

Step 13:- In this step, We are Creating Custom Cell for the Custom column (Right Click on project name and go to New-> Extension).

Step 14:- Under Template Selection tab select the List Report Extension and click on Next button.

Step 15:- Under Extension Settings tab select Column Radio button, also select your Page (Entity Set), give the Cell fragment name for Column and click on Next button.

Step 16:- Under Confirmation tab click on finish button.

Step 17:- Below is the code for extension in manifest. json.

Step 18:- Below is the code for Custom Column.

Step 19:- Below is the code for Cell Column (I have used hard coded date “Aug 12, 2023, 5:30:00 AM”, but If you want then you can bind the data with backend and you’ll have to use association name in curly bracket like as text = “{orderdate}” ).

Step 20:- In Output, You can see Order Date Column created (which is the Custom Column).

 

Conclusion: By this blog , When you customize columns and cells using Fiori Elements ,You’re able to make your app look and work just the way you want it to and This helps your app look great and makes it easier for people to use.