Fiori Elements- Extension and Customization- Step by Step

Introduction: SAP 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 1^st custom column and Icon control for 2^nd 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