openSAP Building Mobile Applications with SAP

Screen Personas
Summary Week 2 Unit 1

PUBLIC
Topics Covered

1. The purpose of adaptive flavors

2. Building an adaptive flavor
3. Adaptive flavor behavior

Unit Summary

The purpose of adaptive flavors

The adaptive flavors feature allows you to create flavors that are sized for different
devices. They are based on a flavor that you have already built, called the parent flavor,
but are sized according to your specifications.

An adaptive flavor is also called a child flavor. Child flavors inherit all the properties
from the parent flavor, but you can rearrange and hide controls on screen to meet your
different users’ needs.

Building an adaptive flavor

You can create an adaptive flavor by clicking on the Show Adaptive Flavors button on
the flavor tile and then selecting Add Adaptive Flavor. Creating an adaptive flavor also
has one additional step: you must specify your desired flavor width.

There are several tools available in SAP Screen Personas to help you design your
adaptive flavors.

To help you visualize your set width, a gray border is applied at your breakpoint. Any
objects beyond this point will force your users to scroll horizontally to interact with
them — an undesired action in a mobile app. Instead, it is better to move and/or resize
these objects to ensure a better user experience for your users.

As mentioned in Week 1 Unit 5: Using the SAP Screen Personas Editor in the
Slipstream Engine, you can use the device preview feature to see what your flavor will
look like when rendered on your mobile device.

Adaptive flavor behavior

Once you have built both a parent and child flavor, the Slipstream Engine runtime
selects a flavor based on the width of the device rendering the screen.

2
Coding Samples
Any software coding or code lines/strings (“Code”) provided in this documentation are only examples and are not intended for use in a production system environment. The Code is only intended to better
explain and visualize the syntax and phrasing rules for certain SAP coding. SAP does not warrant the correctness or completeness of the Code provided herein and SAP shall not be liable for errors or
damages cause by use of the Code, except where such damages were caused by SAP with intent or with gross negligence.

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 t o 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 e xpectations. 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 trade marks 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.
openSAP Building Mobile Applications with SAP
Screen Personas
Summary Week 2 Unit 2

PUBLIC
Topics Covered

1. The SAP Fiori Client application

2. Using a device’s camera as a barcode scanner

Unit Summary

The SAP Fiori Client application

To access the native capabilities of a mobile device (camera, GPS, etc.), the device
must have the SAP Fiori Client application installed. It is required to provide access to
the JavaScript interfaces that allow access to those features.

The SAP Fiori Client application can be downloaded from the Apple App Store and the
Google Play store.

Using the SAP Fiori Client application to access native device capabilities can improve
usability by simplifying business processes, as well as potentially improve efficiency by
reducing the time it takes to perform tasks.

Accessing your flavor in the SAP Fiori Client application only requires your flavor URL.
You can enter it manually into the field or scan the QR code for the flavor.

Using a device’s camera as a barcode scanner

Accessing native device capabilities requires the use of the SAP Screen Personas
Scripting Editor. In the course scenario, a script that allows access to a device’s
camera requires four things:

1. Ensuring that the Cordova variable is defined, which will only occur on a mobile
device using the SAP Fiori Client application. The script should also create a
message that native device access is not supported when accessed from a
desktop.
2. Two callback functions: one if the scan is successful and the QR code is read,
and another if the scan failed.
3. In the event of a successful scan, a script that sets the value of the input field to
the scanner value.
4. The use of executeScriptAsync(). to synchronize the screen update once the
scan result is available. Otherwise, the scan and screen update will happen
asynchronously.

2
Coding Samples
Any software coding or code lines/strings (“Code”) provided in this documentation are only examples and are not intended for use in a production system environment. The Code is only intended to better
explain and visualize the syntax and phrasing rules for certain SAP coding. SAP does not warrant the correctness or completeness of t he Code provided herein and SAP shall not be liable for errors or
damages cause by use of the Code, except where such damages were caused by SAP with intent or with gross negligence.

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 t o 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 e xpectations. 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 trade marks 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.
openSAP Building Mobile Applications with SAP
Screen Personas
Summary Week 2 Unit 3

PUBLIC
Topics Covered

1. Creating templates in SAP Screen Personas

2. A consideration when working with scripts in templates

Unit Summary

Creating templates in SAP Screen Personas

If you need to build multiple SAP Screen Personas flavors for your mobile application
project — for different device sizes, scenarios that require moving in and out of
transactions, or other purposes — templates will help you maintain a consistent look
and feel across all screens.
They also expedite the flavor creation process by preventing you from having to make
a similar series of edits to all of your screens.
Templates can also be used to include scripts in your flavors. Template scripts allow
you to reuse scripts without having to rewrite them. You can add scripts to your
templates in the Release tab in the Template Editor.

Templates can be created in the SAP Screen Personas Editor or downloaded from the
SAP Screen Personas Flavor Gallery. Templates downloaded from the Flavor Gallery
can also be edited to suit your needs.

