SAP Business ByDesign SDK Workshop

SAP Cloud Application Studio

Exercises
www.sap.com/contactsap

© 2018 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company.

The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP or its affiliated companies shall not be liable
for errors or omissions with respect to the materials. The only warranties for SAP or SAP affiliate company products and services are those that are set forth in the express warranty statements
accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release any functionality
mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future developments, products, and/or platform directions and functionality are
all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment, promise, or legal obligation
to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are
cautioned not to place undue reliance on these forward-looking statements, and they should not be relied upon in making purchasing decisions.

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other
countries. All other product and service names mentioned are the trademarks of their respective companies. See http://www.sap.com/corporate-en/legal/copyright/index.epx for additional trademark
information and notices.
TABLE OF CONTENTS

GETTING STARTED ................................................................................. 5

a. Download the SAP Cloud Applications Studio .................................................. 5
b. Install the SAP Cloud Application Studio ........................................................... 6
c. Configure your development user ...................................................................... 7
d. Configure your business user ........................................................................... 11
e. Log on using the SAP Cloud Application Studio............................................. 14
BODL....................................................................................................... 16
a. Create a new customer specific solution ......................................................... 16
b. Create a new custom business object .............................................................. 16
c. Create the screens for the new business object ............................................. 18
d. Customize the screens ....................................................................................... 19
e. Add an embedded component for attachments .............................................. 21
f. Assign the work center to your business user and test the solution ............ 25
ABSL AND UI.......................................................................................... 27
a. Add a list and an object value selector............................................................. 27
b. Create an ABSL file............................................................................................. 36
BAC ......................................................................................................... 38
a. Add the Car Parking to the Business Configuration options ......................... 38
b. Test your configuration ...................................................................................... 42
BUSINESS OBJECT EXTENSION ......................................................... 43
a. Extend the Employee business object ............................................................. 43
b. Enhance the Employee screen .......................................................................... 44
c. Test the Employee screen.................................................................................. 47
WEB SERVICES ..................................................................................... 48
a. Create an OData web service for the Employee’s master data ...................... 48
b. Test the Employee OData Web Service ............................................................ 50
c. Create an OData web service for the Car Parking master data ...................... 52
d. Test the CarPark OData Web Service ............................................................... 55
ANALYTICS ............................................................................................ 58
a. Create a data source........................................................................................... 58
b. Create a new report based on the data source ................................................ 59
c. Allow assignment of the report to the Car Park View ..................................... 62
MASHUPS ............................................................................................... 73
a. Create custom Port Type Package .................................................................... 73
b. Create a custom Mashup Port Binding ............................................................. 75
c. Create an HTML Mashup .................................................................................... 77
d. Test the solution ................................................................................................. 85

3
The objective of this hands-on is to put in practice how to develop SAP Business ByDesign
extensions with SAP Cloud Application Studio.

The exercises will cover:

- Exercise 1: Getting Started – download, install, configuration and login

- Exercise 2: BODL – create new business object and screens
- Exercise 3: ABSL – enrich the screens and create script files
- Exercise 4: BAC – add the car park solution to the business adaptation catalog
- Exercise 5: Extending Business Object – extend existing business objects
- Exercise 6: Web Services – create and consume OData services
- Exercise 7: Analytics – create Data Sources and Reports
- Exercise 8: Mashup – embed external systems into ByD screens

The hands-on exercises will require several steps, you must follow them in the proposed
order as each one might be counting on the precedents.

Pre-requisites:

n You must have access to a Windows OS;

n You must have access to an SAP Business ByDesign tenant.

4
 GETTING STARTED
Download, install, configuration and login into SAP Cloud Applications Studio.

a. Download the SAP Cloud Applications Studio

Check your SAP Business

ByDesign version.
Go to the Help Center ->
About link.

5
Go to the SAP Software
Downloads page:
SAP Software Downloads
Select the latest version
that matches your tenant
version and download the
installation package.

b. Install the SAP Cloud Application Studio

Double-click the
downloaded file.
The installation wizard will
open.
Hit Next as many times as
required and finish the
installation with the default
options.
If not installed before some
Visual Studio components
will be requested to be
installed as a prerequisite.

6
 c. Configure your development user
Important Note: In all the steps we will be talking about your specific <YourID> to be
replaced. If you are working in your own private tenant and no one else is doing the same
exercise you can ignore the <YourID>, but if not please use one to avoid conflicts with
other users. This recommendation applies to all the instructions on this document.
In my case <YourID> is 300.

