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 Kedar 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.

  1. 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).

  2. Create a Launchpad Role in LPD_CUST transaction for your application
  3. Create a Semantic Object in /UI2/SEMOBJ transaction
  4. Create a Catalog, Group, Target Mapping and a Static tile for your App
  5. 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

To report this post you need to login first.

15 Comments

You must be Logged on to comment or reply to a post.

  1. Matt Harding

    Hi Craig,

    Great to see some content about this as I was a bit blown away by the best practices app with a lot of configuration without any documentation, and your example is minimal, but nice and clear (though more comprehensive doco around this and more complex dynamic Fiori Launchpad tiles would be good).

    A couple of questions come to mind though:

    1.What does the Component-preload.js actually look like. I see the failure in custom UI5 apps and have seen reference to internal precompilers that generate this within SAP, but don’t know what goes into making it myself (since it’s a 404 error that can’t be cached)

    2. Is there any restriction to where you host the UI5 code? e.g. Can I load it to a web server rather than uploaded into a BSP app (effectively)? It looks like it should be fine but just to be sure…

    Cheers,

    Matt

    (0) 
    1. Craig Haworth Post author

      Hi Matt,

      The Component-preload.js file could just be an empty file and its not mandatory for the app to work. UIComponent automatically tries to load the preload file so if its not there you will see a 404 not found in logs, but the app will still function. In the OOB fiori apps this file is home to many prototype extensions and definitions that are used by that fiori app for example the Router prototype extension definition for custom routers. You can for now just create an empty file to get rid of the error, but you can use this file for any custom JS prototypes or requires or config your app needs.

      You can run a Fiori Like app in any webserver but you would have to create a .html file that loads the component.js and places it in the body, however this app wont run in Launchpad primarily because Launchpad will look at the BSP repo for the component.js and secondly if your app is using NWGW odata services you’ll get CORS errors and will have to proxy the services. There is however nothing stopping you from creating a .html launchpad target for your app running on another server and this will launch from launchpad but wont run in the Launchpad shell. It will load as a standalone app in another window or tab.

      Regards

      Craig

      (0) 
      1. Matt Harding

        Thanks Craig.

        For 1 – If it’s just jQuery.sap.require statements, then sounds good to me, and will throw my custom objects into it and see what it does.

        For 2 – The Web server in this scenario would also be handling the reverse proxy, but would allow much better/or maybe easier control of caching (and the like) of files, not to mention getting some load away from the SAP server. That said, if it means we lose the ability to stop lots of new windows opening up, and no navigation back to the launchpad, it sounds like the only way to go (for now) is to use the code in the BSP Repository. Que Sera…

        Cheers,

        Matt

        (0) 
        1. Craig Haworth Post author

          Hey Matt,

          As suspected you will get CORS errors e.g. Component.js performs an AJAX call to get Component-preload.js.

          Regards

          Craig

          (0) 
          1. Matt Harding

            Appreciate you getting back to me Craig.  Just to disagree however, provided both the Fiori Launchpad and your app appear under the same FQDN (which is what the Reverse Proxy will do), you won’t have any CORS errors since the AJAX call is initiated from the browser, but regardless of this, after putting 1 and 1 together and realising that a fully Fiori Launchpad integrated Fiori-like app leverages runs within the same application instance and hence the same SAPUI5 resources (and associated version); plus the Fiori Launchpad version of SAPUI5 is dependent on support pack stack; I’m now recommending at my customer we just install the App on the Gateway server anyway (where the Fiori Launchpad resides).

            I also recommended we apply the latest SPS so that we get all the latest controls/design/etc which have been used in our Apps, not realising there was a SAPUI5/NetWeaver Support Pack Stack dependency when using apps integrated with Fiori Launchpad (of course non-integrated can allow multiple SAPUI5 versions, but that’s not great for the browser to load up 2 UI5 versions .


            Hopefully in the future, we’ll be able to point the Fiori Launchpad at the latest SAPUI5 libraries that we can host anywhere like Apache, with support from SAP without requiring a Support Pack Stack which, on 7.4 requires you to also update Gateway, which in turn, will require you to patch your ERP which is the hardest to get a CAB approved for.

            Cheers,

            Matt

            (0) 
            1. DJ Adams

              Interesting post and debate!

              Regarding the main question you posed about where the UI5 (application) code can be hosted, I think there are subtle sub-parts that thought worth teasing out, because one part hasn’t been explicitly covered in the comments exchange. (Forgive me for stating the obvious in what comes, but I wanted to go step by step).

              Hosting UI5 Components on separate servers is certainly possible, and also achievable (i.e. avoiding the CORS issues) via reverse proxies as already covered.

              A UI5 app consists of appcode and the UI5 runtime. A remotely hosted Component, in my mind, is “just” the appcode. I’m thinking perhaps what Matt was implying is that it’s a Component that’s not only hosted remotely, but developed and maintained “over there” too. In this case, the remote developers would of course need a UI5 runtime to test it, etc. But this UI5 runtime might be at a different version from the UI5 version on the NetWeaver stack hosting the frontend services. Which is a risk, of course.

              On the question of whether the Components within a Fiori Launchpad (FLP) must be served from the same server (BSP) or not, in my experience this is not a requirement; the configuration of the Launchpad allows you to specify the resource address, i.e. the full URL, of the Component, which can be anywhere.

              When the remotely hosted app (Component) resource is retrieved and embedded into the FLP of course, it becomes part of the FLP HTML5 page, which means a single bootstrapped UI5 runtime. In other words, the remotely hosted Component-based app doesn’t execute with its own UI5 runtime (as might be the case in an iView/iFrame scenario of yore).

              Anyway that was just a bit of a ramble from me, tired at the end of a long week on the train back from Bristol from Manchester, so definitely caveat lector.

              (0) 
  2. Kedar Tingikar

    Hi Craig,

    Great blog, gives good information and would like to let you know that I was able to deploy UI5 application built completely in Javascript.

    Regards,

    Kedar

    (0) 
    1. PARTH BUDHIRAJA

      Hi Kedar

      Is there anything out of the box we have to do to make our app running with Javascript views in FLP? Or it’s just we we have to code as usual and deploy the app?


      Regards

      Parth

      (0) 
  3. Nishant Tomar

    Hi Craig,

    Nice blog. I followed all the things mentioned in your blog and my app is running perfectly in Fiori launchpad. But the google maps library I added on my index.html in the head section is not loading. I am getting error “google is not defined” and I’m unable to resolve this issue. Can you guide me how add this external library to my app so that it is recognised.

    Thanks & Regards

    Nishant Tomar

    (0) 
    1. Craig Haworth Post author

      Yip you will need to add these dependencies or external resources in your Component.js.

      Example.

      sap.ui.core.UIComponent.extend(“Your Base Component”, {

           metadata : {

                     name: “”,

                     version: “”,

                     includes: [“your js / css resources”],

                     dependencies: {

                               libs: [ UI 5 Core Libs go here ]

      ……..

      At runtime the includes are added to the host html file (in this case FioriLaunchPad.html) and resources are loaded relative to the Component.js file path.

      e.g.

      “css/approvePOStyle.css”

      will be loaded from the css sub folder relative to the folder Component.js residing in in the BSP repo.

      (0) 
        1. Craig Haworth Post author

          Ok, I see the issue, since you cant incorporate the script into the BSP repo you will need to load the library dynamically.

          I am not sure if this is the best approach but try using

          $.ajax({

                          url: “https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true“,

                          dataType: “script”,

                          success: function() { window.alert(“maps loaded”); }

                      });

          int the Component.js init function

          (0) 
          1. Nishant Tomar

            I tried this but it does not solves the problem.

            I tried another method and its running but after this the map is behaving abnormally. I am attaching the screenshots for my method below

            screen.PNG

            And for map element in the detail controller

            Screen1.PNG

            Error I am getting is:

            You have included the Google Maps API multiple times on this page. This may cause unexpected errors

            (0) 
  4. PARTH BUDHIRAJA

    Hi Craig

    Is there anything out of the box we have to do to make our app running with Javascript views in FLP? Or it’s just we we have to code as usual and deploy the app?

    Cheers

    Parth

    (0) 

Leave a Reply