This is just a short intro into the finer details of making a SAP UI 5 app that will run in LaunchPad. More details to follow but first I'd like to make it clear what we mean by custom Fiori Apps.
SAP Fiori apps are a collection of Standard SAP Developed Applications that conform to the Fiori User Experience Paradigm. Sure, if you know all the rules, you can create custom SAPUI5 apps that are identical to SAP delivered apps in terms of look and feel, but such apps should be described as “Fiori-like” apps. Even if you successfully create a custom app that looks and behaves like a Fiori app it won’t necessarily run in Fiori Launchpad unless you have followed the Fiori Launchpad development requirements. So I am going to outline the basics for you.
Fiori LaunchPad App Development Requirements
This is not a comprehensive list, but will give you the minimal rules to follow.
Do not use "global" anything
When apps are started by the Fiori Launchpad (FLP) they are loaded as child objects into the FLP’s context. The FLP acts as a shell and with the exception of Web pages (.html launches) all the apps it launches run in the same window or tab in the browser. Therefore, all the apps share the same JavaScript window object. This is the object used by JavaScript to hold global variables; therefore, the possibility of your data becoming corrupted by some other app is increased.
The same goes for the Global Event Bus: use a Router instead (This will be covered in detail in a subsequent post). If you raise an event on the Global Event Bus, you cannot guarantee that the event name is not shared by some other app active within the FLP.
Finally, do not define a model belonging to sap.ui.core. In order to ensure separation of concerns, all models should be defnied as belonging to the UI Component instead. We'll cover the UI component shortly…
Use XML views
The first view referenced by your UI Component must be an XML view. Irrespective of whether it is an App View or a SplitApp view, it needs to be defined using XML. (NB: This is not longer the case, JavaScript Defined Views will work in LaunchPad. Kudos to kedarnath.tingikar for validating this. However it is still considered good practice to use XML for use with the WYSIWYG Editor). The use of XML views is being adopted by SAP since this is a necessary prerequisite for the upcoming WYSYWIG view editor in the SAP WEB IDE tool.
Minimum Requirements to get the App working in LaunchPad
This is not all you need, but is the minimum required to get a basic app working in the Fiori LaunchPad context.
Component.js
Even though it is possible to write a stand-alone SAPUI5 app without a Component.js file, if you want the FLP to be able to start your app, then this file must be present.
If you configure the FLP to launch your app from an index.html file, the app will load – but in a new window and will not be navigable from the FLP shell. Below is a minimal example of a Component.js file.
For a full description of how to define your UI Component please have a look at the SAP UI5 Application Best Practices.
jQuery.sap.declare("your.namespace.Component");
sap.ui.core.UIComponent.extend("your.namespace.Component", {
createContent : function() {
// create root view
this.view = sap.ui.view({
id : "app",
viewName : "your.namespace.view.App",
type : sap.ui.core.mvc.ViewType.XML,
viewData : { component : this }
});
return this.view;
}
});
Component-preload.js
The purpose of this file is to preload custom JavaScript prototypes or prototype extensions that are used in the app. This is done mainly for performances reasons but can also be used for configuration such as configuring the path for a namespace. A custom Router for instance can be defined in this file.
Upload and Configure Your App with SAP Netweaver Gateway
So assuming you now have a basic SAPUI5 app with a Component.js and Component-preload.js in the root folder of your app. You have tested out the app by starting it from within an index.html file and now want to deploy it to a Netweaver Gateway server. Here are the high level steps required to upload and configure the app on the FLP.
- Log on the the Gateway Server and use ABAP report /UI5/UI5_REPOSITORY_LOAD to upload the SAPUI5 Application as a BSP Application (You can also use the Team Share eclipse plugin as well).
WARNING FOR USERS OF GATEWAY SYSTEMS LESS THAN SP8
If you have Gateway Service Pack 8 installed, then this warning can be ignored.
By default, UNIX and Mac OS X systems use only the Line Feed character (0x0A) as the new line identifier, but Windows systems use a Carriage Return followed by a Line Feed as the new line identifier (0x0D0A)
For Gateway SP7 or earlier system you cannot upload files that do not use the Windows new line identifier. Therefore, if you develop your web app on a UNIX or Mac OS X machine, then you must take care to save all your files using Windows carriage return characters (0x0D0A). - Create a Launchpad Role in LPD_CUST transaction for your application
- Create a Semantic Object in /UI2/SEMOBJ transaction
- Create a Catalog, Group, Target Mapping and a Static tile for your App
- Create a PFCG role for your Catalog and Group and assign to users
You can find out all the details in this document posted by my college Babu in How To Deploy an SAPUI5 App On Fiori Launchpad
As I said, more to come! I will follow up this blog with other topics like:
Using Custom Routers Instead of the Global Event Bus
Converting your JS view to an XML view
Design Considerations when Embedding your App into Kapsel
Etc.
Any requests for SAP UI 5, Fiori Like, LaunchPad, Mobile type topics are welcome.
Regards
Craig