Open your browser and log

in to your ByD tenant with
an Administrator user.

Once in the system, open

the menu and go to
Business Partner Data >
New Service Agent.

Fill in a
Service Agent ID
(ex: EXT<YourID> in my
case EXT300),
First and
Last Name.

Hit Save.

7
Now that the Service
Agent details are in place,
you are good to request a
user.
Hit the button “Request
User”

Go back to the main menu,

and open
Application and User
Management >
Business Users

8
Search for your Service
Agent ID;

Select the line

corresponding to the user
created;
Click Edit > Attributes;

Enter your User ID

e.g. DEV_EXT<YourID>
Important: please, take note of the User
ID you are creating. You will need this
user to log into the SAP Cloud
Application Studio afterwards.

Give it an initial password

(e.g. Initial01)

Click Save and press

Edit Access Rights

Go to the tab
Work Center and View
Assignment

Use the Find button to

search for the Work
Centers showed in the
picture; and assign them to
your user.

9
Log off the Administrator
user.

Log in using the

DEVELOPMENT User you
have just created.
The system will ask you to
change the initial
password.

10
d. Configure your business user

Open your browser and log

in to the ByD tenant with
the Administrator user.

Once in the system, open

the menu and go to
Business Partner Data >
New Service Agent.

Fill in the
Service Agent ID
EXT3001
e.g. EXT<YourID>1,
First and
Last Name.
Hit Save.

Now that the Service

Agent details are in place,
you are good to request a
user.
Hit the button Request
User

11

Go back to the main menu,
and open
Application and User
Management >
Business Users

Search for the Service

Agent ID;
Select the line *EXT3001*
corresponding to the user
created;

Make sure you are

selecting the NEW
business user.
Click Edit > Attributes;

Change the User ID
BU_EXT3001
e.g. BU_EXT<YourID>1
Important: please, take note of the User
ID you are creating. You will use this
user to connect to SAP Business
ByDesign tenant.

Give it an initial password

(e.g. Initial01)

12
Click Save and
“Edit Access Rights”

Go to the tab
“Work Center and View
Assignment”

Use the Find button to

search for the Work
Centers showed in the
picture; and assign them to
your user.
Click Save and Close.

Log off the Admin user.

Log in using the Business

User you have just
created, and system must BU_EXT3001

ask you to
change the initial
password.

13
e. Log on using the SAP Cloud Application Studio

Open SAP Cloud

Application Studio.

Click the yellow pen to edit

the connection details

Give a name to your tenant

and fill the SAP Business
ByDesign Host.
Hit Save and OK.

Connect to the system

using the System,
Development User ID and
Password configured in
the previous steps.

If you can’t connect to your

tenant, please check the
point h) of the following FAQ
(you basically need to
add/change two values on the
windows registry):
https://wiki.hybris.com/pages/vi
ewpage.action?pageId=44796
4184

14
 If you still can’t connect, try
reinstalling .Net Framework
Shell (isolated)

You must now be able to

see the repository of
solutions created on this
tenant.

Great job! You are good to start the creation, development and test of solutions with the
SAP Cloud Applications Studio.

15
 BODL
Create a solution, a custom business object and its screens.

a. Create a new customer specific solution

In the Studio Repository

View, right-click on My
Solutions and choose
Create Solution.

In the Create Solution

dialog:

Solution Type:
Customer-Specific Solution

Description:
EX_BYD_CarPark<YourID>

Detailled Description:
Workshop ByD SDK Car
Parking Solution

Deployment Unit:
Foundation

Company: Partner’s Name

Contact: Your Name
e-mail: Your e-mail

Click OK

b. Create a new custom business object

Go to the Project
Explorer on the top right
side and click Add New
Item.

16
Select Business Object

Give a name to the BO file:

CarPark_<YourID>.bo

Press Add.

Replace the existent code

import AP.Common.GDT as apCommonGDT;
import AP.FO.BusinessPartner.Global;

