Skip to Content

Integrate a UI5 Integration Card to Your SAP Build Work Zone, advanced edition

Add a custom UI5 integration card to your workpage in a workspace.
You will learn
  • How to make a deployed UI5 integration card available in SAP Build Work Zone, advanced edition and add it to your workpage.
Lindsay BertNovember 30, 2022
Created by
LindsayBert
November 29, 2021
Contributors
LindsayBert
maximilianone

Prerequisites

  • You have deployed a UI5 integration card.

You’ve already deployed a UI5 integration card. Now in this tutorial, you’ll enable it to make it available in your site and later add it to your workpage in a workspace.

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

      Access the admin console
    2. Go to the UI Integration section, expand it, and click Cards.

      Open Cards section
    3. Scroll down to view the Uploaded Cards section.

      If you don’t see your deployed card, you may need to refresh the browser.

    4. Click the slider button to enable the card.

      Enable card

    The card is now enabled and can be added to the workpage in your workspace.

    In this step, for workshops, use your unique identifier <your unique identifier>_Products by Vendor Card.

    You can click on Configure to select a different destination for this UI5 integration card. As you used the same ES5 destination in this SAP BTP subaccount and also when you developed the card, this step is not required to complete this tutorial.

  • Step 2

    Before you add the card to your workspace, let’s configure one of the settings of the card.

    1. On the Products by Vendor Card, click Configure.

      Click Configure
    2. Under General Settings, change the Maximum Items to 2 and select the destination. If you’re in a workshop, you can select the destination that you created: <your unique ID_ES5>. Then click Save changes.

      Change setting

      On the Configure screen, when you click the More settings icon there are more settings that you can configure for the end user.

      More settings

    In the next step you’ll add the card to your workpage in your workspace.

  • Step 3
    1. Click the Workspaces menu and select Employee Innovation Hackathon to navigate to your workspace.

      Access workspace
    2. Click the pencil icon on the right side of the screen to open the page designer.

      Open in edit mode
    3. Click the + below the Forum widget and above the Feed widget to add a new section to your workspace.

      Add new row
    4. In the added section, click Add Widget.

      Add widget
    5. Click Cards.

      Click cards
    6. Select the Products by Vendor Card widget that you previously created. In a workshop, use your unique identifier <your unique identifier>_Products by Vendor Card.

      Add the card
    7. In the Add Widget screen, click Save.

      Add card

    The card you created was added to the workpage of your workspace.

    Now let’s add a title for the card.

  • Step 4
    1. Click Add Widget below the card widget you just added.

      Add another widget
    2. Select the Text widget.

    3. Design the Text widget as follows:

      Text Type in the following: Products of vendors sponsoring the hackathon, see what you can win!.
      Font Select the text and change to Arial 14pt.
      Color With the text already selected, choose black from the chart.
    4. Click outside of the widget section to see how your workpage looks so far.

    5. Select the text widget you just added, and drag it above the card widget that you added before.

      Drag widget
    6. Click Publish to publish your workpage.

      Publish workspace

    Your workspace should look like this - note that the card is only showing 2 out of 20 products because you configured it that way.

    Final workspace

    Where can you integrate UI integration cards?

Back to top