Skip to Content
Technical Articles
Author's profile photo Ravikant Ranjan

Fiori Elements- Extension and Customization- Step by Step

IntroductionSAP Fiori Elements

  • SAP Fiori elements provides designs patterns for UI and predefined templates for commonly and frequently application.
  • We the developers can use SAP Fiori elements to create SAP Fiori applications based on OData services and annotations.
  • It requires no JavaScript UI5 coding and uses predefined views and controllers.

Why Fiori Elements (Features) :

  1. Reuse functionality that does not require specific programming.
  2. A common look and feel and UI behavior for all apps.
  3. Message handling.
  4. SAP Fiori launchpad integration.
  5. Control of the UI using OData annotations.
  6. Multi-device support.
  7. Status colors and icons to indicate criticality.
  8. Header facets to define which information is displayed in the header.
  9. Value help with Smart filters.
  10. The annotation-driven development model which significantly reduces the amount of front-end code for each app, so the developer can focus on the business logic.

 

Fiori Elements – Standard

FIORI Element Worklist Floorplan POC:

Below are the steps to start the apps developments using Fiori Elememts:

  1. Pre-requisite : Create the below destination

2.Make a new Project from Template.

3.Select the category as “SAP Fiori Elements” and the select the floorplan for Eg. Here we have taken “Worklistfloorplan”.

4. Mention Project Name, Title, Namespace, Description”.

5. Choose a system to connect to te required service and then choose the service available in that corresponding system

6. Add the annotation files

7. Enter the asked details in Template Customization. Click Next and then Finish.

Below is the screenshot of how project structure looks like :

Run the project as SAP Fiori Launchpad :

 

Screenshot of our running Application :

 

FIORI Element List Report Floorplan POC:

Below are the steps to start the apps developments using Fiori Elememts:

  1. Pre-requisite : Create the below destination.

2. Make a new Project from Template.

3. Select the category as “SAP Fiori Elements” and the select the floorplan for Eg. Here we have taken “Worklistfloorplan”.

4. Mention Project Name, Title, Namespace, Description”.

5. Choose a system to connect to the required service and then choose the service available in that corresponding system

6. Add the annotation files

7. Enter the asked details in Template Customization. Click Next and then Finish.

Below is the screenshot of how project structure looks like :

Run the project as SAP Fiori Launchpad :

Screenshot of our running Application :

 

Fiori Elements – CUSTOM

How to extend and customize Fiori Elements?

  • Below are the steps for customization done in List Report for Customizing the Action:
  • Click on Project -> New -> Extension

2. Select List Report Extension in the Template Selection tab and click Next button

3. In the Extension Settings tab select the one what do you want to extend among Filter, Action and Column. Here I have selected Action

4. Enter the details above such as Page and Action Label and click Next and then Finish

New info action button in the table toolbar on clicking which we get the below output screen :

Below is the code for extension in manifest.json :

"extends": {
"extensions": {
	"sap.ui.controllerExtensions": {
		"sap.suite.ui.generic.template.ListReport.view.ListReport": {
			"controllerName": "com.demo.zcustom_listreport.ext.controller.ListReportExt",
				"sap.ui.generic.app": {
					"Orders": {
						"EntitySet": "Orders",
							"Actions": {
								"ActionOrders1": {
									"id": "ActionOrders1button",
									"text": "{@i18n>ActionOrders1}",
									"press": "onClickActionOrders1"
									}
								}
							}
						}
					}
				}
                        }
              }

Below is the folder structure created. We will find a new ext folder inside which we have controller folder containing ListReportExt.controller.js file.

 

  • Below are the steps for customization done in List Report for Customizing the Filter:

 

  • Click on Project -> New -> Extension

2. Select List Report Extension in the Template Selection tab and click Next button

3. In the Extension Settings tab select the one what do you want to extend among Filter, Action and Column. Here I have selected Action

4. Click Next and then Finish

New info action button in the table toolbar on clicking which we get the below output screen :

Below is the code for extension in manifest.json :