by this snippet.
businessobject CarPark_<YourID> {
// Root node must not be specified, it is created implicitly
// Add elements here.
[Label("Car Park ID")] element CarParkID : ID;
[Label("Car Park Name")] element CarParkName : LANGUAGEINDEPENDENT_LONG_Text;
[Label("Car Park Description")] element CarParkDescription : LANGUAGEINDEPENDENT_LONG_Description;
[Label("Number of Parking Spaces")] element NumberOfParkingSpaces : IntegerValue;

// To declare an element as alternative key, use the [AlternativeKey] annotation.

Don’t forget to replace //

//
//
Please note:
- An alternative key of type UUID exists implicitly for each node, enabling the node
to be used as an association target.

your <YourID> in the //

//
- The QueryByElements query is created automatically for each node.
- Code completion is available with CTRL + SPACE.

businessobject definition. node ParkingSpace [0,n] {

// each parking space is assigned a unique identifier
[Label("Parking Space ID")] element ParkingSpaceID : ID;

// display the ID of the Employee assigned to the parking space

[Label("Parking Space Employee ID")] element ParkingSpace_AssignedEmployeeID : ID;

// a parking space may be designated as a "Disabled Friendly" parking space

[Label("Is Parking Space Disabled")] element ParkingSpace_Disabled : Indicator;

// is there an electric charging station for this parking space ?

[Label("Is Electric Charge Station")] element ParkingSpace_ElectricChargeStation : Indicator;

// display the license plate number of the employee's car

[Label("Vehicle Registration Number")] element Vehicle_RegistrationNumber :
LANGUAGEINDEPENDENT_MEDIUM_Text;

// for a multi-level car park, we have the possibility to specify a level number
[Label("Parking Space Level")] element ParkingSpace_Level : NumberValue;

// we need to create an association to the SAP BO "Employee"

// this allows us to include elements from the Employee BO in our screens
// a parking space may be associated to at most one employee
association ToEmployee [0,1] to Employee;
}
}

Click Save and Activate

17
c. Create the screens for the new business object

In the Solutions Explorer

view, right-click on the
business object you have
just created and choose
Create Screens
Hint: In case the Create Screens option is grayed
out, press icon Refresh in the Project Explorer or
log on freshly to your solution. It also might be that
the BO is not active yet. Check for the activation
status of the BO in the properties.

Screen Name:
CarPark_<YourID>
Supported Devices:
Desktop Only
Screen Scenario with
Navigation:
true
Short ID:
CarPark_<YourID>

Check if the screens have

been generated

18
d. Customize the screens

In the Project Explorer

view, double-click on
CarPark_<YourID>_QA
The UI Designer will load.

Select Edit -> “Display <->

Edit”

Select the floorplan Title

Click the Properties tab at

the bottom right side of the
Studio.

Select the
Misc -> FloorplanTitle
property and press the
small arrow.

Select Overridden Text

and click Advanced.

19
Change the text to
“Car Park: ”.

Add another field by

clicking the “+” sign.

Press the … button on the

new line.

Select the CarParkID in

the popup window;
Click OK.

The path to the CarParkID

field is added.
Press OK to close the
window.

20
Press Save and Activate.
Press OK if a pop up
shows the Activate
Worklist of components to
be activated.

e. Add an embedded component for attachments

Switch back to the Cloud

Applications Studio and
double-click on
CarPark_<YourID>_OIF.

The UI Designer will open.

Select Edit > Display <->

Edit to make the screen
editable.

Select the attachments

facet.

On the bottom right side,

select the Configuration
Explorer.
Note: if it’s not visible, go to the
main menu, click View and select
“Configuration Explorer”.

21
Find the following
component:
/SAP_BYD_APPLICATION_UI/Reu
se/Attachments/documentlist

Drag&Drop it to the
PaneContainer.

Click the “Bind” button of

the component you just
dropped.

22
On the Source Side Data
Model and select the Root
node.
On the Target Side
Bindings select Node
Reference Binding.
Press Bind.
And then OK.

Save and Activate.

Go to the Project Explorer

and double-click the
Business Object
Carpark_<YourID>.bo

Now we need to create the [DependentObject(AttachmentFolder)] node Attachment;

persistence for the
Dependent Object (DO –
Attachments)
Add the following snippet
to the root node.

Save and Activate.

Open the
CarPark_<YourID>_OWL
(double click on the
OWL.uicomponent file).

Select Edit > Display <->

Edit

Select the first SAP_UUID

column.

23
Go to the Properties tab
on the bottom right

Find
Events ->
OnClick and select
EditHandler.

Go to
Properties ->
DataInformation ->
Text and select the
CarParkID in the
Dependent Property Editor
window.
Press OK.

If you get prompted to use

Backend Text say Yes.

Save and Activate the

OWL screen changes.

24
f. Assign the work center to your business user and test the solution

Go to the browser, head to

your tenant URL and log in
with your business user.

Go to Application and
User Management ->
Business Users

Locate your Business User

and click
Edit > Access Rights.

Click the Find button.

