How to achieve fullscreen layout for a custom UI5 app launching within Fiori?

[Former Member]

Hi Fiori and UI5 Gurus,

I've just successfully built a fullscreen UI5 application and tested it locally on my Tomcat server with custom ODATA services and it works great.

To make my application run in fullscreen mode I've used method setAppWidthLimited to false in my sap.m.Shell object.

I've uploaded my application into our Fiori launchpad and created a custom tile which works a treat.

The issue occurs when I launch the app from the Fiori Launchpad it becomes letterboxed and my sap.m.Shell object is not in the UI5 control tree.  I'm wondering if there's some something in place preventing me from doing this.

Based on http://experience.sap.com/fiori-design/floorplans/full-screen/ it would seem to me that building these sorts of apps to launch from Fiori would be acceptable.

I don't know if it helps but we are on UI5 version 1.26.1 and we are about to enter UAT so upgrading to the latest 1.28.x is not a viable option until after we go-live and start a new project phase.

Any ideas?

Thanks,

Regards,

Ben

[Former Member · Accepted solution]

Ah I just stumbled across this: http://scn.sap.com/docs/DOC-57363

After reading this document I just realised my sap.m.Shell is being created in index.html which is not loaded at runtime if I run the app from the launchpad.

I built this up according to the UI5 Application Best Practices - but this would make sense for a stand alone app but not for one running out of Fiori.

<script id="sap-ui-bootstrap"
  src="/path/to/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.m"
  data-sap-ui-theme="sap_bluecrystal"
  data-sap-ui-xx-bindingSyntax="complex"
  data-sap-ui-resourceroots='{
  "sap.ui.demo.tdg": "./"
  }'>
   </script>

   <script>
  sap.ui.getCore().attachInit(function() {
   new sap.m.Shell({
  app: new sap.ui.core.ComponentContainer({
  height : "100%",
  name : "sap.ui.demo.tdg"
   })
   }).placeAt("content");
   });
   </script>

Obviously I will need to rearrange some parts of my program to get this working.  I will post a solution once I work it out.  If anyone else has done this I'd appreciate the extra help.

Thanks!

Regards,

Ben

[Former Member · Accepted solution]

OK Fiori devs - I've managed to solve this one with the help of SAP.

So firstly to recap, my objective: Run a custom UI5 app from the Fiori Launchpad as a full-screen application (or rather not in Letterbox mode).

Modify my UI5 app to utilise component.js

Utilising Component.js - if it isn't you'll need to convert it over.  Within Component.js you'll need to set the fullWidth property.  Here is an example of my code at the start of Component.js

sap.ui.core.UIComponent.extend("zwdainplace.Component", {
  metadata : {
         name : "SAP UI5 Custom Fullscreen Application",
         version : "1.0",
         includes : [],
         dependencies : {
             libs : ["sap.m", "sap.ui.layout"],
             components : []
         },
     rootView : {
      viewName : "zcustom_ui5_app.view.App",
      type : "JS"
     },
  config : {
  fullWidth : true, //Set your fullscreen parameter here!
  serviceConfig : {
      name : "EXAMPLE_ODATA_SERVICE",
      serviceUrl : "/sap/opu/odata/sap/Z_MY_CUSTOM_ODATA_SERVICE"
  }
  },
  routing: {

     }
  },

If you're not sure how to set up your Component.js file, the UI5 Developer Guide has a great example you can work through.

Double check your tile laucnhing your custom UI5 app is setup correctly!

Next up, you'll need to make sure that you've setup your tile configuration and target mappings correctly in Fiori.  I made a royal mistake by missing the "Additional Information" = SAPUI5.Component in transaction lpd_cust.  Once I had populated it with my UI5 app, the Launchpad would directly launch from Component.js and ignore my index.html file which is the correct behaviour I was after.

More information can be had here if you're not sure how to setup your own custom Fiori application tiles.

It worked! - After converting my custom UI5 application to use Component.js and setting up my Fiori config to utilise this I was able to achieve a fullscreen custom UI5 to launch from SAP Fiori.

If you want more information on setting up custom UI5 applications to be ready for Fiori Launchpad, there's a good article here:

My view is not an XML view in the above example... but I just wanted to see if JS views worked and they did!

A further search on fullWidth turned up other discussions which may help you too:

Hope this helps if you're looking at making your custom UI5 application fullscreen within SAP Fiori Launchpad.

Regards,

Ben

[pan_jittibophit2 · Accepted solution]

Thanks for the information and great work Ben!!

Hope you are doing very well

Pan

[Former Member · Accepted solution]

Good to hear from you Pan!  Thanks for letting me know this post helped.  I'd love to hear how you're UI5 journey is going.  Hope we get to speak soon.

Regards,

Ben

[Former Member]

Hi Benjamin,

Thanks for the steps. I have tried all the steps as mentioned, but was not able to acheive the full screen.

1. fullwdith : true in component.js

2. lpd_cust:

Additional information:

SAPUI5.Component=BillingException

Attaching files I am working on. Kindly check.

index_ben.txt.zip

component_ben.txt.zip

[pan_jittibophit2]

Hi Aparajitha,

Can you please make sure fullWidth is under metadata -> config not metadata -> Routing -> config?

metadata: {

     config: {

          fullWidth : true

     }

}

Hope this helps.

Pan

[Former Member]

Thanks Pan. Its working.

I have added it as separate entity. Now its working.

Corrected code:

metadata:{

  config : { 

   fullWidth : true, //Set your fullscreen parameter here! 

   serviceConfig : {} 

   }, 

  routing: {

  config: {

  fullWidth : true, //Set your fullscreen parameter here! 

  routerClass: A.MyRouter,

  viewType: "XML",

  viewPath: "A.view",

  targetControl: "idApp",

  clearTarget: false

  },

  routes:[

        {

          pattern:"",

          name:"A",

          view: "A",

          targetAggregation:"pages"

         }

      ]

  }

  },