Agile Meets Mobile: Go From Prototype To Sap Fiori App in 15 Minutes

AGILE MEETS MOBILE: GO FROM PROTOTYPE
TO SAP FIORI APP IN 15 MINUTES

MOB160
Exercises / Solutions
Matthias de la Roche / SAP
Jeff Gebo / SAP
MOB160
TABLE OF CONTENTS
1 BUILD .................................................................................................................................................... 3
1.1 Login into BUILD .......................................................................................................................... 3
1.2 Cloning a Build project ................................................................................................................. 4
1.3 Adapting your app ........................................................................................................................ 6
1.4 Further Adapting your app ........................................................................................................... 7
2 HCP Webide Configuration ................................................................................................................. 12
2.1 Configuring SAP Web IDE to access BUILD ............................................................................. 12
3 Webide development .......................................................................................................................... 21
3.1 Importing the BUILD project into webide .................................................................................. 21
3.2 Adapting imported SAP Web IDE project .................................................................................. 24
3.3 Adding search capabilities and mobile features to your app ..................................................... 34
4 Run The App On Your Mobile Device ................................................................................................. 44
4.1 Test On Your Device ................................................................................................................. 44
5 OPTIONAL EXERCISE ....................................................................................................................... 49
5.1 Create Splash BUILD Project .................................................................................................... 49
2
MOB160
In this session you will explore SAP Build by building a low fidelity prototype and then clone a
sample app from the App Gallery. In the next steps you will import this prototype into Web IDE
and adapt the app to use mobile features.
SAPs UX strategy is about the design and development of delightful applications according to the SAP
Fiori concept. SAP Fiori applications adhere to this concept and can be deployed in cloud or on premise.
BUILD provides knowledge, tools, and inspiration that will help you create apps that your users love. It is
a new cloud based collaborative design tool. See for yourself how easy it can be to use BUILD to create
interactive prototypes, get feedback from users, and jump-start development without writing a single line
of code.
You can learn following topics in this hands-on exercise.
1. How to access BUILD?

2. How to create a low fidelity prototype
3. How to create a high fidelity prototype?
4. How to handover BUILD prototype code to development with WebIDE
5. Adapt your Fiori app and add mobile features to it
NB: Kindly use Chrome web browser throughout this exercise
1 BUILD
1.1 Login into BUILD
Explanation Screenshot
1. Go to https://www.build.me/
2. Enter the following email :
mob160-xxx@teched.cloud.sap
xxx is your assigned group
number
3. Press Proceed
3
MOB160
4. Enter again the email

number
5. Password is Welcome16
6. Press Logon
1.2 Cloning a Build project

Build offers an App Gallery that you can use for starting your project. In our scenario we will use the Track
Sales Order app from the gallery and adapt it to our needs. In the optional exercise you will learn how to
use low fidelity projects for starting your prototyping.
1. Press on See Full Gallery
4
MOB160
2. Search for Track Sales Order

app and Click on the App tile
3. Press Clone to get your own

copy of the app and confirm
the next popup
4. After a few seconds the project

is cloned
5. Rename you project by

hovering with your mouse over
the name of the project until a
change icon appears
5
MOB160
6. Rename your project to

MOB160. Please note that
BUILD does not have a save
button. All changes are
automatically saved !
1.3 Adapting your app

In this step we will be adapting the BUILD project. Our goal is to have a simple master detail app that
display sales order and items. The current app offers many other screens that we will be removing in this
step.
1. Press the Go to Page Map

button
2. On the next page press on the

3 vertical dots to open the
menu on Item Detail and select
Delete Page
3. Do the same for the contacts

page below.
6
MOB160
4. Please note there is no save

button present. Changes will be
stored automatically. If you
have to undo something use
the undo icon on the bar
5. Test you app by pressing the

button Preview
6. Test using different form factors

by selecting the form factor
icons on the bar.
7. Press on the Desktop Form

factor and Back to Page Map
8. This is how your app should

look like. Sales Orders Master
and Sales Orders
1.4 Further Adapting your app