Look for your solution’s ID

(in my case YD9…).

Enter your solution’s ID

and press Search.

Select the line

corresponding to your
solution and hit Locate.

25
Assign the Work Center.
Save and Close.
Log off.

Log in back again with

your business user.

You should be able to see

your solution now.

Open the
CarPark_<YourID> View.

26
 ABSL AND UI
For each car park, you want a table listing the car spaces and the assigned employee for each space.
We will customize the custom business object screens and implement some business logic with ABSL.

a. Add a list and an object value selector

Open the
CarPark_<YourID>_QA

Click the
AddFlexLayoutRow
button.

From de Toolbox view, go

to Panes, and drag&drop
the AdvancedListPane to
the flex layout row added
in the previous step.

The advanced list pane will

be located inside the new
flex layout row.

Select
View >
BO Browser/Data Model.
The view should appear on
the right-hand side of the
UI Designer.

27
Drag the ParkingSpaceID
and drop it to the header
of the first column of the
advanced list pane.

You can choose to use the

Backend text or not.
In my case I select Yes.

Look at the bottom left-

hand side of the UI
Designer and click the
DataModel tab.

28
Select the
DataList >
ParkingSpaceID on the
left tree.
Check it is binded to the
ParkingSpaceID Business
Object Model on the right
side of the screen.

No further action needed

here. J

Go back to the Designer

tab.

Let’s now bind the data to

the second column.
From de BO Browser/Data
Model, drag and drop the
ParkingSpace_Assigned
EmployeeID
element into the second
column header of the list
pane.

You can choose to use the

Backend text or not.
In my case I select Yes.

Open the Properties tab

29
Select
ObjectValueSelector
at
Appearance ->
DisplayType.

Search
ValueHelp ->
OVSComponent
and click the “…” button.

Click “Browse” and select

the component:
/SAP_BYD_APPLICATIO
N_UI
/publicovs
/employeeid
/EmployeeID

Click OK.

30
Click OK again

Save your changes.

Let’s now add the

Associated Elements.

31
Select the
BO Browser/Data Model
tab.

Expand the ToEmployee

association.
You can see the fields of
the Employee business
object.
Drag the element
ToEmployee ->
CurrentCommon ->
BusinessPartnerFormatt
edName
and drop it into the third
column header.

You can choose to use the

Backend text or not.
In my case I select Yes.

The Employee’s name will

be automatically populated
based on the Employee ID
selection; therefore, you do
not want these fields to be
editable.

32
Select the Properties tab.

Go to
Appearance ->
DisplayType
and select StaticText

Press Save.

Let’s now add a tool bar to

our list pane, with two
buttons: Add and
Remove.

Select the list pane.

In the Property Explorer,

go to
Design -> List Pane
Variants and click the
ellipsis (…) button.

33
Under Toolbar
Information, set the
UseToolbar value to True.

Click OK.

By default, you get two

new buttons in a toolbar.
We will configure the event
handler for each of them.

Click the Add Row button.

In the Property Explorer,

under Events -> OnClick
select
...New Event Handler...

34
Enter a name for the event
handler: AddRowHandler

Click the Add Row button

In the Type column, select

List.

Select
Operation: AddRow
Target List: /Root/DataList
Click OK.

Repeat the previous steps

now to create the Event
Handler for the button
Remove.

Type: List,
Name: RemoveRowHandler
Operation: RemoveRow
Target List: /Root/DataList

Save

Go back to the Solution

Explorer,
right-click your solution
and select Activate -> All
Items.

35
b. Create an ABSL file
We have set up the QAF screen and created an OVS to find the Employee ID.
We need now a script file to assign the value selected in the OVS to the
Parkingspace_AssignedEmployeeID element and to update the name field after the
selection of the employee.

Right-click the business

object and select Create
Script Files.

Check the Event:

AfterModify event for the
ParkingSpace node.
Uncheck the Mass
Enable option.
Click OK.

Replace the code by this

/*
Add your SAP Business ByDesign scripting language implementation for:
Business Object: CarPark_<YourID>
Node: ParkingSpace

snippet.
Event: AfterModify
Note:
- To access the elements of the business object node,
use path expressions, for example, this.<element name>.
- To use code completion, press CTRL+J.
- This script file is mass-enabled, i.e. the keyword "this"

https://raw.githubuserconte
refers to a collection of node instances.
- The solution uses this script if:
- the value of any field in the node in which this script is contained is modified.
- the node itself is modified by another business object within the same solution.

nt.com/mendesthi/ByDSD
*/

