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!

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.

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:

Key

Hostname Value

ERPDEV

erpdev

ERPTST

erptst

ERPPRD

erpprd

BOD

sapbodev

BOT

sapbotst

BOP

sapboprd

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.

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!

Hi Ben, nice article, thanks for sharing. We did mostly like this for one of our clients. Instead of building URL in UI5 app, we store the URL itself in the backend table, so that I am not constrained with those three parameters (sys,typ,app). It helped us in SF integration for example.

I initially had the same solution as you however my customer found it tricky to maintain. This was clear when we had a large number of tiles and maintaining table entries with complex URLs was proving to be tricky.

Using parameters kept the configuration isolated to Fiori Launchpad Administration which was easier to maintain and takes the URL structure creation away from the user as my code build it up based on the parameters.

But regardless it really depends on what your customer wants and figured sharing my solution will yield better ideas on how to tackle this problem.

In reality I want SAP to make this a standard feature of Fiori Launchpad because I know lots of people implementing this will experience this problem!