Introduction

It’s easy to adopt SAP Fiori and integrate onto your existing SAP landscape. Speed up SAP Fiori adoption and ensure a successful implementation – Enjoy a whole new user experience that is personalized, responsive, and simple and achieve a faster time-to-value This blog emphasizes on how SAP Fiori can simplify the lives of business users and IT staff and how to improve productivity. Here are 6 simple steps that allows you to kick start your SAP Fiori journey.

SAP Fiori Implementation and Development

Step 1: Focus on SAP Fiori Design Guidelines:

The existing standard SAP Fiori apps are not created just like any other native apps, the user experience designers have followed a certain design principles and guidelines to make it a successful UX product. So, as a developer you have to concentrate on this part primarily and stick fast to the responsive design that allows users to experience the apps across all device types irrespective of its screen size. You can study the contents from this website SAP Fiori Design Guidelines. These guidelines provide you an overview of basics of Fiori, different types of templates used, design patterns and user interface (UI) elements and controls. SAP Fiori Implementation and Development, When you understand these concepts, you can start designing Fiori apps on your own by downloading design stencils and SAP icon fonts

Step 2: Get to know SAP UI5:

Now you know what UI elements and controls are used to develop SAP Fiori apps. SAP Fiori applications are built with SAPUI5 controls using “sap.m” and “sap.ui.layout” libraries. The only difference is SAP Fiori apps follow consistent design patterns and assure high level of quality. You can learn about this library at  sap.m library. As a developer, SAP Fiori Implementation and Development you have to know few coding techniques to customize your app according to the end user needs. There are 4 important technical concepts you will need to focus on to develop SAP Fiori apps. Here is the list

• HTML, CSS, JavaScript and XML
• MVC Concept
• Data Binding – OData Services
• Component and Routing ConceptThese mark-up and scripting languages are mandatory to code and create Fiori apps from scratch. If you are well-versed in these languages and UI5 controls, then it’s going to be very easy for you to create Fiori apps. I would recommend you to concentrate more on XML, because all standard Fiori apps views are structured using XML. Once you start using it, you will understand why developers had chosen XML to define the views in standard Fiori appsModel-View-Controller concept is used to separate the portrayal of information from the user interaction, this will help you to understand how to build the skeleton of an app with UI5 controls and how data changes are reflected in the server within a fraction of seconds. Data Binding is to bind two sources together and keep them in sync. This concept is most important and you can perform lot of things through essential coding in controllers using binding techniques. This includes how to specify sorting, filtering, grouping, formatting and factory functions. OData plays a vital role in developing SAP Fiori apps as we will use this as a web service to fetch data from the server.Component consists of component.js file usually called as component controller and manifest.json file known as descriptor. Fiori apps are self-contained apps and each component has its own routing definitions and are mostly defined under component.js file. Routing is required when you add your app to SAP Fiori Launchpad. When you want to navigate from one Fiori app to another Fiori app or navigate between two different views, you need to be strong in routing concept to define proper navigation syntax.Read these concepts from UI5 development toolkit. This will help you develop simple and responsive SAP Fiori apps.

Step 3: Study existing Standard SAP Fiori apps from Fiori app Library:

Before you start developing your own SAP Fiori apps, it is always better to study the existing ones. Go to the link Fiori app library. Here, you can see more than 900+ SAP Fiori standard apps along with the app details. These apps are separated based on the application types – Transactional, Analytical, Factsheet, Web Dynpro and Design Studio Study each and every app – Try to Understand the Fiori app design with the screenshot provided and also see what components are required to deploy the app to launchpad. You can also refer to the ready-to-use templates available with SAP Web IDE which gives you complete picture on
Study each and every app – Try to Understand the Fiori app design with the screenshot provided and also see what components are required to deploy the app to launchpad. You can also refer to the ready-to-use templates available with SAP Web IDE which gives you complete picture on master-detail app, full-screen view app and other types used in Fiori.

