---
parser: v2
auto_validation: true
time: 25
tags: [ tutorial>beginner, programming-tool>sapui5, software-product>sap-business-technology-platform, topic>cloud, software-product>sap-build-work-zone--standard-edition]
primary_tag: software-product>sap-build-work-zone--standard-edition
author_name: Lindsay Bert
author_profile: https://github.com/LindsayBert
slug: cp-portal-cloud-foundry-integrate-card
canonical_url: https://developers.sap.com/tutorials/cp-portal-cloud-foundry-integrate-card
---

# Integrate Your UI Integration Card from the Content Package Into Your Site
<!-- description --> Integrate a card from your content package into your SAP Build Work Zone, standard edition site.  

## Prerequisites
 - You've created a content pakage that includes a UI integration card with its associated role
 - You've successfully deployed the card into a ZIP file and downloaded it on to your computer
 - You have a subscription to SAP Build Work Zone, standard edition
 
## You will learn
- How to integrate the UI integration card that you created

## Intro 
In this tutorial, you'll learn how to integrate the card and role from the content package that you created in SAP Business Application Studio.  

### Open your SAP Build Work Zone, standard edition site

From the SAP BTP cockpit, go to **Instances and Subscriptions** and click `SAP Build Work Zone, standard edition` to open the service.

![Access Work Zone](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/1-access-work-zone.png)

The **Site Directory** opens.

![Open Site Directory](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/2-open-site-directory.png)

### Upload your content package

1. Click the **Channel Manager** icon in the side navigation panel to open it.

    ![Open Channel Manager](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/3-open-channel-manager.png)

2. Click **+ New** and select **Content Package**.

    ![New content package](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/4-new-content-package.png)

3. In the **New Content Package** dialog box, browse for and select the ZIP file that you downloaded in the previous tutorial. You'll find the ZIP file in your **Downloads** folder on your computer. 

    ![Browse for ZIP file](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/5-browse-zip-file.png)

4. In the **Runtime Destination** field, select `ES5`, and leave the default values in the other fields. Click **Save**.

    ![Save content package](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/6-save-content-package.png)

    Once you've saved the content package properties, the ZIP file is created in the **Channel Manager**.  
    
5. Click **Report** to check the content of the package. It should look like this showing that your content package includes a role and an app:

    ![Create report](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/7-create-report.png)

6. Ensure that the app is assigned to the `ContentPackageRole` by opening the Content Manager and searching for this role. In the role editor, under the **Apps** tab, you'll see the `Products by Category Card`.

    ![View card in the role editor](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/14a-view-card-in-role.png)

### Add a header to your page

In this step, you'll add a header to your page for the card that you will add.

1. Go back to the Content Manager by using the breadcrumbs above.

    ![Back to Site Manager](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/21-go-back.png)


2. Click the `Overview` page to open the page editor.

    ![Open Overview page](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/23-open-overview-page.png)

3. Click **Edit**.

4. Click **+** to add a new secion.

    ![Name section](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/25-add-section.png)

5. In the **Section Title** field, type **My Cards**

    ![Name section](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/24-name-section.png)

6. Click **Add Widget**

    ![Add widget](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/26-add-widget.png)

7. Select **Cards**.

    ![Select card](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/27-select-cards.png)

8. Select the **Products by Category Card** to add it to your **Overview** page and then click **Save**. 

    ![Select card](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/28-select-your-card.png)

    Your screen will look like this. Don't worry the content will appear on the card once you do the necessary role assignments.

    !-- border -->![Design time view](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/29-design-time-view.png)


### Assign the ContentPackageRole to the site

The `ContentPackageRole` is part of the content in the content package ZIP file. You now have to assign the `ContentPackageRole` to your site and you will also need to assign your user to this role in the next step. 

1. Open the **Site Directory**.

    ![Open Site Directory](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/15-open-site-directory.png)

2. Open the **Site Settings** screen.

    ![Open Site Settings](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/16-open-site-settings.png)

3. Click **Edit**.

4. In the **Assignments** panel, click inside the search box to open a list of available roles. You'll see the `ContentPackageRole`.  Assign it to the site by clicking the **+** next to the role name and then click **Save**.

    ![Assign role to site](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/17-assign-role-to-site.png)    

### Assign yourself to the ContentPackageRole

1. Go back to the SAP BTP Cockpit using the **Instances and Subscriptions** tab in your browser.

    ![Go to BTP Cockpit](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/8-instances-and-subscriptions.png)

2. From the side menu, go to **Security** --> **Role Collections** and search for the `ContentPackageRole` role.

    ![ContentPackage role](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/9-content-package-role.png)

3. Click the arrow at the far right of the row displaying the `ContentPackageRole`.

    ![Open role collection details](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/9a-role-collection-details.png)

4. In the screen that opens, click **Edit**.
  
    ![Edit role collection](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/10-edit-role-collection.png)

5. In the **Users** section of the screen, add your ID (your email), and then your email again and add it to the list of users by clicking the **+** button. **Save** your changes.

    ![Add User](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/11-add-user.png)

    >Note that assignment to the role can take time. If you don't want to wait, you can log out and log in again in order for the role assignment to take effect. 

### View the card in your runtime site

1. Still in the SAP BTP cockpit, click **Instances and Subscriptions** and go to SAP Build Work Zone, standard addition. The **Site Directory** is in focus.

2. Click the **Go to site** icon.

     ![Go to site](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/19-go-to-site.png) 

3. You'll see that your card has been added to the **Overview** page:

    ![Final view](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-portal-cloud-foundry-integrate-card/22-view-card.png)