Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

3 Ways to Add an SAP Screen Personas Flavor to the SAP Fiori Launchpad in the SAP Cloud Platform Portal

former_member13817
Employee
Employee
‎07-05-2017 7:38 AM

Why do it?


For an organization that already uses the SAP Fiori Launchpad on the SAP Cloud Platform Portal in order to have a single entry point for SAP Fiori apps and for portal content, being able to launch an SAP Screen Personas flavor from this same launchpad allows the user retain that sole entry point.

Which option is best?


The answer to this will depend on the landscape of the organization. In brief:

For an organization that has the backend system (in which the flavor exists) connected to the SAP Cloud Platform (via the SAP Cloud Connector), then option 1 may be best. One benefit of this option is that the flavor opens in the same window as the launchpad and retains the launchpad toolbar/header.

However, for an organization that has not yet connected the backend system to the SAP Cloud Platform, then option 2 may be best. This option is great because it doesn't require the backend system to be connected to the SAP Cloud Platform because the tile directly launches the URL to the flavor. One drawback, however, is that flavor open in new window.

Similar to option2, option 3 directly launches the flavor URL and doesn't that the backend system be connected to the SAP Cloud Platform. However, this option enables the flavor to launch inside of the same window, with one line of code.

By the way, it's possible to launch a flavor from outside of the SAP Fiori Launchpad, but still within the SAP Cloud Platform Portal. See the article Integrating SAP Screen Personas into the SAP Cloud Platform Portal.

How to do it?


Go to Option 1 or Option 2 or Option 3.

Option 1: Connected backend system



  1. In the "Content Management" tab, under the "Apps" section, click the "New" button.

  2. In the "Properties" tab, enter the information as below:











































    General App Title A title for the app. This will also be the title on the tile itself.
    App Subtitle Optional.
    Intent Navigation Semantic Object E.g., "createSaleOrder".
    Action E.g., "Display".
    App Resource Details App Type SAP GUI.
    Transaction Code T-code for the flavor.
    System Alias The alias that was set for the backend system.
    Attributes Keywords Keywords to easily find the app in the app catalog.
    Screen Personas The flavor ID. E.g.,


  3. Switch to the "Catalogs" tab and then click the "Assign more catalogs" button.

  4. Select the catalog(s) to which the tile is to be added and the click the "Ok" button.

  5. Switch to the "Groups" tab.

  6. Click the "Assign more groups" button.

  7. Select the group to which the tile is to be added and then click the "Ok" button.

  8. Switch to the "Visualization" tab.

  9. Enter the information as below and then click the "Save" button:




























    Tile Properties Tile Type Static App Launcher
    Title Copied over from the "Properties" tab.
    Subtitle Copied over from the "Properties" tab.
    Icon Select an icon that is relevant to the transaction.
    Supported Devices (devices) Select "Desktop" and deselect "Tablet" and "Smartphone"


  10. That's it! You can view the tile by preview the SAP Fiori Launchpad or by publishing and then opening the launchpad.


Option 2: No connected backend system



  1. In the "Content Management" tab, under the "Apps" section, click the "New" button.

  2. In the "Properties" tab, enter the information as below:


























    General App Title A title for the app. This will also be the title on the tile itself.
    App Subtitle E.g., the t-code. Optional.
    App Resource Details App Type URL
    URL The URL to the flavor.
    Attributes Keywords Keywords to easily find the app in the app catalog.


  3. Switch to the "Catalogs" tab and then click the "Assign more catalogs" button.

  4. Select the catalog(s) to which the tile is to be added and the click the "Ok" button.

  5. Switch to the "Groups" tab.

  6. Click the "Assign more groups" button.

  7. Select the group to which the tile is to be added and then click the "Ok" button.

  8. Switch to the "Visualization" tab.

  9. Enter the information as below and then click the "Save" button:




























    Tile Properties Tile Type Static App Launcher
    Title Copied over from the "Properties" tab.
    Subtitle Copied over from the "Properties" tab.
    Icon Select an icon that is relevant to the transaction.
    Supported Devices (devices) Select "Desktop" and deselect "Tablet" and "Smartphone"


  10. That's it! You can view the tile by preview the SAP Fiori Launchpad or by publishing and then opening the launchpad.


Option 3 - No connected backend system, but opens in same window.



  1. In the "Pages and Apps" tab, click the "Add new page or app" button.

  2. Click the "Page" button.

  3. Enter a name for the page; select the "Header Only" template; and then click the "Next" button.

  4. Assign a catalog and then click the "Finish" button.

  5. Click the "Add widgets" button.

  6. Scroll down to the section "Standard Widgets: Advanced" and then click the widget "HTML Widget".

  7. Click on the widget.

  8. Click the settings button.

  9. Select "HTML Code" as the HTML source.

  10. Insert the code below. For "src", enter the URL of the flavor. Also, for "height", set this so that iframe is tall enough for the flavor. Lastly, click the "Save" button.
    <iframe src="<flavorURL>" style="width: 100%; height:600px;"></iframe>


  11. Select on the page for the launchpad into which the tile will be added.

  12. Select the group into which the tile will be added.

  13. Select the "Apps" tab.

  14. Click the "Edit" button.

  15. Click the "Assign more apps to group" button.

  16. Select the page that was created above and then click the "OK" button.

  17. Click the "Save" button.

  18. In the "Content Management" tab, select the app that was added above and then click the "Edit" button.

  19. Select the "Visualization" tile.

  20. Enter the information as below and then click the "Save" button:




























    Tile Properties Tile Type Static App Launcher
    Title Copied over from the "Properties" tab.
    Subtitle Copied over from the "Properties" tab.
    Icon Select an icon that is relevant to the transaction.
    Supported Devices (devices) Select "Desktop" and deselect "Tablet" and "Smartphone"


  21. That's it! You can view the tile by preview the SAP Fiori Launchpad or by publishing and then opening the launchpad.





About the Author


daniel.sanchez4 is a UX strategy and technologies consultant in SAP's Digital Business Services organization. His focus is all things user experience; everything from leading Design Thinking workshops and UX design efforts to technical implementation. See more articles.
4 Comments
Labels in this area
Popular Blog Posts