Skip to Content
Author's profile photo Former Member

How to Map a Traditional SAP Enterprise Portal Hierarchy to Fiori Launchpad

This blog is for portal administrators who would like to implement Fiori Launchpad in their organizations.

Motivation:

The existing L-shape hierarchy has several drawbacks:

  • It takes a number of clicks to get to the required application
  • The navigation logic is not easy to memorize
  • To easily find the required object a user has to be familiar with the hierarchy structure.

Fiori Launchpad provides a flat structure with the following:

  • Personalization: allowing the user to organize the homepage as he wants.
  • Search and filtering functionality.
  • A required application can be found and launched in one click without screen navigation.


Challenges:

The traditional portal L-shape hierarchy has to be mapped into Fiori Launchpad structure.


Prerequisites:

  • SAP Enterprise Portal (EP) 7.31 SP 16 and higher or SAP Enterprise Portal 7.4 SP 11 and higher
  • Fiori Launchpad on Portal (FLP on EP) is enabled

Fiori Launchpad navigation paradigm:

Fiori Launchpad consists of 2 pages: Homepage and Tile Catalog page.

Home page is controlled and personalized by an end-user. A user can create/delete a group, fill a group with content or remove content from the group.

HomePage.PNG

Tile Catalog page serves as a repository for the entire content assigned to the end-user via EP roles.

TileCatalog.PNG


The content is provided in the form of tiles, which have a number of properties used for navigation and identification:

  • Category
  • Name
  • Subtitle
  • Keyword
  • Promotion properties: New, Recommended.


FLP on EP provides various search and filtering possibilities, on both Homepage and the Tile Catalog.

Both pages have a header line with the Quick Launcher and Fiori Search Application functionality:

  • Quick Launcher (search by tile title)

The search searches for the tiles in the entire Fiori Launchpad content (Homepage and Tile Catalog) by the tile title. By clicking the selected entry from the drop down list you can run the application directly.

Example: tiles from Homepage and Tile Catalog are found


HomePageCatalogSearchSales.PNG


  • Fiori Search Application (search by tile title, subtitle, info and keyword properties)

With the same search criterion as in Quick Launcher there are more results now as subtitles and keywords are also used:


TileCatalogSearchApp.PNG


Note: first enter a search criterion into an entry field and only then click on the magnifying glass.


On the Tile Catalog page the content can be filtered by category:


TileCatalogSearchByCategory.PNG


Or by tile title, subtitle, info and keyword in the right input field:


TileCatalogSearchBarSales.PNG


Or by combination of both.


On the Homepage the navigation can be done by clicking on the group in left-side menu. Then the group is moved to the top of the screen:


HomePageGroupNav1.PNG


Mapping principles:

The traditional EP navigation hierarchy has unlimited hierarchy levels whereas FLP hierarchy is limited.

For mapping the meaningful part of the navigation context should be identified and used in the new environment as the categories and information on the tiles. (Note that parts of the navigation structure may be omitted)

This context information will help to find and navigate to the needed tile and to identify the required application.

Mapping Example:

As an example we take Standard MSS (Manager Self-Service) SAP provided content and see how it might look like on FLP on EP.

Traditional Portal hierarchy:


AFP_ESS_Team.PNG


Let’s look closer on the hierarchy:


AFP_MSS+Zoom1.PNG


FLP on EP representation of MSS content:


  • Tile Catalog:


TileCatalog.PNG


  • Homepage:


HomePage.PNG

Steps to transform to FLP (an example)

1. Create categories in Portal Content ->Portal Users->Standard Portal Users->iViews->Fiori Launchpad->Fiori Launchpad Categories. Use concatenated values of Hierarchy Level #1 and Hierarchy Level #3, e.g. Manager Self-Services – Team


Categories.PNG


2. Change iView or Page properties as following:

  • Set Assigned Category  to a created category
  • Set Subtitle to Hierarchy Level #4, e.g. General Information
  • Set Object ID of Device Group to the list of supported devices groups or devices
  • Set Keyword to any hidden search criteria that can use in Tile catalog and Homepage search

MSSWorkingTimesPorperties1.PNG


  MSSWorkingTimesProperties2.PNG


The result for our example looks like this:


TilesWithProperties.PNG


For mass update of several iViews a mass editor can be used. This editor allows “Changing Property Values of Multiple Objects”.

After the mapping is finished both structures co-exist in EP: the unchanged L-shape and Fiori Launchpad providing a new user experience for the same EP content.


