An alternative method to launching HTML applications (SAP GUI, Webdynpro) within the Fiori Launchpad

There are two great guides to solve this problem on SCN and they may suit your requirements better.  Before you proceed take note that there are considerations you need to take into account with each option.

Important! Before we begin let me state that none of these solutions are mobile compatible.  If you do access Fiori via different devices remember to set your tiles to not display these transactions on mobile devices in the Fiori Tile Administration!

Option 1:

How to Launch Web Dynpro ABAP and SAP GUI for HTML Application Types from the SAP Fiori Launchpad by Jennifer Cha – A great solution if you want a simple approach with SAP GUI and Webdynpro applications opening in a new window.

Option 2:

Launch ECC transactions/WD page in Fiori Launchpad window by Harinder Singh – An alternative way to launch your SAP GUI and Webdynpro applications within Fiori.  Take note after some additional analysis there maybe some complexity with transporting hostnames across dev, QA or production environments. Also if you want to use the full width of your screen beyond the Fiori letterboxing you are not able to.

Another option is to try my method I devised by building a custom UI5 application.  Here is an explanation as to how the application was designed and structured.  You may be able to tailor, improve it for your own purposes.  If you do, please share your results as I’m sure it will be better than my solution.

My Requirements for launching HTML applications within the Fiori Launchpad

What I needed was:

• Be able to launch different HTML applications including:
  • SAP GUI
  • Webdynpro
  • Business Objects Web Intelligence reports (I did make the recommendation that WEBI users should use BO Launchpad instead, but another story for another day)
  • Any other HTML page based on a url.
  • Note: I was also able to get SuccessFactors launched but given this was another consultant’s solution I have withheld the code.  This solution however should be enough for you to develop your own solution for SuccessFactors.
• Run these transactions inside Fiori, to the full width of the screen as per the Fiori Design Guidelines. This would be important for larger SAP GUI transactions or Webi Reports.
• Have these transactions mirror the appropriate development, quality and production environments.
• New tiles would need to be easily maintained using the Fiori Administration tool.

This would allow the organization to switch all users over from NWBC to the Fiori Launchpad and simplify the SAP technology architecture.

Design of my custom UI5 wrapper application

The UI5 controller would read the Parameters field in the Fiori Tile settings with the following information stored in the following format:

          sys=[insert value]&typ=[insert value]&app=[insert value]

• The source system “sys”.  Examples:

               ‘ERP’ for the ERP system

               ‘BOB’ for the Business Objects system

               ‘GWY’ for the Gateway system

• The application type “typ”.  Examples:

               ‘WDA’ for Webdynpro

               ‘GUI’ for SAP GUI

               ‘BOB’ for the Business Objects Webi Reports.

• The application name “app”.  Examples:

               ‘ZTESTWEBDYNPRO’ (The Webdynpro application you call in it’s URL)

               ‘ME23N’ (The SAP GUI transaction).

               [A business objects GUID] (You can find this in the Webi report properties)

Based on this information from the tile administration the controller would then build the URL as if you were accessing a SAPGUI, Webdynpro or Business Objects Webi directly in normal use.  I would then take this generated URL and set it as the source for my IFRAME component in the HTML block of my UI5 application.

View my UI5 application controller.

My UI5 view is structured as follows:

The below are UI5 elements – view my source code for full code view.

App

     Page

          HTML <- IFRAME component with source url updated here via my UI5 controller.

Take a peek at my UI5 Javascript view code.

My Custom OData Service to read SAP table SSM_VAR

To ensure system names were unique across development, test and production, a custom OData service was developed to pull out system names from SSM_VAR which were setup in each environment.  To edit the values I opened each client accordingly and updated the values for dev, test and prod.  I have not provided the source code for this service as it’s just a call to an SAP table which there are other guides on SCN which show you how to do this.

Why do I use SSM_VAR table to store this information?  Well in SAP Netweaver Business Client this table is used to substitute hostnames and to keep this usage consistent I’ve incorporated it for my Fiori/UI5 solution.

My SSM_VAR table looks like this example:

Achieving Fullscreen Layout in Component.js

In my Component.js file I had to ensure my fullWidth parameter was set to “true” in my config JSON metadata.  Once I had this set the letterboxing would disappear.

View my Component.js file.

Source code repository

benkwong/launch-html-fiori · GitHub

Here is the complete repository of my UI5 application.  The code is a sample and for learning purposes only.

Conclusion

There is a bit of a tricky mix going on here but the solution worked well based on the requirements.  Unfortunately it was not very elegant and I do look towards the community for suggestions for improvement on this implementation.  Whilst I was working on this I was constantly evolving the code as I learnt better ways of doing things.  Unfortunately for some reason I could not get my XML view to work so it was done as a Javascript view.

Have fun and keep ensuring your customers can full transition to the Fiori Launchpad with this solution!

Regards,

Ben