Try to understand standard Fiori app code and use it if required. You can download the standard sap Fiori app code from SAP GUI and save it to your local system. Open the downloaded app and look how Fiori developers have coded without violating the design principles. You maynot understand some code, but don’t be worried, its just a start and you will understand it sooner when you code it either the same way or choose to another way

Step 4: Try deploying Standard SAP Fiori apps to SAP Fiori Launchpad:

The best way to learn is practising. When you can understand how the Fiori apps are structured, you have to focus on deploying the standard Fiori apps to SAP Fiori Launchpad. To do this, you have to
learn the following topics in detail:

• Learn to check the availability of Front-end and Back-end components.
• Activate app-specific SAPUI5 application – Refer to the App Implementation documentation eg. For Create Sales Order App Implementation – Create sales order
• Activate app-specific OData Services.
• Enable App Access in SAP Fiori Launchpad – Assign technical and business catalog roles using“PFCG” T-code in SAP GUI.
• Assign role to users with OData authorizations to fetch data from the backend.
• Create your own launchpad and add the BSP application to itWatch this video to easily understand the implementation and deployment of SAP Fiori App –How to add standard Fiori App to Launchpad?If you are the basis administrator, you need to gather information on how to work with Launchpad Designer Tool. With this tool, you can create custom catalogs and groups, add tiles to your catalogs, add target mappings to the app tiles. Refer to this video: How to use Launchpad Design Tool? These two videos can help you deploy SAP standard Fiori apps to the SAP Fiori Launchpad. This would be a great start and you will get to know more information about Fiori apps implementation and deployment.

Step 5 : Start Developing SAP Fiori Custom apps from scratch or edit existing standard code:

Once you have learned how to deploy standard Fiori apps, you can now jump on to developing custom Fiori apps.

You can develop custom Fiori apps by using the developing environment Eclipse IDE or SAP Web IDE.

With Eclipse IDE, you can develop your custom app by importing the downloaded standard code and make changes as per end user’s requirements. You can run the app on web browser and see if changes are reflected just like UI5 application. Once you are done with changes, you can deploy the customized Fiori app to the launchpad.

Use this link and follow the steps to deploy the Fiori app – How to deploy UI5 app/customized Fiori app to launchpad?

SAP Web IDE provides you with standard ready-to-use templates which reduces your work in designing the app from the scratch. With SAP Web IDE, you can also import the app from ABAP repository or local system and make changes using layout editor or code editor. You can preview the app and deploy it. Refer to this video an Creating and customizing an SAP Fiori app.

I suggest you to use SAP Web IDE instead of eclipse IDE, because SAP Web IDE has lot of things like ready-to-use templates and mock data in it. To a starter, this would be a comfortable environment to get a good practice in implementation and deployment of Fiori application.

Step 6: Learn Troubleshooting SAP Fiori Apps:

When you are developing apps, you must also know some troubleshooting techniques to face the challenges during development and bring the output. If you are using “Google chrome” as web browser, then you can use the “Developer Tools” or “Ctrl+Shift+I” to know where the issue persists exactly. Go to the console tab to see the logs displayed when the app is running and if the app stops somewhere, the log displays the error message. With this, you can identify what is missing in coding and you can edit the app later. If the error is related to gateway, you can check in SAP GUI. Open the t-code /n/IWFND/ERROR_LOG and check the “Error log” screen and try to rectify it.

To learn all the techniques related to troubleshooting SAP Fiori Apps, refer to this link Troubleshooting SAP Fiori Apps.

Conclusion

After reading through the above steps, you will get an overview on SAP Fiori and how enterprises leverage Fiori to achieve maximum benefit out of it. I hope the above article helps you to connect. You can also learn about the configuration steps in Fiori Launchpad here, this will help you to add or manage groups, catalogs, maintain specific tiles for your users.

Feel free to follow up or raise any doubts regarding SAP Fiori functional or technical aspects. You can also read more about Mobolutions, SAP Partner, at http://www.mobolutions.com/where we specialize in Fiori implementation and deployment of standard and custom Fiori apps. You can also connect with us on LinkedIn