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

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

   

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

   

3. Search for your card.

   

   Your card will display under 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.

   

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 Category.

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.

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

1. On the Products by Category Card, 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.

   

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

   

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

1. Click the Workspaces menu and select Sales Management to navigate to your workspace.

   

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

   

3. Click Add Widget.

   

4. Click Cards.

   

5. Select the Products by Category Card that you created. In a workshop, use your unique identifier <your unique identifier>_Products by Category Card.

   

6. In the Add Widget screen, click Save.

   

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

Now let’s add a title for the card.

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

   

2. Select the Text widget.

3. Design the Text widget as follows:

   | :————- | :————- | Text | Type in the following: Computer Systems - Best Sellers. | 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.

   

6. Click Publish to publish your workpage.

   

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