SAP Fiori, the all-new UX from SAP offered a new opportunity for the SAP developers. Besides allowing unprecedented access to some of the most used SAP processes, this new UX strategy for the first time will allow focus on design more than anything else.
When usefulness and user engagement remains to be the primary driving factor for the majority of app development and design processes, this new UX strategy will address both these aspects of the SAP environment. The key value propositions of SAP Fiori are performance and speed, productivity and cost advantage.
Before offering some experience-driven tips for SAP Fiori developers let us familiarize ourselves with few of the guiding principles concerning SAP Fiori implementation.
Start from business objectives and business process
Fiori is delivered by SAP to add simplicity to your business apps and thus to elevate user experience. Thanks to Fiori apps the users can gain deeper access and engage with the business processes more. It is almost a reinvention of the business process with user-friendly apps. That sounds great and quite impressive. But the main challenge remains to implement this UX as a means to add value to the business process. This is why we are focusing here so intently on implementation part.
Fiori Development with a 5D Approach
5D approach consisting of Define, Discover, Design, Develop, and Deploy can play a really effective role in SAP Fiori development. Basically, this approach simplifies the entire process and helps to create focus areas.
Define: In this step, you can describe the objective, your target audience and desired impact from the app.
Discover: In this step, you need to find ways to simplify user experience and user interface to ensure usefulness and user satisfaction. To find out or discover such ways you can take other Fiori apps or case scenarios as the reference.
Design: In this step, you need to optimize user experience with design elements. You can create wireframes and introduce visual design elements, mock-ups, etc. You can follow some best app design principles or can consult users to make navigation, layout, typography, color scheme, and content flow look better and useful.
Develop: Now this is the execution step involving actual coding. In this step, you need to develop the workable version of the app and then allow integration with the back-end system.
Deploy: In this step, you will deploy your Fiori app after going through extensive unit and integration testing.
Useful development tips that helps to build robust apps
Finally, the journey of a developer with SAP Fiori app projects will invariably have some unique learning scopes. Let us offer below some useful tips from the developer’s point of view.
1) Know SAP Fiori design guidelines
Go to the website of SAP Fiori Design Guidelines and read it to understand the design principles that this UX strategy works upon. There are few design-oriented aspects that you need to remember.
- SAP Fiori design elements are not accidental by any means. All design attributes are deliberate in character.
- By making use of different design controls, patterns and filters you can achieve your desired design for the app.
2) In-depth knowledge of sap.m and sap.ui library is necessary
The Fiori developers of SAP were the first customers of the UI5 toolkit that includes a sap.m library with a range of controls. For the first few Fiori apps, these first batch of SAP internal developers used these controls for app design needs. For building clean and visually engaging apps they took the building blocks from this toolkit. Till date, this toolkit along with its sam.m library and controls offer a robust pool of tools for designing Fiori apps. Besides that, there are other useful libraries like sap.ui.layout.
- A Fiori app is designed by visual building blocks and they are only available at sap.m library. The letter’s’ stands for “mobile”, referring to controls for mobile-friendly responsive design.
- Another extensively used and helpful library is the sap.ui.layout library which offers grid controls to develop simple and engaging app layout.
- To know about the sap.m library controls go to the Explored app section in the UI5 SDK and the resource will give you a clear idea of how each control works with real app examples. You can also see the codes used in each case.
3) Understanding UI5 toolkit components and routing
Obviously, as a Fiori app developer, you would like to include your app in the Fiori Launchpad to allow navigation to your app from other Fiori apps. Without understanding and integrating the UI5 toolkit components and without routing, you cannot do that.
- UI5 components and routing allow outreach to other Fiori apps.
- With these two elements, you stand at par and on the same platform with other Fiori apps.
4) Get help through MVC and XML
MVC technically speaking is inseparable with Fiori development. There is a wide range of implications of an MVC based development approach and all of them are good.
- First of all, know how the app structure is built through invisible and some screen-sized controls. Then know-how within the structure various views relate to each other.
- Most of the lovable SAP Fiori apps used XML for producing definitive views of their apps. Through XML you can create declarative views in a crisp, efficient and clean way.
5) Manipulating both Chrome Developer Tools and UI5 Support Tool
In this new arena of SAP Fiori development, both Chrome Developer Tools along with UI5 Support Tool offer an excellent debugging option to ensure glitch-free app performance and speed.
- Chrome offers the most developer-friendly editing tools. Having this tool will take many of your concerns as far as meticulous monitoring and editing are concerned.
- Manipulating Chrome Developer tools with support tools of UI5 can ensure superb development and consistent debugging and trace features.
6) Gain expertise in data binding
Data binding is the specialty that allows frontend meeting the backend of an app. To master this skill set you need to focus on a few aspects. Let us have a look at them.
- Know the nuances in an object.
- Understand property and aggregation bindings.
- Understand and learn the intricacies of complex embedded binding syntax.
- Learn to specify factory functions, sorting, filtering, grouping, formatting, etc.
7) Learn from other Fiori apps
Finally, it can be revealed to study other Fiori apps and the design practices they adhered to. Though it may sound generic, it actually works as an eye-opener and helps you learn things that you cannot learn otherwise. Learning from existing app instances, you can gain insights on the best practices and the aspects that you still need to master. Often by looking at other people’s code, you come across solutions that were otherwise invisible.
