Editing Business Catalogs

Objective

After completing this lesson, you will be able to edit business catalogs.

SAP Fiori Launchpad Designer

Let's watch a video to learn about the SAP Fiori launchpad designer.

News Tile

A flowchart showing the setup of a news tile in SAP Fiori launchpad designer, with fields for configuring title, image, intervals, and article feeds. Arrows connect configuration steps to the FLP.

The news tile is a double tile available since the beginning of SAP Fiori. It cycles through the messages of up to 10 news feeds and starts an SAPUI5 app showing all messages as a list. You can adjust the article refresh cycle (for cycling through the messages) and refresh interval (for requesting new messages), and if a default image from the mime repository should be used rather than one from the news feed(s).

The following restrictions apply to the news feeds:

  • External feeds must be cross-origin resource sharing (CORS) compliant.
  • Internal feeds must originate from the same server and port as the SAP Fiori launchpad.

    Note

    A reverse proxy like the SAP Web Dispatcher allows the definition of routing rules to overcome this limitation.
  • The URL format should follow the https://<server>:<port> pattern.

    Note

    The URLs using feed:// are not supported.
  • The UI5 URL validation requires the tilde "~" character to be replaced by the sequence "~".
Screenshot flow about how to copy a catalog in the SAP Fiori Launchpad Designer by drag and drop.

An empty news tile is delivered by SAP in the business catalog /UI2/SAPNewsTile as a template. Copy the catalog in the FLPCM or FLPD to the customer namespace and edit it in the FLPD.

To copy a catalog in the FLPD, drag the catalog from the list of catalogs to the then appearing drop area New Catalog with References. After copying, just click on the news tile to edit it.

Edit Business Catalogs

Business Example

You want to create an SAP Fiori business catalog by copying an existing one in the SAP Fiori launchpad content manager and edit it using the SAP Fiori launchpad designer.

Solution:
SAP_UX100_BC_S_NEWS (Business Catalog)

Note

This exercise requires an SAP Learning system. Login information is provided by your system setup guide.

Note

Whenever the values or object names in this exercise include ##, replace ## with the number of your user.

Prerequisites

The role was created in the exercise Create SAP Fiori Spaces and Pages.

Task 1: Copy the News Catalog in the SAP Fiori Launchpad Content Manager

Steps

  1. In the SAP Fiori launchpad content manager for customizing of your S4H, copy the /UI2/SAPNewsTile catalog using ID Z_##_BC_NEWS and title Z## - News Tile.

    1. In the SAP Easy Access menu of your S4H, search for FLP Content Manager: Client-Specific or start transaction /UI2/FLPCM_CUST.

    2. In the SAP Fiori launchpad content manager for customizing, in the Search Catalogs field, enter news.

    3. Select the /UI2/SAPNewsTile catalog.

    4. Choose Copy.

    5. In the New ID field, enter Z_##_BC_NEWS.

    6. In the New Title field, enter Z## - News Tile.

    7. Choose Continue.

    8. Choose the transport request provided to you.

Task 2: Edit a News Tile in the SAP Fiori Launchpad Designer

Steps

  1. In the SAP Fiori launchpad content manager for customizing of your SAP S/4HANA (S4H) system, open the Z_##_BC_NEWS in the SAP Fiori launchpad designer for customizing and assign a transport request in the settings.

    Note

    Close the SAP Fiori launchpad content manager to release the lock.
    1. In the SAP Fiori launchpad content manager for customizing of your S4H, select the Z_##_BC_NEWS catalog.

    2. Choose Open in Designer.

    3. Close the SAP Fiori launchpad content manager.

    4. In the SAP Fiori launchpad designer for customizing, choose Settings (gearwheel) in the upper right corner.

    5. In the Assign Transport Request popup, deselect the None (Local Object) checkbox.

    6. In the Customizing Request dropdown, select the transport request provided to you.

    7. Choose OK.

  2. In the SAP Fiori launchpad designer for customizing of your S4H, add https://blog.sap-press.com/rss.xml as feed to the News Tile of your Z## - News Tile catalog.

    Caution

    If you get an error when saving the catalog, close the SAP Fiori launchpad content manager to release the lock.
    1. In the SAP Fiori launchpad designer for customizing of your S4H, choose the News Tile showing the text No articles to display.

    2. In the Feed #1 field, enter https://blog.sap-press.com/rss.xml.

    3. Choose Save.

    4. In the Confirmation popup about breaking the reference, choose OK.

      Caution

      If you get an error when saving the catalog, close the SAP Fiori launchpad content manager to release the lock.

Task 3: Assign the News Catalog to a Role and Test it in the SAP Fiori Launchpad

Steps

  1. In the SAP Fiori launchpad content manager for customizing of your S4H, assign the Z_##_BC_NEWS catalog to the Z_##_BR_TRAINING role.

    1. In the SAP Fiori launchpad content manager for customizing, select the Z_##_BC_NEWS catalog.

    2. Choose Show Usage in Roles.

    3. In the Roles containing Catalog Z_##_BC_NEWS table, choose Assign Role.

    4. In the Assign Role to Catalog popup, for the Role ID field, open the value help.

    5. In the popup, in the Single Role field, enter z_##*.

    6. Double-click Z_##_BR_TRAINING.

    7. In the Assign Role to Catalog popup, choose Continue.

  2. In the SAP Fiori launchpad spaces of your S4H, add the news tile from the Z## - News Tile catalog to the General page of the Cross Topic space and test it.

    1. Start or reload the SAP Fiori launchpad spaces of your S4H in the client of your choice.

    2. Choose your user in the upper right corner.

    3. In the User Actions Menu, choose App Finder.

    4. In the list of catalogs on the left, choose Z## - News Tile.

    5. Choose the plus of the news tile.

    6. In the Select the Pages for This Tile popup, select Cross TopicGeneral and choose OK.

    7. Choose Navigate to Home.

    8. Choose the Cross Topic space.

    9. Choose the news tile.

    10. Operate the app as you wish.