Creating a new Fiori on EP role including iviews from scratch

[nickrankin]

Overview

In this blog post, I am going to discuss the various configurations including screenshots required for how to build your own FLP@EP Role, iviews (tiles) from the beginning. The idea of this blog post is to really cover the basis of what is provided within the sample data under this blog post: SAP Fiori Launchpad on Portal – Sample Content for Administrators. I will cover the following processes:

• Creating a new FLP@EP compatible role


• Creating new iviews (URL, transaction, wda etc.) and adding to the above role


• Configuring iviews as required to appear under the Fiori Framework Page on Portal (FLP@EP)
  
  
  
  • Adding iviews to particular device groups
  
  
  • Configuring if iview should display be default or not
  
  
  • Other useful configurations
  
  
  
  

 

In this blog post I will not be covering the consumption of application/groups via the ABAP FES.

 

 

1.) Starting off - Creating our FLP Role

 

The FLP role will be assigned to end users whom will be accessing the FLP on Portal. This role will contain the iviews we wish to represent as tiles under the FLP. These iviews may be existing ones already defined under your Portal, or else new ones you may wish to define. All iview object templates are supported here, including URL, WDA, WDJ, Transaction, UI5 etc.

 

1. Create a new folder under your Content Administration -> Portal content catalog. In my case I'm going to call it FLP


2. Inside this new folder create a new Freestyle Role, I'm calling mine FLP_ROLE


3. Open the newly created role, and create a new folder to act as our entry point, in this case I'm going to call it FLP


4. Activate the Entry Point option for both the Role and the Folder


5. We should now have a role configured, as below:
   


6. Add the newly created role to your user via User Administration -> http://<host>:<port>/useradmin

 

2.) Assigning the Fiori Desktop to a new URL Alias under the Master Rules Collection

 

Tip: It is recommended to create a new delta link copy of both Fiori Framework Page, Blue Crystal theme, and make a new Desktop. This way, if you decide to make changes to the framework page/theme configurations they will be retained after upgrade.

 

1. Open the URL Alias Manager via: System Administration -> System Configuration - Portal Display


2. You may find the alias portal/fiori is already defined. If you are happy to use this alias, you may skip the next step


3. In this case I want to use http://<portalhost:port>/irj/portal/myflp to access Fiori. Click the New button and for Alias Name enter portal/myflp. We can ignore the other URL Alias options and keep the defaults


4. Open the Master Rules Collection, System Administration -> System Configuration - Portal Display-> Desktops & Display Rules


5. Navigate and expand Portal Content -> Portal Administrators -> Super Administrators. Right click on Master Rules Collection -> Open -> Rule collection


6. Create a new expression via Add if expression button. Here we will set a URL Alias rule, where URL Alias = "portal/myflp", then launch the FLP@EP desktop


7. You should have a new rule defined something like the below. Apply the changes to the rule and save the MRC.
   


8. Optional but recommended step. Navigate to Content Administration -> Portal Display -> Framework Page Configuration. In the drop down menu here select the Desktop/Framework Page combination as chosen above. Disable the personalization option for now (untick Enable personalization).
   Why? Each time a change is made to device groups, setting app for homepage you will need to clear the UCD cache for your user. By disabling personalization while configuring your FLP@EP, you are saving yourself the time of having to do this each time changes are made.

3.) Creating Fiori tile content (iviews)

 

1. Under our FLP folder, right click and create a new iview. You can choose any type of iview. In this case, I'll create a URL iview which I wish to point to http://www.sap.com


2. The iview can be created either under the Role via the New button, or else added via the Portal content catalog. What is important here is the iview is maintained under the FLP folder within our role


3. We now have a role, containing a iview as below (notice the entry point configurations):
   


4. but we now try to call http://<host>:<port>/irj/portal/myflp and there are no tiles, WHY? In order for an iview to be displayed under the FLP, we must configure it to be a member of a Device Group, simply this means we can target iviews for particular groups of devices, Desktop, Tablets, and Mobile. By default an iview is not a member of any FLP@EP device group


5. Select the newly created iview and Open the iview Properties (All Properties). Filter the property list for property: Object ID of Device Group. Under this property, we will define the device group to display on all devices, including Desktops, Mobiles and tablets. Device group assignment can be adjusted according to business requirements. In this case, I am using the following properties for Device Group:
   com.sap.portal.dg.desktop;com.sap.portal.dg.smartphone;SmartphoneAndroid


6. I also want to make this tile appear to all users, by default under the FLP. To do this filter the iview property by Default App in Home Page. Check the checkbox for this property and then save the iview


7. Lets now call our FLP@EP URL again http://<host>:<port>/irj/portal/myflp). Success! We now have our first Fiori app/iview assigned and functioning:
   Fiori Tile
   
   Upon opening the Fiori tile, URL iview displays
   

4.) Customizing our new Fiori "app"/tile

 

At this point I now have a fully working tile/URL iview pointing to website as required. I would like the icon on my tile to display a custom image (in this case the SAP logo) instead of the calendar picture (pictogram).

 

Customizing the FLP@EP tile image

 

1. Locate a suitable image of choice and resize it as required


2. Navigate to Content Administration -> Web Resource Repository


3. To be tidy, I am going to create a new folder in here for my uploads called FLP


4. Right click on your new folder and choose Upload Resource. At this point browse to your picture location and upload. Steps can be seen highlighted below:
   


5. Right click on your newly uploaded image resource, choose properties and locate the location property, as below:
   


6. Our location to the SAP logo under the WRR is now pcd:resource_repository/FLP/sap.png. notice the inclusion of pcd:, not included in the above, but we must include to reference our PCD object.


7. Back to the FLP@EP role, open the iview and filter for property Icon URI For this property we enter the full location to the image including the PCD: prefix


8. We must now set the Image Type property to equal, image (full width), instead of icon.


9. correct configuration as expalined above can be found below:
   


10. Now, we call our FLP@EP launchpad again, and now we have our custom icon:
    

Although in the above example we use a URL iview, it is also possible to assign all iview object types, including UI5, WDA/J, Transactional etc. The recommended theme to use in such cases is sap_bluecrystal, and FLP@EP requires Standards rendering mode under MSIE web browser. For details you can refer to this excellent blog post: IE and Portal – Standards/Quirks Mode Evolution (or Love-Hate Relationships).


(Pictured: SAP Transaction iview calling SU01 transaction under FLP@EP)

 

5.) Assigning tiles to a category

 

It is possible to assign tiles under up to 20 different categories*.

* If more than 20 categories are required, please refer to SAP Note 2214932.

 

1. Open the Fiori Launchpad Categories iview stored under the following PCD location:
   Content Administration -> Portal Content -> Portal Users -> Standard Portal Users -> iviews -> Fiori Launchpad


2. Under this iview, up to 20 categories may be configured. The following properties will apply to each iview:
   Category XX ID
   Category XX Order
   Category XX Title


3. The ID will be used to reference the category an iview should belong to, the Order will define the order in which categories should display and the title is the Title that you will use for the category.


4. In the above example, I will add my URL iview to a Category called "Corporate", while I will have a new category called "Admin" to access my SU01 transaction ivew


5. I have configured my Fiori Launchpad Categories iview to include the below:
   


6. Now open your FLP@EP iviews and filter each by Category Assignment property. Under here, the Category ID you have defined should be added, such as the below example:
   


7. When you next call your FLP@EP launchpad, rather than the tiles belonging to the General (uncategorized) section, the tiles will now be grouped: