Creating Technical Catalogs

Objective

After completing this lesson, you will be able to create technical catalogs.

Technical Catalog Maintenance

Watch the video to understand more about technical catalog maintenance.

SAPUI5 App Descriptor Elements

Screenshot of configuration of Post General Journal Entries app in SAP Fiori apps reference library with BSP, ICF path, component ID, reuse components, and intent.

In this example from the SAP Fiori apps reference library, you see the technical name known as Business Server Page (BSP) of the SAPUI5 application, the ICF path, and the SAPUI5 component ID. For the target mapping, you see the semantic object and action forming the intent.

SAPUI5 apps can consist of multiple SAPUI5 components. One central component is the core of the app and represents the starting point. All other components are referenced or reused in this central component. The idea is that these other components consist of features and functions also valid or even needed for other apps. Therefore, these components are called reuse components.

Hint

The SAP Fiori apps reference library offers an own filter for reuse components.
Screenshot of app descriptor for SAPUI5 Fiori App in FLPAM with ICF path, component ID, and intent.

In the SAP Fiori launchpad application manager (FLPAM), the intent, component ID, and ICF path can be found in the Target Application Fields of an app descriptor. The application type SAPUI5 Fiori App is set as the target.

ICF Path

Screenshot of path to ICF node in SICF.

In the SICF, the BSP name can be used as a filter for the Service Name. There will be two hits: One under the node ui5_ui5 and another one under the node bsp, which can be ignored.

SAPUI5 Component

Screenshot of Component.js with reuse component in SE80 and component ID.

An SAPUI5 app is saved as a BSP in the FES. The central file of an SAP Fiori app based on SAPUI5 is Component.js. Here, in most cases, a reuse component is extended using return <component>.extend. The path behind this statement is the component ID.

Hint

The same statement is used to extend apps delivered by SAP in the customer namespace.
Screenshot of Component.js with declare component in SE80 and component ID.

If the first statement in the Component.js is jQuery.sap.declare, the app consists of this one component and no other component is reused. There is no return <component>.extend. So, in that case, the component ID is behind of jQuery.sap.declare.

Transaction Code

Screenshots of transaction code for launchpad app descriptor item in FLPAM and SE93 with UIAD highlighted.

Since SAP S/4HANA 2021, it is possible to create and assign transaction codes to app descriptors. This allows you to expose your FLP content to SAP Build Work Zone, standard edition and use the transaction codes as app IDs.

For launchpad app descriptor items of type SAPUI5 Fiori App, you can create the transaction code in the FLPAM using the Click for creation hyperlink. In read-only mode, this hyperlink changes to Click for display. Using these transactions allows customers to define their own app IDs in the customer namespace. Therefore, customer transactions must start with Z.

For Web Dynpro, Web Client UI, and URL apps, the transaction codes must be created manually in the SE93:

ParameterValue
Transaction TypeTransaction with parameters
Default values for Transaction

/UI2/UIAD_APP (Web Dynpro, Web Client UI)

/UI2/REMOTE_APP_FE (URL)

GUI Support

SAP GUI for Java

SAP GUI for Windows

Default Values - Name of screen fieldUIAD
Default Values - Value(Launchpad App Descriptor Item ID)

Tile Types

Screenshot of tile types in FLPAM and FLP: App Launcher - Static, App Launcher - Dynamic, News Tile.

There are three different types of tile in SAP Fiori:

  • The App Launcher – Static or just static tile consists of a title and subtitle, an icon, keywords for search, and general information.
  • The App Launcher – Dynamic or just dynamic tile has, in addition, the possibility to show a dynamic number. This number originates from an OData service request, providing a natural number such as a number of data sets. The refresh interval of the number can also be set.
  • The News tile has the special purpose of showing news from Really Simple Syndication (RSS) feeds. It is twice as large as the other two tiles and shows a preview of the feeds listed in its tile definition. When you choose the tile, the news app starts showing all elements of the underlying RSS feeds.

    Note

    For more information about the news tile, please read SAP Note 2990265 – News Tile application not displaying existing configured feed urls after moving to higher release or after the SP upgrade.
Screenshots about testing the service URL of a dynamic tile in SAP Gateway client and copying it in the service URL field of a tile in SAP Fiori launchpad application manager.

There is no check for correctness of the OData service URL of a dynamic tile in the FLPAM. Therefore, you should test the URL in another tool before copying it in the Service URL field.

Open the SAP Gateway Client (/IWFND/GW_CLIENT) and enter the OData request in the Request URI field, which should provide the data for the tile. If the status code is 200 and meaning full data is shown in the response body, you may copy and paste the URI without the server and port in the Service URL field of the tile.

How to Research Configuration Details in SAP Fiori Apps Reference Library

Business Example