In this step we will be making some changes at page level and also some changes on the columns
displayed at table level.
7
MOB160
1. Lets first show you how to go

back to the page overview in
case you accidentally close
your browser.
2. Clicking on the icon on the top
left will return you to an
overview of your projects.
3. From here click on MOB160
4. Press the Go to Page Map

button
5. Hover over the Sales Order

Page and press Edit Page
6. Click on the Shipped icon on

the tab bar
8
MOB160
7. On the left the outline of the

page will appear. Locate the
Notes Icon tab and hover over
it until a delete icon appears.
Press delete
8. Delete also the Icon Tab

In Process and the
Attachment Icon Tab.
9. Review your changes app by

pressing the button Preview
10. Go back to the editor mode by

pressing UI Editor on the top
9
MOB160
11. Remove some columns from

the table by first selecting Sales
Orders from the left
12. Now select the Column Net

Amount from the table
13. Make sure you see the green
border surrounding the whole
column
14. Now right click on the header

and press select Delete from
the menu
10
MOB160
15. Delete columns State

summary and Shipped as
well.
16. After the deletion only column

Description , Ordered and Price
should exist.
17. Review your changes by

pressing the button Preview
18. Go back to the editor mode by

pressing UI Editor on the top
19. We are now finished with our

changes. Press on Publish to
Publish your App.
11
MOB160
20. You will receive a confirmation

that the project has been
published
2 HCP WEBIDE CONFIGURATION
2.1 Configuring SAP Web IDE to access BUILD

In this step you will be configuring SAP HCP and SAP Web IDE to be able to access the project you have
created in BUILD.
1. Open
12
MOB160
2. Click
https://account.hanatrial.ondem
and.com/
3. Press logon
7. Enter the following user id :

number
4. Password is Welcome16
5. From the SAP HANA Cloud

Platform Cockpit, access your
personal developer account by
clicking on the name of your
account.
13
MOB160
6. We need to create 2
destinations for BUILD
7. Press on Connectivity ->
Destinations
8. Click on New Destination
9. Enter:
Name: WEB_IDE_PLUGIN
Type: HTTP
Description:
BUILD Destination
URL:
https://www.build.me/webideplu
gin
Proxy Type: Internet
Authentication:
NoAuthentication
10. Click (twice) on New Property
11. Add the Properties

WebIDEEnabled -- true
WebIDEUsage -- plugin_repository
14
MOB160
12. Click on Save
13. To create a second destination

click on New Destination
14. Enter:
Name: BUILD_Production
Type: HTTP
Description:
Destination for BUILD
URL:
https://www.build.me/webide/
Proxy Type: Internet
Authentication:
NoAuthentication
15. Click (twice) on New Property

WebIDEUsage -- BUILD/SPLASH
15
MOB160
17. Click on Save
18. You will have to create a third

and last destination. This
destination will be used to
access your backend system.
19. To create a third destination
click on New Destination
20. Enter the following properties:

Title: ES4
Description: ES4
URL:
https://sapes4.sapdevcenter.com:4
43
ProxyTpye: Internet
Authentication Type: From the
drop down select Basic
User: P1942107286
Password: welcome
This user is the same for all

participants.
21. Click (5 times) on New

Property.
sap-client : 800
TrustAll : true
WebIDESystem : ES4
16
MOB160
WebIDEUsage:
odata_abap,dev_abap,ui5_execute
_abap
23. Click on Save
24. Start webide by selecting

from the Hamburger Menu
the option Services
17
MOB160
25. Search for web and select

SAP Web IDE
26. Now select Open SAP Web

IDE
18
MOB160
27. You are now in the SAP Web

IDE
28. Activate the BUILD here by

selecting the Tools
Preferences
29. Under Plugins select the

Drop down BUILD
Destination
19
MOB160
30. Activate the Plugin in the

webide and press save
31. Confirm the Refresh Popup
32. Once the screen has

