Skip to Content
Technical Articles

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

25 Comments
You must be Logged on to comment or reply to a post.
  • You have picked a latest topic. I really appreciate it.

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

  • 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

    • 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

  • 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

    • 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

  • 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

    • 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

  • 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

  • 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

    • 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