import ABSL;
import AP.FO.BusinessPartner.Global;

KWorkshop/master/AfterM // Auxiliary flag that will help us decide whether we have to update the ToEmployee association.
var bUpdateEmployee = false;

odify
if (!this.ToEmployee.IsSet()) {
// We have an employee indicated for parking space,
// the association ToEmployee hasn't been initialized yet.
// Set flag to true.
bUpdateEmployee = true;
}
else if ( this.ToEmployee.IdentificationEmployeeID.EmployeeID.content != this.ParkingSpace_AssignedEmployeeID) {
// We have an employee indicated for parking space,
// association ToEmployee still holds employee that had been associated to space before.

Do not forget to replace

//Set flag to true.
bUpdateEmployee = true;
}

<YourID> by your own ID.

if (bUpdateEmployee) {
// Our association to the employee needs to be refreshed.

//Reset association to the employee first, since the new employee ID might be invalid.
this.ToEmployee.Reset();

// Now look for the details of the given employee. connect to the BO Employee's query...
var qryEmployees = Employee.Identification.QueryByEmployeeAttributes;

// populate the parameters collection for the query call...

var paramEmployee = qryEmployees.CreateSelectionParams();
paramEmployee.Add(qryEmployees.EmployeeID.content, "I", "EQ", this.ParkingSpace_AssignedEmployeeID);

// execute the query!

var resultEmployees = qryEmployees.Execute(paramEmployee);
foreach (var oneEmployee in resultEmployees) {
// Since we know that we can have only one employee to the ID
this.ToEmployee = oneEmployee.ToRoot;
break;
}
}

Save and Activate

36
Test the solution.
Open the browser, log into
the tenant with your
business user and add
some data to test the
solution.

37
 BAC
In this exercise we will create a Business Adaptation Catalog element to allow customers to set up and adapt
their tenant to their business needs by setting different configurations in scope.

a. Add the Car Parking to the Business Configuration options

Go to the Solution Explorer

view and click on Add
New Item.

Select BAC Elements

template.
Enter a Name
e.g.
CarPark_<YourID>.bac

Click Add.

38
Fill in the form accordingly:
Type: Business Option
Name: CARPARK_YourID
Description: Business
Option for Car Park
Solution <YourID>
Scoping Question:
Do you want to activate
the Car Park Solution
<YourID>?
Documentation Overview
and Relevance (two tabs):
Activate Car Park
Solution <YourID>

Hit Select to fill the

Anchor

Choose:
General Business Data ->
Employees and Service
Agents ->
Employees

39
Hit Select to fill the
Required Scope

General Business Data ->

Employees and Service
Agents ->
Employees ->
Employee Master Data
Without Human
Resources

Click OK

40
Hit Next and Finish.
Save and Activate.

Back to the Solution

Explorer, right-click the
solution and choose
Deploy Business
Configuration.

Select All content of your

solution.
Click OK.

Follow the deployment

process steps in the status
bar at the bottom left of the
Studio.

41
b. Test your configuration

Open the browser, log into

the tenant with your
business user and test
the solution.
Go to the work center
Business Configuration
->
Implementation Projects.
Select one of your
Implementation Projects.
Click
Edit Project Scope.

Press Next until step

4 Questions.

Go to
General Business Data ->
Employees and Service
Agents -> Employees
Look for the question you
have added.
Note: If you cannot see your
question, go back to the
solution explorer, save all and
activate all again.

42
 BUSINESS OBJECT EXTENSION
In this exercise we will extend the employee business object to show the assigned Parking Space ID in the
employee fact sheet screen.

a. Extend the Employee business object

Go to the Solution Explorer

view and click on Add
New Item.

Select the Business

Object Extension
template;
Replace the file name by
EmployeeBOExtension_
<yourID>.
And click Add.

The Business Object

Selection pops up.

Namespace:
http://sap.com/xi/AP/FO/
BusinessPartner/Global

Business object:
Employee.

