 | Category: Extend/Develop |
This is a collaborative document to share lessons learned contents for Extending Fiori Apps in the community SAP Fiori.
Please feel free to insert the link of your document or blog by selecting the edit button from Actions. You can also search information and open a discussion if you can't find required information. Please don't forget to put the tag fiori.
| Search: | Google, Discussions, Documents, Blogs | Create: | Discussion, Document, Blog |
You can extend SAP Standard apps without modification. This helps TCO and software life cycle maintenance cost.
New and Updated:
- YYYY-MM-DD Please share your documents and blogs.
- 2015-06-03 An sample of My Opportunity application extension by Jerry Wang
- 2015-05-07 New SAP Fiori Design Guidelines Launched by Sabina Hitzler
- 2015-04-20 Extend Fiori UI5 Boilerplate with SAP Web IDE by HP Seitz
Extensibility:
- Go to SAP Web IDE for extending Fiori Apps. How to guides and recordings are available.
- New SAP Fiori Design Guidelines Launched by Sabina Hitzler
- Extensibility in help.sap.com
- Extensibility of SAP Fiori Apps by Clement Selvaraj
- Use Cases for Extending the UI of SAP Fiori Apps by Clement Selvaraj
- End-to-End SAP Fiori Extensibility Use Case by Clement Selvaraj
- Redefining OData Service with Gateway Service Builder for extending OData
- Extending a SAP HANA Live View | SCN by Marcus Behrens
- Extending Fiori Analytical Apps by Murali Shanmugham
Jerry's Extensibility Docs:
Jerry Wang has shared many extensibility examples. We can learn a lot of things from Jerry's documents.
- Jerry's Blogs and Documents
- An sample of My Opportunity application extension
- Implementation detail - how a field is hidden in runtime by view modification
- How to hide dynamically created UI fields via extension for My Opportunity application
- An example of End to End extension on CRM Fiori application - part1
- An example of End to End extension on CRM Fiori application - part2
- An example of End to End extension on CRM Fiori application - part3
- An example of End to End extension on CRM Fiori application - part4
- Step by step to expose Sales Office and Sales group to My Opportunity - in CRM Fiori application, there are two standard fields "SalesOffice" and "SalesGroup" which are not exposed to Fiori UI yet. This blog introduces how could customer expose these two fields using Extensibility technology.
- How to remove the blue background color of Edit button in footer toolbar - The standard button in footer bar has default background color, for example, Edit button has blue color. Some customer does not like this default color and would like to remove it. This blog introduces how to remove. And it is also feasible to change the default color to other color. See this blog How to change the background color of button in Footer area for detail.
- How to find UI element binding path which is not statically defined in XML view
- Step by Step to consume HANA Query view in CRM Fiori
Jerry's blogs regarding Smart Template
You can use smart templates to create SAP Fiori applications based on OData services and annotations requiring no JavaScript UI coding. An application based on smart templates uses predefined template views and controllers that are provided centrally, so no application-specific view instances are required. The SAPUI5 runtime interprets metadata and annotations of the underlying OData service and uses the corresponding views for the SAP Fiori app at startup.
For example, so far ( 2016 April ) there is no standard Fiori application delivered for Service professional role in CRM area by SAP. With the help of Smart Template, it is easy for you to build a Fiori application which can manipulate Service Order create, update, read and search without JavaScript coding in frontend. The only necessary knowledge to achieve this is: ABAP + WebIDE + CDS view + a little knowledge about Smart template.
Here below are blogs from Jerry about how to build a service order application using Smart Template.
- Create a CRM Service Order Fiori application within a couple of minutes - this blog works as the beginning part: only service order read and search are implemented
- Enable CRM Service Order application with edit functionality - the application is enhanced with update function
- Enable CRM Service Order application with create functionality - the part about how to implement service order creation is introduced
Meanwhile SAP has already delivered several reference application built by Smart Template to prove its power. You can play with those reference application from this link.
As mentioned previously, most of the development task working under Smart Template is now in CDS view. As a beginner who knows nothing about CDS view before, Jerry has written a series of CDS self study tutorials consisting of 8 parts, trying to introduce some logic occurring under the hood to gain a better understanding about this technology. This tutorial also contains debugging tips which are useful for trouble shooting. You can find the first part of this tutorial from here.
Fiori standard Control and Custom Control
If the default controls could not fulfill your requirement, it is possible to create custom control on your own. Please refer to How to create custom control from scratch from Angel Puertas for detail.
But before that, do you really understand how a simple control like button is designed and implemented in Fiori? Here is a tutorial using the most simple control, Button, as example to give you a 360 degree view on Fiori control.
- Part1 - UI5 Module lazy load mechanism
- Part2 - Control renderer
- Part3 - Html native event VS UI5 semantic event
- Part4 - Control metadata
- Part5 - Control instance data - how are function setXXX() and getXXX() implemented
- Part6 - Control data binding under the hood
- Part7 - Implementations for different binding mode: OneWay, TwoWay, OneTime
- Part8 - Control ID
- Part9 - Control internationalization support
- Part10 - Button control in XML view
- Part11 - Button control and its underlying DOM
It helps you to build better Fiori application if you knows those control essentials.
My Inbox Extensibility:
Extending OData:
- For Extending OData service, please look at the documents in the SAP Fiori - OData/Gateway.
Extending UI:
- SAP Web IDE - Extend Applications.
- HOW TO ENABLE MULTI-ORIGIN CAPABILITY IN SAP FIORI APPS by Ashish Singh
- How to handle dynamic date formats in Fiori as per SU01/SU3 user defaults by Varun Reddy
- Extending a Fiori App - Simple Use case - Part 1 by Murali Shanmugham
- Extending a Fiori App - Simple Use case - Part 2 by Murali Shanmugham
- Extending a Fiori App - Simple Use case - Part 3 by Murali Shanmugham
- Fiori Extension - Reuse OData/UI components - Part 1 by Murali Shanmugham
- Fiori Extension - Reuse OData/UI components - Part 2 by Murali Shanmugham
- Extend SAP Fiori application leveraging SAP River Rapid Development Environment in 10 minutes by Frank Schuler
Extending Fact Sheets, Analytical Apps:
- Extending a SAP HANA Live View | SCN by Marcus Behrens
- Extending HANA Live Views by Vivek Singh Bhoj
Archive:
| Brought to you by the SAP Technology RIG |