8 - Create a Work Zone Site and Embed Your App
Create a site for accessing your application using SAP Build Work Zone, standard edition, as part of the SAP Build CodeJam.
Overview
You will learn
- How to create an SAP Build Work Zone site
- How to embed your shopping app in your site
Prerequisites
Prerequisites
- You have completed the previous tutorial for the SAP Build CodeJam, Add Approval Flow to Process.
Steps
Intro
To enable you to reach SAP Build Work Zone from the SAP Build Loby, you need to add a role to your user.
Go back to the BTP Cockpit.
Go to Security > Users.
Click on your user with Custom IAS tenant.

Open user In the side panel, click the 3 dots, and then click Assign Role Collection.

Assign role collection Search for the Launchpad_Admin role, select it, and click Assign Role Collection.

Launchpad_Admin role You must log out of SAP Build and log back in for the new role collection to take effect.
In the SAP Build lobby, click Create > Create.

Open Work Zone Select Business Site, and then click Next.

Build site If you get a Not Subscribed indicator, make sure you have the LaunchpadAdmin role and log off and log back into SAP Build.

Not subscribed Log off with the “avatar” at the top right (yours will have your initials).

Logg out Select Admin Console, and then click Open.

Open Admin console The Admin Console opens.

Admin console
Click Create Site.

Create site Enter
Purchasingas the site name, and click Create.
Create The site settings screen opens in a new tab.
Click Edit in the top-right corner.

Edit Under Display, select Spaces and Pages - New Experience.

Select new experience Click Save.
Go back to the site directory in the previous browser tab.
You will see your new site tile.

New site tile
Open the Channel Manager.

Open channel manager Click the Update Content icon.

Update content It will show Updating … and take a few minutes to update. When Updated is displayed, continue to the next step.
Open the Content Manager.

Open content manager Click Content Explorer.

Open content explorer Click HTML5 Apps.

HTML5 Apps Select your ShoppingApp, and then click Add.
You will get a success essage at the bottom of the page.

Select app Use the breadcrumb to go back to the Content Manager.

Navigate back There you will see your app.

App is added
In the Content Manager, click on the Everyone role.

Open everyone Click Edit.

Edit everyone In the Assignment Status column for your app, toggle the switch to on (green).

Turn on app It should then look like this:

App on Click Save.
Go back to the Content Manager main page with the breadcrumb.
Click Create, and then Page.

Create page Set the title to Overview.

Set title Click Add Section.

Add section Call the section Purchasing.

Create section Click Add Widget.

Add widget Select your ShoppingApp, and then click Add (1).

Add app Click Save for the page.
You get a preview of the page.

Go back to the Content Manager with the breadcrumb.
Click Create, and then Space.

Create space Set the title to Home.

Set space title In the Pages tab, for your page, toggle the Assignment Status column to assign (green).

Add page to space Click Save.
Go back to the Content Manager with the breadcrumb.
Double-click Everyone to open it.

Open Everyone Click Edit.
Under Spaces, toggle the Assignment Status column for your new space, so it is on (green).

Add space to Everyone Click Save.
Go to the Site Directory.

Open Site Directory Open your site.

Open site You’ll see your site, space, page, and app.

Preview Click the tile, and your app should open.
You will see at the top the navigation from SAP Build Work Zone to return you to your site.

App preview with navigation
Resources
Discussion
Share feedback on this tutorial or join the conversation in SAP Community.