"extends": {
"extensions": {
	"sap.ui.viewExtensions": {
		"sap.suite.ui.generic.template.ListReport.view.ListReport": {
			"SmartFilterBarControlConfigurationExtension|Orders": {
				"className": "sap.ui.core.Fragment",
				"fragmentName": "com.demo.zcustom_listreport.ext.fragment.Customfilter",
				"type": "XML"
				}
			}
		}
	}
},

Below is the folder structure created. We will find a new ext folder inside which we have fragment folder containing Customfilter.fragment.xml file.

 

  • Below are the steps for customization done in List Report for Customizing the Columns:

 

  • Click on Project -> New -> Extension

2. Select List Report Extension in the Template Selection tab and click Next button

3. In the Extension Settings tab select the one what do you want to extend among Filter, Action and Column. Here I have selected Column.

4. Click Next and then Finish

We can see 2 new columns Custom Order ID and Attachment in the below output screen :

Below is the code for extension in manifest.json :

"extends": {
"extensions": {			
	"sap.ui.viewExtensions": {
		"sap.suite.ui.generic.template.ListReport.view.ListReport": {
			"ResponsiveTableColumnsExtension|Orders": {
				"type": "XML",
				"className": "sap.ui.core.Fragment",
				"fragmentName": "com.demo.zcustom_listreport.ext.view.Custom_Columns"
			},
			"ResponsiveTableCellsExtension|Orders": {
				"type": "XML",
				"className": "sap.ui.core.Fragment",
				"fragmentName":"com.demo.zcustom_listreport.ext.view.Custom_Columns_Cells"
			}
		}
	}
}
}

 

In the above code we have ResponsiveTableColumnsExtension & ResponsiveTableCellsExtension extension objects. In each of the extension objects we have one fragment Custom_Columns and Custom_Columns_Cells in view folder, each corresponding for columns and items control. For adding different columns we don’t have to add different extensions and different column fragments. We only need to add single fragment columns and items and inside this fragment only we will add multiple columns and item. Below are the screenshot of columns and items fragment containing 2 columns and items in it. We can see 2 columns in Custom_Columns.fragment.xml file

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">
	<Column id="ExtensionWizard::ColumnBreakout">
		<Text text="Custom Order ID"/>
		<customData>
			<core:CustomData key="p13nData" value='\{"columnKey": "Test1", "columnIndex" : "101"}'/>
		</customData>
	</Column>
	<Column id="ExtensionWizard::ColumnBreakoutA">
		<Text text="Attachment"/>
		<customData>
			<core:CustomData key="p13nData" value='\{"columnKey": "Test", "columnIndex" : "102"}'/>
		</customData>
	</Column>
</core:FragmentDefinition>

We can see 2 items in Custom_Columns_Cells fragments in below code. Text control for 1st custom column and Icon control for 2nd custom column.

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">
	<Text text="{OrderID}"></Text>
	<core:Icon src="sap-icon://add"></core:Icon>
</core:FragmentDefinition>

 

 

  • Object Page Extension options:
    • Facet
    • Action
    • Column
    • Form
    • Header
  • Facet :

Action : – Header

Action :- Section

Column :

Form :

Header :

We have more customizing option only for property using SAPUI5 Visual Editor. Right click on project and then click on SAPUI5 Visual Editor. Below are the steps :

Annotation for adding footer in List Report page :

<Annotation Term="UI.LineItem">
					<Collection>
						<Record Type="UI.DataFieldForAction">
							<PropertyValue Property="Label" String="Copy"/>
							<PropertyValue Property="Action" String="STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_ProductCopy"/>
							<PropertyValue Property="Determining" Bool="true"/>
							<Annotation Term="UI.InvocationGrouping" EnumMember="UI.OperationGroupingType/Isolated"/>
						</Record>
						<Record Type="UI.DataFieldForIntentBasedNavigation">
							<PropertyValue Property="Label" String="Manage Products (ST)"/>
							<PropertyValue Property="SemanticObject" String="EPMProduct"/>
							<PropertyValue Property="Action" String="manage_st"/>
							<PropertyValue Property="Determining" Bool="true"/>
						</Record>
					</Collection>