refreshed the webide will
have access to the BUILD
projects
20
MOB160
3 WEBIDE DEVELOPMENT
3.1 Importing the BUILD project into webide

In this step you will be importing the BUILD project into webide and do some initial testing.
1. In your SAP Web IDE click on

File New Project from
template
21
MOB160
2. From the Dropdown select

BUILD Project
3. Press Next
4. Call your Project MOB160 and

press NEXT
22
MOB160
5. Enter your build user

xxx : your group number
Password: Welcome16
6. Enter your build user

xxx : your group number
7. You should now have a new

Project called MOB160 in your
SAP Web IDE
23
MOB160
8. Test your project by Clicking on

the MOB160 folder and
selecting the Run icon
9. Test your app. You will notice

that functions like Search do
not work. Also the data is
coming from a fixed set of data.
We will fixing this in the
following steps.
3.2 Adapting imported SAP Web IDE project

In the next couple of steps we will be adapting our project to retrieve data from a backend system. We will
also make some changes to the UI and the bindings.
24
MOB160
1. In this step you will import an

odata service definition from
System ES4.
2. Click on your project folder and
select New > Odata service
3. Select ES4 from the drop down

and enter gwsample in the
search field.
4. Select GWSAMPLE_BASIC
from the table below
5. And press next
25
MOB160
6. Check Overwrite existing odata

and press finish
7. you will see an new

metadata.xml being imported
under
LocalService/GWSAMPLE_BA
SIC
26
MOB160
8. delete the old odata definition

under the localService
metadata.xml . We will replace
this file with the newly imported
metadata.xml
9. select metadata.xml under

GWSAMPLE_BASIC folder
press and right click and then
Copy
27
MOB160
10. now select the localService

folder and press right click -
paste
11. lets now map the ui fields to

the new odata service. For this
we will use the layout editor.
12. Right click on S0.view.xml in

folder view and select Open
with Layout editor
13. Make sure the View is selected
28
MOB160
14. And from the drop down on the

right select SalesOrderSet
15. confirm the popup
16. now select S1.viewl.xml in

folder view and open it with the
layout editor
29
MOB160
17. make sure the view is selected

and from the drop down on the
right select SalesOrderSet
18. confirm the popup
19. click on template on the lower

part oft he screen
20. on the top of he screen you

you should see that Column
List Item is selected
30
MOB160
21. from the drop down on the right

select
SalesOrderSet/ToLineItems.
This should be the last item on
the drop down list
22. press save to save your

changes
23. we still need to adapt the place

where we define what
odataservice is being called
24. double click on manifest.json
31
MOB160
25. select the Code Editor from the

bottom oft he screen . Do not
use the Descriptor Editor
26. locate the models section and

replace "dataSource": "main",
with "dataSource":
"GWSAMPLE_BASIC",

changes
28. now we are ready for our first

test.
29. Press run
32
MOB160
30. You will notice that the list of

sales orders have changed as
compared to the very first test.
This is because the app is now
using the new odata service
31. The details and the list of items

is however missing
32. To get the items working we

still need to make one more
change.
33. Double click on S1.controller.js
34. Modify line "expand":

"Shipping,ItemSet,ItemSet/Prod
uct" to "expand": "ToLineItems"

changes
33
MOB160
36. press Run and you will now see

that the correct line items are
displayed
3.3 Adding search capabilities and mobile features to your app