Assigned Tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Venkatesh Machineni
      Venkatesh Machineni

      Hi Irena Kull,

      Nice article,

      I have developed a custom SAPUI5 application, I want to integrate it in SAP Enterprise portal and in Fiori LaunchPad.

      Do I need to follow any guidelines to integrate it in SAP EP and how to integrate it. Please tell me the procedure.

      Thank you in advance.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Venkatesh,

      If your SPAUI5 app is in WRR already, you can integrate it using UI5 template (aka Fiori iVIew). You can look into the blog  to find out how to find and use this template.

      Regards,

      Irena

      Author's profile photo Venkatesh Machineni
      Venkatesh Machineni

      Thank you very much for your reply.

      You mean WRR means Web Resource Repository, right? No my SAPUI5 app in not in WRR.

      So please guide me .Thanks in advance

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Venkatesh,

      upload the entire application into the "Fiori Application" folder in the WRR and and then, create an iview from it in the portal catalog as described in the blog above.


      Set the iview's "system" property to "WEBDISP" (assuming that this is the alias for web dispatcher).

      Set component path to the application's component.js file location under the application's root folder.

      Add the iview to the a role, assign this role to your end-user, login to portal via Web Dispatcher and then it should be visible as a tile in the tile catalog.


      BR, Irena

      Author's profile photo Venkatesh Machineni
      Venkatesh Machineni

      Hi Irena,

      Thank you very much for your reply.

      I have one question, Can we display SAP Portal news items using SAPUI5 from Knowledge management repository.

      Could you please clarify this.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Venkatesh,

      There are 2 ways: either use the news tile and configure RSS feeds from KM

      OR create a UI5 application, deploy it in WRR and run it as a UI5 iView

      (News tile is available as of 7.5 SP2)


      Regards,

      Irena

      Author's profile photo Venkatesh Machineni
      Venkatesh Machineni

      Hi Irena,

      Thank you for your response,

      I have the following configuration on my Laptop:

      1.Intel i3 2nd generation processor and > 2.00 GHz

      2. 4 GB RAM

      3. 500  GB Hard Drive

      4. Windows 10 OS

      I need to work on SAPUI5 and Fiori on Portal to integrate my UI5 applications.

      Can I install the above mentioned prerequisites( SAP Enterprise Portal (EP) 7.31 SP 16 and higher or SAP Enterprise Portal 7.4 SP 11 and higher) along with backend on my Laptop?

      Please let me know. Thanks in advance.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Venkatesh,


      for NetWeaver only (incl. portal) you need 8G RAM.

      I cannot give you an idea about the backend right away, but keep in mind that it is not only the application backend, but also the Frontend server you should install.

      It looks like the answer is no...


      Regards,

      Irena

      Author's profile photo Former Member
      Former Member

      Hi Irena,

      I have the exact same requirement as stated in your blog and it really helpful. Thank you for such detailed explaination. I am just having one issue- I know that we can add images to the tiles. But somehow the images never get displayed in the tile. I have tried absolute/ relative paths, but none worked. When I try to display the images directly on the browser via a url to the image location, they do. The problem is only for the tiles.

      Our Portal is 7.4 SP 11.

      Thanks,

      Sonali.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Sonali,

      Please see below the way we use images.

      Regards,

      Irena

      /wp-content/uploads/2016/04/image_921953.jpg

      WRR. jpg.jpg

      Author's profile photo Former Member
      Former Member

      Thanks Irena.

      I was able to resolve this problem by making a copy of the theme in UI Theme Designer and making it as the default theme for Fiori Launchpad. I don't know the reason but I was able to see the tile images in the preview mode in Theme Designer but not at run time. That is when I thought of making a copy and assigning the copied theme in the framework page.

      Thank you so much for all the help.

      Best,

      Sonali.

      Author's profile photo Former Member
      Former Member

      Hi Irena Kull,

      Very Useful Blog, Thanks for Sharing.

      We tried to Add few iviews of ESS(WDJ/WDA) in FLP. Its loading properly but UI's like dropdown (for WDA) etc are not working in iPad / iPhone. But the same is working in Android and Browser. Is there any restriction for iOS/Safari browser. Do we need to update any to any patch to make it work in iOS devices. We are currently at 7.40 SP 11.

      Thanks,

      Yusuf

      Author's profile photo Former Member
      Former Member

      Dear Irena Kull,

           Thanks for your reply. We did update the server to the latest SP (7.4 SP 12) and Patch and tried again. But unfortunately there seems to be some issue with dropdown of WDA. The values are listed but we are not able to select the value in the drop down in safari browser (iPad) for WDA apps. But WDJ apps dropdown is working fine.

      Searched a little in SDN and it seems many are facing issue with WDA dropdown for iPad/iOS (  WDA dropdown does not work on iOS (iPhone/iPad) ). But as per PAM ( https://support.sap.com/content/dam/library/ssp/infopages/pam-essentials/TIP/NW74PAMBrow.pdf  -> Pg. 5) it should be working.

      Appreciate if you could suggest for this dropdown issue of WDA in iOS/iPad.

      Note: ECC Version is EHP6 FOR SAP ERP 6.0

      Thanks

      Yusuf

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Yusuf,

      I deleted my previous answer, it fits only to a very specific situation, i.e. using SAP ESS/MSS business package, and not a real BS application.

      In general, WDJ/WDA is not supported on mobile devices (as it is mentioned in PAM:

      EHP6.JPG- only desktop browsers are supported).

      For mobile devices you need Fiori apps.

      For FLP on EP running on iPad  NW 7.4 SPS9 or NW 7.31 SPS9 is required.

      Please let me know if you have further questions.

      Regards,

      Irena

      Author's profile photo Arnold Gallemann
      Arnold Gallemann

      Hello Irena,

      we want to use "old" iviews (with long names sometimes) in the FFP form the portal.

      So I tested a tile with much text for the properties name, subtitle and information.

      Unfortunately the text are cut and you can see the full textes only in the tooltip.

      tile text.JPG

      Is it possible to change this behavior particualr for the name in the future?

      Regards,

      Arnold

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Arnold,

      In the future releases you will be able to define tiles with different sizes, such as 1x2, 2x2, 2x1.

      But a general recommendation is to distribute the name between the properties (name, subtitle, information , keywords, tags), and also to use the icons.

      Regards,

      Irena

      Author's profile photo Arnold Gallemann
      Arnold Gallemann

      Hello Irena,

      thank you for your answer.

      I tested the new tile sizes in our 7.50-sandbox.

      Unfortunately the number of lines properties still the same. Only in the 1x2 and 2x2 tiles appears more text.

      tile text 2x2.JPG

      It would be nice if the additional space could be used for more text lines.

      Best regards,

      Arnold