Technical Articles
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) :
- Reuse functionality that does not require specific programming.
- A common look and feel and UI behavior for all apps.
- Message handling.
- SAP Fiori launchpad integration.
- Control of the UI using OData annotations.
- Multi-device support.
- Status colors and icons to indicate criticality.
- Header facets to define which information is displayed in the header.
- Value help with Smart filters.
- 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:
- 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:
- 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
Nice Blog..
Very helpful for beginners in fiori element.
Thank You
You have picked a latest topic. I really appreciate it.
But Images are blurred, specially when developer wants to look at code.
Hi Ankit,
I have edited the blog and added the code where it was necessary.
Thanks Ravikant.
try to use more cleaner screenshots for your next blog ? . All the best!
it's suit for me.thanks.
Thank you
Thanks Ravikant! I've added this blog to the Fiori elements wiki
Thank You Jocelyn !
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
Do you know if we can extensions to make jquery/ajax calls. We would need it update SAP B1.
Good work.
Thanks Sarbjeet!
Easy to understand on Creating new and extension Fiori Elements.
Thanks for sharing this!
Thank you,
Syam
Thanks Shyambabu Allu
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
Many Thanks, Ravikant for taking time to reply.
I managed to find this within "Target Mapping". I was checking "Tile" configuration previously.
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
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
Thank you Pannag. Next time I will take care of the clear screenshot visibility.
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
Thank you Dhananjay. Happy to know that my blogs are helping peoples in the community.