The current app does not implement search capabilities. We will add this to the app and also the
capability to scan a barcode to demonstrate the usae of mobile qualities from within an app
1. Double click on S0.controller.js
onSearch: function() {
2. Add the text in yellow just var filters = [];
before the onInit: function . var searchString =
this.getView().byId("searchField").getValue();
3. You will be able to format the if (searchString &&
text after copying the text into searchString.length > 0) {
the editor filters = [new
sap.ui.model.Filter("SalesOrderID",
sap.ui.model.FilterOperator.Contains, searchString)];
}
34
MOB160
this.getView().byId("sap_m_List_1").getBinding("items"
).filter(filters);
},
onBarcodeScan: function() {
var that = this;
var code = "";
try {
cordova.plugins.barcodeScanner.scan(function(result)
{
that.getView().byId("searchField").setValue(result.text)
;
var filters = [];
var searchString =
that.getView().byId("searchField").getValue();
if (searchString &&
searchString.length > 0) {
filters = [new
sap.ui.model.Filter("SalesOrderID",
sap.ui.model.FilterOperator.Contains, searchString)];
}
that.getView().byId("sap_m_List_1").getBinding("items
").filter(filters);
}, function(error) {
alert("Barcode
scanning failed: ", error);
});
} catch (e) {
alert("Cordova plugin is not
available.");
}
},
onInit: function() {
35
MOB160
4. Your source code should now

like like this
5. We need to adapt the ui as well
6. Double click on S0.view.xml
36
MOB160
7. Remove lines from <m:Toolbar

through </m:Toolbar>
8. Add the lines in yellow just <m:Toolbar id="sap_m_Toolbar_2_22" visible="true"

before the </m:headerToolbar> enabled="true" width="100%" design="Solid">
line <m:content>
<m:SearchField search="onSearch" id="searchField"

showSearchButton="true" visible="true" width="100%"/>
<m:Button width="40px" id="__button0" icon="sap-

icon://bar-code" press="onBarcodeScan"/>
</m:content>
</m:Toolbar>
</m:headerToolbar>
9. Your code should look like this.

10. In this step we have added a
button to the left that triggers
the onBarcodeScan function
and the search will trigger the
onSearch function

changes
37
MOB160
12. press Run and enter the value

17 in the search field.
13. To test the scan functionality

we need the web-camera of the
PC. The remote desktop does
not support the camera, so we
need to switch to the Host
system.
Copy the URL of your

SAP Web IDE.
Click strg+alt+home or
strg+alt+pos1 and
minimize the RDP session.
14. Open the browser (Google

Chrome) on the Host OS and paste
the SAP Web IDE URL in the
address bar to open it.
38
MOB160
15. Press run
8. You will now see the new

button for the barcode scan.
Press the button and scan the
qr code from the next step.
9. At this stage you might get an

error like the one on the right
indicating that the browser does
not know how to scan a
barcode
10. The Hybrid Application Tookit

provides a plugin that simulates
many features that typically
only work on mobile devices.
This is called faade.
11. Activate the faade by going to

the Tools preferences
39
MOB160
12. Select Plugins
13. Select Hybrid App Toolkit
14. And press Save
15. Confirm the popup to enable

the plugin
40
MOB160
16. Press run again
16. You will now see the new

button for the barcode scan.
Press the button and scan the
qr code from the next step.
41
MOB160
17. Chrome pop up might ask you

to allow the camera of your
laptop.
18. Click Allow and scan the QR-

Code/Barcode with the camera of
your laptop
19. The scanning process will

populate the search field and
trigger the search. This
functionality is provided by the
cordova Faade.
42
MOB160
20. Webide also allows you to test

in different form factors. To
enable this go to Run -> Run
configuration
21. Select FLP service and select

With Frame
22. Click on Save and Run
23. The app will be started again

and you will notice a Frame that
can be used to adapt the
screen size.
24. Click on 480x800 to simulate a

phone format
43
MOB160
25. For the next exercise click on

the qr code button on the right
of the screen
26. This action will display a qr

code on the screen that
represents the url of the app
4 RUN THE APP ON YOUR MOBILE DEVICE

To run the App on a mobile device we will use the Companion-App.
This app allows us to scan the QR-Code from the SAP Web IDE-WebPreview and start the same App on
a mobile device.
All the Kapsel plugins our mobile app might need are already included in the Companion App.
4.1 Test On Your Device
44
MOB160
1. Start the companionApp
2. Double tap on the screen or

click the button at the bottom
left to open the menu.
Click the SCAN button at the

top.
45
MOB160
3. Scan the QR Code from your

SAP Web IDE Application
preview in the chrome
browser.
4. Please note this is the qr code
of the webide and not the qr
code of the sales order !
5. Enter your HANA Cloud

credentials and click Login
6. These are the same credential

from the webide
46
MOB160
7. The sales orders will show up
8. Tap the barcode button
47
MOB160
9. Scan the QRCode/Barcode
10. the app will search for the

sales order
48
MOB160
5 OPTIONAL EXERCISE
BUILD also provides excellent support for creating low-fidelity protypes, that can ne used to pitch an idea
to a group of interested parties and already at an early stage collect feedback and new ides..
In this exercise we will assume that you already have some paper based design and will use that to build
your first prototype.
5.1 Create BUILD Project
1. Go to https://build.me and
press Login
2. Now logon with your user and

password
3. Click on Create new project
49
MOB160
4. Create on new project
5. Give your project a name and

press Create Project
6. Click on Start Prototyping
7. Locate the Student Share on

your desktop
50
MOB160
8. Navigate tot he folder MOB160
9. Mark the 3 png files and drag

and drop them into the browser
window
10. For each image a new page will

be created. Click on the top of
the images and drag and drop
them to reorganize the
sequence.
51
MOB160
11. Mark the area around Tecum. A

green area will appear. Connect
the arrow tot he next page.
12. Mark the area around the back

arrow on the second page and
link it to the first page
13. Mark the area around Digital

Pencil on page 2 and link it to
page 3
52
MOB160
14. Mark the area around the back

arrow on page 3 and link it to
the first page
15. Click on the form factor iphone

on the top bar
16. Press preview to test your

prototype.
17. You can now test your

navigation. Press Back to page
map to end Preview mode
18. The next steps would be now to

share your prototype with other
user and collect feedback.
2016 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. 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. Please see http://www.sap.com/corporate-
en/legal/copyright/index.epx#trademark for additional trademark information and notices.
53

Agile Meets Mobile: Go From Prototype To Sap Fiori App in 15 Minutes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Agile Meets Mobile: Go From Prototype To Sap Fiori App in 15 Minutes

Uploaded by

Copyright:

Available Formats

AGILE MEETS MOBILE: GO FROM PROTOTYPE

TO SAP FIORI APP IN 15 MINUTES

You can learn following topics in this hands-on exercise.

1. How to access BUILD?

NB: Kindly use Chrome web browser throughout this exercise

1.1 Login into BUILD

4. Enter again the email

1.2 Cloning a Build project

1. Press on See Full Gallery

2. Search for Track Sales Order

3. Press Clone to get your own

4. After a few seconds the project

5. Rename you project by

6. Rename your project to

1.3 Adapting your app

1. Press the Go to Page Map

2. On the next page press on the

3. Do the same for the contacts

4. Please note there is no save

5. Test you app by pressing the

6. Test using different form factors

7. Press on the Desktop Form

8. This is how your app should

1.4 Further Adapting your app

1. Lets first show you how to go

4. Press the Go to Page Map

5. Hover over the Sales Order

6. Click on the Shipped icon on

7. On the left the outline of the

8. Delete also the Icon Tab

9. Review your changes app by

10. Go back to the editor mode by

11. Remove some columns from

12. Now select the Column Net

14. Now right click on the header

15. Delete columns State

16. After the deletion only column

17. Review your changes by

18. Go back to the editor mode by

19. We are now finished with our

20. You will receive a confirmation

2 HCP WEBIDE CONFIGURATION

2.1 Configuring SAP Web IDE to access BUILD

7. Enter the following user id :

5. From the SAP HANA Cloud

8. Click on New Destination

10. Click (twice) on New Property

11. Add the Properties

12. Click on Save

13. To create a second destination

15. Click (twice) on New Property

16. Add the Properties

17. Click on Save

18. You will have to create a third

20. Enter the following properties:

This user is the same for all

21. Click (5 times) on New

22. Add the Properties

23. Click on Save

24. Start webide by selecting

25. Search for web and select

26. Now select Open SAP Web

27. You are now in the SAP Web