Child flavors inherit the properties of the parent flavor. If you would like both your
parent flavor and child flavor(s) to have a template, insert it in the parent flavor.
Templates inserted into the child flavor will not be present in the parent flavor.

A consideration when working with scripts in templates

Because templates are designed to work on any screen, your template scripts should
only refer to controls or objects that are guaranteed to be present and have the same
unique identifier in every flavor using that template. Template scripts that refer to
custom controls that are present in one flavor but not another will not run properly.

2
Coding Samples
Any software coding or code lines/strings (“Code”) provided in this documentation are only examples and are not intended for use in a production system environment. The Code is only intended to better
explain and visualize the syntax and phrasing rules for certain SAP coding. SAP does not warrant the correctness or completeness o f the Code provided herein and SAP shall not be liable for errors or
damages cause by use of the Code, except where such damages were caused by SAP with intent or with gross negligence.

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 t o 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 e xpectations. 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.
openSAP Building Mobile Applications with SAP
Screen Personas
Summary Week 2 Unit 4

PUBLIC
Topics Covered

1. Defining viewports
2. Creating viewports
3. When to use viewports

Unit Summary

Defining viewports

Viewports in SAP Screen Personas allow you to create virtual screens that provide
different views on different parts of your transactions. You can use them to simplify
the user experience of a complex transaction by breaking the transaction into more
manageable chunks. This allows users to step through complex processes in a wizard-
like fashion and helps to manage screen real estate on mobile devices.

Creating viewports

Virtual screens are created using the SAP Screen Personas Script Editor. You can
create virtual screens by using one of the two actions below to generate virtual screen
numbers in the Script Editor. Attaching one of the below scripts to a script button will
also allow you to navigate between your virtual screens.

1. session.viewport.next(); — This increases the screen number by 1 every time it is

executed.
2. session.viewport.show(####); — This allows you to access whatever screen
number is specified, but you will have to create your own screen number.
You can create these scripts in the general Script Editor or in a template.

Reminder: you can view your screen number in the Script Editor.

Once you create your virtual screen, it will resemble the original screen without any
flavor modifications on top of it. You will then have to modify your screens again if you
would like them to resemble your flavors. Templates will help expedite this process.

When to use viewports

There are a number of questions that you can ask yourself to determine if using a
viewport would be better than using scripting for navigation:

1. Would navigation require complex scripting? This may negatively affect

performance and create other maintenance considerations.
2. Can the transaction be broken down into smaller tasks? You can create virtual
screens to help users focus on those smaller tasks.

2
3. Will this flavor be used on a mobile device? Creating simpler virtual screens and
having users navigate through them step-by-step reduces the amount of screen
real estate needed at any one time.

3
Coding Samples
Any software coding or code lines/strings (“Code”) provided in this documentation are only examples and are not intended for use in a production system environment. The Code is only intended to better
explain and visualize the syntax and phrasing rules for certain SAP coding. SAP does not warrant the correctness or complet eness of the Code provided herein and SAP shall not be liable for errors or
damages cause by use of the Code, except where such damages were caused by SAP with intent or with gross negligence.

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 serv ices 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 docume nt 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 e xpectations. 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 trade marks 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.
openSAP Building Mobile Applications with SAP
Screen Personas
Summary Week 2 Unit 5

PUBLIC
Topics Covered

1. Factors that influence application performance

2. Tips for improving performance

Unit Summary

Factors that influence application performance

An application’s responsiveness and loading times are critical to its user experience.
Common factors that affect a user’s perception of app performance are the amount of
time required to complete a business process and the amount of time required to
process an action, such as clicking on an object.

Due to the limited screen real estate of mobile devices, users are also sensitive to
application design (Is the screen cluttered?) and application complexity (Is it easy for
them to perform the required task?)

Tips for improving performance

Design your flavors for your users’ devices. Improperly sized flavors may lead to
cluttered screens and an unpleasant experience for your users.

Viewports can be used to reduce app complexity by allowing users to access virtual
screens that only show the parts of a screen they need for a certain stage in a business
process. Viewports can also be used to reduce the need for tab merging, improving
rendering times.

Reducing data transfer and the amount of data on screen can also lead to improved
performance. Table variants allow you to simplify tables by only displaying the columns
relevant to your business process. This can decrease rendering time. Using the
smallest images possible will also help to reduce the amount of data on screen, and
thus improve rendering times.

Batched scripts with read requests grouped together and write requests grouped
together can improve rendering times by reducing the amount of roundtrips to the
backend.

2
Coding Samples
Any software coding or code lines/strings (“Code”) provided in this documentation are only examples and are not intended for use in a production system environment. The Code is only intended to better
explain and visualize the syntax and phrasing rules for certain SAP coding. SAP does not warrant the correctness or completeness of the Code provided herein and SAP shall not be liable for errors or
damages cause by use of the Code, except where such damages were caused by SAP with intent or with gross negligence.

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 t o 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 e xpectations. 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.