43
The node Common {
[Tooltip ("If the employee has been assigned a car parking
EmployeeBOExtension_ space, the ID is displayed here.")]
<yourID>.xbo opens. [Label ("Car Parking Space <YourID>")]
element Assigned_Car_Parking_Space_ID_<YourID> : ID;
}
Replace ONLY the
Common node by the
given snippet (don’t forget
to change the label and
field name by your ID
number)

Save and Activate.

b. Enhance the Employee screen

In the Solution Explorer,

right-click the
Employee_BO_Extensio
n_<yourID>.

Select Enhance Screen.

Select the floorplan

employeecontactdataqaf
eco.

Click OK.

TIP:
If you want to find out the
floorplan corresponding to
the screen you want to
modify press
Ctrl + Alt + Shift + D
for 3 seconds.
You will get a Debug
Console showing the
details of your current
floorplan.

44
The floorplan is opened in
the UI Designer.
Go to the main menu,
select View, Display <->
Edit.

If you get the following

message hit OK.

Select the Basic

Information group.

Open the Extensibility

Explorer.

Click the Add Extension

Field to Section Group
button.

45
The Add Extension File
dialog box opens.
Check the Add and Is
Display Only chekboxes
for the Card Parking
Space <yourID>
corresponding to your
user.
Click Apply.

Accept the message if

prompted.

Save and Activate.

The field should be visible

now.

In the Solution Explorer.

Open the Event-
AfterModify.absl script
assigned to the
ParkingSpace node.

Add this snippet at the end
of the script file, just before
the closing bracket.
(Don’t forget to replace the
element’s ID reference by your
own ID number)
//When a car space is modified, this script will update the
//extension field with the ID of the Parking Space.
var common = this.ToEmployee.CurrentCommon;
if (this.ParkingSpaceID != "") {
common.Assigned_Car_Parking_Space_ID_<YourID> = this.ParkingSpaceID;
}

Save and Activate.

46
c. Test the Employee screen

Log in into your tenant

using your Business
User.
Add a Parking Space to
any employee from your
CarPark screen.

Open the Employee’s

Basic Information screen
(Personnel Administration -
> Employees, search for
the specific employee
assigned to your CarPark,
click on the employee
name link).
Check if the Parking
assigned is displayed.

47
 WEB SERVICES
In this exercise we will learn how to create and consume OData web services.

Our goal is to create an OData web service for the Car Parking solution.

a. Create an OData web service for the Employee’s master data

Log on to the ByD tenant

with your Business User,
and go to
Application and User
Management ->
Input and Output Management ->
OData Services

From the dropdown list

box, select Custom OData
Services.

Click New.

Give the service a name,

such as:
CarPark_<YourID>_Empl
oyee

Click Save and Open.

Open the Header details.

Select the Work Center
View:

MMA_PERSONNELADMIN

Select it.

48
Click Select Business
Object.

Select the Employee

business object.

Select the Common as

node name.

49
Click OK.

Select the properties to

expose as shown here.

Save and Activate.

b. Test the Employee OData Web Service

Click the Service URL link

to test the service.

50
It should return the service
metadata.

Close the OData Editor.

Refresh the OData

Services Overview page.
Check your service is
listed.

Check the data returned by

the service for any
employee having an
assigned parking space:

https://<yourTenant>.sapbydesign.com/sap
/byd/odata/cust/v1/carpark_<yourID>_servi
ce1/EmployeeCommonCollection?$format=
json&$filter=(Assigned_Car_Parking_Spac
e_ID_<yourID>_SDK ne '')

51
c. Create an OData web service for the Car Parking master data

Log on to the ByD tenant

with your Business User,
and go to
Application and User
Management ->
Input and Output Management ->
OData Services

From the dropdown list

box, select Custom OData
Services.

Click New.

Give the service a name,

such as:
CarPark_<YourID>_maint
ain

Click Save and Open.

Open the Header details.

Select the Work Center

View:

MMA_PERSONNELADMIN

Select it.

52
Click Select Business
Object.

Select

BO Name:
CarPark_<YourID>

BO Node Name: Root

Click OK.

Mark the following

elements to expose them
to the web service on the
root node:

Root
CarParkName

53
Mark the following
elements to expose them
on the ParkingSpace node:

ParkingSpaceID
ParkingSpace_Assigned

Tip: Select first the

ParkingSpace node to be
able to select its elements.

Save and Activate.

54
d. Test the CarPark OData Web Service

Click the Service URL link

to test the service.

It should return the service

metadata.

Close the OData Editor.

Refresh the OData

Services Overview page.
Check your service is
listed.

55
Check the data returned
for example by asking for
the list of your carparks:
https://<yourTenant>.sapbydesign.com/sap
/byd/odata/cust/v1/carpark_<yourID>_main
tain/CarPark_300RootCollection

You can also test your OData

service with Postman.

Use the parameters shown here

to GET your CarkParks including
the ParkingSpace node details.

URL: GET
https://<tenant>.sapbydesign.com/s
ap/byd/odata/cust/v1/carpark_<Your
ID>_maintain/CarPark_300RootColl
ection?$expand=CarPark_300Parki
ngSpace&$format=json

Note: this will generate the token

for subsequent updates

56
Here you have an example of
response.

Use the parameters specified here

to assign an Employee to one of
your ParkingSpace.

URL: POST
https://<tenant>.sapbydesign.com/s
ap/byd/odata/cust/v1/
carpark_<YourID>_maintain
/CarPark_<YourID>ParkingSpaceC
ollection('<objectID>')

Note: use the token returned from

the previous GET request and do
not forget to replace the objectID.

You should get a 204 No Content

response status.

57
 ANALYTICS
Let’s now create a new Data Source for our CarPark business object and build a report based on it.

a. Create a data source

Right-click the Business

Object of your car park
solution.
Select Create Data
Source.

Give a name for the data

source

CarPark_<YourID>_Datasource

Hit Next.

Select the fields you want

to add to the data source
and hit Next

Hit Next for the following

steps.

58
Click Finish on the final
Review step.

The Data Source is

created.

Save and Activate.

b. Create a new report based on the data source

Switch On Admin Mode.

59
Confirm the action.

Right-click the data source

and select Create Report.

The browser pops up.

Log in with your
Development User.

Give a name and a

description to your report
“Car Park <YourID>”.
Click Next.

Select the key figures.

Hit Next.

60
Select the characteristics.
Hit Next.

Review the
characteristics
properties.
Hit Next.

Define variables if
required.
Hit Next.

Review the Report

Information.
Hit Finish.

61
Choose Create View for
this Report in a Web
Browser.

Test the report

c. Allow assignment of the report to the Car Park View

Assign a stable anchor to the work center view to which you want your report to be assigned.

Open the
CarPark_<YourID>_WCVi
ew.uiwocview in the UI
Designer.

62
Select Edit -> Display <->
Edit.

Go to
Properties ->
Extensibility ->
Anchors

Hit the “+” button.

Click OK.

Save and Activate.

63
Open the
CarPark_<YourID>_WCF.
WCF.uiwoc in the UI
Designer.

Select Edit -> Display <->

Edit.

Click the folder

CarPark_<yourID>.

Go to
Properties ->
Misc ->
ViewSwitches.

64
Click the Add button.
Go to Misc -> Name.
Name it Report.

Go to Misc -> Text and

click the drop-down list
button.

Type in the new text:

ReportView.

Click OK.

65
Go to Misc ->
SubViewSwitches and
click the … list button.

Click Add and OK.

66
Click OK again to close the
ViewSwitch Collection
Editor window.

Select ReportView.

Select the first report sub

view:
WorkCenterSubView0.

Open the
Configuration Explorer.

67
Select the item
SAP_BYD_TF ->
Analytics ->
AnalysisPattern ->
ana_reports_view_wc

Drag and drop it to the

main pane view and
confirm the message.

68
Select the second report
sub view:
WorkCenterSubView1.

69
Select the item
SAP_BYD_TF ->
Analytics ->
AnalysisPattern ->
ana_reports_carousel_view

Drag and drop it to the

main pane view and
confirm the message.

70
Save and Activate.

Open the browser.

Log into the tenant with
your business user.
Go to
Business Analytics ->
Design Reports

Find your report and click

Assign.

Select you
CarPark_<YourID> Work
Center.
Check the Assign
checkbox to assign the
report to the solution’s
work center.

Save and Close.

Log off.

Log in again to the tenant

with your business user.
Check the report list is
shown under the
ReportView menu of your
CarPark_<yourID>
workcenter.

71
Our report is shown, select
it.

You can choose the Row

fields and Key Figures of
your report as well as the
kind of table or Chart
wanted.

72
 MASHUPS
We can embed an external system UI into ByD screens via Mashups.
In this exercise we will show a Google page inside our business object screen.

a. Create custom Port Type Package

Click Add New Item.

Select
Screens ->
Port Type Package (PTP)
Give a name e.g.
CarPark_<YourID>_PortTyp
ePackage.uicomponent.

Press Add.

Select your custom

business object
CarPark_<YourID> from
the dropdown list.
Hit OK.

73
Open the new
Port Type Package with
the UI Designer

Click Display <-> Edit.

Select the
CarPark_<YourID>_PortT
ypePackage

Hit the “+” button.

Right-click the PortType.

Select Rename.

Rename it to Inport

74
Right-click the PortType
and select
Add Parameter.

Right-click the Parameter.

Select Rename.

Rename it to
InportParameter

Repeat above steps to

create an Outport and an
OutportParameter.

Save and Activate.

b. Create a custom Mashup Port Binding

Click to Add New Item to

your solution.

75
Select Mashups and Web
Services and Mashup
Port Binding.

Give it a name
CarPark_<YourID>_Mash
upPortBinding.

Click Add.

Expand the Mashup

Configuration ->
PortBinding.

Open the
CarPark_<YourID>_Mashu
pPortBinding file.

Make it editable.

Change the Category to

Location & Travel.

76
InPort Type Package:
Select the port type
package you have just
created.
Inport Type Reference:
Inport

OutPort Type Package:

Select the port type
package you have just
created.
Inport Type Reference:
Outport

Save and Activate.

c. Create an HTML Mashup

In the studio, you can create HTML mashups to show html pages from an external cloud
solution. The results are displayed within the iframe.

Pre-requisites:

• You must know the end-point URL of the web site providing the service. This could be,
for example, the search results page of an online search provider.
• You must enable the admin mode for the solution in which you create the mashup to
ensure that the system saves your content and any changes you make in the solution.

Right-click on
MashupConfiguration ->
MashupAuthoring.

Select Create HTML

Mashup.

77
If prompted Enable the
admin mode.

Enter your developer user

and password.

Look up for the Port

Binding you configured in
previous steps.

Select it and click OK.

78
Complete the information:
Name:
HTMLMashup_CarPark_<
YourID>
Description:
HTMLMashup_CarPark_<
YourID>
Type: URL
Height: 800
URL:
https://www.google.com/
search
Parameters:
q – InportParameter
source – hp
igu – 1

Save and Activate.

Go back to the Solution

Explorer.
Hit the refresh button.

You will notice the new

mashup just below the
MashupAuthoring.

Open the file

CarPark_<YourID>.bo
business object.
Add this element to the
root node:
[Label("Car Park
Location")] element
CarParkLocation :
LANGUAGEINDEPENDENT_LONG_
Text;

Save and Activate.

79
Open the OIF floorplan in
the UI Designer.

Make it editable.

Go to the main menu,

select Tools -> Update
Metadata, to get the new
BO metadata containing
the location.

Go to the
BO Browser/Data Model.

Drag the
CarParkLocation to the
FieldGroup pane.

Click the Controller tab at

the bottom left corner.

80
Right-click the Outports
folder and select
Add Outport

Rename it to
URL_Mashup_OutPort

In the Outport
Configuration:
UR_Mashup_Outport
pane, select the following:
PortType Package: choose
the port type package
created in previous step
CarPark_<YourID>_PortT
ypePackage.

Press OK.

Set PortType Reference:

Inport

81
Click the ellipsis button of
the InportParameter.
Choose the
CarParkLocation
element.

Press OK.

Save and Activate

At the bottom left switch

back to the Designer tab

Right-click the
NavigationItem and select
Add -> OIF View

A new tab shows up.

Click it once to select it.

82
Go to Properties ->
Design -> Title and click
on the arrow button.

Change the Overriden Text

to
Location.

Press OK.

Open the Configuration

Explorer.

Go to the main folder of

your solution and find the
mashup you created.
<yourSolutionCode>_Mai
n ->
SRC ->
Mashups ->
Pipes ->
<yourMashupCode>

83
Drag and drop the mashup
to the pane container.

Click the Bind button.

Note: If you get an

exception while trying to
drag and drop the mashup
please login to your tenant
with an Admin user and
assign also a specific work
center for Mashups
management to your dev
user:
MAS_MASHUPAUTHORI
NG.
If prompted also select
ITS_KEYUSERCHANGEL
OG.

Click the
Navigation Configuration
tab.
Right-click the
Navigation folder and
Add Navigation.

In the Navigation Details

select the OutPort you
configured in the previous
steps:
URL_Mashup_OutPort.

84
Select on the right side of
the Navigation
Configuration the Target
InPort:
Inport_In

Then select both Source

and Target as
InportParameter.

A new row appears into

Bound Parameters for
InportParameter.

Click OK

Save and Activate

d. Test the solution

Open the browser, log into

the tenant with your
business user and test
the solution.
Select the
CarPark_<YourID> Work
Center View and select
one of your Car Park IDs
by clicking on its link.

85
Click View All

Check if the Car Park

Location field is
maintained.
Select the Location tab.

You can see Google

search web page showing
a map of the address.

86