---
parser: v2
auto_validation: true
time: 15
tags: [ tutorial>beginner, software-product>sap-build-work-zone--advanced-edition]
primary_tag: software-product>sap-build-work-zone--advanced-edition
author_name: Lindsay Bert
slug: workzone-enrich-3-webdynpro-app
canonical_url: https://developers.sap.com/tutorials/workzone-enrich-3-webdynpro-app
---

# Add an App From the Backend to SAP Build Work Zone, advanced edition
<!-- description --> 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.

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

## You will learn
  - How to add a Web Dynpro ABAP backend application to your workpage



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

### Open the Content Manager


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

    ![Access the Admin Console](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/1-access-admin-console.png)

2. Go to the **External Integrations** section, expand it, and click **Business Content**.

    ![Open Business Content entry](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/2-open-business-content.png)

3. Click **Content Manager** to open it.

    ![Access Content Manager](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/3-access-content-manager.png)

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



### Configure the Web Dynpro ABAP app


1. In the **Content Manager**, click **Create** and select **App** from the dropdown list.

    ![Add new app](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/4-new-app.png)

    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](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/5-app-properties.png)

3. In the **Navitation** tab, enter these values:

    |  Field     | Value
    |  :------------- | :-------------
    |  Semantic Object           | `S_EPM_FPM_PO`
    |  Action          | `Display`

    ![Add navigation properties](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/6-navigation-properties.png)

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](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/7-visualization-properties.png)


### View the app in the Content Manager


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

  ![Back to Content Manager](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/8-back.png)

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

  ![View app in list](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/9-view-app.png)

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.



### Assign the app to the Everyone role


>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](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/10-everyone-role.png)

2. Click **Edit**.

    ![Edit everyone role](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/11-edit-role.png)

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](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/12-assign-app-to-role.png)

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


### Assign the app to a group


>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](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/13-new-group.png)

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](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/14-assign-app-to-group.png)

    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.


### View the app in the Applications screen


1. Click the **Site Directory** icon in the side panel.

    ![Open Work Zone directory](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/15-open-workzone-directory.png)

2. Click the **Open site** icon.

    ![Open work zone](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/16-open-workzone.png)

3. In the top-level menu of your site, click **Applications**.

    ![Open Applications page](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/17-open-applications-page.png)

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

  ![View group with app](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/workzone-enrich-3-webdynpro-app/18-view-groupwithapp.png)