Skip to Content

Integrate Your SAPUI5 App into Your Site

Beginner
15 min.
SAP Build Work Zone, standard edition, SAPUI5, Beginner, SAP Fiori, HTML5, Tutorial, SAP Business Technology Platform
Add an SAPUI5 app to a site in SAP Build Work Zone, standard edition.
You will learn
  • How to add a deployed, custom-developed, SAPUI5 app to your site
LindsayBertLindsay BertSeptember 16, 2024
Created by
LindsayBert
September 7, 2020
Contributors
maximilianone
thecodester
rcaziraghi

Prerequisites

  • You’ve already created the JobCore site
  • You’ve created a custom SAPUI5 application and deployed it to SAP BTP, Cloud Foundry environment
  • You’ve created a space and a page and assigned the space to a role, as described in this tutorial: Create a Space and a Page and Add Apps

Once you’ve deployed your SAPUI5 app to SAP BTP, it becomes available to add to your site.

  • Step 1

    In this step, you will find your custom developed app that you deployed to your subaccount in SAP BTP.

    1. In the side navigation panel of your subaccount, click Instances and Subscriptions and then next to SAP Build Work Zone, standard edition, click the Go to Application icon.

      Open launchpad service

    2. Click the Channel Manager icon to view any available content providers.

      Open Provider Manager

    3. Select the HTML5 Apps content provider.

      The HTML5 Apps content provider is created automatically. Any app that you deploy to SAP BTP is automatically added as content to this provider.

      Select the HTML5 Provider

    4. Click the Fetch updated content icon.

      Fetch updated content

    The HTML5 Apps content provider should now expose any newly deployed app for integration.

  • Step 2

    1. Click the icon in the side panel to open the Content Manager.

      Open Content Editor

    2. Click the Content Explorer button to explore content from the available content providers.

      Open Content Explorer

    3. Select the HTML5 Apps provider.

      Select the HTML5 tile

    4. You’ll see that your Suppliers app that you’ve just created in SAP Business Application Studio, already exists in this provider. Select it and click + Add to My Content.

      Add app to My Content

    5. Select the Suppliers app and click Add.

      Select app

    6. Using the breadcrumbs, go back to the Content Manager.

      Select app

      Note that your Suppliers app is in the list of content items.

      View app
  • Step 3

    In this step, you’ll assign the Suppliers app to the Everyone role. This is a default role - content assigned to the Everyone role is visible to all users.

    1. In the Content Manager, click the Everyone role.

      Everyone role

    2. Click Edit.

      Edit role

    3. In the Assignment Status column, toggle the switch to assign the app to the Everyone role.

      Assign role

    4. Click Save.

  • Step 4

    1. Using the breadcrumbs, go back to the Content Manager.

    2. Select the Overview page.

      Select page

    3. When the page opens you’ll see other apps and a card that you added in the previous tutorials. Click Edit.

      Edit page

    4. Hover in the section where your other apps are displayed, click the + icon.

      Add app

    5. Select the Suppliers app and click Add.

      Add Suppliers app

    6. Click Save.

  • Step 5

    1. Click the Site Directory icon to open the Site Directory.

      Open site directory

    2. Click Go to site on the site tile.

      Open site

      You’ll see all the apps that you have added to your site as well as the UI integration card.

      See all apps

    3. Go ahead and click the apps to launch them.

    What is the name of the tool where you can configure apps, roles, groups, and catalogs?:

Back to Top
Back to top