Skip to Content

Add an App From the Backend to SAP Build Work Zone, advanced edition

Add a classic SAP application (like those typically run by SAP customers on the data center backends), to your SAP Build Work Zone, advanced edition.
You will learn
  • How to add a Web Dynpro ABAP backend application to your workpage
Lindsay BertMay 6, 2024
Created by
LindsayBert
November 29, 2021
Contributors
maximilianone
LindsayBert
jmmargo

Prerequisites

  • You have created a destination in SAP BTP cockpit to the SAP Gateway Demo System
  • You have an environment set up and you can access SAP Build Work Zone, advanced edition
  • You have opened SAP Build Work Zone, advanced edition

To add business apps to SAP Build Work Zone, advanced edition, you configure them in a tool called the Content Manager, located in the Site Manager. The Content Manager includes various editors that you can use to configure apps, groups, roles, and catalogs. Once configured, the app appears as a tile in the Applications page of your site. The page can be accessed from the top-level menu of the site and displays the business apps that a user has permissions to launch.

In this tutorial, you’re going to add one of SAP’s classic applications, a Web Dynpro ABAP app, to your site using the Content Manager. SAP’s classic applications typically run on the backend of a data center.

  • Step 1
    1. Access the Administration Console from the user actions dropdown menu under your avatar.

      Access the Admin Console
    2. Go to the External Integrations section, expand it, and click Business Content.

      Open Business Content entry
    3. Click Content Manager to open it.

      Access Content Manager

    The Content Manager opens with the My Content tab in focus.

  • Step 2
    1. In the Content Manager, click Create and select App from the dropdown list.

      Add new app

      The app editor opens with the Configuration tab in focus.

    2. Enter the following values:

      Field Value
      Title Search POs. In a workshop, use: <your unique identifier>_Search POs.
      System Select the value ES5. In a workshop use: <your unique identifier>_ES5.
      App UI Technology Select Web Dynpro ABAP
      Application ID S_EPM_FPM_PO
      App properties
    3. In the Navitation tab, enter these values:

      Field Value
      Semantic Object S_EPM_FPM_PO
      Action Display
      Add navigation properties
    4. In the Visualization tab, enter these values and then click Save.

      Field Value
      Subtitle Search for Purchase Orders
      Icon Click the browse icon, type activity-2. You’ll see two icons. Click the first one to add it.

      You can see all the visualization properties you defined in the preview tile.

      Add visualization properties
  • Step 3

    Click Content Manager in the breadcrumbs in the top header to navigate back to the Content Manager.

    Back to Content Manager

    You can see your Web Dynpro ABAP app in the list:

    View app in list

    To view the app in runtime, you must assign the app to a role. You also need to assign the app to a group so that it’ll be visible in the Applications page of your site. This is described in the following steps.

  • Step 4

    The Everyone role already exists in the Items list of the Content Manager by default. Content assigned to the Everyone role is visible to all users.

    1. In the Content Manager in the Items list, click the Everyone role to open up the Role editor.

      Select everyone role
    2. Click Edit.

      Edit everyone role
    3. Click the search box to see any available apps in the list below.

      If you have many apps, you can type some letters of your app name in the search bar, (for example, Search) to search for the app.

    4. In the Assignment Status column, drag the toggle switch to the right next to the Search POs app to assign this role to your app. You’ll see that the icon changes.

    5. Click Save.

      Assign app to role

    The Search POs app is now assigned to the Everyone role. In the next step you’ll assign the app to a group.

  • Step 5

    A group is a set of one or more apps displayed together in the Applications page of your site. Assigning apps to groups, makes them visible to users.

    1. Click Content Manager in the breadcrumbs in the top header to navigate back to the Content Manager.

    2. Click Create and select Group to open the Group editor.

      Create a new group
    3. Name the group Purchase Orders.

    4. Click inside the search box on the right of the screen, to show all available apps. You should see the Search POs app.

    5. IIn the Assignment Status column, drag the toggle switch to the right next to the Search POs app to assign it to the group. You’ll see that the icon changes.

    6. Click Save.

      Assign app to group

      Now that the app is configured, it is automatically added to the Applications screen in your site. You can also add it to one of your workpages.

  • Step 6
    1. Click the Site Directory icon in the side panel.

      Open Work Zone directory
    2. Click the Open site icon.

      Open work zone
    3. In the top-level menu of your site, click Applications.

      Open Applications page

    You’ll see your app is displayed as a tile in the group you assigned it to:

    View group with app

    At runtime, where is the Web Dynpro ABAP application we configured running?

Back to top