</Annotation>

 

This is how you can create your SAP Fiori Elements Application. To extend customize your application please following the above steps.

Yeah your application will be ready with the custom UI and Features..

Regards,

Ravikant Ranjan

Assigned Tags

      30 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Om Prakash Pathak
      Om Prakash Pathak

      Nice Blog..

      Very helpful for beginners in fiori element.

      Author's profile photo Ravikant Ranjan
      Ravikant Ranjan
      Blog Post Author

      Thank You

      Author's profile photo Ankit Garg
      Ankit Garg

      You have picked a latest topic. I really appreciate it.

      But Images are blurred, specially when developer wants to look at code.

      Author's profile photo Ravikant Ranjan
      Ravikant Ranjan
      Blog Post Author

      Hi Ankit,

      I have edited the blog and added the code where it was necessary.

      Author's profile photo Ankit Garg
      Ankit Garg

      Thanks Ravikant.

       

      try to use more cleaner screenshots for your next blog ? . All the best!

      Author's profile photo Wang Tao
      Wang Tao

      it's suit for me.thanks.

      Author's profile photo Ravikant Ranjan
      Ravikant Ranjan
      Blog Post Author

      Thank you

      Author's profile photo Jocelyn Dart
      Jocelyn Dart

      Thanks Ravikant! I've added this blog to the Fiori elements wiki

      Author's profile photo Ravikant Ranjan
      Ravikant Ranjan
      Blog Post Author

      Thank You Jocelyn !

      Author's profile photo Former Member
      Former Member

      Jocelyn I have access to a SAP ABAP PaaS system and when I look at new ways to handle the behaviour implementation I really get confuses how this all gels with the new programming model.

      Do we have any blog or video that clarifies the things

      Author's profile photo Thomas Arnold
      Thomas Arnold

      Do you know if we can extensions to make jquery/ajax calls.  We would need it update SAP B1.

      Author's profile photo Sarbjeet Singh
      Sarbjeet Singh

      Good work.

      Author's profile photo Ravikant Ranjan
      Ravikant Ranjan
      Blog Post Author

      Thanks Sarbjeet!

      Author's profile photo Syambabu Allu
      Syambabu Allu

      Easy to understand on Creating new and extension Fiori Elements.

      Thanks for sharing this!

      Thank you,

      Syam

      Author's profile photo Ravikant Ranjan
      Ravikant Ranjan
      Blog Post Author

      Thanks Shyambabu Allu

      Author's profile photo Vishal VK
      Vishal VK

      Hi Ravikant,

      Thanks a lot for the very informative blog on Fiori elements extensions. It is very helpful.

      I am facing an issue while adding custom columns to a table.

      In WebIDE, I followed the steps as per the Extension wizard to add custom columns.

      However, only the fragment for Custom Columns got created, and the fragment for Custom Column cells did not get created.

      Also in the manifest file, the code is only generated for ResponsiveTableColumnsExtension and not for ResponsiveTableCellsExtension.

      When I run the application as well, only the new column text is visible but there is no data in the table rows for the new column (as there is no code generated for it).

      Why does WebIDE not generate the code for the table cells?

      Could you please let me know how you were able to generate the fragment and the manifest code for the table cells?

      Thanks & Regards,

      Vishal V K

      Author's profile photo Ravikant Ranjan
      Ravikant Ranjan
      Blog Post Author

      Hello Vishal,

       

      Thanks and great to know that my blog is helping the people. Sorry for the late response. It is true that only the fragment for Custom Columns got created, and the fragment for Custom Column cells did not get created. I had to add the code and fragment for Custom Column cells manually. So will suggest you to do the same. As the framework didn't allowed to do so.

      Thanks,

      Ravikant

      Author's profile photo Chandu 17
      Chandu 17

      Hello Ravikanth,

      Great blog.It really helped me a lot for understanding SAP Fiori elements development.By following your blog i wanted to extend an Overview page.

      I am trying to extend and i am not getting extension templates not sure why.Request your help on this.

      Is this and Adaption project same.Is extension project for fiori elements is decommissioned as i am not getting any templates to extend my application.

      Please help me to understand how to take this forward.

       

      Regards,

      Chandu

      Author's profile photo Ravikant Ranjan
      Ravikant Ranjan
      Blog Post Author

      Hi Chandu,

       

      Thank you! You can extend the Overview Page in same way as i did for the List Report App. First create an Fiori Element Overview Page  project then right click on the project >> New >> Extension >> Click on Overview Page Extension Template as on below image

      Click Next and you will get the options for the extension highlighted with yellow.

      Hope this might help you.

      Thanks,

      Ravikant

      Author's profile photo Chandu 17
      Chandu 17

      Hello Ravikanth,

       

      As mentioned i am not getting extension templates not sure why.Request your help on this.

      Is there any configurations to be done.

       

      Regards,

      Chandu

      Author's profile photo Ravikant Ranjan
      Ravikant Ranjan
      Blog Post Author

      Hello Chandu,

      No configuration needs to be done for this. Can you please repeat the steps that i mentioned in your above comment and send me the screenshot as i had sent in reply to you.

       

      Regards,

      Ravikant

      Author's profile photo Chandu 17
      Chandu 17

      Hello Ravikanth,

       

      Please find attached screenshot.Please make a note i am trying to extend standard app

       

      When i clickon Extension project i am trying to select the app from Abap repository and getting below error

      Regards,

      Chandu

      Author's profile photo Aqib Jamil Pathan
      Aqib Jamil Pathan

      Hi! Ravikant,,

      It is indeed an excellent blog with clear step-by-step explanation.

      I am extending one standard FI fiori app which is based on UI5. Requirement is to hide one tab control. So accordingly i created extension project and made the changes. In the deployment process it will be deployed as a Z- object so that it does not overwrite the standard app. I can see the changes are done in manifest.json and if this extension project is run separately it reflects the changes.

      Issue is that after deployment i do not see the changes when the standard app is run in FLP.

      Can you provide some input as what could be an issue or be missed in the process?

      Thanks for your help.

      Regards,

      AQIB

      Author's profile photo Ravikant Ranjan
      Ravikant Ranjan
      Blog Post Author

      Hello Aqib,

       

      Please check the url for service path while adding the semantic object and the action. The url should be your BSP application path. Hope this might help you.

       

      Regards,

      Ravikant

      Author's profile photo Aqib Jamil Pathan
      Aqib Jamil Pathan

      Many Thanks, Ravikant for taking time to reply.

      I managed to find this within "Target Mapping". I was checking "Tile" configuration previously.

      Author's profile photo JAVIER RUBIO
      JAVIER RUBIO

      Hello Ravikant, and thanks for your blog.

      Do you know if I can enhance any Fiori Elements app by adding different models? so I can have different OData services defined in the Controller extension?

      Can I set up different models in same Facets?

       

      Thanks,

      Javier Rubio

      Author's profile photo pannag kanungo
      pannag kanungo

      Hi Ravikanta,

       

      Thank you for your excellent blog which you shared  for all  beginner and experience . please check your blog  because the visibility of screen is very fade . kindly look into it .  again i am telling you that your blog was very  help full for me .  god bless you .

       

       

      Thanks

      pannag

      Author's profile photo Ravikant Ranjan
      Ravikant Ranjan
      Blog Post Author

      Thank you Pannag. Next time I will take care of the clear screenshot visibility.

      Author's profile photo Dhananjay Hegde
      Dhananjay Hegde

      Very helpful post.  Was stuck with createing controller extension for object page from BAS.  somehow, the generated code from BAS is different than that generatd by Wedb IDE.

      if I used sap.ui.define() to define a controller and use Controller.extend(), my event handler method for press event not getting called.

      Your example screen shots helped.  I used sap.ui.controller() to define the controller and I could get access to this.extensionAPI as well within it.

      Thank you again

      Author's profile photo Ravikant Ranjan
      Ravikant Ranjan
      Blog Post Author

      Thank you Dhananjay. Happy to know that my blogs are helping peoples in the community.