You want to open the SAP Fiori apps reference library and search for technical details of apps used to define app descriptors in standard catalogs.

Watch the video to see how to research configuration details in the SAP Fiori apps reference library.

Create Standard Catalogs

Business Example

You want to create a standard catalog with app descriptors for SAPUI5 applications.

Solution:
SAP_TC_UX100_S_SD_COMMON (Standard 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

A business catalog was created in exercise Reference Tiles and Target Mappings.

Task 1: Search an App in a Standard Catalog in the SAP Fiori Launchpad Application Manager

ExerciseStart Exercise

Steps

  1. In the SAP Fiori launchpad application manager of your SAP S/4HANA (S4H) system, search for the Track Sales Orders app in the SAP_TC_CEC_SD_COMMON catalog. Note down the SAP Fiori ID.

    SAP Fiori ID:_______________________________________________________________

    Note

    If you do not see a list of catalogs but just two input fields, execute the last task of the exercise Create Replicable Catalogs:

    Allow Standard and Replicable Catalogs as Catalog Types in an ABAP System.

    1. In the SAP Fiori launchpad of your S4H, choose the Launchpad App Manager tile or start transaction /UI2/FLPAM.

    2. In the Technical Catalog ID field, enter *cec* and choose Go.

    3. In the Technical Catalogs table, choose the SAP_TC_CEC_SD_COMMON catalog.

    4. Choose Search (Magnifier) on the top right.

    5. In the Search for field, enter track sales orders and choose Enter.

    6. Note down the SAP Fiori IDF2577.

    7. Close the Web browser tab.

Task 2: Create a Standard Catalog and Copy an App Descriptor in the SAP Fiori Launchpad Application Manager

ExerciseStart Exercise

Steps

  1. In the SAP Fiori launchpad application manager of your S4H, create the empty standard catalog Z_##_TC_SD_COMMON with title Z## - Sales and Distribution as local object.

    1. In the SAP Fiori launchpad application manager, choose New Technical Catalog.

    2. In the Technical Catalog ID field, enter Z_##_TC_SD_COMMON.

    3. In the Technical Catalog Title field, enter Z## - Sales and Distribution.

    4. From the Technical Catalog Type dropdown, select Standard Catalog.

    5. Select Create empty technical catalog only.

    6. Choose Local Object.

  2. Copy the Track Sales Orders app to your Z_##_TC_SD_COMMON catalog using the SAP Fiori ID that you noted down. Change the action to trackStatus## and the tile title to Track Sales Orders ##.

    1. In the Search Term field, enter z_## and choose Go.

    2. In the Technical Catalogs table, choose Z_##_TC_SD_COMMON.

    3. Choose Copy from Other Technical Catalog.

    4. In the Select Transport Request popup, choose Local Object.

    5. In the Copy from Other Technical Catalog popup, choose Adapt Filters.

    6. In the Adapt Filters popup, select SAP Fiori ID and choose OK.

    7. In the SAP Fiori ID field, enter F2577 and choose Go.

    8. Select the Semantic ObjectSalesOrder with ActiontrackStatus and choose Copy.

      Result

      The warning Transaction code exists but has a different launchpad app descriptor item ID assigned in SE93. Unless you change the target application, this is fine.

    9. Close the warning message.

    10. In the Action field, enter trackStatus##.

    11. In the Details section, choose the Tiles tab.

    12. In the Title field, enter Track Sales Orders ##.

    13. Choose the Target Application Fields tab.

    14. Choose Save.

Task 3: Create an App Descriptor for an SAPUI5 Application in the SAP Fiori Launchpad Application Manager

ExerciseStart Exercise

Steps

  1. In the SAP Fiori launchpad application manager of your S4H, add an SAPUI5 Fiori app descriptor for the Manage Sales Orders - Version 2 app in your Z_##_TC_SD_COMMON catalog using the following values:

    FieldValue
    Semantic ObjectSalesOrder
    Actionmanage##
    App TypeSAPUI5 Fiori App
    SAPUI5 Component IDcus.sd.salesorderv2.manage
    ICF Path/sap/bc/ui5_ui5/sap/sd_sov2_mans1

    1. In the SAP Fiori launchpad application manager of your S4H, choose Add App→SAPUI5 Fiori App.

    2. In the Target Application Fields tab, enter the following values:

      FieldValue
      Semantic ObjectSalesOrder
      Actionmanage##

    3. Open the value help for SAPUI5 Component ID.

    4. In the popup, in the SAPUI5 Component ID field, enter cus.sd.salesorder* and choose Go.

    5. Select Manage Sales Orders - Version 2.

    6. Choose Save.

      Result

      The warning Transaction code is not entered is displayed. This is solved in the next step.

    7. Close the warning message.

  2. For the Manage Sales Orders ## app, create the transaction code Z##_F3893.

    1. Choose Edit in the upper left.

    2. In the SAP Fiori ID field, enter Z##_F3893.

    3. For the Transaction Code, choose Click for creation.

    4. In the Warning popup, choose OK.

    5. In the Create / Display Transaction window, choose Create Transaction.

    6. Close the Create / Display Transaction window.

    7. Choose Save.

Task 4: Create a Dynamic Tile in an App Descriptor in the SAP Fiori Launchpad Application Manager

ExerciseStart Exercise

Steps

  1. In the SAP Fiori launchpad application manager of your S4H, add a dynamic tile as default to your Manage Sales Orders ## app using the following values:

    FieldValue
    TitleManage Sales Orders ##
    Tile SubtitleSAPUI5
    Tile Iconsales-order
    Service Root URI/sap/opu/odata4/sap/c_salesordermanage_srv/srvd/sap/c_salesordermanage_sd/0001/SalesOrderManage/$count

    1. In the SAP Fiori launchpad application manager of your S4H, in the Details: SalesOrder-manage## pane, choose the Tiles tab.

    2. In the Tiles table, choose Add Tile→App – Launcher Dynamic.

    3. In the new table entry, enter the following values:

      FieldValue
      TitleManage Sales Orders ##
      Tile SubtitleSAPUI5

    4. For the Tile Icon field, open the value help.

    5. In the popup, in the Search field, enter sales.

    6. Select sales-order.

    7. Choose Set Tile as Default.

    8. Choose Save.

  2. To create a valid Service URL for the dynamic tile, request the number of sales orders provided by the OData V4 services C_SALESORDERMANAGE_SD of the service group C_SALESORDERMANAGE_SRV in the SAP Gateway Client.

    1. In the SAP Easy Access screen, search for SAP Gateway Service Administration or start transaction /IWFND/V4_ADMIN.

    2. Expand Service Groups on the left.

    3. Double-click C_SALESORDERMANAGE_SRV.

    4. In the C_SALESORDERMANAGE_SRV table, select C_SALESORDERMANAGE_SD.

    5. Choose Service Test.

    6. In the SAP Gateway Client, select HTTPS as Protocol.

    7. Choose Entity Set.

    8. In the Entity Sets popup, double-click SalesOrderManage.

    9. In the Request URI field, replace ?sap-statistics with /$count.

    10. Choose Execute.

      Result

      There are 0 sales orders.

  3. Insert the valid request URI in the Service URL field of the dynamic tile.

    1. In the SAP Fiori launchpad application manager of your S4H, in the Z_##_TC_SD_COMMON catalog, choose Edit in the upper left.

    2. For the dynamic tile of your Manage Sales Orders ## app, in the Service URL field, enter /sap/opu/odata4/sap/c_salesordermanage_srv/srvd/sap/c_salesordermanage_sd/0001/SalesOrderManage/$count.

      Hint

      Copy the URI from the SAP Gateway Client omitting the server information.

    3. Choose Save.

Task 5: Reference Tiles and Target Mappings in a Business Catalog and Test it in the SAP Fiori Launchpad

ExerciseStart Exercise

Steps

  1. In the SAP Fiori launchpad content manager for customizing of your S4H, create a reference for tiles and target mappings of Track Sales Orders ## and Manage Sales Order ## of the Z_##_TC_SD_COMMON catalog in your catalog Z_##_BC_EMPLOYEE.

    1. Re-/Start the SAP Fiori launchpad content manager for customizing of your S4H.

    2. In the Search Catalogs field, enter z_## and choose Go.

    3. In the Catalogs table, select the Z_##_TC_SD_COMMON catalog.

    4. In the Content in Catalog Z_##_TC_SD_COMMON table, select the Track Sales Orders ## and Manage Sales Order ## apps.

    5. Choose Add Tiles/Target Mappings→Add Selected Tiles/TMs to Other Catalog.

    6. In the Search Catalogs field, enter z_## and choose Go.

    7. In the Catalogs table, select the Z_##_BC_EMPLOYEE catalog.

    8. Choose Add Tile/TM Reference.

  2. In the SAP Fiori launchpad spaces of your S4H, add the Track Sales Orders ## and Manage Sales Orders ## tiles from the Z## - Employee catalog to the General page of the Cross Topic space and test them.

    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## - Employee.

    5. Choose the plus of the Manage Sales Orders ## tile.

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

    7. Choose the plus of the Track Sales Orders ## tile.

    8. In the Select Pages for This Tile popup, select Cross Topic→General and choose OK.

    9. Choose Navigate to Home.

    10. Choose Cross Topic→General.

    11. Operate the apps as you wish.

Learning
SAP FacebookSAP YoutubeSAP LinkedIn