Ux410 en Col02 Ilt Fv Part a4 Wm

pe rs on al us e

UX410

C op

.

yr

ig

ht

m

at

er ia of l o IB f S M A R P; O u tr sa ai g ni e ng rig fr ht om s re 19 st -2 ric 3. te 02 d .2 to 01 th 8. e

Developing SAP Fiori UIs

. PARTICIPANT HANDBOOK INSTRUCTOR-LED TRAINING

. Course Version: 02 Course Duration: 5 Day(s) Material Number: 50136085

ht

ig

yr

C op


at

m

pe rs on al us e

Typographic Conventions

The following typographic conventions are also used.

This information is displayed in the instructor’s presentation

Procedure


Demonstration

pe rs on al us e

American English is the standard used in this handbook.

Warning or Caution

Hint

Related or Additional Information

Facilitated Discussion

Example text

Window title

Example text

C op

yr

ig

ht

m

at

User interface control

iv

© Copyright. All rights reserved.

ix

Course Overview

1

Unit 1:

2

Lesson: Explaining UX vs Usability vs UI

7

Unit 2:

8

SAP UX Strategy Lesson: Introducing the SAP UX Strategy

Unit 3:

16

Lesson: Explaining the SAP Fiori UX

23

Unit 4:

24

Lesson: Explaining Decomposition and Re-composition Lesson: Working with SAP BUILD Exercise 1: Create a Prototype with SAP BUILD

49

Unit 5:

50 56

Unit 6:

66

SAP Web IDE

Lesson: Working with the SAP Web IDE

75

Unit 7:

m

at

76 85

ht

Development Basics SAP Web IDE

Lesson: Using the Development Tools of SAP Web IDE Exercise 2: Create a Trial Account for SAP HANA Cloud Platform and Start the SAP Web IDE Exercise 3: Create a Simple SAPUI5 Application Using the Layout Editor Exercise 4: Deploy a SAPUI5 Application on an ABAP Server Using SAP Web IDE Exercise 5: Import a SAP BUILD Prototype into SAP Web IDE

C op

yr

115

SAP Fiori Design Guidelines

Lesson: Understanding SAP Fiori Design Guidelines Lesson: Understanding App Types

65

101

User Experience Design

Lesson: Explaining Design Thinking

29 32 39

93

SAP Fiori UX


15

ig

Introduction to User Experience (UX)

pe rs on al us e

Contents


v

127

Unit 8:

129 135

Lesson: Understanding SAPUI5 Basics: Bootstrapping and MVC Lesson: Understanding SAPUI5 Basics: Modules, Data Binding and Translatable Texts Lesson: Understanding SAPUI5 Basics: Component and App Descriptor Lesson: Understanding SAPUI5 Basics: Margins and Paddings, CSS, Dialogs and Fragments Lesson: Understanding SAPUI5 Basics: Aggregation and Expression Binding Lesson: Understanding SAPUI5 Basics: Custom Formatting, Filtering, Sorting, and Grouping Exercise 6: Implement a Filter Lesson: Understanding SAPUI5 Basics: OData Model Lesson: Understanding SAPUI5 Basics: Testing Exercise 7: Create a QUnit Test Scenario Exercise 8: Create an OPA5 Test Scenario Lesson: Understanding SAPUI5 Basics: Routing and Navigation

pe rs on al us e

143 146 150


153 157 166 170 179 191 204 206 211 243

Lesson: Understanding SAPUI5 Basics: Visualizing Business Data Exercise 9: Work with Diagrams

Unit 9:

244 251

Unit 10:

Unit 11:

at m

Unit 12:

ht

279

SAP Fiori Launchpad

Lesson: Understanding the SAP Fiori Launchpad Lesson: Understanding the Technical Perspective of SAP Fiori Launchpad Lesson: Understanding the SAP Fiori Launchpad Configuration SAP Fiori Launchpad Services Lesson: Understanding the SAP Fiori Launchpad Services Exercise 10: Navigate in SAP Fiori

C op

yr

ig

280 289


Lesson: Implementing SAP Fiori Uis using the SAP Fiori Design Guidelines

258 262 264

Golden Rules of SAPUI5 Development

Lesson: Knowing the Golden Rules of SAPUI5 Development

252

257

SAPUI5 Basics

vi


309

Unit 13:

Lesson: Learning the Difference between Application Framework,

312 315 334 339

Page Layout and Floorplans Lesson: Understanding Fullscreen Exercise 11: Create a FullScreen Application Lesson: Understanding SplitScreen Exercise 12: Create a Master-Detail Application Unit 14:

Lesson: Describing the General Concepts of the SAP Fiori Design Guidelines Exercise 13: Work with Messages Lesson: Describing App Types Defined in the SAP Fiori Guidelines Lesson: Describing Floorplans Defined in the SAP Fiori Guidelines Exercise 14: Implement Value Helps Lesson: Describing the Object View, as Defined in the SAP Fiori Guidelines Exercise 15: Implement an ObjectView Lesson: Describing the List Report, as Defined in the SAP Fiori Guidelines Exercise 16: Implement a List Report Lesson: Describing the Flat Object View, as Defined in the SAP Fiori Guidelines Exercise 17: Implement the EditPage Floorplan Lesson: Creating Main Entities, as Defined in the SAP Fiori Guidelines Exercise 18: Implement the Create Floorplan Lesson: Describing the Worklist, as Defined in the SAP Fiori Guidelines Exercise 19: Implement the Worklist Floorplan Lesson: Describing the Draft Handling, as Defined in the SAP Fiori Guidelines Lesson: Describing the SAP Fiori Locking

373 387 391 395 403 407 416 419 429 433 445 449 456 459 465

m

483

at

468


369

Unit 15:

ig yr

499 507 512 515

526

SAP Fiori Extension Concept

Lesson: Explaining the Extension Point Concept of SAPUI5 Lesson: Implementing View Replacements, Modifications and Extensions Exercise 20: Implement an ExtensionPoint Lesson: Implementing Controller Extensions and Hook Methods Lesson: Extending Translations with Customer Properties Exercise 21: Provide an i18n Resource Text Customization

ht

484 493

525


pe rs on al us e

310

367

C op

SAP Fiori Foundation

Unit 16:

Lean Development Infrastructure Lesson: Understanding the Lean Development Infrastructure


vii

viii


ht

ig

yr

C op


at

m

pe rs on al us e

TARGET AUDIENCE This course is intended for the following audiences: Development Consultant

●

Developer

C op

yr

ig

ht

m

at


●

pe rs on al us e

Course Overview


ix

x


ht

ig

yr

C op


at

m

pe rs on al us e

Introduction to User Experience (UX)

Lesson 1

2


Explaining UX vs Usability vs UI

pe rs on al us e

UNIT 1

UNIT OBJECTIVES

Explain the differences between UX, Usability and UI

C op

yr

ig

ht

m

at

●


1

Unit 1 Lesson 1

LESSON OBJECTIVES After completing this lesson, you will be able to: Explain the differences between UX, Usability and UI


●

pe rs on al us e

Explaining UX vs Usability vs UI

UX vs Usability vs UI Scenario

In this lesson, we will discuss the differences between User Experience (UX), Usability and UI (User interface).

C op

yr

ig

ht

m

at

Figure 1: Application Speech

2



pe rs on al us e

Lesson: Explaining UX vs Usability vs UI

Figure 2: The problem - Attention Span

User Experience

The international standard on ergonomics of human system interaction, ISO 9241-210, defines user experience as "a person's perceptions and responses that result from the use or anticipated use of a product, system or service". According to the ISO definition, user experience includes all the users' emotions, beliefs, preferences, perceptions, physical and psychological responses, behaviors and accomplishments that occur before, during and after use. The ISO also list three factors that influence user experience: system, user and the context of use. Usability

Definition of usability - ISO 9241:

The effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments. Effectiveness: the accuracy and completeness with which specified users can achieve specified goals in particular environments. Efficiency: the resources expended in relation to the accuracy and completeness of goals achieved.

C op

yr

ig

ht

m

at

Satisfaction: the comfort and acceptability of the work system to its users and other people affected by its use. UI

The user interface, in the industrial design field of human–machine interaction, is the space where interactions between humans and machines occur. The goal of this interaction is to allow effective operation and control of the machine from the human end, whilst the machine simultaneously feeds back information that aids the operators' decision making process. LESSON SUMMARY You should now be able to: ●

Explain the differences between UX, Usability and UI


3

ht

ig

yr

C op


at

m

pe rs on al us e

Unit 1: Introduction to User Experience (UX)

4


Unit 1


1. How does the ISO 9241-210 define user experience?

pe rs on al us e

Learning Assessment

2. What are the three key factors that influences the user experience? Choose the correct answers. A System

X

B Data to explore

X

C User

X

D Context of use

X

E Effectiveness

C op

yr

ig

ht

m

at

X


5

Unit 1

pe rs on al us e

Learning Assessment - Answers

1. How does the ISO 9241-210 define user experience?


The ISO defines user experience as person's perceptions and responses that result from the use or anticipated use of a product, system or service". 2. What are the three key factors that influences the user experience? Choose the correct answers. A System

X

B Data to explore

X

C User

X

D Context of use

X

E Effectiveness

C op

yr

ig

ht

m

at

X

6


SAP UX Strategy

Lesson 1

8


Introducing the SAP UX Strategy

pe rs on al us e

UNIT 2

UNIT OBJECTIVES

Introduce the SAP UX Strategy

C op

yr

ig

ht

m

at

●


7

Unit 2 Lesson 1

LESSON OBJECTIVES After completing this lesson, you will be able to: Introduce the SAP UX Strategy


●

pe rs on al us e

Introducing the SAP UX Strategy

SAP UX Strategy Scenario

In this unit, we will concentrate to the User Experience (UI) and SAPs idea of it.

Figure 3: Why User Experience (UX) Matters

C op

yr

ig

ht

m

at

Often, software is written from the perspective of the features and functionality included… So while it can be very powerful, it can also come across as intimidating and complex. In contrast, most users don't view software in the context of all the features and functionality included. They are much more interested in how easily it helps facilitate what they are trying to accomplish day to day.

8

So let's briefly take a look at the benefits of putting the user first. Studies have shown that intuitive, consistent, and simple user experiences save time and increase productivity. Users make less errors, training isn't as complicated, and employee satisfaction rises. And there are actually ways to quantify costs savings associated with a good user experience. If you think about it, one good improvement to a user experience quickly pays off especially for repetitive or cyclical tasks that will be done over and over again.



pe rs on al us e

Lesson: Introducing the SAP UX Strategy

Figure 4: SAP`s Approach to UX

C op

yr

ig

ht

m

at

Figure 5: SAP`s Unified Cloud Experience


9


pe rs on al us e

Unit 2: SAP UX Strategy

Figure 6: Simple User Experience for Easy and Sophisticated Tasks

Figure 7: Innovation and Design Thinking

So how does SAP approach user experience now that we see just how relevant it is? SAP has three areas of focus, we like to call New, Renew, and Enable:

New -provide consumer-grade user experience for new applications

at

●

C op

yr

ig

ht

m

●

10

●

Renew -improve the user experience of SAP's existing applications, starting with the most commonly used business scenarios

Enable - Give SAP customers the ability to improve the user experience of SAP software in ways that allow them to decide which mission-critical business scenarios are most important to them.

With this new strategy in mind, SAP crafted a new vision and mission to accompany the user experience strategy. Our vision is to provide the leading user experience for business applications and our mission is to simplify your world with design. So why did we create SAP Fiori UX? It started as the center of the renew part of the SAP UX strategy. We took the most commonly used business scenarios and created SAP Fiori UX apps for them. But then it evolved in the SAP Fiori UX, as you'll soon learn, and became the new user experience (UX) for SAP software. SAP Fiori UX is the new face of SAP to business users in all lines of business


Lesson: Introducing the SAP UX Strategy


pe rs on al us e

across devices and deployment options. It provides optimal usability for simplified business interactions and ease of use. To date, we have an extensive portfolio with over 300 apps spanning across a number of business roles and areas.

Figure 8: SAP`s Commitment

LESSON SUMMARY You should now be able to:

Introduce the SAP UX Strategy

C op

yr

ig

ht

m

at

●


11

ht

ig

yr

C op


at

m

pe rs on al us e

Unit 2: SAP UX Strategy

12


Unit 2

pe rs on al us e

Learning Assessment

1. What monetary values are in focus when it comes to an discussion about the User experience? Choose the correct answers. A Gain productivity

X

B Increase Custom Loyalty

X

C Decrease User Errors

X

D Increase User Satisfaction

X

E Save Training Costs


X

2. What Human Values should be in focus? Choose the correct answers. A Gain Productivity

X

B Increase Solution Adoption

X

C Increase Customer Loyalty

X


X

E Decrease Change Requests

C op

yr

ig

ht

m

at

X


13

Unit 2

pe rs on al us e


1. What monetary values are in focus when it comes to an discussion about the User experience? Choose the correct answers. A Gain productivity

X

B Increase Custom Loyalty

X

C Decrease User Errors

X


X

E Save Training Costs


X

2. What Human Values should be in focus? Choose the correct answers. A Gain Productivity

X

B Increase Solution Adoption

X

C Increase Customer Loyalty

X


X

E Decrease Change Requests

C op

yr

ig

ht

m

at

X

14


SAP Fiori UX

Lesson 1

16


Explaining the SAP Fiori UX

pe rs on al us e

UNIT 3

UNIT OBJECTIVES

Explain the SAP Fiori UX

C op

yr

ig

ht

m

at

●


15

Unit 3 Lesson 1

LESSON OBJECTIVES After completing this lesson, you will be able to: Explain the SAP Fiori UX


●

pe rs on al us e

Explaining the SAP Fiori UX

SAP Fiori UX Scenario

In the last unit, we discussed the User Experience in general. SAPs new approach for a great user experience is SAP Fiori. In this unit, you will explore the basics of SAP Fiori.

C op

yr

ig

ht

m

at

Figure 9: What is SAP Fiori UX?

16



pe rs on al us e


Figure 10: Paradigm Shift: Coherent Across Functional Areas

C op

yr

ig

ht

m

at

Figure 11: Paradigm Shift: Designed for You, Your Needs, and How You Work


17


pe rs on al us e

Unit 3: SAP Fiori UX

Figure 12: Intuitive User Experience and a Responsive Design

C op

yr

ig

ht

m

at

Figure 13: SAP Fiori Principles

Figure 14: Application Types

18



The figure shows the SAP Fiori Object Browser (AT3), in S/4HANA. There are three categories of apps currently developed in Fiori. These three categories help developers to guide their architecture and development effort:

●

●

Archetype I: These scenarios are typically transactional and represent views on and interaction with existing business processes and solutions.

pe rs on al us e

●

Archetype II: Purely analytical apps. Typical representatives are Smart business (KPI Cockpits) but also other analytical, predictive and planning applications Archetype III: Search applications


Additonally, Fiori offers a support, which is a mix of applications from different archetypes in a way that users can navigate from an "Insight"-App to an "Action"-App which means from an archetype II analytical applications or archetype III factsheet to a transactional archetype I application.

C op

yr

ig

ht

m

at

Figure 15: SAP Fiori Launchpad at a Glance

Figure 16: Simple, Delightful, and Intuitive User Experience


19


pe rs on al us e

Unit 3: SAP Fiori UX

Figure 17: From technology to design


Explain the SAP Fiori UX

C op

yr

ig

ht

m

at

●

20


Unit 3

1. What are the SAP Fiori Key principles? Choose the correct answers. A Role-based


X

pe rs on al us e

Learning Assessment

X

B Simple

X

C Coherent

X

D Mobile device centric

X

E Transactional

2. What application types are known as SAP Fiori application types? Choose the correct answers. A Transactional

X

B Data centric

X

C Analytical

X

D Diagram based

X

E Fact sheet

C op

yr

ig

ht

m

at

X


21

Unit 3

pe rs on al us e


1. What are the SAP Fiori Key principles? Choose the correct answers. A Role-based


X X

B Simple

X

C Coherent

X

D Mobile device centric

X

E Transactional

2. What application types are known as SAP Fiori application types? Choose the correct answers. A Transactional

X

B Data centric

X

C Analytical

X

D Diagram based

X

E Fact sheet

C op

yr

ig

ht

m

at

X

22


User Experience Design

Lesson 1 Explaining Design Thinking

24


Lesson 2

pe rs on al us e

UNIT 4

Explaining Decomposition and Re-composition

29

Lesson 3

Working with SAP BUILD Exercise 1: Create a Prototype with SAP BUILD

32 39

UNIT OBJECTIVES

Explain Design Thinking

●

Explain Decomposition and Re-composition

●

Work with SAP BUILD

C op

yr

ig

ht

m

at

●


23

Unit 4 Lesson 1

pe rs on al us e

Explaining Design Thinking

LESSON OBJECTIVES After completing this lesson, you will be able to: Explain Design Thinking


●

Design Thinking, Introduction Scenario

In this unit, we will discuss about design thinking. In stead of modeling a solution around the required functionality, the approach today is to model the solution around the user experience. What is User Experience Design?

User Experience Design (UXD or UED or XD) is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product. User experience design encompasses traditional human–computer interaction (HCI) design, and extends it by addressing all aspects of a product or service as perceived by users Elements of User Experience Design

User Experience Design contains the following elements: ●

●

●

●

Information architecture

Interaction Design

Usability

Accessibility

at

●

Visual Design

C op

yr

ig

ht

m

●

Human-computer interaction

Design Thinking, Aspects

User Experience Design - Design Thinking Design Thinking Rules of Engagement The following are basic rules of engagment in an design thinking phase: ●

Design Thinking is a highly interaction process whereby active participation by everyone is a hard REQUIREMENT (be in or be out): -

24

anyone interested in experiencing Design Thinking, SAP offers a 2-day Design Thinking workshop (THINK1) and a 3 days workshop: UX401, which introduces SAP Build



-

this lesson focuses on the principles only and is not a Design Thinking workshop

●

everyone has a voice

●

defer judgment listen carefully to everyone because hearing and exploring divergent perspectives is the goal

pe rs on al us e

●

during a Design Thinking session, no cell phones, computers, or pads

●

most important: have fun!


●

C op

yr

ig

ht

m

at

Figure 18: User Experience Design - Design Thinking Design Thinking History at SAP

Figure 19: User Experience Design - Design Thinking Design Thinking (DT) - One Possible Definition


25


pe rs on al us e

Unit 4: User Experience Design

Figure 20: User Experience Design - Design Thinking Bringing together the best of two worlds

Scientists and Business People often tackle problems through theories, taxonomies and models to depict a problem in all its dimensions thus reduce the complexity of a problem until it is finally entirely describable. In contradiction to this, Designers have to deal with problems pragmatically in much shorter time and cannot follow a purely analytical approach. Design Thinking is a method based on "Design" principles, but the "Thinking" means, that there is a specific mindset on top. As already outlined, this mindset requires a combination of analytical and intuitive thinking. You could also say, it brings the world of "design", which is more associated with intuitive thinking into the world of business, which is traditionally more associated with analytical thinking.

C op

yr

ig

ht

m

at

In a nutshell, Design Thinking brings together the best of both worlds.

Figure 21: User Experience Design - Design Thinking DT is a Human Centered Iterative Innovation Process

26



Solving „Challenges" and problems by generating ideas is equivalent to being innovative. Actually this means, that Design Thinking is an innovation approach. Herby , Design Thinking seeks to identify the optimal solution in the intersection between peoples desires, technological feasibility and business viability.

pe rs on al us e

The core focus of Design Thinking lies in the "Desirability" section. Other techniques can complement Design Thinking to cover Viability and Feasibility.

A consequence of the strong focus on peoples desire, are higher investments in the early stages of product/solution developments. The problem space has to be deeply explored, before solutions ideas can be generated.

This ensures, that the problem is really understood and solution ideas are validated before faulty designs runs into implementation.


Finally, this avoids expensive redesigns in later stages.

C op

yr

ig

ht

m

at

Figure 22: User Experience Design - Design Thinking Design Thinking Process Phases

Figure 23: User Experience Design - Design Thinking Brainstorming rules


27


LESSON SUMMARY You should now be able to: Explain Design Thinking

C op

yr

ig

ht

m

at


pe rs on al us e

●

28


Unit 4 Lesson 2

LESSON OBJECTIVES After completing this lesson, you will be able to: Explain Decomposition and Re-composition


●

pe rs on al us e

Explaining Decomposition and Re-composition

Decomposition and Re-composition

C op

yr

ig

ht

m

at

Figure 24: Transactions vs. Apps

Figure 25: Transactions: Designed from a System Perspective


29


Figure 26: Transactions: From a User Perspective - Complexity

pe rs on al us e


Figure 28: "Apps" Approach: User/Task-centric

C op

yr

ig

ht

m

at

Figure 27: Transactions: From a User Perspective - Complexity (cont.)

30



Figure 29: Decomposition & Composition

pe rs on al us e

Lesson: Explaining Decomposition and Re-composition

Figure 30: SAP Enterprise Architecture Explorer


Explain Decomposition and Re-composition

C op

yr

ig

ht

m

at

●


31

Unit 4 Lesson 3

LESSON OBJECTIVES After completing this lesson, you will be able to: Work with SAP BUILD


●

pe rs on al us e

Working with SAP BUILD

SAP BUILD

Figure 31: Using SAP BUILD for UI-Design

at

Splash is:

an online tool to create prototypes

●

providing an End-to-End support from design to Implementation with the SAP Web IDE

●

currently in beta state

C op

yr

ig

ht

m

●

32

Note: This course was built, when the successor of Splash, SAP BUILD was already announced. Please accept the parallel use of Splash and SAP BUILD in this course.



pe rs on al us e

Lesson: Working with SAP BUILD

Figure 32: Create SAP BUILD-Project

C op

yr

ig

ht

m

at

Figure 33: Create a Project Using Templates


33


pe rs on al us e


Figure 35: Template Project Overview

C op

yr

ig

ht

m

at

Figure 34: Template Gallery

34



pe rs on al us e


Figure 36: Template Project Demo

C op

yr

ig

ht

m

at

Figure 37: Clone a Template Project


35


pe rs on al us e


Figure 39: Adapting Cloned Project

C op

yr

ig

ht

m

at

Figure 38: Work with a Clone Template Project

36



pe rs on al us e


Figure 40: Creating and Working with Simulation Data

C op

yr

ig

ht

m

at

Figure 41: Preview Your Work Inside SAP BUILD


37

ht

ig

yr

C op


at

m

pe rs on al us e


38


Unit 4 Exercise 1

Business Scenario

pe rs on al us e

Create a Prototype with SAP BUILD

In this exercise you will create a prototype with SAP BUILD, using the Clone function.


1. Create a SAP BUILD app access.

C op

yr

ig

ht

m

at

2. Clone a Project.


39

Unit 4 Solution 1

pe rs on al us e

Create a Prototype with SAP BUILD

Business Scenario

In this exercise you will create a prototype with SAP BUILD, using the Clone function.


1. Create a SAP BUILD app access.

a) For the predecessor of SAP BUILD, Splash open the URL https:// www.experiencesplash.com/splashapp/. For SAP BUILD use the URL: http:// www.build.me. Please note: the screenshots in this course still show SAP Splash.

b) Choose the blue OK, GOT IT! button.

Figure 42: Entry step

c) Choose the orange-colored button SIGN UP.

Figure 43: Splash, sign up

d) Then click on REGISTER.

e) Put in your first name, last name and e-mail address. If you don´t want to use your business eMail-adress, please create an account with a free service provider. Additionally confirm the two selection fields.

C op

yr

ig

ht

m

at

Note: Enter a valid e-mail address, because after signing up you will be sent an activation link.

Figure 44: Registration

40



f) Subsequently you will receive an activation link to the previously stated e-mail. Please click on the assigned link. 2. Clone a Project.


b) When logged in, click on the tile Create New Project.

pe rs on al us e

a) If not yet done sign up in the SplashApp.

Figure 45: Create a New Project

c) From the gallery, choose the tile with title Create Sales Order.

If the application isn´t shown on the first screen, click on the link SEE FULL GALLERY.

Figure 46: Full Gallery

Figure 47: Create Sales Order

e) Confirm the following screen with CLONE. f) After successfully cloning the template, click on the site with the title Sales Order.

C op

yr

ig

ht

m

at

d) On the next screen, click on the CLONE button.


41

Figure 48: Prototype

g) Familiarize yourself with the design of the recently created prototype.

pe rs on al us e



h) Publish the Project through the marked button (shown in the picture below).

Figure 49: Button: Publish

i) Confirm the appearing dialog with PUBLISH. You have now published your prototype.

C op

yr

ig

ht

m

at

Figure 50: Publish button

42



LESSON SUMMARY You should now be able to: Work with SAP BUILD

C op

yr

ig

ht

m

at


pe rs on al us e

●


43

ht

ig

yr

C op


at

m

pe rs on al us e


44


Unit 4

1. What elements are part of User Experience Design? Choose the correct answers. A Visual Design


X

pe rs on al us e

Learning Assessment

X

B Interaction Design

X

C Usability

X

D Human readability

X

E Stability

2. What three elements come into play to create innovation? Choose the correct answers. X

A Feasibility

X

B Accessibility

X

C Sustainability

X

D Desirability

X

E Viability

3. What key properties do you know about SAP Build?

C op

yr

ig

ht

m

at

Choose the correct answers. X

A Online tool to create prototypes

X

B Tool integrated into the SAP Web IDE

X

C End-to-End tool from design to implementation

X

D Integrated into Screen Personas


45

Unit 4: Learning Assessment

4. What types of prototype creation is possible with SAP Build?

A Prototypes based on templates

X

B Prototypes based on SAP Web Dynpro

X

C Freehand prototypes

X

D Prototypes based on SAP Web IDE Templates

C op

yr

ig

ht

m

at


X

pe rs on al us e

Choose the correct answers.

46


Unit 4

1. What elements are part of User Experience Design? Choose the correct answers. A Visual Design


X

pe rs on al us e


X

B Interaction Design

X

C Usability

X

D Human readability

X

E Stability

2. What three elements come into play to create innovation? Choose the correct answers. X

A Feasibility

X

B Accessibility

X

C Sustainability

X

D Desirability

X

E Viability

3. What key properties do you know about SAP Build?

C op

yr

ig

ht

m

at


A Online tool to create prototypes

X

B Tool integrated into the SAP Web IDE

X

C End-to-End tool from design to implementation

X

D Integrated into Screen Personas


47

Unit 4: Learning Assessment - Answers

4. What types of prototype creation is possible with SAP Build?

A Prototypes based on templates

X

B Prototypes based on SAP Web Dynpro

X

C Freehand prototypes

X

D Prototypes based on SAP Web IDE Templates

C op

yr

ig

ht

m

at


X

pe rs on al us e


48



Lesson 1 Understanding SAP Fiori Design Guidelines

50


Lesson 2

pe rs on al us e

UNIT 5

Understanding App Types

56

UNIT OBJECTIVES

Understand SAP Fiori Design Guidelines

●

Understand App Types

C op

yr

ig

ht

m

at

●


49

Unit 5 Lesson 1

LESSON OBJECTIVES After completing this lesson, you will be able to: Understand SAP Fiori Design Guidelines


●

pe rs on al us e

Understanding SAP Fiori Design Guidelines

SAP Fiori Guidelines, Introduction Scenario

Figure 51: Introduction

The SAP Fiori Design Guidelines can be found at https://experience.sap.com.

C op

yr

ig

ht

m

at

To ensure a perfect user experience, SAP Fiori comes with design guidelines. In the next unit, you will learn, how to find them, and how to build a great user experience.

50


Lesson: Understanding SAP Fiori Design Guidelines


Figure 52: SAP Fiori Principles

pe rs on al us e

SAP Fiori Guidelines, Foundation

Figure 53: Multi-Device Support: Responsive vs. Adaptive

These are some basic Guidelines:

●

●

C op

yr

ig

ht

m

at

●

●

●

●

SAP Fiori apps must run on all three major device types (desktop, tablet, and smartphone).

If app functionality and information can be offered equally on all device types, responsive methods should be used to automatically adjust the app. If app functionality and/or information cannot be offered unaltered on different device types (due to use case, available screen real estate, or device capabilities), the app should be adjusted manually to device specific requirements. Adaptive and responsive methods can be mixed. If you are using desktop controls (not recommended: sap.commons, allowed: sap.table) you currently have to replace them with responsive controls when running on a mobile device. If you are using the ALV (analytical table), it should be replaced by the responsive table (sap.m) or another use case specific solution (for example, charts, texts, KPIs).


51

Unit 5: SAP Fiori Design Guidelines

Mobile First These are the basic guidelines for the Mobile First approach: Mobile first means looking at the scenario as if you have to design a mobile application

●

Mobile first means you have to deal with restrictions

●

Mobile first forces you to reconsider established solutions

●

Working with restrictions you will be much more focused

●

Working with restrictions will lead you to find smart ways to reduce, aggregate or group Mobile first has responsive or adaptive design in mind from the first moment of development


●

pe rs on al us e

●

Figure 54: Grid Layout

Grid Layout

SAP Fiori uses a new measuring system using rem instead of px. Rem stands for root em. A base size of 16 px defines 1 rem.

C op

yr

ig

ht

m

at

SAP Fiori UI elements are based on a 1 x 1 rem (16 x 16 px) flexible layout grid system.

52



pe rs on al us e


Figure 55: Letterboxing

In web design, it is common practice to restrict the page content to a certain width. This way the content does not stretch too wide and become unreadable. If a screen gets wider than this maximum width, blank areas to the left and right are shown. In many cases, these areas are used to display advertisements. This design element is called letterboxing because it restricts the contents to a certain width similar to the width of letterbox format. SAP Fiori also offers letterboxing. In earlier releases, letterboxing to 1024 px was automatically enforced in order to avoid distorting contents, but letterboxing became an optional feature in later releases. Cozy Form and Compact Form Factors

To adapt to different interaction styles better, SAP Fiori apps need to support two different form factors:

●

When running on mouse- and keyboard-enabled (non-touch) devices, the information density on the screen can be increased by reducing control dimensions. This is called the compact form factor. In the compact mode, the default control area of 3 rem is reduced to 2 rem

C op

yr

ig

ht

m

at

●

When running on touch devices, the app should display all controls with dimensions that are big enough for finger tips. This is called the cozy form factor


53


pe rs on al us e


Figure 56: Content Density (Cozy and Compact)

at

Figure 57: Working with the Factors

C op

yr

ig

ht

m

Iconography & Typography Iconography:

●

●

unlike images of icons, the icon font is fully customizable with CSS. Therefore, different themes can be applied SAPUI5 Icon Explorer provides access to more than 500 scalable pictograms

Typography: ●

54

SAP Fiori uses a set of timeless, sans-serif system fonts



●

a font stack is used within the CSS that includes Arial and Helvetica in combination with the Roboto font for Android System fonts offer the advantage of no loading time, consistent font is always available

LESSON SUMMARY You should now be able to: Understand SAP Fiori Design Guidelines

C op

yr

ig

ht

m

at


●

pe rs on al us e

●


55

Unit 5 Lesson 2

LESSON OBJECTIVES After completing this lesson, you will be able to: Understand App Types


●

pe rs on al us e

Understanding App Types

App Types App Types

SAP Fiori knows two different app types: ●

Conceptual app types -

●

A conceptual application type defines how the overall design of the application looks like. E.g. the Approval App is a kind of conceptual Application

Technical app types

A technical application type specifies the technical aspects of an application. E.g. the transactional App is a kind of technical app type

C op

yr

ig

ht

m

at

-

Figure 58: SAP Fiori Apps Reference Library

The SAP Fiori apps reference library can by found at: https:// fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/.

56


Lesson: Understanding App Types

Transactional Apps Transactional Apps:

they represent simplified views and interaction with existing business processes and solutions


●

these apps are used for performing transactional tasks, such as creating a leave request for an employee

pe rs on al us e

●

Figure 59: Transactional Apps Landscape

These are the major properties of the transactional landscape:

●

Decoupling of front end and backend system

●

Lifecycle decoupling of UI apps from back end

●

Especially for apps that must also run on anyDB

C op

yr

ig

ht

m

at

These are the major benefits:

●

Allow faster iterations for the UI apps

●

Allow changes to UI without the need for development privileges in the back end

●

Add-on-based delivery enables fast release cycles

●

Single point of UI maintenance like browser support or UI5 provisioning

●

Central place for theming and branding

●

Single place for configuration, personalization and Fiori shell services

●

Rule-based dispatching of requests in a multi-system landscape, (e.g. for approvals incl. aggregation)


57


●

●

Security considerations Similar to an application-level gateway (ALG) with protocol switch and whitelisting (excl. search) Admin for UI metadata does not need to have admin rights in the back end (data sensitivity)

pe rs on al us e

●

Fact Sheet Apps Fact Sheet Apps:

display contextual information about central objects used in the business operations

●

designed to be intuitive and harmonized

●

provide drill down into details

●

●

●


●

provide navigation from one fact sheet to related fact sheets

it is also possible to access related transactions in operational systems

access the back-end system to display document details or to edit the document from a document fact sheet is also possible

Contextual information about central objects used in the business operations are displayed in these apps. Fact sheets are designed to be intuitive and harmonized. From a fact sheet area (tile), it is possible to drill down into its details. It is easy to navigate from one fact sheet to its related fact sheets. For example, navigate from a document to the related business partner or to the master data. From fact sheets, it is also possible to access related transactions in operational systems. Access the back-end system to display document details or to edit the document from a document fact sheet is also possible.

C op

yr

ig

ht

m

at

Fact sheets run only on an SAP HANA database and require an ABAP stack.

Figure 60: Fact Sheets Landscape

58


Lesson: Understanding App Types

Analytical Apps Analytical Apps:

●

get role-based insights into business by collecting and displaying key figures directly in the browser through the SAP Analytical apps

pe rs on al us e

●

customer's company is able to closely monitor their most important KPIs in real time and react immediately on changes in market conditions or operations


It is possible to get a role-based insight into real-time operations of the business by collecting and displaying key figures directly in the browser through the SAP Analytical apps. To do this, the SAP Analytical apps combine the data and analytical power of SAP HANA with the integration and interface components of SAP Business Suite. With SAP Analytical apps, the customer's company is able to closely monitor their most important KPIs in real time and react immediately on changes in market conditions or operations.

C op

yr

ig

ht

m

at

Figure 61: Analytical App Landscape


59


pe rs on al us e


Figure 62: SAP Fiori UX & Mobile

Figure 63: Kapsel - SAP-Specific Plug-Ins for Cordova

at

LESSON SUMMARY You should now be able to: Understand App Types

C op

yr

ig

ht

m

●

60


Unit 5

pe rs on al us e

Learning Assessment

1. What are some basic aspects that you have to take into account when developing SAP Fiori apps? Choose the correct answers. A SAP Fiori apps must run on all three major devices types

X

B Adaptive and response methods can be mixed

X

C SAP Fiori apps are built on native design principles

X

D SAP Fiori apps are implemented with SAPUI5

X

E You should use sap.commons controls whenever possible


X

2. What is the big advantage of responsive UI-controls?

3. What app types do you know?

X

A Conceptual app types

X

B Artificial app types

X

C Technical app types

X

D Technological app types

X

E Design app types

C op

yr

ig

ht

m

at



61


4. Where can you find detailed information about the SAP standard Fiori apps?

A SAP Fiori apps reference library

X

B SAP Fiori design reference library

X

C SAP Fiori technical library

X

D SAP Fiori developer library

C op

yr

ig

ht

m

at


X

pe rs on al us e


62


Unit 5

pe rs on al us e


1. What are some basic aspects that you have to take into account when developing SAP Fiori apps? Choose the correct answers. A SAP Fiori apps must run on all three major devices types

X

B Adaptive and response methods can be mixed

X

C SAP Fiori apps are built on native design principles

X

D SAP Fiori apps are implemented with SAPUI5

X

E You should use sap.commons controls whenever possible


X

2. What is the big advantage of responsive UI-controls?

The big advantage of responsive design is the fact that apps can adjust to different device types without additional effort in coding and maintenance.

3. What app types do you know?

X

A Conceptual app types

X

B Artificial app types

X

C Technical app types

X

D Technological app types

X

E Design app types

C op

yr

ig

ht

m

at



63


4. Where can you find detailed information about the SAP standard Fiori apps?

A SAP Fiori apps reference library

X

B SAP Fiori design reference library

X

C SAP Fiori technical library

X

D SAP Fiori developer library

C op

yr

ig

ht

m

at


X

pe rs on al us e


64


SAP Web IDE

Lesson 1

66


Working with the SAP Web IDE

pe rs on al us e

UNIT 6

UNIT OBJECTIVES

Work with the SAP Web IDE

C op

yr

ig

ht

m

at

●


65

Unit 6 Lesson 1

LESSON OBJECTIVES After completing this lesson, you will be able to: Work with the SAP Web IDE


●

pe rs on al us e

Working with the SAP Web IDE

SAP Web IDE Scenario

In this unit, you will learn about the SAP Web IDE.

at

Figure 64: From Today to Vision

C op

yr

ig

ht

m

As you may see on the left hand side, there are several tools that help creating/extend SAPUI5 applications. Today we have different products were each one fulfills different pieces of the puzzle. The vision is to unite these products providing similar functionality into one product, for all the platforms (cloud and on premise), for all the channels(phone, tablet, desktop and integration into UI containers) and for the different personas - developer, business expert and designer. This is in order to simplify the SAPUI5 development story (like mentioned in SAP strategySimplicity). SAP Web IDE will increase development efficiency by simplifying development to create apps faster via additional tools like templates, wizards and productive WYSIWYG editor for developer and non-technical personas.

66



pe rs on al us e


Figure 65: Speeding Development by Reducing Effort

SAP Web IDE is a browser-based tool that empowers developers, business experts and designers to build new user interfaces that work with SAP applications. SAP Web IDE intends to simplify the end-to-end application lifecycle: prototyping, development, packaging, deployment, and customer extensions for SAPUI5 applications. As a remainder, these are the major steps, intended by SAP Web IDE: Prototyping

●

Developing

●

Packaging

●

Deploying

●

Extending (customer extensions for SAPUI5 applications)

C op

yr

ig

ht

m

at

●

Figure 66: Speeding Development by Reducing Effort


67

Unit 6: SAP Web IDE

●

Prototyping

●

Developing

●

Packaging

●

Deploying

●

Extending

pe rs on al us e

Delivering a web-based development tool designed to support the End-to-End application lifecycle for SAPUI5:


SAP Web IDE is a browser-based tool that empowers developers, business experts and designers to build new user interfaces that work with SAP applications.

Figure 67: Product Benefits

SAP will provide highly efficient development tools: ●

●

wizards to allow new project creation based on SAPUI5 or Fiori templates

+ extending existing Fiori/UI5 application and

at

●

code editors with SAPUI5 specific code completion

WYSIWYG tooling which is a graphical environment to build the UI and to modify it later

C op

yr

ig

ht

m

●

68



pe rs on al us e


Figure 68: Key Features I - Development Environment

C op

yr

ig

ht

m

at

Figure 69: Key Features II - Templates


69


pe rs on al us e

Unit 6: SAP Web IDE

C op

yr

ig

ht

m

at

Figure 70: SAP Web IDE

Figure 71: SAP HANA Cloud Connectivity Service

If you want to connect to an ABAP system, you need to specify this in the destination details. Let's suppose you want to connect to the GM6 ABAP system ( https://wdflbmt2291:55080 ) in order to consume some OData for creating a new Fiori app or for extending some existing ones. Furthermore you want also to execute some other SAPUI5 applications. We need to pass this information to the SAP Web IDE and the way to do it is through the destination's additional

70



●

odata_abap (for consuming OData),

●

dev_abap (for extending existing Fiori apps) and

●

ui5_execute_abap (for executing SAPUI5 apps).

pe rs on al us e

property WebIDEUsage; we need to specify in this property the three usages we want to have with this destination:

Please refer to the official SAP Web IDE documentation to get more information on this. LESSON SUMMARY You should now be able to: Work with the SAP Web IDE

C op

yr

ig

ht

m

at


●


71

ht

ig

yr

C op


at

m

pe rs on al us e

Unit 6: SAP Web IDE

72


Unit 6

1. What are main benefits when using SAP Web IDE? Choose the correct answers. A Speeds up the development


X

pe rs on al us e

Learning Assessment

X

B Applying the SAP Fiori UX guidelines

X

C Lets you create apps using mock data

X

D Is a powerful on-premise IDE

2. What is the name of the version control systems that can easily be used within the SAP Web IDE? Choose the correct answers. A Subversion

X

B Git

X

C CVS

X

D Codebase

C op

yr

ig

ht

m

at

X


73

Unit 6

1. What are main benefits when using SAP Web IDE? Choose the correct answers. A Speeds up the development


X

pe rs on al us e


X

B Applying the SAP Fiori UX guidelines

X

C Lets you create apps using mock data

X

D Is a powerful on-premise IDE

2. What is the name of the version control systems that can easily be used within the SAP Web IDE? Choose the correct answers. A Subversion

X

B Git

X

C CVS

X

D Codebase

C op

yr

ig

ht

m

at

X

74


Development Basics SAP Web IDE pe rs on al us e

UNIT 7

Lesson 1


Using the Development Tools of SAP Web IDE Exercise 2: Create a Trial Account for SAP HANA Cloud Platform and Start the SAP Web IDE Exercise 3: Create a Simple SAPUI5 Application Using the Layout Editor Exercise 4: Deploy a SAPUI5 Application on an ABAP Server Using SAP Web IDE Exercise 5: Import a SAP BUILD Prototype into SAP Web IDE

UNIT OBJECTIVES

Use the development tools of SAP Web IDE

C op

yr

ig

ht

m

at

●


75

76 85

93 101 115

Unit 7 Lesson 1

LESSON OBJECTIVES After completing this lesson, you will be able to: Use the development tools of SAP Web IDE


●

pe rs on al us e

Using the Development Tools of SAP Web IDE

Development Tools of SAP Web IDE Scenario

After having designed a great user experience, it is required to develop it. For this, you must know the required development tools.

C op

yr

ig

ht

m

at

Figure 72: Development Process Overview

76



pe rs on al us e

Lesson: Using the Development Tools of SAP Web IDE

Figure 74: Development Environment Overview

C op

yr

ig

ht

m

at

Figure 73: Opening the Web IDE -Welcome Screen


77


pe rs on al us e

Unit 7: Development Basics SAP Web IDE

Figure 75: IDE Environment Configurations

C op

yr

ig

ht

m

at

Figure 76: Project Settings

78

Figure 77: Creating a Project



pe rs on al us e


Figure 78: Templates

C op

yr

ig

ht

m

at

Figure 79: Coding (Assisted Development)


79


pe rs on al us e


Figure 81: Application Preview in Browser

C op

yr

ig

ht

m

at

Figure 80: Run the Application

80



pe rs on al us e


Figure 83: Run the Application with Mock Data

C op

yr

ig

ht

m

at

Figure 82: Run Configurations


81


pe rs on al us e


at

Figure 84: Development Tools of SAP Web IDE

C op

yr

ig

ht

m

Figure 85: What Is Git?

82



pe rs on al us e


Figure 86: SAP Web IDE and Git Integration - Overview

C op

yr

ig

ht

m

at

Figure 87: SAP Web IDE and Git Integration - GIT Pane


83


pe rs on al us e


C op

yr

ig

ht

m

at

Figure 88: SAP Web IDE and Git Integration - GIT History Pane

84


Unit 7 Exercise 2

Business Scenario

pe rs on al us e

Create a Trial Account for SAP HANA Cloud Platform and Start the SAP Web IDE


In this exercise you will generate a trial account for the SAP HANA Cloud Platform, in which you will start the SAP Web IDE.


C op

yr

ig

ht

m

at

1. Generate a trial account for the SAP HANA Cloud Platform and start the SAP Web IDE.


85

Unit 7 Solution 2

pe rs on al us e

Create a Trial Account for SAP HANA Cloud Platform and Start the SAP Web IDE

Business Scenario


In this exercise you will generate a trial account for the SAP HANA Cloud Platform, in which you will start the SAP Web IDE.


1. Generate a trial account for the SAP HANA Cloud Platform and start the SAP Web IDE.

C op

yr

ig

ht

m

at

a) Open the Browser window and enter the following URL:https:// account.hanatrial.ondemand.com.

Figure 90: Entry page

b) Use the Register button to generate a new account:

86


Figure 91: Register button

pe rs on al us e


c) In the top part of the shown registration form, put in at least your last name and your email address. Also choose a password for your account:


Note: You need access to the registered email account to activate the trial accounts. If you don´t have an e-mail account you can access from the classroom you can create one before. E.g. http://www.gmx.net or http:// web.de.

Figure 92: Registration

d) In the lower part of the registration form, choose your preferences about the contact by SAP. Also check the two check boxes to accept SAPs Privacy Statement and the Terms of Use.

e) Confirm your input with the Register button:

C op

yr

ig

ht

m

at

Note: The lower of the two checkboxes can only selected, after you have scrolled to the end of the Terms of Use, which are displayed in the box above the checkbox .


87


pe rs on al us e


Figure 93: Register button, when settings are made

f) Close the shown confirmation window by clicking the Close button:

Figure 94: End of Registration

C op

yr

ig

ht

m

at

g) Now check the mails in your e-mail account inbox. You should have received an email for the activation of your trial-account. To activate your account in the email click on the button Click here to activate your account:

88

Figure 95: Account activation

h) Click on the Continue button, to close the confirmation window:



pe rs on al us e


Figure 96: Continue button in account activation

i) Now, you will automatically be signed in to your new account. On the Welcome screen, click on Continue:

Figure 97: Continue button in the welcome screen

C op

yr

ig

ht

m

at

Note: You will be forwarded to the SAP HANA Cloud Cockpit now. If necessary, you can close appearing dialogs using the Close button:

Figure 98: Closing the welcome screen

j) On the left side in the SAP HANA Cloud Cockpit select Services:


89


Figure 99: Web IDE Link

pe rs on al us e


k) Navigate to Dev & Ops and click on SAP Web IDE :

Figure 100: Web IDE URL

l) Click on the link Open SAP Web IDE:

Figure 101: Link: Open SAP Web IDE

C op

yr

ig

ht

m

at

m) If asked, again enter your password for your trial account. Confirm your input by clicking Continue:

90

Figure 102: User credentials

n) The SAP Web IDE will be started now and shown in the browser window:



pe rs on al us e


C op

yr

ig

ht

m

at

Figure 103: SAP Web IDE started


91

ht

ig

yr

C op


at

m

pe rs on al us e


92


Unit 7 Exercise 3

pe rs on al us e

Create a Simple SAPUI5 Application Using the Layout Editor

Business Scenario


In this exercise you create a SAPUI5 project, containing an XML view in the SAP Web IDE. In the generated view, enter the text "Hello World!" through a text UI element. In addition you will change the title of the page displayed to "SAP Web IDE". To do this, you will use the graphical layout editor. Finally, test the application through the browser:

Figure 104: Result of the exercise

C op

yr

ig

ht

m

at

Note: The graphical layout editor of the SAP Web IDE is available only in Google Chrome. Therefore make sure that you start the SAP Web IDE with Google Chrome.

1. In the SAP Web IDE create a new project. Use the following data: Field

Value

Name

sap.training.exc02.webide

Used Template

SAPUI5 Application Project

View type

XML

Namespace


View Name

Main


93


Field

Value

Property of text element

Hello World!

Title of the page

SAP Web IDE

C op

yr

ig

ht

m

at


3. Test your application by starting it from the SAP Web IDE.

pe rs on al us e

2. In the graphical layout editor, open the Main View, generated by the wizard. Perform some settings. Use the following data:

94


Unit 7 Solution 3

pe rs on al us e

Create a Simple SAPUI5 Application Using the Layout Editor

Business Scenario


In this exercise you create a SAPUI5 project, containing an XML view in the SAP Web IDE. In the generated view, enter the text "Hello World!" through a text UI element. In addition you will change the title of the page displayed to "SAP Web IDE". To do this, you will use the graphical layout editor. Finally, test the application through the browser:


C op

yr

ig

ht

m

at

Note: The graphical layout editor of the SAP Web IDE is available only in Google Chrome. Therefore make sure that you start the SAP Web IDE with Google Chrome.

1. In the SAP Web IDE create a new project. Use the following data: Field

Value

Name


Used Template


View type

XML

Namespace


View Name

Main


95


Figure 105: New project, step 1


b) Select the SAPUI5 Application Project template, and click on Next.

pe rs on al us e

a) In the SAP Web IDE menu, select the following path: File → New → Project from Template….


c) As Project Name enter: sap.training.exc02.webide and click on Next:


C op

yr

ig

ht

m

at

d) As View Type select XML. AsNamespace set sap.training.exc02.webide. Name the generated view Main and confirm your entries by clicking on Next.

96


e) Click on Finish, to end the wizard.



pe rs on al us e



2. In the graphical layout editor, open the Main View, generated by the wizard. Perform some settings. Use the following data: Field

Value

Property of text element

Hello World!

Title of the page

SAP Web IDE

a) In the context menu of Main.view.xml, choose: Open With → Layout Editor to open the Main View in the layout editor.

b) In the Pallet open the Display section, and then drag and drop the text UI element from this section to the view.

C op

yr

ig

ht

m

at

Figure 110: Settings in the project, step 1


97



c) In the Properties Pane enter the value Hello World!.

pe rs on al us e



d) To adjust the title of the page, at first, you must select the associated Page UI element. You can get to via a mouse click on the link in the Footer section of the Canvas:


e) In the Properties Pane enter SAP Web IDE.

C op

yr

ig

ht

m

at

Do not forget to save your changes by clicking Save in the SAP Web IDE toolbar.


3. Test your application by starting it from the SAP Web IDE. a) Press the Run button in the toolbar of the SAP Web IDE to start the application.

98


Figure 115: Test, step 1

pe rs on al us e



b) Check, whether the adjustments you made on the Main View appear in the preview screen. It should look like:

C op

yr

ig

ht

m

at

Figure 116: Test, step 2


99

ht

ig

yr

C op


at

m

pe rs on al us e


100


Unit 7 Exercise 4

pe rs on al us e

Deploy a SAPUI5 Application on an ABAP Server Using SAP Web IDE

Business Scenario


In this exercise you deploy the SAPUI5 application which you have created in the previous exercise from the SAP Web IDE on to an ABAP server. For this you must make the ABAP system available for your SAP HANA Cloud Platform account through the SAP HANA Cloud Connector. The connection to your account is created via a destination that you create in the SAP HANA Cloud Platform cockpit.

Note: In this exercise, when the values include ##, replace the characters with the number, that your instructor assigned to you.

Prepare the exercise

C op

yr

ig

ht

m

at

1. Insert a destination with the following features to the SAP HANA Cloud Platform Cockpit. Use the following data: Field

Value

Name

DCC_100

Type

HTTP

Description

DCC

URL

http://dcc.virtual:8000

Proxy Type

OnPremise

Cloud Connector Version

2

Authentication

NoAuthentication

Assign the following properties to the destination WebIDEEnabled

true

WebIDEUsage

dev_abap,ui5_execute_abap, bsp_execute_abap, odata_abap

2. Create an SAP Cloud Connector account. Deploy the application Now deploy the SAPUI5 application which you have developed in the previously exercise from the SAP Web IDE out of the front-end servers used in the training. For this, create a new


101


application called ZUI5_WEBIDE _ ## Assign the application to the existing package and to the also already existing transfer order for the training. Open the application after the deployment out of the SAP Web IDE on the ABAP-Server.

C op

yr

ig

ht

m

at


pe rs on al us e

1. Deploy the application.

102


Unit 7 Solution 4

pe rs on al us e

Deploy a SAPUI5 Application on an ABAP Server Using SAP Web IDE

Business Scenario


In this exercise you deploy the SAPUI5 application which you have created in the previous exercise from the SAP Web IDE on to an ABAP server. For this you must make the ABAP system available for your SAP HANA Cloud Platform account through the SAP HANA Cloud Connector. The connection to your account is created via a destination that you create in the SAP HANA Cloud Platform cockpit.


Prepare the exercise

C op

yr

ig

ht

m

at

1. Insert a destination with the following features to the SAP HANA Cloud Platform Cockpit. Use the following data: Field

Value

Name

DCC_100

Type

HTTP

Description

DCC

URL

http://dcc.virtual:8000

Proxy Type

OnPremise

Cloud Connector Version

2

Authentication

NoAuthentication

Assign the following properties to the destination WebIDEEnabled

true

WebIDEUsage

dev_abap,ui5_execute_abap, bsp_execute_abap, odata_abap

a) To create a new destination select Destinations on the left side in SAP HANA Cloud Platform cockpit.


103

Figure 117: Destinations

pe rs on al us e



b) On the right click on the appearing picture the New Destination button:

Figure 118: New Destinations

c) In the displayed form enter the configuration values for the destination from the table above:

Note: The entered URL defines a virtual host and can be selected freely. In SAP HANA Cloud Connector. This virtual host is mapped to the to use the ABAP system.

d) Now click on the New Property button to add more properties to the destination:

C op

yr

ig

ht

m

at

Figure 119: Adding values

104


Figure 120: New Property

pe rs on al us e



e) In the displayed fields as Property Name enter WebIDEEnabled and true as Property Value:

Figure 121: WebIDEEnabled

Note: Be sure to look out for upper and lower case writing.

f) To add a further property, again click on the New Property button:

Figure 122: New property, fig. 1

Figure 123: New Properties, fig. 2

C op

yr

ig

ht

m

at

g) In the added field as Property Name enter WebIDEUsage and as property value use dev_abap,ui5_execute_abap,bsp_execute_abap,odata_abap:


105


Note: Be sure:

●

●

the individual values for the Property WebIDEUsage are only separated by commas not spaces because of space not all values to be entered are seen on the screenshot

to deploy a SAPUI5 application on an ABAP server not all values are required. For simplicity all values needed during the training are added. For example the value odata_abap is only required for accessing OData services of ABAP system


●

to look out for upper and lower case writing

pe rs on al us e

●

h) Save your Destination by clicking on the Save button:

Figure 124: Save

2. Create an SAP Cloud Connector account.

a) Open a browser window (preferably with Google Chrome) and enter the following URL to access the login page of the Cloud Connectors: https://localhost:8443.

C op

yr

ig

ht

m

at

Note: Pay attention to the details of the trainers, when it comes to the URL of the local host.

106



pe rs on al us e


Figure 125: Entry screen

Note: When you open the URL a browser-specific safety warning will pop-up. By verifying the message you can navigate to the login page of the Cloud Connectors.

b) As user name enter Administrator and the password specified by the trainer. Then click on the Login button to log in to the Cloud Connector

Figure 126: SAP HANA Cloud Login

C op

yr

ig

ht

m

at

c) Click on the Account Dashboard link.

Figure 127: Account Dashboard


107



Figure 128: Add Account

pe rs on al us e

d) In the resulting dialog, enter your access information for the SAP HANA Cloud platform (trial).

Note: For example: the account name will be displayed in the SAP HANA Cloud Platform Cockpit in the upper left corner

Figure 129: Account Name

Note: You get the account user by deleting the suffix trial and replace the lowercase p at the beginning of the word with a capital P.

e) In the content area choose Access Control and make sure you understand the configuration of the connection to the front-end server. Please don’t make any changes.

C op

yr

ig

ht

m

at

f) Next you need to map the virtual host from the destination to the ABAP system used in the training. To do so, select Access Control in the Cloud Connector surface on the left side and then click on the Add button located in the toolbar of the table Mapping Virtual To Internal System:

Figure 130: Access Control

g) In the resulting pop-up as a backend type enter ABAP system. Then click on Next:

108


Figure 131: Back-end Type


h) As Protocol select HTTP, then click on Next:

pe rs on al us e


Figure 132: Protocol

i) In the Internal Host field enter the host of the front-end server used in the training. The host name will be assigned by the trainers. For the Internal Port enter port specified by the trainer. Confirm your entries by clicking on Next. Note: The information shown in the image below is only sample data. Please use the values given by the trainers.

j) According to the information that you entered when you created the destination, as a Virtual Host enter dcc.virtual and as a Virtual Port enter 8000 . Then click on Next:

C op

yr

ig

ht

m

at

Figure 133: System Mapping, Internal Host

Figure 134: System Mapping, Virtual Host data

k) Click on Finish to exit the wizard.


109

Figure 135: Finish

Note: Please note, that the picture contains sample data, only.

pe rs on al us e



l) Now you need to specify the URL paths that should be accessible in the training system. To do this, ensure that in the table Mapping Virtual To Internal System the recently created entry is selected and then in the toolbar click on Add of the table Resources Accessible On < frontend- server>: :

Figure 136: Mapping to internal System

Note: Please note, that the picture contains sample data, only.

Figure 137: Adding a Resource

n) The configuration of the SAP HANA Cloud Connector should now look like this:

C op

yr

ig

ht

m

at

m) In the pop-up as URL Path enter /sap and in the Access Policy checkboxes, select Path and all sub paths. Save your entry with Save:

110


Figure 138: Result of the configuration

pe rs on al us e



Deploy the application Now deploy the SAPUI5 application which you have developed in the previously exercise from the SAP Web IDE out of the front-end servers used in the training. For this, create a new application called ZUI5_WEBIDE _ ## Assign the application to the existing package and to the also already existing transfer order for the training.

Open the application after the deployment out of the SAP Web IDE on the ABAP-Server. 1. Deploy the application.

a) In the context menu of your SAPUI5 project sap.training.exc02.webide choose the following path: Deploy → Deploy to SAPUI5 ABAP Repository.

b) Make sure, that in the displayed form Deploy a new application is selected and select the configured system DCC or FSQ (depending, on what is offered) from the listbox as shown below:

C op

yr

ig

ht

m

at

Figure 139: Deployment, fig. 1


111


pe rs on al us e



The figure shows sample data.

c) In the pop-up enter user name and password for the used ABAP system. Confirm your input with the button Log in.:


d) After a successful registration click on Next:

C op

yr

ig

ht

m

at

Note: Please note, that the picture contains sample data, only. You will get the user name and initial password from your trainer.

112



pe rs on al us e



e) For the new application enter the name ZUI5_WEBIDE _ ## as Description enter SAPUI5 into SAP Web IDE. Through the Browse button, select the existing package ZTRAIN _ ## and finish the processing by clicking on Next:


C op

yr

ig

ht

m

at

f) In the next window check, that the transfer order matches the training and click on Next:


g) Close the wizard via the Finish button:


113


pe rs on al us e



Note: You can follow the started deployment process SAP Web IDE. Choose the following path: View → Console.

C op

yr

ig

ht

m

at

Figure 146: Deployment, fig. 8, Console

114


Unit 7 Exercise 5

pe rs on al us e

Import a SAP BUILD Prototype into SAP Web IDE

Business Scenario


After creating a prototype with SAP BUILD, it is necessary to import the prototype in the SAP Web IDE so to carry on the development. Before an import can be performed a connection between the SAP Web IDE and the SAP BUILD repository must be established. In this exercise you will learn how you can import a prototype created with SAP BUILD in the SAP Web IDE.


Configure two Destinations

1. Configure a destination. Use the following data: Field

Value

Name

_TENANT

Type

http

Description

URL

https://www.experiencesplash.com/ webide/

C op

yr

ig

ht

m

at

Note: When you have used the build.me URL, use this

Proxy Type

Internet

Authentication

NoAuthentication

WebIDEEnabled

True

WebIDEUsage

build_system

2. Create a second destination with the following values: Field

Value

Name

WEB_IDE_PLUGIN


115


Value

Type

http

Description

BUILD

URL

https://www.experiencesplash.com/webideplugin

pe rs on al us e

Field

Note: When you have used the build.me URL, use this Internet

Authentication

NoAuthentication

WebIDEEnabled

True

WebIDEUsage

plugin_repository


Proxy Type

Install the BUILD plugins

1. Install the BUILD plugins. Import SAP BUILD designs

C op

yr

ig

ht

m

at

1. Import SAP BUILD designs.

116


Unit 7 Solution 5

pe rs on al us e

Import a SAP BUILD Prototype into SAP Web IDE

Business Scenario


After creating a prototype with SAP BUILD, it is necessary to import the prototype in the SAP Web IDE so to carry on the development. Before an import can be performed a connection between the SAP Web IDE and the SAP BUILD repository must be established. In this exercise you will learn how you can import a prototype created with SAP BUILD in the SAP Web IDE.


Configure two Destinations

1. Configure a destination. Use the following data: Field

Value

Name

_TENANT

Type

http

Description

URL

https://www.experiencesplash.com/ webide/

C op

yr

ig

ht

m

at


Proxy Type

Internet

Authentication

NoAuthentication

WebIDEEnabled

True

WebIDEUsage

build_system

a) If you have not yet registered, go to the URL of the Hana Cloud Platform Trial on https://account.hanatrial.ondemand.com/ and sign up to the SAP HANA Cloud Platform.


117


b) Open another browser window and log in to sign in to the SAP BUILD app, or the SplashApp.

pe rs on al us e

c) After signing in, click on your initials shown in the top right corner and select User settings from the appearing screen.


Figure 147: User settings

d) Remember the value displayed in the CURRENT ORGANIZATION field.

Alternatively, note it down:__________________________________________________

Figure 148: Profile

e) Go to the HANA CloudCockpit and select the entry Destinations. f) Click on the New Destinations button.

g) Enter the information from the table above into the resulting dialog.

Please replace the value < CURRENT_ORGANIZATION > with the remembered one from step d, the organization name.

i) After the acquisition the destination should look like this:

C op

yr

ig

ht

m

at

h) Save your entries.

118



pe rs on al us e


Figure 149: Configuration of the first Destination

Note: If your user in Splash or SAP BUILD is not assigned to the standard organization as seen in the image below. A different prefix will stand before the value _TENANT as shown.

2. Create a second destination with the following values: Value

Name

WEB_IDE_PLUGIN

Type

http

Description

BUILD

URL

https://www.experiencesplash.com/webideplugin

at

Field

C op

yr

ig

ht

m


Proxy Type

Internet

Authentication

NoAuthentication

WebIDEEnabled

True

WebIDEUsage

plugin_repository


119


a) Save the entries.

Figure 150: Configuration of the second Destination

Install the BUILD plugins


1. Install the BUILD plugins.

pe rs on al us e

After the acquisition the destination should look like this:

a) From the SAP HANA Cloud Cockpit open the SAP Web IDE.

b) From the menu choose Tools → Preferences. c) From the drop-down menu select plugins.

d) Select the entry BUILD destination from the list repository.

Note: Perhaps the BUILD plugin will not appear in the plugin list. Please wait a moment and reload the SAP Web IDE again.

Figure 151: Plug In list

C op

yr

ig

ht

m

at

e) To activate the plugin, choose the switch element.

Figure 152: Switch element

f) Choose SAVE. g) Confirm the appearing dialog by pressing REFRESH. The SAP Web IDE will now be reloaded. Import SAP BUILD designs 1. Import SAP BUILD designs. a) From the SAP Web IDE open the File → New → Project from Template menu.

120




Figure 153: New Project, fig. 1

pe rs on al us e

b) In the next dialog, choose the first selection element, to select the BUILD Project.

c) Click NEXT.

d) In the PROJECT NAME field enter the value ZSplashApp ## and press NEXT. e) Clone the Create Sales Order project in the Splash app:


C op

yr

ig

ht

m

at

f) Afterwards, you have to publish the created prototype:


121


pe rs on al us e


Figure 155: Publishing the prototype

g) In the authentication dialog, enter your user name and password.

h) After successfully logging in select Create Sales Order from the drop down menu.


Note: To get access, you have to sign up to SPLASH using the URL https:// www.experiencesplash.com/splashapp/. Afterwards, you can use the corresponding SPLASH credentials for the login. The same applies, when you have used Build.Me.

i) Choose Finish to confirm the dialog.

C op

yr

ig

ht

m

at

j) After a successful import, a new SAPUI5 project was created.

Figure 157: New project

k) Now, you can start the application from the Index.html page.

122



LESSON SUMMARY You should now be able to: Use the development tools of SAP Web IDE

C op

yr

ig

ht

m

at


pe rs on al us e

●


123

ht

ig

yr

C op


at

m

pe rs on al us e


124


Unit 7

pe rs on al us e

Learning Assessment

1. What standard templates categories are provided by the SAP Web IDE Choose the correct answers. A SAP Fiori freestyle applications


X X

B SAP Fiori smart templates

X

C New Component

X

D SAP Web Dynpro templates

X

E SAP Dynpage templates

2. What options are available to work with mock data in the SAP Web IDE? Choose the correct answers.

A Let the mock service generated data for you

X

B Import excel files with mock data

X

C Provide data in a JSON file

X

D Provide data in a MySQL-Database

C op

yr

ig

ht

m

at

X


125

Unit 7

1. What standard templates categories are provided by the SAP Web IDE Choose the correct answers. A SAP Fiori freestyle applications


X

pe rs on al us e


X

B SAP Fiori smart templates

X

C New Component

X

D SAP Web Dynpro templates

X

E SAP Dynpage templates

2. What options are available to work with mock data in the SAP Web IDE? Choose the correct answers.

A Let the mock service generated data for you

X

B Import excel files with mock data

X

C Provide data in a JSON file

X

D Provide data in a MySQL-Database

C op

yr

ig

ht

m

at

X

126


SAPUI5 Basics

Lesson 1 Understanding SAPUI5 Basics: Bootstrapping and MVC

129


Lesson 2

pe rs on al us e

UNIT 8

Understanding SAPUI5 Basics: Modules, Data Binding and Translatable Texts

135

Lesson 3

Understanding SAPUI5 Basics: Component and App Descriptor

143

Lesson 4

Understanding SAPUI5 Basics: Margins and Paddings, CSS, Dialogs and Fragments

146

Lesson 5

Understanding SAPUI5 Basics: Aggregation and Expression Binding

150

Lesson 6

Understanding SAPUI5 Basics: Custom Formatting, Filtering, Sorting, and Grouping Exercise 6: Implement a Filter

153 157

Lesson 7

Understanding SAPUI5 Basics: OData Model

166

at

Lesson 8

170 179 191

C op

yr

ig

ht

m

Understanding SAPUI5 Basics: Testing Exercise 7: Create a QUnit Test Scenario Exercise 8: Create an OPA5 Test Scenario

Lesson 9 Understanding SAPUI5 Basics: Routing and Navigation

204

Lesson 10 Understanding SAPUI5 Basics: Visualizing Business Data Exercise 9: Work with Diagrams


206 211

127

Unit 8: SAPUI5 Basics

UNIT OBJECTIVES Understand SAPUI5 Basics: Bootstrapping and MVC

●

Understand SAPUI5 Basics: Modules, Data Binding and Translatable Texts

●

Understand SAPUI5 Basics: Component and App Descriptor

●

Understand SAPUI5 Basics: Margins and Paddings, CSS, Dialogs and Fragments

●

Understand SAPUI5 Basics: Aggregation and Expression Binding

●

Understand SAPUI5 Basics: Custom Formatting, Filtering, Sorting and Grouping

●

Understand SAPUI5 basics: OData Model

●

Understand SAPUI5 basics: Testing

Understand SAPUI5 basics: Routing and Navigation

Understand SAPUI5 basics: Visualizing Business Data

C op

yr

ig

ht

m

at

●


●

pe rs on al us e

●

128


Unit 8 Lesson 1


LESSON OBJECTIVES After completing this lesson, you will be able to:

pe rs on al us e

Understanding SAPUI5 Basics: Bootstrapping and MVC

●

Understand SAPUI5 Basics: Bootstrapping and MVC

Hello World Scenario

In this unit, you will learn the basics of SAPUI5. The unit starts with Bootstrapping and MVC, it goes on with Modules, Data Binding and translatable text. At the end, all important objects of SAPUI5 will be discussed.

C op

yr

ig

ht

m

at

Figure 158: Basic HTML 5 Page Template


129



pe rs on al us e

Bootstrapping

Figure 159: Initializing and Loading SAPUI5 in an HTML5 Template

The src attribute of the first <script> tag tells the browser where to find the SAPUI5 core library. It initializes the SAPUI5 runtime and loads additional resources, such as the libraries specified in the data-sap-ui-libs attribute. The SAPUI5 controls support different themes, we choose sap_bluecrystal as our default theme.

C op

yr

ig

ht

m

at

We tell SAPUI5 core that resources in the given namespace are located in the same folder as html page. This is, for example, necessary for apps that run in the SAP Fiori Launchpad.

Figure 160: Components Loaded by the Bootstrap

The src attribute of the first <script> tag tells the browser where to find the SAPUI5 core library. It initializes the SAPUI5 runtime and loads additional resources, such as the libraries specified in the data-sap-ui-libs attribute. The SAPUI5 controls support different themes, we choose sap_bluecrystal as our default theme.

130


Lesson: Understanding SAPUI5 Basics: Bootstrapping and MVC

Before we can do something with SAPUI5, we need to load and initialize it. This process of loading and initializing SAPUI5 is called bootstrapping.


When all resources and libraries are loaded, SAPUI5 is ready.

pe rs on al us e

You can use the SAPUI5 bootstrap script in your page to initialize SAPUI5 runtime automatically as soon as the script is loaded and executed by the browser. For simple use cases as well as the default SAPUI5 installation, this is sufficient to build and run UIs. In addition to this, you can specify the set of SAPUI5 libraries and the theme used for your application in the configuration settings.

Figure 161: Useful UI5 Core Functions

Figure 162: SAPUI5 Runtime: Main control libraries

C op

yr

ig

ht

m

at

MVC


131


pe rs on al us e


Figure 163: SAPUI5 Control Library: View structure

C op

yr

ig

ht

m

at

Figure 164: Model View Controller

Figure 165: SAPUI5 View Types: For Fiori ONLY XML views shall be used

Fiori Apps must be built on XML views only.

132



pe rs on al us e

Lesson: Understanding SAPUI5 Basics: Bootstrapping and MVC

Figure 166: Example XML View: sap.ui.core.mvc.ViewType.XML

The XML view type is defined in an XML file. The file name either ends with .view.xml or as an XML string. The file name and the folder structure together specify the name of the view that equals the SAPUI5 module name within the require/declare concept. Nest the XML tags analogous to the nesting sequence of SAPUI5 controls and add the property values as attributes.

Figure 167: View Controllers

C op

yr

ig

ht

m

at

UI5 uses view controllers to separate the view logic from the model logic. The methods for controlling the data flow should be implemented in a controller.


133


pe rs on al us e


Figure 168: IDs for Controls

For JSViews and for controls created in the controller code of declarative views, no automated prefixing exists. Instead, we recommend to use the this.getView.createId() method to prefix the ID and ensure there are no ID collisions even when the view is used multiple times within the same page. There are a number of features that are dependent on the stability of a given UI: ●

●

In all cases a breakage is bad, in some cases it is not allowed and must be prevented: In cloud scenarios no UI Flexibility or XRay cases must break! In order to provide a stable, reliable control anchor for the above applications the control ID was chosen (Note that there was a careful consideration of other options as well, there are multiple ways how to address the problem and many of them have been used in former UI frameworks at SAP. However, none of the solutions were perfect and all come with side effects)

m

at

●

UI Flexibility (end user personalization, UI configuration by key users and admins, UI extensibility) XRay documentation, Automated UI tests (Selenium, One Page Acceptance Test (OPA5) ) All these functions are based on specific instances of UI5 controls and need to be able to reference these controls. If after a software upgrade some of the controls have disappeared or the way they can be referenced has changed, the functionality breaks. Thus, it is requirement is that this reference context is so-called lifecycle stable.

●

C op

yr

ig

ht

●

It is therefore mandatory for application developers to understand that IDs for controls and views (= special instances of controls) should be specifically created by application development these IDs are part of the public API of the applications, i.e. they must be life-cycle stable and thus not be changed after the application was delivered to customers they must be unique in the scope of the respective UI artifact the corresponding control cannot be removed entirely from the view

LESSON SUMMARY You should now be able to: ●

134

Understand SAPUI5 Basics: Bootstrapping and MVC


Unit 8 Lesson 2



pe rs on al us e

Understanding SAPUI5 Basics: Modules, Data Binding and Translatable Texts

●


Modules

Figure 169: sap.ui.define

C op

yr

ig

ht

m

at

All files use the sap.ui.define and sap.ui.require syntax in order to make asynchronous loading of modules and prerequisite dependencies possible. The dependencies needed for running the code defined with this syntax are specified before the code itself is executed. The references to the loaded dependencies are passed into a callback function and can then be used inside the implementation of the module. The return value of the callback is the complete module implementation. The object sap.ui.define is designed to support real Asynchronous Module Definitions (AMD) in future, although it internally still uses the old synchronous module loading of SAPUI5. Callers of sap.ui.define therefore must not rely on any synchronous behavior that they might observe with the current implementation. (SAPUI5 1.30) In previous versions of SAPUI5, this was done with the synchronous functions jQuery.sap.declare and jQuery.sap.require which can but should not be used any more.


135


Applications that need to ensure synchronous module definition or synchronous loading of dependencies MUST use the old jQuery.sap.declare and jQuery.sap.require APIs. Differences to requireJS, Limitations, Design Considerations are:

●

http://veui5infra.dhcp.wdf.sap.corp:8080/demokit/#docs/api/symbols/ sap.ui.html#.define

pe rs on al us e

●

sap.ui.define uses a simplified variant of the unified resource name syntax for the module's own name as well as for its dependencies. The only difference to that syntax is, that for sap.ui.define and sap.ui.require, the extension (which always would be '.js') has to be omitted. Both methods always add this extension internally.


As a convenience, the name of a dependency can start with the segment './' which will be replaced by the name of the package that contains the currently defined module (relative name).

It is best practice to omit the name of the defined module (first parameter) and to use relative names for the dependencies whenever possible. This reduces the necessary configuration, simplifies renaming of packages and allows to map them to a different namespace.

at

Figure 170: Troubleshooting

C op

yr

ig

ht

m

Debugging The development tools of the current browsers allow you to set JavaScript debugging breakpoints. In most browsers, setting the breakpoint is sufficient, but in Internet Explorer, script debugging needs to be turned on explicitly and the selection of the correct file can be tricky when it is loaded using Ajax requests because the file name is not listed. Once you have stopped the script execution, you can inspect and modify the variables. You can now execute the code step-by-step:

●

●

136

SAPUI5 support diagnostics tool - CTRL + ALT +SHIFT + S http://veui5infra.dhcp.wdf.sap.corp:8080/demokit/docs/guide/ 6ec18e80b0ce47f290bc2645b0cc86e6.html


●

Activating the Debug Sources

●

Control Tree

●

Debugging View

●

XML View Conversion

pe rs on al us e

Lesson: Understanding SAPUI5 Basics: Modules, Data Binding and Translatable Texts

For performance reasons, the SAPUI5 files are shipped in a minified version, this means that all possible variable names are shortened and comments are removed. You can load the debug sources by adding the URL parameter sap-ui-debug=true or by pressing CTRL + ALT + SHIFT + P and select Use Debug Sources in the dialog box Debugging: https://www.youtube.com/watch?v=CmIXJldq8J4


Data Binding

C op

yr

ig

ht

m

at

Figure 171: SAPUI5 Models: Introduction

Figure 172: Model Types

The JSON model, XML model, and the Resource model are models, where the model data is loaded completely and is available on the client. Operations such as sorting and filtering are executed on the client without further server requests.


137


pe rs on al us e

The OData model is a server-side model and only loads the data requested by the user interface from the server. Any changes in data binding or list operations require a new request to the server. The dataset is only available on the server and the client only knows the currently visible rows and fields. This also means that sorting and filtering on the client is not possible. For this, the client has to send a request to the server. The OData model currently supports OData version 2.0. Device Model is a so called pseudo one-way JSON Model, which is created in Free Style Template based on sap.ui.Device


Control Model is a helper model of sap.ui.core.CompositeSupport to bind properties of created components against it

Figure 174: Creating a Model Instance: Model Instantiation

C op

yr

ig

ht

m

at

Figure 173: Model in Client Operation Mode (Client-side Model) Example: JSON model

138



pe rs on al us e


Figure 175: One-Way Binding Mode

Figure 176: Setting Models

The following are main guidelines for development:

●

C op

yr

ig

ht

m

at

●

●

Note: For Fiori Apps, never set the model to the UI core, but put them to the view or on the component controller. In this case you will not break out of the boundaries of the app. Note: To be compatible with future versions of this API, applications must not use the value null, the empty string "" or the string literals "null" or "undefined" as model name.

Note: By design, it is not possible to hide an inherited model by setting a null or undefined model. Applications can set an empty model to achieve the same.


139


pe rs on al us e


Figure 177: Binding Controls to the Model: Primitive binding types

Translatable Texts

C op

yr

ig

ht

m

at

Figure 178: i18n Resource Files

140



pe rs on al us e


Figure 179: i18n Resource Files: Naming conventions

C op

yr

ig

ht

m

at

Figure 180: i18n Resource Bundle


141


pe rs on al us e


Figure 181: i18n Resource Model: Generic use



C op

yr

ig

ht

m

at

●

142


Unit 8 Lesson 3



pe rs on al us e

Understanding SAPUI5 Basics: Component and App Descriptor

●


Component and App Descriptor

Figure 182: SAPUI5 Apps as Component

There are two types of components:

C op

yr

ig

ht

m

at

●

●

a UIComponent has a UI part (examples: Fiori App) -

Base class for all UI Components: sap.ui.core.UIComponent

a Faceless Component does not (examples: data transfer helper) -

Base class for all Faceless Components: sap.ui.core.Component

SAPUI5/Fiori apps are component-based and have a component controller. The App descriptor contains application-specific configuration settings. SAPUI5 apps can have more than one model and can use different model types. A Model instantiation is done via app descriptor. SAPUI5 views are built with controls and can have a view controllerto handle events. Reusable view content can be grouped in fragments and can be reused in views.


143



pe rs on al us e

Different view types can be used in one application.

Figure 183: Create a New Component - Component.js

We create a Component.js file in the src folder that will hold our application setup. The Component.js consists of two parts now: the new metadata section that simply defines a reference to the app descriptor and the previously introduced init function that is called when the component is initialized. The content of the manifest.json file is a configuration object in JSON format that contains all global application settings and parameters. The manifest file is called the Descriptor for Applications, Components, and Libraries and is also often referred to as "app descriptor". In previous versions of SAPUI5 the metadata section of the component contained the additional configuration settings for the application. These have been completely moved to the app descriptor in version 1.30 and should no longer be configured in the component. The init function of the component is automatically invoked by SAPUI5 when the component is instantiated. Our component inherits from the base class sap.ui.core.UIComponent and it is obligatory call the init function of the base class.

C op

yr

ig

ht

m

at

In the init function we instantiate our data model and the i18n model like we did before in the app controller. Be aware that the models are set on the component and not on the root view of the component. However, as nested controls automatically inherit the models from their parent controls the models will be available on the view as well.

144



pe rs on al us e

Lesson: Understanding SAPUI5 Basics: Component and App Descriptor

Figure 184: App Descriptor "Code" Document

The "Code" Document:

●

Descriptor for Applications, Components, and Libraries aka "app descriptor"

●

file called manifest.json

●

inspired from W3C manifest with own sap namespaces

●

●

●

●

existence declared in component metadata

created by the developer (either manually or with the help of a wizard/template in SAP Web IDE) part of Fiori Guidelines

●

language-dependent Values in App Descriptor

●

text symbols via handlebars like syntax: {{title}}

at m ht ig yr

created with the application at development, delivered within the application and read-only after delivery

●

●

C op

contains all global application settings and parameters e.g. the app id, name, version, the used data sources and UI5 dependencies

referring to text symbols from properties file location under sap.app/i18n attribute (default is "i18n/i18n.properties")

●

Evaluation of the language dependent done either on server API or on client based on sap.app/i18n attribute where the same language fallback applies as for UI5 (UI5 core is providing a preprocessing for the language resolution) LESSON SUMMARY You should now be able to: ●



145

Unit 8 Lesson 4

●



pe rs on al us e

Understanding SAPUI5 Basics: Margins and Paddings, CSS, Dialogs and Fragments


Margins and Paddings, CSS

C op

yr

ig

ht

m

at

Figure 185: CSS Box Model

146



pe rs on al us e

Lesson: Understanding SAPUI5 Basics: Margins and Paddings, CSS, Dialogs and Fragments

Figure 186: Margin/Padding CSS Classes: Features

Figure 187: Margin/Padding CSS Classes: Responsiveness

Predefined CSS Margin Classes

●

ig

●

yr

C op

Single-Sided Margins

-

ht

m

at

This is an overview of available margins:

Two-Sided Margins -

●

sapUiTinyMargin

Responsive Margins -

●

sapUiTinyMargin

sapUiResponsiveMargin

Clear Margin - reset the margin to standard -

sapUiTinyMargin, sapUiSmallMargin, sapUiMediumMargin, sapUiLargeMargin


147


●

Remove Margin -

sapUiNoMargin


Dialogs and Fragments

pe rs on al us e

For single-sided margins, choose a size (Tiny, Small, Medium or Large, which stand for 8, 16, 32 or 48px respectively) and a direction (Begin, End, Top or Bottom, where Begin is left and End is right and vice versa in RTL mode).

Figure 188: Fragments: Example XML fragment used by an XML view

XML Fragments

One important characteristic of fragments is that they are independent of the MVC concept and don't have a behavior. If behavior, like event handlers, is needed, they should used in a view and be able to connect to existing controllers of this view. Fragments are very usefully as UI parts which can be reused in several views and as part of a popup controls like dialogs.

C op

yr

ig

ht

m

at

In contrast to XMLviews, there is no tag as the root element. Instead, there you can use a UI5 control immediately or in case of multiroot tags use the tag. Apart from this difference, everything else works identically. You can bound

148



pe rs on al us e

Lesson: Understanding SAPUI5 Basics: Margins and Paddings, CSS, Dialogs and Fragments

Figure 189: Dialog as Fragment

Important: ●

●

addDependent - add the fragment dependent on the view to be connected to the view's model. a convenient side-effect is that the dialog will automatically be destroyed when the view is destroyed. Otherwise, we would have to destroy the dialog manually to free its resources.



C op

yr

ig

ht

m

at

●


149

Unit 8 Lesson 5

pe rs on al us e

Understanding SAPUI5 Basics: Aggregation and Expression Binding

●


LESSON OBJECTIVES After completing this lesson, you will be able to: Understand SAPUI5 Basics: Aggregation and Expression Binding

Aggregation Binding

Figure 190: Aggregation Binding

bindAggregation(sName, oBindingInfo) : sap.ui.base.ManagedObject

at

Bind an aggregation to the model.

C op

yr

ig

ht

m

The bound aggregation will use the given template, clone it for each item which exists in the bound list and set the appropriate binding context. This is a generic method which can be used to bind any aggregation to the model. A managed object may flag aggregations in the metamodel with bindable="bindable” to get typed bindSomething methods for those aggregations.

150


pe rs on al us e

Lesson: Understanding SAPUI5 Basics: Aggregation and Expression Binding


Figure 191: Example

Expression Binding

Expression Binding

Expression binding provides expressions instead of custom formatter functions. This saves the overhead of defining a function and is recommended in cases where the formatter function has a trivial implementation, like comparison of values. An expression binding is specified via {= expression} in an XML view.

C op

yr

ig

ht

m

at

Expression complies with a subset of SAPUI5 expression syntax except for bindings embedded in the expression itself, which are specified like this {= ${embedded}}.

Figure 192: Simple Example for custom formatting

Note: More complex examples can be found in the developers guide of the Demokit


151


LESSON SUMMARY You should now be able to: Understand SAPUI5 Basics: Aggregation and Expression Binding

C op

yr

ig

ht

m

at


pe rs on al us e

●

152


Unit 8 Lesson 6



pe rs on al us e

Understanding SAPUI5 Basics: Custom Formatting, Filtering, Sorting, and Grouping

●

Understand SAPUI5 Basics: Custom Formatting, Filtering, Sorting and Grouping

Custom Formatting

C op

yr

ig

ht

m

at

Figure 193: Calculated Fields

Figure 194: Calculated Fields: Extended binding syntax


153



Filtering, Sorting, Grouping

pe rs on al us e

Note: Extended syntax for calculated in XML views is not allowed in Fiori Development.

Figure 195: Filtering

Binding results of an aggregation can be restricted using filters like whereclauses in an SQL statement. An array of sap.ui.model.Filter can be used to build the where clause. The filter support and and or operators. sap.ui.model.FilterOperator can be used to assign a property and the filter value. SAPUI5 supports various operators, like: ●

●

●

●

●

●

●

●

NE

LT

LE

GT GE

BT

Contains

StartsWith

at

●

EQ

EndsWith

C op

yr

ig

ht

m

●

Figure 196: Sorting

Binding results of an aggregation can be ordered using a sorting like order by in an SQL statement.

154


Lesson: Understanding SAPUI5 Basics: Custom Formatting, Filtering, Sorting, and Grouping

An array of sap.ui.model.Sorter(sPath, bDescending?,vGroup) can be used to perform this sorting. When building a sorter, you can specify the descending parameter to define if the sort is descending (true) or ascending (false).


pe rs on al us e

Grouping the sorted content can either be set to true to enable grouping based on the raw model property value, or a function which calculates the group value out of the context.

Figure 197: Filtering & Sorting Using getBinding: Example for modifying filtering and sorting a table during

C op

yr

ig

ht

m

at

runtime


155

ht

ig

yr

C op


at

m

pe rs on al us e


156


Unit 8 Exercise 6

pe rs on al us e

Implement a Filter

Business Scenario


In the following exercises you will learn about the SAPUI5 filter concept by implementing a filter functionality described by the SAP Fiori Guidelines.


1. Create a SAPUI5 project.

Field

Value

Type

sap.m.Table

ID

idProductsTable

Aggregation bind items

Customers

Column elements per column

C op

yr

ig

ht

m

at

2. Implement the view. Use the following data:

ID , Company Name , Contact Name and ContactTitle

3. Add a filterbar control to the view. 4. Perform the required Controller Implementation.


157

Unit 8 Solution 6

Business Scenario

pe rs on al us e

Implement a Filter


In the following exercises you will learn about the SAPUI5 filter concept by implementing a filter functionality described by the SAP Fiori Guidelines.



a) Import the provided project FilterBar Template. To do so, copy S:\Courses \UX410_15\UX410_Exercises.zip to N:\My Documents.

C op

yr

ig

ht

m

at

b) Extract UX410_Exercises.zip to UX410_Exercises\:

Figure 199: Path

158




pe rs on al us e

Note: It might happen, that the access to this resource is not allowed. In this case, perform a right click on UX410_Exercises.zip and from the context menu choose Copy:

Figure 200: Direct Copy

Figure 201: Import

d) Fill-in the dialog box as follows and press OK.

C op

yr

ig

ht

m

at

c) In SAP Web IDE, from the context menu of the Workspace folder choose Import → From File System.


159

pe rs on al us e


Figure 202: Dialog box


e) Result:

Figure 203: Result of the Import

f) Familiarize yourself with the implementation.

2. Implement the view. Use the following data: Field

Value

Type

sap.m.Table

ID

idProductsTable

Aggregation bind items

Customers

C op

yr

ig

ht

m

at

Column elements

160

per column

ID , Company Name , Contact Name and ContactTitle

a) Open the file Main.view.xml in the folder view. The file should contain the following implementation:



pe rs on al us e


Figure 204: Implementation of Main.view.xml

b) In the content area of the View add a table of the type sap.m.Table. Assign an ID to the table with the value idProductsTable and bind the aggregation items of the attribute Customers from the data model to it. c) Create four Column elements. In each case add an element of: ●

ID

●

Company Name

●

Contact Name

●

ContactTitle

d) Create a template from the type ColumnListItem for the table and for the ID define an element of type Object Identifier. For the other three attributes use the sap.m.Text element.

C op

yr

ig

ht

m

at

e) The table thus created should have the following structure:


161


pe rs on al us e


Figure 205: Table structure

3. Add a filterbar control to the view.

a) Above the just created table, define an element of type sap.ui.comp.filterbar.FilterBar. Define an event handler named onSearch for the event search as well as an event handler named onReset for the event reset.

b) Add a sap.ui.comp.filterbar.FilterItem. Define the attribute label and bind it to the property CompanyName of the i18n model. Add a sap.m.Input element to the control aggregation. c) Add a further sap.ui.comp.filterbar.FilterItem. Define the attribute label and bind it to the property country of the i18n model. Add a sap.m.Select element to the control aggregation. Connect the attribute items to the array Countries of the model named selection.

d) Define a sorting by the attribute Country. Create a sap.ui.core.Item template within the element Select. To this end, connect the attributes key and text to the property Country of the selection model.

f) Compare your implementation with the following screenshot:

C op

yr

ig

ht

m

at

e) Repeat steps c and d for the Titles array of the model. Connect the key and the text attribute to the property ContactTitle of the selection model. Save your changes.

162



pe rs on al us e


Figure 206: Implementation

4. Perform the required Controller Implementation. a) Open the file Main.controller.js.

b) If not yet done, create an onInit function. Read the table control from the view and save the reference in a member variable.

Figure 207: Implementation of onInit

C op

yr

ig

ht

m

at

c) Insert a function onSearch with a parameter for the event parameter. From the event parameter read the SelectionSet attribute. For each filter criteria create a filter object and apply the finished filter object to the table.


163


pe rs on al us e


Figure 208: Implementation of onSearch

d) Implement a function named onReset. Set the table display back to the original display. The coding looks like:

Figure 209: Implementation of onReset

C op

yr

ig

ht

m

at

e) Save your changes and test the application.

164



LESSON SUMMARY You should now be able to: Understand SAPUI5 Basics: Custom Formatting, Filtering, Sorting and Grouping

C op

yr

ig

ht

m

at


pe rs on al us e

●


165

Unit 8 Lesson 7

LESSON OBJECTIVES After completing this lesson, you will be able to: Understand SAPUI5 basics: OData Model


●

pe rs on al us e

Understanding SAPUI5 Basics: OData Model

OData Model

C op

yr

ig

ht

m

at

Figure 210: Introduction to OData: Open Data Protocol

Figure 211: Introduction to OData: URI to access data

166



pe rs on al us e

Lesson: Understanding SAPUI5 Basics: OData Model

Figure 213: Comparison Between Version 1 and 2

C op

yr

ig

ht

m

at

Figure 212: OData Model in SAPUI5


167


pe rs on al us e


Figure 214: OData Simple Query Language

Reference: http://www.odata.org/developers/protocols/uriconventions#QueryStringOptions

Figure 215: SAP Web IDE: Back-End Routing in the Application Descriptor neo-app.json

C op

yr

ig

ht

m

at

OData specifies a simple but yet powerful query language that allows a client to request arbitrary filtering, sorting, and paging. A client is able to express via query string parameters the amount and order of the data that an OData service returns for the resource identified by the URI. The names of all query string parameters defined by OData are prefixed with a "$" character.

This is a potential built of a program: + adapt manifest.json "dataSources": { "invoiceRemote": { "uri": "/destinations/northwind/V3/Northwind/Northwind.svc/", "type": "OData", "settings": { "odataVersion": "2.0" }

168



} } …. "models": { "invoice": { "dataSource": "invoiceRemote" } }

pe rs on al us e

Lesson: Understanding SAPUI5 Basics: OData Model

Figure 216: Mock Server

It is common to start development of an application with local mock data first. Application can be connected to the real data server at the later stage of development. Such mock data can be also useful for testing and problem solving in cases when access to the data service is not available or requires efforts to set up. LESSON SUMMARY You should now be able to:

Understand SAPUI5 basics: OData Model

C op

yr

ig

ht

m

at

●


169

Unit 8 Lesson 8

LESSON OBJECTIVES After completing this lesson, you will be able to: Understand SAPUI5 basics: Testing


●

pe rs on al us e

Understanding SAPUI5 Basics: Testing

Unit Test with QUnit

Figure 217: Agile Testing Pyramid

C op

yr

ig

ht

m

at

Before you start implementing your first test, you should think about how to test the different aspects of your application.

170



pe rs on al us e

Lesson: Understanding SAPUI5 Basics: Testing

Figure 218: QUnit

Check: http://martinfowler.com/articles/mocksArentStubs.html.

A mock is an object that we can set expectations on, and which will verify that the expected actions have indeed occurred. A stub is an object that you use in order to pass to the code under test. You can setup expectations on it, so it would act in certain ways, but those expectations will never be verified. A stub's properties will automatically behave like normal properties, and you can't set expectations on them. If you want to verify the behavior of the code under test, you will use a mock with the appropriate expectation, and verify that. If you want just to pass a value that may need to act in a certain way, but isn't the focus of this test, you will use a stub.

Important:

A stub will never cause a test to fail.

●

Stubs and Mocks can be implemented manually

●

Problem: a lot of additional test code; Hard to maintain

●

Solution: dynamically created mocks using a mocking framework -> Sinon.JS

●

Sinon.JS is a mocking framework for JavaScript. It:

-

provides support for spies, stubs and mocks

-

supplies higher-level test doubles for timers and AJAX requests

-

included in SAP UI5 libraries

C op

yr

ig

ht

m

at

●


171


Figure 219: QUnit Example

pe rs on al us e


QUnit uses a set of top-level functions to provide semantic meaning in unit tests.

It follows as most of unit test frameworks an arrange-act-assert pattern -, a common test pattern employed when unit testing. Its purpose is to make a clear distinction between the set up for the test, the action that is to be tested, and the evaluation of the results. These are some basic functions: ●

●

●

●

●

●

module(string) - defines a module

test(string, function) - defines a test

ok(boolean, string) - validates to true or false

equal(value1, value2, message) - compares two values, using the double-equal comparator deepEqual(value1, value2, message) - compares two values based on their content, not just their identity

strictEqual(value1, value2, message) - strictly compares two values, using the triple-equal comparator

A basic example would be as follows:

C op

yr

ig

ht

m

at

test("a basic test example", function() { ok( true, "this test is fine" ); var value = "hello"; equal( value, "hello", "We expect value to be hello" ); } );

172



pe rs on al us e


Figure 220: Test Double

Check: http://martinfowler.com/articles/mocksArentStubs.html.

A mock is an object that we can set expectations on, and which will verify that the expected actions have indeed occurred. A stub is an object that you use in order to pass to the code under test. You can setup expectations on it, so it would act in certain ways, but those expectations will never be verified. A stub's properties will automatically behave like normal properties, and you can't set expectations on them.

If you want to verify the behavior of the code under test, you will use a mock with the appropriate expectation, and verify that. If you want just to pass a value that may need to act in a certain way, but isn't the focus of this test, you will use a stub.

Important:

A stub will never cause a test to fail.

●

Stubs and Mocks can be implemented manually

●

Problem: a lot of additional test code; Hard to maintain

●

Solution: dynamically created mocks using a mocking framework -> Sinon.JS

●

Sinon.JS is a mocking framework for JavaScript. It: -

provides support for spies, stubs and mocks

-

supplies higher-level test doubles for timers and AJAX requests

-

included in SAP UI5 libraries

C op

yr

ig

ht

m

at

●


173


pe rs on al us e


Figure 221: App Code Example - prettydate.js

Test Page

To perform a test, create test page (e.g. testpage.html) in a folder under your webapp folder. The test page will contain: ●

●

●

QUnit related JavaScript and CSS files

SAPUnit5 QUnit utilities

the HTML-body will contain tags needed by QUnit to report test results

C op

yr

ig

ht

m

at

●

SAPUI5 bootstrap code

174

Figure 222: Test Page Example 1/2



pe rs on al us e


Figure 223: Test Page Example 2/2

C op

yr

ig

ht

m

at

Figure 224: Web IDE - Project Settings - Unit Test Run Configuration


175


pe rs on al us e


Figure 225: Web IDE - Project Settings - Unit Test Run Configuration

C op

yr

ig

ht

m

at

Figure 226: Run the Test

176


ht

ig

yr

C op


at

m

pe rs on al us e


Figure 227: Test Results


177

ht

ig

yr

C op


at

m

pe rs on al us e


178


Unit 8 Exercise 7

In this exercise you implement the QUnit-Test. 1. Create a SAPUI5-Project. 2. Implement the helper function.

pe rs on al us e

Create a QUnit Test Scenario


3. Under the webapp folder create a new folder called testing-resources.

4. Create the QUnit test page, called test.qunit.html.

5. Enter QUnit relevant implementation details in the test.qunit.html file.

6. Insert the QUnit test script into the file test.qunit.html. 7. Remove unnecessary line of code.

The file test.qunit.html is a copy of the index.html. So some lines of code have to be removed which are not required in this implementation.

C op

yr

ig

ht

m

at

8. Run the QUnit test.


179

Unit 8 Solution 7

In this exercise you implement the QUnit-Test. 1. Create a SAPUI5-Project. a) Start the SAP Web IDE.

pe rs on al us e

Create a QUnit Test Scenario


b) Click on File → New → Project from Template, and then select the entry SAPUI5 Application Project.


c) Click Next.

C op

yr

ig

ht

m

at

d) As project name enter QUnitTesting and in the namespace field enter sap.training.qunittest.


e) Click Next. f) In the ViewName field enter Main. g) Click Finish. The new project QUnitTesting will appear in your workspace. 2. Implement the helper function.

180



a) Open the webapp folder and from the context menu choose New → Folder.

Figure 230: New folder, util

pe rs on al us e

b) Create a folder named util.


c) Select the folder util and create a file called prettydate.js by choosing New → Folder.

Figure 231: New folder, prettydate.js

d) Implement a function with the name prettyDate.

Figure 232: Implementation of prettyDate

e) Open the index.html file.

C op

yr

ig

ht

m

at

f) Into the index.html insert the script reference of the file prettyDate.js


181


pe rs on al us e


Figure 233: Referencing prettyDate in index.html

3. Under the webapp folder create a new folder called testing-resources.

a) To do so, open the webapp folder and from the context menu choose New → Folder.

b) In the next dialog as folder name enter testing—resources and confirm the dialog with OK.

Figure 234: New folder testing-ressources

4. Create the QUnit test page, called test.qunit.html.

C op

yr

ig

ht

m

at

a) Select the index.html file and from the context menu choose Copy.

182

Because you need the SAPUI5 bootstrap code in your QUnit test page, you have to create a copy of the index.html file.

b) Select the testing-resources folder and from the context menu select Paste. c) Select the newly created file and from the context menu choose Rename. d) In the next dialog enter the name test.qunit.html.


Figure 235: test.qunit.html in project structure

pe rs on al us e



e) If necessary open the test.qunit.html file and directly after the meta tag add a base tag.

Figure 236: meta tag in test.qunit.html

5. Enter QUnit relevant implementation details in the test.qunit.html file.

a) If necessary open the test.qunit.html file and directly after the meta tag add a base tag.

b) After the bootstrap code enter the following link and script element:

Figure 237: Link and script element in test.qunit.html

c) Save your changes.

6. Insert the QUnit test script into the file test.qunit.html. a) If necessary open the file test.qunit.html.

C op

yr

ig

ht

m

at

b) According to the previous steps, add the code below:


183


pe rs on al us e


Figure 238: Implementation in test.qunit.html


7. Remove unnecessary line of code.

The file test.qunit.html is a copy of the index.html. So some lines of code have to be removed which are not required in this implementation.

C op

yr

ig

ht

m

at

a) Remove the following lines of code:

Figure 239: Removing these lines of code

b) In the body of the test.qunit.html file insert another div element with the ID QUnit.

184




pe rs on al us e

Figure 240: Additional implementation in test.qunit.html


d) As a result of the previous steps your test.qunit.html file should look like this:

Figure 241: Final implementation of: test.qunit.html

8. Run the QUnit test.

a) Select the file test qunit.html. From the context menu select Run → Run as → Unit Test.

b) A new tab with the test results appears.

c) Change the test implementation a little and check each of the results of your changes. d) Close all open tabs.

C op

yr

ig

ht

m

at

Figure 242: Menue path for the test


185


Integration Test with OPA5

JavaScript-based test framework for SAPUI5

●

User interaction tests

●

SAPUI5 integration tests

●

Navigation tests

●

Databinding

●

OPA5 is fully supported to be executed on any mobile device

●

●

●


●

pe rs on al us e

Introduction ● OPA5 is the abbreviation of One Page Acceptance Test

Developer writes test during development

Test-driven-Development (TDD) results in less fragile code Using the TDD-approach will result in sustainable code

Advantages of OPA5 ●

Advantages of OPA5: -

-

Quick and easy access to JavaScript functions

Easy ramp-up as it can be used with any JavaScript unit test framework, such as QUnit or Jasmine

-

Using the same runtime enables debugging

-

Good SAPUI5 integration

-

Feedback within seconds makes it possible to execute tests directly after a change

-

Asynchronicity is handled with polling instead of timeouts, which makes it faster

-

Enables test-driven development (TDD)

Limitiations ● Screen capturing

Testing across more than one page

at

●

m

●

End-to-end test are not recommended with OPA5 due to authentication issues and fragility of tests data

C op

yr

ig

ht

●

Remote test execution

186



pe rs on al us e


Figure 243: The Bootstraping

C op

yr

ig

ht

m

at

Figure 244: Load Required Libraries and Start the Test

Figure 245: OPA5: Anatomy of Test Case 1/2


187


Figure 246: OPA5: Anatomy of Test Case 2/2

pe rs on al us e


Figure 247: OPA5: Arrangements, Action, Assertions

C op

yr

ig

ht

m

at

Figure 248: Retrieving Controls by ID

188



pe rs on al us e


Figure 249: Matchers - Retrieving Controls without an ID 1/3


C op

yr

ig

ht

m

at



189

ht

ig

yr

C op


at

m

pe rs on al us e


190


Unit 8 Exercise 8

Business Scenario

pe rs on al us e

Create an OPA5 Test Scenario

In this exercise you will learn the implementation of OPA5 tests, by implementing a one page acceptance test.


Generate a SAPUI5 project

1. Generate a SAPUI5 project, named OPATesting.

2. Implement the UI.

3. Implement a OPA test for working with IDs.

Implement a OPA test case with Matcher In the next task you will implement a OPA5 test case by using Matcher. 1. Implement a OPA test case with Matcher.

Implement an OPA component test In the next task you will implement a component and test the implementation.

C op

yr

ig

ht

m

at

1. Implement an OPA component test.


191

Unit 8 Solution 8

Business Scenario

pe rs on al us e

Create an OPA5 Test Scenario

In this exercise you will learn the implementation of OPA5 tests, by implementing a one page acceptance test.


Generate a SAPUI5 project

1. Generate a SAPUI5 project, named OPATesting. a) Start the SAP Web IDE.

b) Click on File → New → Project from Template and choose the entry SAPUI5 Application Project.

Figure 252: New UI 5 Application, Step 1

c) Click Next.

C op

yr

ig

ht

m

at

d) Name your project the name OPATesting and in the Namespacefield enter the value sap.training.opatest.


e) Click Next. f) In the View Name field enter Main.

192



pe rs on al us e



g) Confirm the dialog with Finish.

Subsequently you will see your newly created project in the Web IDE.


2. Implement the UI.

C op

yr

ig

ht

m

at

a) Open the Main.view.xml file in the folder view and enter the following code:

Figure 256: Code in Main.view.xml

b) Save your implementation. c) Now open the Main.controller.js file in the Controller folder.


193



pe rs on al us e

d) Here implement a function named handlePress. Show a message using the show function of the class sap.m.MessageBox.

Figure 257: Function handlePress

e) Under the webapp folder create a new folder named testing-resources. In the context menu of the webapp folder choose the New → Folder. f) In the next dialog as the folder name enter testing-resources.

Figure 258: New Folder

g) Confirm the dialog with OK.

C op

yr

ig

ht

m

at

h) Mark the newly created folder testing-resources and from the context menu select the entry New → Folder. In the appearing dialog enter integration.

Figure 259: Folder: integration

3. Implement a OPA test for working with IDs. a) Choose the newly created testing-resources folder and from the context menu select the entry File.

194



Figure 260: Entry file

pe rs on al us e

b) In the next dialog as the file name enter opaTests.qunit.html.


c) If not yet done, open the file opaTests.qunit.hml and implement the following code.

Figure 261: Coding of opaTests.qunit.hml

d) Now create a OPA5 testcase. Choose the folder integration and from the context menu select the entry New → File. Enter the new file name ID_TestCase.js and confirm the dialog.

Figure 262: New File, ID_TestCase.js

C op

yr

ig

ht

m

at

e) Iimplement the OPA5 test case. It should look like:


195

pe rs on al us e



Figure 263: OPA5 test case

f) If not open, open the opa_Tests.qunit.html file and implement the synchronous loading of the test case.

Figure 264: Synchronous loading

g) Start the test. Choose the opa_Tests.qunit.html file and from the context menu select Run → Run as → Unit Test.

Figure 265: Start of the test

h) Take a look at your result of the unit test and check the result:

C op

yr

ig

ht

m

at

Figure 266: Test result

196

i) Go back to the Web IDE and close all open tabs.

Implement a OPA test case with Matcher In the next task you will implement a OPA5 test case by using Matcher. 1. Implement a OPA test case with Matcher. a) Open the Main.view.xml file in the folder view. b) Add a new button in the header area of your page.


Figure 267: Implementation of a button

pe rs on al us e



c) Open the Main.controller.js file in the controller folder and implement the onInit function as shown below.

Figure 268: OnInit function

d) Create a new test case class in the integration folder. To do so, choose the folder integration and from the context menu select New → File.

e) Open the file and implement a rudimentary test case.

C op

yr

ig

ht

m

at

Figure 269: New file


197


pe rs on al us e


Figure 270: Test case

Figure 271: Test case implementation

g) Add the test case implementation to the start file of the test case.

C op

yr

ig

ht

m

at

f) Subsequently implement the test case.

198



pe rs on al us e


Figure 272: Test case implementation

h) Execute the test case.

Figure 273: Result of the test

Figure 274: Another test case

j) Check the test result.

C op

yr

ig

ht

m

at

i) Open the test case implementation and develop a further Matcher test case.

Figure 275: Result of the second test


199


Implement an OPA component test In the next task you will implement a component and test the implementation. 1. Implement an OPA component test. a) Choose the folder integration from the testing-resources folder.


pe rs on al us e

b) Generate a new folder with the name button. Choose the testing-resources folder and from the context menu select the entry New → Folder. In the appearing dialog enter the value button and confirm the dialog with OK.

Figure 276: Folder: button

c) Generate a file with the name Component.js in the button folder. To do so, choose the button folder and from the context menu choose New → File. In the next dialog enter the file name Component.js.

Figure 277: Folder: Component.js

C op

yr

ig

ht

m

at

d) If not yet done, open the file and implement the UI component:

200

Figure 278: Implementation of the UI component

e) Now implement the OPA5 test case. Create a file with the name:Component_TestCase.js. Mark the integration folder and from the context menu select New → File. f) In the next dialog enter Component_TestCase.js:


Figure 279: File: Component_TestCase.js

pe rs on al us e



g) Open the Component_TestCase.js file and implement the test case to test the UI component.

Figure 280: Implementation ofComponent_TestCase.js

C op

yr

ig

ht

m

at

h) In the opaTests.qunit.html file customize the implementation of the test. Open the opaTests.qunit.html file and implement the following code:

Figure 281: Implementation of opaTests.qunit.html

i) Subsequently to the implementation, start the OPA5-Test. To do so, mark the opaTests.qunit.html file and from the context menu select Run → Run As → Unit Test. j) Check the result of your test.


201

ht

ig

yr

C op


at

m Figure 282: Result of the test

202

pe rs on al us e




LESSON SUMMARY You should now be able to: Understand SAPUI5 basics: Testing

C op

yr

ig

ht

m

at


pe rs on al us e

●


203

Unit 8 Lesson 9

●



pe rs on al us e

Understanding SAPUI5 Basics: Routing and Navigation


Routing and Navigation

at

Figure 283: Typical SAPUI5 Mobile Usage

C op

yr

ig

ht

m

Typical mobile applications are often composed of a number of pages/views/screens between which the user can navigate. Two of them are now added to the App.

IMPORTANT: while sap.m.Page controls can be used as pages, and the aggregation is called "pages", other controls could be used as well Many mobile apps are composed of some pages and the user can drill-down to detail pages and go back up again. Frontend has to determine what resource/page was requested and display it in an appropriate way (slide, show, flip, etc.). UI5 supports this Pattern by providing the sap.m.App control which can handle pages and navigation between them. Internally sap.m.App inherits the navigation capabilities from the sap.m.NavContainer control.

204



Figure 284: Inner-App Navigation

pe rs on al us e

Lesson: Understanding SAPUI5 Basics: Routing and Navigation

SAPUI5 navigation features are:

●

sap.m.routing.Router- SAPUI5 router class to load the pages and update the URL (change/ replace hash)

●

Routing configuration in the app descriptor

●

Navigation events Animation between pages (show, slide, fade, flip)

Modern web applications load data or changes in the document object model (DOM) without leaving the original page.

We can take advantage of the URL hash. By inserting a hash character into the URL we can pick up it and use it to decide what page to display

The UI5 Routing uses a hash-based navigation: ●

the navigation is done by changing the hash (string as the name of the routes)

●

the browser does not reload the page

●

navigation could be done with/without browser history handling

●

support bookmarks/deep links

We want to consider routing as set of features that dispatch URLs to views of an app and wires the views together.

In contrast, navigation allows to navigate pages based on the routing configuration and allows to pass parameters to the targets.

C op

yr

ig

ht

m

at

The SAPUI5 core library provides an API for navigating with URL fragment changes. When an app is running within the SAP Fiori Launchpad, the implementation will consider the shellspecific navigation parts and allow both inner-app and app-to-app navigation by similar means. The navigation API provides the following functionality:

●

Directly trigger navigation to a parameterized navigation target

●

Register navigation routes and listeners for fragment changes to restore a specific state

LESSON SUMMARY You should now be able to: ●



205

Unit 8 Lesson 10

●



pe rs on al us e

Understanding SAPUI5 Basics: Visualizing Business Data

Understand SAPUI5 basics: Visualizing Business Data

Visualizing Business Data Charts - An Introduction

Charts are characterized by the following statements: ●

●

●

charts can draw the attention to key information and patterns when they are well-designed

namespaces are sap.viz and sap.suite.ui.commons

documentation can be found at: https://sapui5.netweaver.ondemand.com/docs/ vizdocs/index.html

C op

yr

ig

ht

m

at

●

charts are visualizing quantitative information to understand business aspects easier

206

Figure 285: Charts - UI-Controls



pe rs on al us e

Lesson: Understanding SAPUI5 Basics: Visualizing Business Data

Figure 286: sap.suite.ui.commons.ChartContainer

Figure 287: sap.suite.ui.commons.ChartContainer

Visualize business data: sap.viz.ui5.controls.VizFrame

VizFrame is a viz control that manages a visualization’s initialization, layout, feeding, customization and interactions. Important aspects:

●

C op

yr

ig

ht

m

at

●

DataSet -

DimensionDefinition/MeasureDefinition -

●

Reference to the entity set of the data model

Defines the dimensions of the diagram

Feed -

Specifies the Axis


207


Figure 288: sap.viz.ui5.controls.VizFrame

pe rs on al us e


C op

yr

ig

ht

m

at

Figure 289: sap.viz.ui5.data.Dimension

Figure 290: sap.viz.ui5.data.Dimension

208



pe rs on al us e


Figure 291: Create the Diagram

C op

yr

ig

ht

m

at

Figure 292: Create the Diagram - Change the Data Basis


209

ht

ig

yr

C op


at

m

pe rs on al us e


210


Unit 8 Exercise 9

pe rs on al us e

Work with Diagrams

Business Scenario


In this exercise you will implement a simple analytical application with which data can be visualized through graphs and tables. Through implementation of selection criteria your data can be presented according to the choice of the user.

The application is to be implemented in accordance with the guidelines as a full-screen application. It consists of a View. The View is named Main.

Create a SAPUI5 project

1. Create a SAPUI5 project, called DiagramExercise.

Implement the model

1. Implement the model.

Implement a line graph In the second step of this exercise you will implement the display of the data with a line graph. 1. Implement a line graph. Use the following data: Field

Value

UI-element of type

ChartContainer

ID

idChartContainer

personalizationPress

attachPersonalizationPress

2. Fill the content aggregation.

3. Implement a function _createDataSet.

at

4. Create a function _handleSelection.

C op

yr

ig

ht

m

5. Create a function with name _createLineDiagram.

6. After the implementation of the line graph is complete, the application can be tested. Implement a bar chart 1. Implement a bar chart. 2. Implement the function _createColumnChart. 3. Enhance the event handler contentChange. Now, the view switch between the two diagrams, the contentChange event handler, has to be developed. You did this in the first step of the exercise with the value attachContentChange. Implement a table view


211


1. Create and configure ChartContainerContent. 2. Create a function _createTable.

1. Implement a dimension selection. 2. Create a function _createSelector. Use the following values: Item-Text

0

per Product

1

per Region

2

per Product and Region

C op

yr

ig

ht

m

at


Item-Key

pe rs on al us e

Implement a dimension selection

212


Unit 8 Solution 9

Business Scenario

pe rs on al us e

Work with Diagrams


In this exercise you will implement a simple analytical application with which data can be visualized through graphs and tables. Through implementation of selection criteria your data can be presented according to the choice of the user.

The application is to be implemented in accordance with the guidelines as a full-screen application. It consists of a View. The View is named Main.


1. Create a SAPUI5 project, called DiagramExercise. a) Start the SAP Web IDE.

b) Click on File → New → Project from Template and choose the entry SAPUI5 Application Project.


c) Click Next.

C op

yr

ig

ht

m

at

d) Name your project DiagramExercise and in the Namespace field enter the value sap.training.diagram.


213


pe rs on al us e



e) Click Next.

f) In the View Name field enter the value Main.

g) Click Finish. The newly created project DiagramExercise will appear in your workspace


Implement the model

1. Implement the model.

a) Open the model folder and add the metadata.xml file to this folder which is given by the trainer.

c) Choose the Data Sources tab. d) Click on the plus symbol.

C op

yr

ig

ht

m

at

b) Now open the manifest.json file and switch (if this hasn´t happened automatically) in the view Descriptor Editor.

214



Figure 296: Using the +-symbol

pe rs on al us e


e) In the next dialog, as name, enter SalesModel and in the URI field, set it as model. Then click OK.

Figure 297: Adding Data Source

f) Switch from the Descriptor Editor view to the Code Editor view in your manifest.json file.

g) In the Configuration section, search for the sap.ui5 object and in this configuration search for the entry with the identifier models.

C op

yr

ig

ht

m

at

h) In the models area create a new model with the SalesModel ID. Referencing the SalesModel configuration of the previous step.


215


pe rs on al us e


Figure 298: Model area implementation

i) Save your changes.

j) Select your project and from the context menu choose Project Settings.

k) Choose (if not automatically selected) the entry Mock Data. l) Check, if in the field root the value model is entered.

m) In the Metadata File Path field, add the value ./model/metadata.xml and choose (if not selected) the value Generated data.

C op

yr

ig

ht

m

at

Figure 299: Mock data

216

n) Save your changes. o) Choose the metadata.xml file, and from the context menu choose the entry Edit Mock Data.

p) In the next dialog check the Use the data above as my mock data source checkbox, and then click the Generate Random Data button.


pe rs on al us e


Figure 300: Random data generator

q) Confirm the dialog.


r) The SAP Web IDE generates a file with the name Verkaufszahlen.json and adds it to the model folder. If you like, open the file and analyze the content.

Implement a line graph In the second step of this exercise you will implement the display of the data with a line graph. 1. Implement a line graph. Use the following data: Field

Value

UI-element of type

ChartContainer

ID

idChartContainer

personalizationPress

attachPersonalizationPress

a) Open the file Main.view.xml.

b) Create (if not available) an element of the type FullscreenPage. c) Create a new UI-element of the type ChartContainer.

d) Enter an ID of the value idChartContainer.

e) Connect the attribute title to a property with the name ChartContainerTitle from your I18N-Model with the ID i18n. f) Assign contentChange to the function named attachContentChange.

C op

yr

ig

ht

m

at

g) To personalizationPress assign the value attachPersonalizationPress.

Figure 301: Implementation of personalizationPress


217


h) From the index i18n, open the file i18n.properties. i) In the i18n.properties file, create a property with the name diagramlistTitle and assign a plausible value for a title. 2. Fill the content aggregation.

pe rs on al us e

a) In order to display a chart in a chart container object, it is necessary to fill the content aggregation. In the ChartContainer create a new item of type ChartContainerContent.


b) Next, in the content-Aggegration, create two further elements. Firstly, please create an element of type Popover and assign the ID idoPopoverFrame5. On the other hand you must define an element type VizFrame. This object is used later as a canvas for the actual line graph. Assign to the first VizFrame element the ID idoVizFrame5. Additionally define the attribute uiConfig and assign a value to this attribute {applicationSet: 'fiori'}. c) To finish, set the width of VizFrame element to 100%.

Figure 302: viz Implementation

d) Next, open the view controllwe Main.controller.js in the controller folder. e) Create (if not automatically happened) a function, call it onInit.

f) In the onInit function create a controller member value named currentVizFrame and to the variable assign the value idoVizFrame5. Create another member variable named currentSelectedDimension and assign the value 0.

Figure 303: onInit implementation

g) Implement a function, called _createFeedMap. The function is used for different objects of type FeedItem.

C op

yr

ig

ht

m

at

FeedItem objects are used to describe the axes of a diagram. Implement the function as followed.

218


pe rs on al us e



Figure 304: Function: _createFeedMap

h) After you have implemented the _createFeedMap function, add the function call up to the end of your onInit function. i) Create a function with the name _createDataSetMap. The object of the function is a JavaScript-Map with three objects for the dimensions of your chart. Implement the function as shown below.

Figure 305: Implementation: _createFeedMap

j) To the end of your onInit function, add the invocation of the function _createDataSetMap.

a) Implement a function _createDataSet. In the function create a variable with the name and assign an entity of type sap.viz.ui5.data.FlattenedDataset. Bind the attribute data of the object to the root object of your data model named sales. Make sure that you use the model ID SalesModel. Deliver the object back to the caller.

C op

yr

ig

ht

m

at

3. Implement a function _createDataSet.


219


pe rs on al us e


Figure 306: Implementation of _createDataSet

4. Create a function _handleSelection.

a) Define a parameter with name selectedItem. Check in your implementation, if the parameter selectedItem contains the value 0. If this is the case, read the currently displayed VizFrame object by means of the byId function of the view (member variable currentVizFrame).

b) Access the currently used dataset of the VizFrame object using the getDataset function and remove from this object the dimensions as well as the measure objects. For this purpose, the dataset object provides appropriate remove functions. c) Add the product dimension using the addDimension function. For this purpose, use the map of step 2G.

d) Now call the addMeasure function on the dataset object and pass the object with the name verkaufszahlenMeasure of the map which was created in step 2G. e) Delete the currently referenced feed objects using the removeAllFeeds function of the VizFrame object.

g) Complete the case statement with a break. Your implementation should look similar to the following.

C op

yr

ig

ht

m

at

f) From the feedMap which was created in step 2d, add the feed with the products as well as the feed with the sales figures. For this purpose, the VizFrame object provides the addFeed function.

220



Figure 307: Implementation of _handleSelection

pe rs on al us e


5. Create a function with name _createLineDiagram.

a) The function handles the creation of the line diagram. Read the reference of the VizFrame element with the ID idoVizFrame5 and assign it to a variable. Equally, provide a reference on the popover element with the ID idoPopoverFrame5.

b) Call the function _createDataset and assign the result to the reference of the VizFrame object which was read in step a. c) Call the function_handleSelection and pass the value of the member variable currentSelectedDimension which was created in the onInit function.

d) Call the function setVizProperties. Pass an object which defines that data shown in the diagram should be labeled. Additionally define , that the title is not to be displayed in the diagram. e) Define that you want to use a line diagram by means of the function setVizType of the VizFrameobject. For that purpose, pass a string literal with the value line. f) Finally, call the function connect on the popover object of step a and pass the unique ID of the VizFrame object. For this purpose, use the function getVizUid.

C op

yr

ig

ht

m

at

g) Make sure that your implementation looks similar to the following:

Figure 308: Implementation of _createLineDiagram

h) Insert the _createLineDiagram call up function at the end of your onInit function. Your onInit function should now have the implementation shown below.


221


pe rs on al us e



6. After the implementation of the line graph is complete, the application can be tested. a) Choose the index.html file and from the context menu choose Run → Run with Mock Data.


Implement a bar chart

at

1. Implement a bar chart.

C op

yr

ig

ht

m

a) In the Main.view.xml file, create a new ChartContainerContent

222

b) In the newly created element, the Attribute icon, refers to the icon with the identifier vertical-bar-chart. c) In the content aggregation of the ChartContainerContent elements, create an element with the type VizFrame. d) Assign the ID idoVizFrame4 to it, and assign an object with the variable applicationSet to the attribute uiConfig. The variable should get the value fiori.



2. Implement the function _createColumnChart.

pe rs on al us e

Figure 311: Implementation of this step

a) Open the view controller Main.view.controller. Implement the function _createColumnChart.

b) Obtain a reference to the VizFrame element, created in the previous step.


c) To the VizFrame object, assign a configuration for VizProperties. Specify, that the chart title should not be displayed. Additionally define, that the beams shown should displayed with values (attribute data label)

d) Specify, that the chart is a bar chart by using the setVizType function. You can use a string literal with the value column.

Figure 312: Implementation of: _createColumnChart

3. Enhance the event handler contentChange.

a) Create an event handler function with the name attachContentChange. Read out the parameter selectedItemId. Check, if the parameter selectedItemId has the string table. If this isn´t the case, split the parameter and assign it to the second value of the resulting array of member variables currentVizFrame.

b) Finally call the function _handleSelection and hand it over to the currentSelectedDimension variable.

C op

yr

ig

ht

m

at

Now, the view switch between the two diagrams, the contentChange event handler, has to be developed. You did this in the first step of the exercise with the value attachContentChange.

Figure 313: Implementation of: attachContentChange


223



pe rs on al us e

c) At the end of your onInit implementation, add the call up _createColumnChart function.

Figure 314: Implementation of: onInit

d) Save your changes.

e) Test the application. As seen below you can switch between the line graph and bar chart.

Figure 315: Result of this task

at

Implement a table view

a) Create another ChartContainerContent object. To the iconattribute of the ChartContainerContent element, assign the value for the table-chart-Icon and enter a title. Then in the content aggregation of the ChartContainerContent create a table of type sap.m.Table and assign the ID idoTable to the table control.

C op

yr

ig

ht

m

1. Create and configure ChartContainerContent.

Figure 316: Implementation of: ChartContainerContent

2. Create a function _createTable.

224



a) In the view controller of the main view, create a function _createTable . b) In this function, involve a reference to the table created in the first step.

pe rs on al us e

c) To the table add 4 columns to represent the region, area, the product name, and the sales figures. d) In the table, show the values from the data model for the REGION_NAME, SUB_REGION_NAME, PRODUCT_NAME and SALES_AMOUNT fields . For this create a template object of the type sap.m.ColumnListItem.


e) Bind the items in the table to the model element named sales. Hand over the sap.m.ColumnListItem-Objekt, which was created in the previous step, to the used function bindItem.

Figure 317: Implementation of: _createTable

f) In the onInit function, call the function _createTable.

C op

yr

ig

ht

m

at

g) Test your application. As result, you should not only be able to switch between the line graph and the bar chart but also find another button in the toolbar table, showing the newly implemented table.


225


pe rs on al us e


Figure 318: Result of this task

Implement a dimension selection

1. Implement a dimension selection.

a) Open the Main.view.xml file and into ChartContainer insert an element of type dimensionSelector. Then create an element of type sap.m.Select. Assign the ID dimSelector and to the event handler handelSelection assign the change event.


2. Create a function _createSelector. Use the following values: Item-Text

0

per Product

1

per Region

2

per Product and Region

C op

yr

ig

ht

m

at

Item-Key

226

a) In the view controller create a function _createSelector. Use the byId function to read the selection list, and assign three objects of type sap.ui.core.Item. Use the i18Ncapabilities of SAPUI5. The function is supposed to fill the previously created selection list with values. b) The following results occur due to the implementation:



pe rs on al us e


Figure 320: Implementation of: _createSelector

c) Insert the appropriate properties in the I18N file and enter the text seen in the previous substep.

d) Open the Main.controller.js file and implement the function handleSelection. The function reads out 2 values: the selectedItem parameter from the event object and usng the getKey function it reads the key of the selected item in the list. Then select the function _handleSelection and transfer the value you got from the key parameter of the event.

Figure 321: Implementation of substep d

C op

yr

ig

ht

m

at

e) From the onInit function, open the function _createSelector .


227


pe rs on al us e


Figure 322: Implementation of substep e

C op

yr

ig

ht

m

at

f) Finally expand the _handleSelection function. Please proceed as shown below:

228

Figure 323: Implementation of substep f

g) Open your application. A list appears, in which you can specify in which relation the sales figures are displayed.


Figure 324: UResult of the substep

pe rs on al us e



h) In order to obtain meaningful data charts, please copy the Verkaufszahlen.json file you received from your trainer into the models folder.

C op

yr

ig

ht

m

at

i) Open your Mock Data-Editor. Make sure that the Use the data above as my mock datasource checkbox is checked. Confirm the dialog box and open your application again.


229


LESSON SUMMARY You should now be able to: Understand SAPUI5 basics: Visualizing Business Data

C op

yr

ig

ht

m

at


pe rs on al us e

●

230


Unit 8

pe rs on al us e

Learning Assessment

1. What attribute of the script-tag tells the browser where to find the SAPUI5-core on an SAP ERP system? Choose the correct answers. A src=”/resources/sap-ui-core.js”

X

B src=”res/sap-ui-core.js”

X

C source=”resources/sap-ui-core.js”

X

D src=”sap-ui-core.js”


X

2. What attribute tells SAPUI5 what theme should be used? Choose the correct answers. X

A data-sap-theme

X

B data-sap-ui-theme

X

C theme-sap-ui

X

D data-ui-theme

3. In what syntax are the controllers written?

X

A Synchronous Module Definition

X

B Asynchronous Module Definition

X

C SAPUI5 Module Definition

X

D Technical Module Definition

C op

yr

ig

ht

m

at



231


4. What is the role of the model in SAPUI5? Choose the correct answers. A A model provides functions to process the events on the view

X

B A model holds the data and provides methods to retrieve the data from the datasource and to set and update data

X

C A model provides controller functions for the view

5. What of the following is true?



pe rs on al us e

X

X

A App descriptor contains application-specific configuration settings

X

B SAP Fiori apps are not component based

X

C Different view types can be used in one application

X

D SAP recommends to use XML views

X

E Model instantiation is always implemented inside the view controller

6. What is the base class of a faceless component? Choose the correct answers. X

A sap.ui.core.UIComponent

X

B sap.ui.core.Component

X

C sap.ui.core.FacelessComponent

X

D sap.ui.component.Component

7. What is a fragment?


A part of every view implementation

X

B light-weight UI parts

X

C part of the controller implementation

X

D light-weight component parts

C op

yr

ig

ht

m

at

X

232



8. How is the final width of an element calculated? Choose the correct answers. A the final width of an element is the sum of the margin, padding, border

X

B the final width of an element is the sum of the margin, padding, border and the given width

X

C the final width of an element is the sum of the margin, padding

X

D the final width of an element is the sum of the margin, border and the given width



pe rs on al us e

X


A Aggregations can only be bound to datasets defined in the model

X

B Aggregation binding is used to bind a dataset to UI controls that supports property binding

X

C Aggregation binding is used to bind a dataset to UI controls that supports aggregation binding

X

D To bind a collection the UI-control provides the bindAggregation-method

10. What is expressing binding?


A Expression binding provides expressions instead of customer formatter functions

X

B Expressing binding provides only aggregation binding

X

C Expressing binding is a way to express the navigation relation between views

X

D Expressing binding is a way to express the relation between a view and a controller

C op

yr

ig

ht

m

at

11. What class implements constants to specify the filter operator? Choose the correct answers. X

A sap.ui.model.FilterOperators

X

B sap.ui.model.FilterOperation

X

C sap.ui.model.FilterOperator

X

D sap.ui.model.filter.FilterOperator

X

E sap.ui.model.filter.FilterOperation


233


12. What base class is used for sorting?

X

A sap.ui.sorter.Sorter

X

B sap.ui.model.Sorter

X

C sap.ui.model.sorter.Sorter

X

D sap.ui.sorter.Sorter

pe rs on al us e


13. What is OData?



A a SAP specific protocol for creating and consuming data APIs

X

B an industry standard protocol for creating and consuming data APIs

X

C a protocol to consume function modules

X

D a protocol to consume web services

14. What OData implementation of SAPUI5 should be used when implementing SAP Fiori apps? Choose the correct answers. X

A sap.ui.model.odata.ODataModel

X

B sap.ui.model.odata.v2.ODataModel

X

C sap.ui.odata.ODataModel

X

D sap.ui.model.ODataModel

15. What types of test are “included” within the SAPUI5-framework? Choose the correct answers. A Manual tests

X

B Systems tests

X

C Component tests

X

D Unit tests

C op

yr

ig

ht

m

at

X

234




X

A Test-driven-Development results in less fragile code?

X

B Test-driven-Development is a methodology for geeks?

X

C Test-driven-Development is too expensive

X

D Test-driven-Development will result in sustainable code

17. Where should the routing configuration be placed?



pe rs on al us e


X

A Inside the Component.js

X

B Inside the app descriptor

X

C Inside the view implementation

X

D Inside the controller implementation

18. What of the following is provided by the navigation API? Choose the correct answers. X

A Register navigation routes and listeners for fragment changes to restore the specific state

X

B Direct trigger navigation to parameterized navigation targets

X

C Functions to trigger navigation plugs

X

D Functions to navigate between SAP Fiori apps inside the FLP

19. What is a DataSet

C op

yr

ig

ht

m

at


A A set of data of a ODataModel

X

B Reference to the entity set of the data model

X

C An aggregation binding type

X

D Specification of the axes


235


20. What control should be used to visualize business data?

A sap.ui.data.BusinessData

X

B sap.viz.ui5.controls.VizFrame

X

C sap.viz.ui5.controls.VizData

X

D sap.viz.ui5.VizFrame

C op

yr

ig

ht

m

at


X

pe rs on al us e


236


Unit 8

pe rs on al us e


1. What attribute of the script-tag tells the browser where to find the SAPUI5-core on an SAP ERP system? Choose the correct answers. A src=”/resources/sap-ui-core.js”

X

B src=”res/sap-ui-core.js”

X

C source=”resources/sap-ui-core.js”

X

D src=”sap-ui-core.js”


X

2. What attribute tells SAPUI5 what theme should be used? Choose the correct answers. X

A data-sap-theme

X

B data-sap-ui-theme

X

C theme-sap-ui

X

D data-ui-theme

3. In what syntax are the controllers written?

X

A Synchronous Module Definition

X

B Asynchronous Module Definition

X

C SAPUI5 Module Definition

X

D Technical Module Definition

C op

yr

ig

ht

m

at



237


4. What is the role of the model in SAPUI5? Choose the correct answers. A A model provides functions to process the events on the view

X

B A model holds the data and provides methods to retrieve the data from the datasource and to set and update data

X

C A model provides controller functions for the view




pe rs on al us e

X

X

A App descriptor contains application-specific configuration settings

X

B SAP Fiori apps are not component based

X

C Different view types can be used in one application

X

D SAP recommends to use XML views

X

E Model instantiation is always implemented inside the view controller

6. What is the base class of a faceless component? Choose the correct answers. X

A sap.ui.core.UIComponent

X

B sap.ui.core.Component

X

C sap.ui.core.FacelessComponent

X

D sap.ui.component.Component

7. What is a fragment?

C op

yr

ig

ht

m

at


238

X

A part of every view implementation

X

B light-weight UI parts

X

C part of the controller implementation

X

D light-weight component parts



8. How is the final width of an element calculated? Choose the correct answers. A the final width of an element is the sum of the margin, padding, border

X

B the final width of an element is the sum of the margin, padding, border and the given width

X

C the final width of an element is the sum of the margin, padding

X

D the final width of an element is the sum of the margin, border and the given width



pe rs on al us e

X


A Aggregations can only be bound to datasets defined in the model

X

B Aggregation binding is used to bind a dataset to UI controls that supports property binding

X

C Aggregation binding is used to bind a dataset to UI controls that supports aggregation binding

X

D To bind a collection the UI-control provides the bindAggregation-method

10. What is expressing binding?


A Expression binding provides expressions instead of customer formatter functions

X

B Expressing binding provides only aggregation binding

X

C Expressing binding is a way to express the navigation relation between views

X

D Expressing binding is a way to express the relation between a view and a controller

C op

yr

ig

ht

m

at

11. What class implements constants to specify the filter operator? Choose the correct answers. X

A sap.ui.model.FilterOperators

X

B sap.ui.model.FilterOperation

X

C sap.ui.model.FilterOperator

X

D sap.ui.model.filter.FilterOperator

X

E sap.ui.model.filter.FilterOperation


239


12. What base class is used for sorting?

X

A sap.ui.sorter.Sorter

X

B sap.ui.model.Sorter

X

C sap.ui.model.sorter.Sorter

X

D sap.ui.sorter.Sorter

pe rs on al us e


13. What is OData?



A a SAP specific protocol for creating and consuming data APIs

X

B an industry standard protocol for creating and consuming data APIs

X

C a protocol to consume function modules

X

D a protocol to consume web services

14. What OData implementation of SAPUI5 should be used when implementing SAP Fiori apps? Choose the correct answers. X

A sap.ui.model.odata.ODataModel

X

B sap.ui.model.odata.v2.ODataModel

X

C sap.ui.odata.ODataModel

X

D sap.ui.model.ODataModel

15. What types of test are “included” within the SAPUI5-framework?

C op

yr

ig

ht

m

at


240

X

A Manual tests

X

B Systems tests

X

C Component tests

X

D Unit tests




X

A Test-driven-Development results in less fragile code?

X

B Test-driven-Development is a methodology for geeks?

X

C Test-driven-Development is too expensive

X

D Test-driven-Development will result in sustainable code

17. Where should the routing configuration be placed?

pe rs on al us e




A Inside the Component.js

X

B Inside the app descriptor

X

C Inside the view implementation

X

D Inside the controller implementation

18. What of the following is provided by the navigation API? Choose the correct answers. X

A Register navigation routes and listeners for fragment changes to restore the specific state

X

B Direct trigger navigation to parameterized navigation targets

X

C Functions to trigger navigation plugs

X

D Functions to navigate between SAP Fiori apps inside the FLP

C op

yr

ig

ht

m

at

19. What is a DataSet


A A set of data of a ODataModel

X

B Reference to the entity set of the data model

X

C An aggregation binding type

X

D Specification of the axes


241


20. What control should be used to visualize business data?

A sap.ui.data.BusinessData

X

B sap.viz.ui5.controls.VizFrame

X

C sap.viz.ui5.controls.VizData

X

D sap.viz.ui5.VizFrame

C op

yr

ig

ht

m

at


X

pe rs on al us e


242


Golden Rules of SAPUI5 Development

Lesson 1

244


Knowing the Golden Rules of SAPUI5 Development

pe rs on al us e

UNIT 9

UNIT OBJECTIVES

Know the golden rules of SAPUI5 development

C op

yr

ig

ht

m

at

●


243

Knowing the Golden Rules of SAPUI5 Development

●



pe rs on al us e

Unit 9 Lesson 1

Know the golden rules of SAPUI5 development

Golden Rules of SAPUI5 Development Scenario

A good user experience is based on many great ideas. In this unit, you will learn about the golden rules of the SAPUI5 and SAP Fiori app development. 10 Golden Rules for Fiori Development ●

●

●

●

●

●

●

●

SAP Fiori UIs are built with SAPUI5 (GR-02)

SAP Fiori apps are based on OData services (GR-03) One SAP Fiori app - one OData service (GR-04)

SAP Fiori UIs and OData services must be defined in different software components (GR-05) Every SAP Fiori app is defined by a set of metadata (GR-06)

No custom CSS is allowed for SAP Fiori apps (GR-07) Every SAP Fiori app must run as a web app (GR-08)

Every SAP Fiori app must run in the SAP Fiori Launchpad (GR-09)

at

●

SAP Fiori apps must have an approved UX design (GR-01)

C op

yr

ig

ht

m

●

244

Every SAP Fiori app must run on mobile devices along the native app paradigm (GR-10)

SAP Fiori Apps must have an approved UX Design The following guidelines are requirements for an approved UX design: ●

the design-led development process is valid for all UI scenarios

●

ensure that there is a common and holistic understanding of which

●

design have to comply the Fiori Design Guidelines (or your own)

●

designs have to make use of existing controls and patterns only



SAP Fiori UIs are Built with SAPUI5

●

●

●

The recommended approach for standard S/4HANA applications is to make use of Smart Templates (metadata driven Uis)

For pixel perfect applications that do not follow a pattern-like approach UI5 freestyle is the recommended way

If the backend support annotations the usage of Smart Controls is strongly recommended For pixel perfect applications that only have minor deviations from Smart Template applications a combination is recommended

Technologies like Web Dynpro ABAP/FPM and WebGUI are still supported. Targeting existing app that are not built from scratch


●

In general new Fiori applications should be built using SAPUI5 UI technology

pe rs on al us e

●

●

SAP Fiori Apps are Based on OData Services ●

Fiori apps access backend data via the OData protocol

●

Each service is based on and described by its individual entity relationship model

●

●

The structural standard metadata can be enriched and extended with additional metadata describing the semantics of the services data The machine-readable metadata is leveraged by the UI5 OData Model, the UI5 Smart Controls and Smart Templates

One SAP Fiori App - One OData Service

●

The individual entity-relationship model is tailored to the data needs of the Fiori app

●

All and only the data needed by the application are delivered by one OData-service

●

The above restriction simplifies the life-cycle of a Fiori app and its data access

●

●

BUT: Fiori apps also rely on the central UI2 services

●

BUT: Message longtexts are provided by one central reuse service

at m ht ig yr

C op

BUT: An app must be able to use several OData services indirectly view reusable app parts or via data binding at run-time derived from metadata

●

BUT: Value helps may be implemented as separate service

SAP Fiori UIs and OData Services Must be Defined in Different Software Components ●

●

●

●

Two different deployment options are possible in the system landscape for Fiori Apps Local deployment: The UI, the gateway and the business backend are deployed on the business backend system Remote deployment: The UI and the gateway are deployed on a different system from the business backend syste To support remote deployment it is mandatory to package all UI relevant artefact in a separate software component


245

Unit 9: Golden Rules of SAPUI5 Development

●

The OData service development package should be Add-on like

Every SAP Fiori App is Defined by a Set of Metadata Fiori apps define their set of metadata in an app descriptor (manifest.json) file

●

App descriptor makes easy to orchestrate and automate the development delivery

●

For apps shipped on innovation stack (UI5 >= 1.30) app. Descriptor is mandatory

pe rs on al us e

●

No Custom CSS is Allowed for SAP Fiori Apps

●

●

IMPORTANT: The HTML/CSS generated by UI5 is not part of the public API and may change in patch and minor releases

Overriding UI5 with CSS in Fiori Apps bears the risk of breaking the application on updating UI5


●

Since release 1.28 UI5 offers standard margins/standard padding CSS classes

Every SAP Fiori App Must Run as a Web App ●

●

●

●

Fiori apps must built in platform-independent

Has to run out of the box without platform specific adjustments

If an app does not run on a certain platform it is usually a bug of the app Avoid: -

Absolute URLs generated in front- or back-end

-

Hard dependencies between apps

-

Usage of private UI5 properties or functions

-

Calling UI2 services directly instead of using the APIs

-

Usage of platform-specific functionality without availability check

Every SAP Fiori App Must Run in the SAP Fiori Launchpad ●

noShellIndex.html: local, isolated test without shell services

at

●

Fiori apps must be implemented as self-contained UI5 Components

FioriSandbox.html: local, integrated test with mock shell services

●

FioriLaunchpad.html: productive usage

C op

yr

ig

ht

m ●

Every SAP Fiori App Must Run on Mobile Devices Along the Native App Paradigm ●

●

246

Fiori apps can run on a mobile device within the browser, Fiori Client and as self contained native packaged apps If an app wants to benefit from native features it must run inside Fiori Client or deployed as Packaged Apps



●

Running the app inside the Fiori Client it is the most generic way apps can run on mobile device and still have access to native features Fiori apps can be pre-packaged a self contained native apps. All static web resources are bundled into a Cordova container

LESSON SUMMARY You should now be able to: Know the golden rules of SAPUI5 development

C op

yr

ig

ht

m

at


●

pe rs on al us e

●


247

ht

ig

yr

C op


at

m

pe rs on al us e

Unit 9: Golden Rules of SAPUI5 Development

248


Unit 9

1. What of the following is true? Choose the correct answers. A SAP Fiori UIs are built with SAPUI5


X

pe rs on al us e

Learning Assessment

X

B One SAP Fiori app – one OData service

X

C Custom CSS is good

X

D Every SAP Fiori app must run as web app

X

E Every SAP Fiori app is a native app

2. is it recommended whenever possible to use Smart Controls for SAP Fiori apps? Determine whether this statement is true or false. True

X

False

C op

yr

ig

ht

m

at

X


249

Unit 9

1. What of the following is true? Choose the correct answers. A SAP Fiori UIs are built with SAPUI5


X

pe rs on al us e


X

B One SAP Fiori app – one OData service

X

C Custom CSS is good

X

D Every SAP Fiori app must run as web app

X

E Every SAP Fiori app is a native app

2. is it recommended whenever possible to use Smart Controls for SAP Fiori apps? Determine whether this statement is true or false. True

X

False

C op

yr

ig

ht

m

at

X

250



Lesson 1

252


Implementing SAP Fiori Uis using the SAP Fiori Design Guidelines

pe rs on al us e

UNIT 10

UNIT OBJECTIVES

Implement SAP Fiori Uis using the SAP Fiori Design Guidelines

C op

yr

ig

ht

m

at

●


251

Unit 10 Lesson 1

●



pe rs on al us e

Implementing SAP Fiori Uis using the SAP Fiori Design Guidelines

Implement SAP Fiori Uis using the SAP Fiori Design Guidelines

SAP Fiori Design Guidelines Scenario

Figure 325: SAP Fiori Design Guidelines

C op

yr

ig

ht

m

at

In addition to the golden rules of SAPUI5 development, SAP has additional Design Guidelines for SAP Fiori.

252



pe rs on al us e

Lesson: Implementing SAP Fiori Uis using the SAP Fiori Design Guidelines

Figure 326: Structure of the SAP Fiori Guidelines

General Design Principles

SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, the experience is intuitive and simple, across all devices. With effortless interaction patterns, the SAP Fiori UX is designed for a powerful impact across your enterprise. The design philosophy of SAP Fiori is based on five core principles. SAP Fiori user experience is role-based, adaptive, simple, coherent, and delightful.

The following are the design principles: ROLE-BASED

SAP Fiori is designed for your business, your needs, and how you work. It draws from our broad insights on the multifaceted roles of today’s workforce. SAP Fiori provides the right information at the right time and reflects the way you actually work.

DELIGHTFUL

Apart from making you work smarter, SAP Fiori also enriches your work experience by allowing you to simply do your job.

C op

yr

ig

ht

m

at

COHERENT

Whether you fulfill a sales order, review your latest KPIs, or manage leave requests – SAP Fiori adheres to a consistent interaction and visual design language. Across the enterprise, you enjoy the same intuitive and consistent experience.

SIMPLE With SAP Fiori, you can complete your job intuitively and quickly. SAP Fiori helps you focus on what is important – essential functions are easy to use and you can personalize the experience to focus on your relevant tasks and activities. ADAPTIVE SAP Fiori enables you to work how and where you want, regardless of the device you use. And, it provides relevant information that allows for instant insight.


253


LESSON SUMMARY You should now be able to: Implement SAP Fiori Uis using the SAP Fiori Design Guidelines

C op

yr

ig

ht

m

at


pe rs on al us e

●

254


Unit 10

pe rs on al us e

Learning Assessment

1. Which Statements are correct regarding the SAP Fiori Design Guidelines? Choose the correct answers.

A This design guide reveals the design philosophy of SAP Fiori and provides an overview of all relevant templates, patterns and controls


X

B They introduce commonly used application types, such as approval apps

X

C SAP Fiori app developers are not bound to the implementation of the SAP Fiori Design Guidelines

C op

yr

ig

ht

m

at

X


255

Unit 10

pe rs on al us e


1. Which Statements are correct regarding the SAP Fiori Design Guidelines? Choose the correct answers.

A This design guide reveals the design philosophy of SAP Fiori and provides an overview of all relevant templates, patterns and controls


X

B They introduce commonly used application types, such as approval apps

X

C SAP Fiori app developers are not bound to the implementation of the SAP Fiori Design Guidelines

C op

yr

ig

ht

m

at

X

256


SAP Fiori Launchpad

Lesson 1 Understanding the SAP Fiori Launchpad

258


Lesson 2

pe rs on al us e

UNIT 11

Understanding the Technical Perspective of SAP Fiori Launchpad

262

Lesson 3

Understanding the SAP Fiori Launchpad Configuration

264

UNIT OBJECTIVES

Understand the SAP Fiori Launchpad

●

Understand the technical perspective of SAP Fiori Launchpad

●

Understand the SAP Fiori Launchpad Configuration

C op

yr

ig

ht

m

at

●


257

Unit 11 Lesson 1

LESSON OBJECTIVES After completing this lesson, you will be able to: Understand the SAP Fiori Launchpad


●

pe rs on al us e

Understanding the SAP Fiori Launchpad

SAP Fiori Launchpad Scenario

In this unit, you will learn to understand, and configure the SAP Fiori Launchpad. General Concepts

The SAP Fiori Launchpad home page is the first page that users see after they have logged in. It is the main entry point to SAP Fiori apps on both, mobile or desktop devices. The Launchpad home page presents tiles that allow the launch of apps and may show additional information. The page can be personalized, tiles can be added or removed, and bundled in groups.

C op

yr

ig

ht

m

at

The home page is provided by the SAP Fiori Launchpad. Apps use this home page and do not design their own.

258

Figure 327: General Concepts: Elements of the SAP Fiori Launchpad



Figure 328: General Concepts: Launchpad Shell Bar

pe rs on al us e

Lesson: Understanding the SAP Fiori Launchpad

General Concepts: Services 1/2

Apps can use the following services offered by the SAP Fiori Launchpad: ●

●

●

●

●

●

●

●

Settings (apps only): each app can provide app-specific settings to the Launchpad. User Preferences: this service provides details about the user currently logged in to the app. In addition, it offers theme selection. Contact Support: you can offer a Contact Support option as a channel for user incidents. Note that this option is only available if the customer configures the support setup.

Give Feedback: this service allows users to give feedback on the app. Note that this option is only available if the customer configures the feedback setup. Give Feedback: this service allows users to give feedback on the app. Note that this option is only available if the customer configures the feedback setup. Log In / SSO / Log Out: all aspects of logging in and out are handled by the Launchpad. If single-sign-on (SSO) is used, no user password is required. If SSO is not used, the Launchpad provides a login screen.

Save as Tile: this service allows users to save a snapshot of the app as a tile on the Launchpad. The tile bookmarks the current state of the app. Navigation: the SAP Fiori Launchpad handles all navigation between apps.

C op

yr

ig

ht

m

at

General Concepts: Tiles

A tile is a container that represents an app on the SAP Fiori Launchpad home page. All apps have at least one tile, except for fact sheets (though users can also save fact sheets as tiles if they want). Tiles are only used for launching apps and presenting them on the Launchpad. The following properties apply:

●

Tiles can contain an icon, a title, an informative text, numbers, and charts

●

the number of visible tiles on the Launchpad home page depends on the screen resolution

●

Tiles can be grouped


259

Figure 329: General Concepts: Tiles Layout

●

●

●

●

●

●

●


There are various types of tiles:

pe rs on al us e

Unit 11: SAP Fiori Launchpad

KPI Tile

Comparison Chart Tile

Mini-Charts like Bullet Chart, Trend Chart, Column Chart

Basic Launch Tile Monitoring Tile SAP Jam Tile

Feed Tile

General Concepts: Guidelines when working with Tiles The following are guidelines, when working with tiles: ●

●

●

●

●

do not use the standard tile (sap.m.StandardTile) or custom tile (sap.m.CustomTile)

do not use the status area for error messages

do not use icons on KPI tiles; only use icons on basic launch tiles or monitoring tiles do not use custom icons

in the content area, only show content described in the SAP Fiori guideline (for example, do not play videos in the tiles)

m

at

●

use only the Tile Container

●

C op

yr

ig

ht

●

do not offer business actions in the action sheet in action mode for basic launch tiles and monitoring tiles, always show an icon or number (amount or count)

General Concepts: The Tile Catalog The users can access the tile catalog directly from the Launchpad home page. They can find all tiles they are allowed to use and which are grouped in catalog groups here. A search field as well as group selection help to find the tile that is actually needed. The tile catalog has two functions: ●

260

tiles which are used more often can be added to the home page


Lesson: Understanding the SAP Fiori Launchpad

●

seldomly used tiles can be accessed directly from the catalog, without adding them on the home page.


pe rs on al us e

The tile catalog is provided by the SAP Fiori Launchpad. Apps use this tile catalog and do not design their own.

Figure 330:

Figure 331: General Concepts: The Tile Catalog

●

Understand the SAP Fiori Launchpad

C op

yr

ig

ht

m

at



261

Unit 11 Lesson 2

●



pe rs on al us e

Understanding the Technical Perspective of SAP Fiori Launchpad


Technical Perspective of SAP Fiori Launchpad The SAP Fiori Launchpad - Technical Perspective

The users can access the tile catalog directly from the Launchpad home page. They can find all tiles they are allowed to use. The tiles here are grouped in catalog groups. A Search field and a group selection help is available, to find the tile that is actually needed. The tile catalog has two functions: ●

●

tiles which are used more often can be added to the Home page

tiles, which are used more seldom, can be accessed directly from the catalog, without adding them to the Home page

The tile catalog is provided by the SAP Fiori Launchpad.

C op

yr

ig

ht

m

at

Note: Apps use this tile catalog and do not design their own.

262



pe rs on al us e

Lesson: Understanding the Technical Perspective of SAP Fiori Launchpad

Figure 332: General Concepts



C op

yr

ig

ht

m

at

●


263

Unit 11 Lesson 3

●



pe rs on al us e

Understanding the SAP Fiori Launchpad Configuration


SAP Fiori Launchpad Configuration

C op

yr

ig

ht

m

at

Figure 333: Configuration Steps

264



pe rs on al us e

Lesson: Understanding the SAP Fiori Launchpad Configuration

Figure 334: SAP Fiori Launchpad Configuration

C op

yr

ig

ht

m

at

Figure 335: Create a Launchpad - LPD_CUST


265


pe rs on al us e


Figure 336: Add Application to New Launchpad 1/2

ht

m

at

Select URL as application type and add the path so your application. You can find this information in transaction SICF

C op

yr

ig

Figure 337: Add Application to New Launchpad 2/2

Select Show Advanced to see: ●

Application Alias

●

Additional Information

The Additional Information property points for a SAPUI5-application, so a possible entry could be: SAPUI5.Component=.

266


pe rs on al us e


Figure 338: SAP Fiori Launchpad Configuration, create Semantical Object – T-Code /UI2/SEMOBJ

Note: a tile in the FLP does not point directly to an SAP Fiori App


●

●

a tile points to a target mapping in conjunction with an semantical object and an action

Create Transport Request - Step 1

After creating your Lauchpad in LPD_CUST you‘ll need to create a transport request and assign it to a system (SE01). There are two different types of transport requests:

●

Customizing (CUST)

-

●

This layer can be used for testing or other purposes

Workbench (CONF)

-

All content that you want to deliver to customers must be created in the CONF layer

When you create, update, or delete a catalogue or a tile, all these actions have to be captured.

C op

yr

ig

ht

m

at

If you launch the SAP Fiori Launchpad designer in a customization scope, these actions are captured under the Customizing request.

Figure 339: Logon to the Launchpad Designer - Step 2

Running in customization scope:


267


●

https://server:port/sap/bc/ui5_ui5/sap/arsrvc_upd_admin/main.html?scope=CUST

Running in configuration scope https://server:port/sap/bc/ui5_ui5/sap/arsrvc_upd_admin/main.html?scope=CONF


pe rs on al us e

●

Figure 340: Assign Transport Request - Step 2

Once you‘re in the Launchpad Designer you‘ll need to assign whatever changes you make to one of the requests you created in the Gateway system. Choose the

icon to open the assignment dialog.

In the box, select a customizing request to transport your development to other systems. If you choose None (Local Object), your development is not transported to any target. To leave the box, choose OK.

C op

yr

ig

ht

m

at

Figure 341: Create a Fiori Catalog

268

To create a new Fiori catalogue choose the

icon at the bottom.

Insert the name of your catalogue and Insert the name and the ID of your catalogue. Press Save.



pe rs on al us e


C op

yr

ig

ht

m

at




269


pe rs on al us e



C op

yr

ig

ht

m

at


270



pe rs on al us e



C op

yr

ig

ht

m

at



271


pe rs on al us e



To create dynamic tiles it is important to understand the anatomy of a tile.

C op

yr

ig

ht

m

at


272



pe rs on al us e



C op

yr

ig

ht

m

at



273


pe rs on al us e


Figure 352: Dynamic Tiles: Creation of dynamic tiles 3/4

at

Figure 353: Dynamic Tiles: Creation of dynamic tiles 4/4

●


C op

yr

ig

ht

m


274


Unit 11

1. What guidelines are recommended when working with tiles? Choose the correct answers. A use the Tile Container, only


X

pe rs on al us e

Learning Assessment

X

B do not use the status area for error messages

X

C do not use custom icons

X

D do use custom icons

X

E do not use the tile container

2. What tile types are currently supported? Choose the correct answers. X

A KPI tile

X

B Feed tile

X

C Analytical Tile

X

D Basic Launch tile

X

E Lauchpad tile

3. What functions are provided by the tile catalog?

X

A Tiles which are used more often can be added to the Home page

X

B Only Tiles that are used more seldom can be grouped

X

C Tiles which are used more seldom can be accessed directly from the catalogue with adding them to the Home page

X

D Tiles can be added to a function specific pages

C op

yr

ig

ht

m

at



275


4. To what containers are the shell services connected?

X

A Runtime container

X

B Shell container

X

C Application container

X

D Launchpad container

5. What transaction is used to create and configure Launchpads?



pe rs on al us e


X

A LPD_CUST

X

B /UI2/SEMOBJ

X

C /IWFND/MAINT_SERVICE

X

D /IWNFD/GW_CLIENT

X

E SEGW

6. What transaction is used to create customer roles? Choose the correct answers. A LPD_CUST

X

B /UI2/SEMOBJ

X


X

D PFCG

X

E SEGW

C op

yr

ig

ht

m

at

X

276


Unit 11

1. What guidelines are recommended when working with tiles? Choose the correct answers. A use the Tile Container, only


X

pe rs on al us e


X

B do not use the status area for error messages

X

C do not use custom icons

X

D do use custom icons

X

E do not use the tile container

2. What tile types are currently supported? Choose the correct answers. X

A KPI tile

X

B Feed tile

X

C Analytical Tile

X

D Basic Launch tile

X

E Lauchpad tile

3. What functions are provided by the tile catalog?

C op

yr

ig

ht

m

at


A Tiles which are used more often can be added to the Home page

X

B Only Tiles that are used more seldom can be grouped

X

C Tiles which are used more seldom can be accessed directly from the catalogue with adding them to the Home page

X

D Tiles can be added to a function specific pages


277


4. To what containers are the shell services connected?

X

A Runtime container

X

B Shell container

X

C Application container

X

D Launchpad container

5. What transaction is used to create and configure Launchpads?

pe rs on al us e




A LPD_CUST

X

B /UI2/SEMOBJ

X


X

D /IWNFD/GW_CLIENT

X

E SEGW

6. What transaction is used to create customer roles? Choose the correct answers. A LPD_CUST

X

B /UI2/SEMOBJ

X


X

D PFCG

X

E SEGW

C op

yr

ig

ht

m

at

X

278


SAP Fiori Launchpad Services

Lesson 1

280 289


Understanding the SAP Fiori Launchpad Services Exercise 10: Navigate in SAP Fiori

pe rs on al us e

UNIT 12

UNIT OBJECTIVES

Understand the SAP Fiori Launchpad Services

C op

yr

ig

ht

m

at

●


279

Unit 12 Lesson 1

pe rs on al us e

Understanding the SAP Fiori Launchpad Services

●


LESSON OBJECTIVES After completing this lesson, you will be able to: Understand the SAP Fiori Launchpad Services

SAP Fiori Launchpad Services Scenario

In this unit, learn about the services, the SAP Fiori Launchpad offers. Launchpad Navigation - Main Principles

These are the main principles of the Launchpad Navigation: ●

●

●

●

●

All information about the applications to load is encoded in the URL fragment, i.e. the part after the hash character

Navigation can be performed by either setting the browser URL hash explicitly via a JavaScript call or implicitly by rendering a link The Unified Shell services provide a listener which is registered for the hash change event and loads the application according to the information encoded in the URL hash

The navigation concept is used to “save” states (by reflecting it in the URL), allowing to bookmark (or share, e.g. send in an e-mail) the current application state It is important that one builds the application in a way that it can reconstruct the application state from any application URL to support:

C op

yr

ig

ht

m

at

●

Launchpad uses a resource-based navigation paradigm > every application within the Launchpad has a resource locator (URL) by which it can be loaded

-

browser back

-

refresh

-

bookmarking

The SAP Fiori Launchpad is displayed in a web browser and offers a web-like navigation experience. For example, it allows users to create bookmarks for specific apps and enables navigation using the web browser's standard back and forward buttons.

280


Lesson: Understanding the SAP Fiori Launchpad Services

When an app offers links for navigating within the app or to another app, these links are regular HTML links, which means that built-in browser functions like Open in New Tab can be used out of the box.

pe rs on al us e

The URLs displayed in the browser's address bar are human-readable and express a navigation intent that average users can relate to. Users can send the URL of Launchpad apps to other users by e-mail, and different users navigating with the same URL will see different content, depending on the user roles that they are assigned to.

When a user starts the SAP Fiori Launchpad, the home page is displayed by default, where the user can access apps by clicking on tiles. Alternatively, a user can access SAP Fiori apps using the search function. Any kind of navigation to an SAP Fiori app is handled within the same Web app. This is because, all SAP Fiori apps are hosted inside one document: FioriLaunchpad.html.


The FioriLaunchpad.html file bootstraps the unified shell (see Architecture Overview), which provides services (JavaScript APIs) common for all apps, independent from their server platform. This means that the FioriLaunchpad.html file is the only HTML document which is loaded by the browser, and therefore the only SAPUI5 root application. All following interactions are implemented by dynamic modifications of the hosting HTML document using JavaScript.

ht

m

at

SAP Fiori apps are technically SAPUI5 components which are loaded into an application container.

C op

yr

ig

Figure 354: Key Navigation Concepts

These capabilities have been implemented into the SAP Fiori Launchpad based on the following key concepts: ●

SAP Fiori Launchpad architecture, with a single HTML document hosting all apps

●

Navigation based on URL fragments

●

Intent-based navigation


281

Unit 12: SAP Fiori Launchpad Services

There are 2 kinds of navigation operations: ●

Inner-app navigation: Navigation within a single app - This includes navigation between different views in an app, like a list view and a details view, but it also includes state changes like setting a filter in a drill-down app. Performed by the app.

pe rs on al us e

●

Cross-app navigation: Navigation from one app to another. handled by the unified shell services.


For both cases, the described intent-based approach is used. The hash consists of a general part which is controlled by the shell services and optionally an app-specific part which denotes the inner-app UI state. This has to be taken into account when running apps embedded in the Launchpad.

Figure 355: Launchpad URL Schemas

In the SAP Fiori Launchpad, navigation is done using the fragment of a standard URL (the part beginning with the hash (#) character). Since only one HTML page is loaded from the server, all information about the apps to be loaded is encoded in the URL fragment. The unified shell services provide a listener which is registered for the hash change event and loads the app according to the information encoded in the URL hash.

To make sure that the URL format is always correct, use the CrossApplicationNavigation service to construct links.

C op

yr

ig

ht

m

at

A URL expresses an intent regarding the navigation target. This is something users can easily relate to, and with the help of the browser's history cache, they can easily return to their frequently-used apps, just by typing a few characters in the browser's address bar.

282



pe rs on al us e


Figure 356: Intentbased Navigation Concept

Intent-based navigation is necessary in the following cases: ●

●

●

depending on the user's role, a different application or view of an application should be displayed.

you want to define an ambiguous navigation target. This means that, at runtime, a list of potential targets is offered to the user.

to extend and customize Fiori scenarios, you can change a target without modifying the Fiori application code.

Different Fiori apps have different life cycles. An app cannot assume that another app exists in a productive environment since it might not have been deployed. This intent consists of a combination of a semantic object and an action.

Example: http://://FioriLaunchpad.html#Employee-display

C op

yr

ig

ht

m

at

This approach allows you to de-couple the intent, which is coded into the source app, from the actual navigation target (see the figure below). The target app can be defined using configuration, in a so-called target mapping that maps an intent to a concrete app.


283


pe rs on al us e


Figure 357: Architecture Overview for Intent-based Navigation

In the figure the components dealing with intent based navigation in the context of an ABAP system are shown. The top part deals with the configuration and the bottom part with the resolution at runtime. As it is currently not yet known what configuration entities in other backend system types than ABAP will exist we focus on the entities in the ABAP context shown in the middle of the figure. Currently the configuration is done with a set of tools where two are implemented as ABAP transactions and one is implemented as Fiori application. These are shown as one agent used by the Fiori administrator. Let's have a look at the configuration entities. A user has assigned user roles. A role can refer to catalogs, which contain target mappings. The target mappings are identified by navigation intents consisting of a semantic object and an action. Each target mapping refers to an application configuration which contains information about the actual application to be started like the type and ID (e.g. link, transaction name). All these entities are stored in the backend system.

C op

yr

ig

ht

m

at

At runtime the navigation starting point is a navigation intent which comes either from a tile, an application, a link or a stored bookmark. This navigation intent is resolved in the respective backend system service. This one selects all target mappings from the user's catalogs and checks if there is a match with the intent. If there are several matches the first match is selected (in future the user will have some kind of mechanism to select between all matching target mappings). The target mapping contains a reference to an application configuration and the navigation target resolution service returns the respective data set to enable the start of the application.

Intentbased Navigation Intent-based navigation is necessary in the following cases: ●

●

284

depending on the user’s role, a different application or view of an application should be displayed you want to define an ambiguous navigation target. This means that, at runtime, a list of potential targets is offered to the user



●

different SAP Fiori apps have different life cycles. An app cannot assume that another app exists in a productive environment since it might not have been deployed


pe rs on al us e

●

to extend and customize SAP Fiori scenarios, you can change a target without modifying the SAP Fiori application code

Figure 358: Intent-based Navigation Example

C op

yr

ig

ht

m

at

A typical configuration at the customer: Different users have different roles and navigating the same intent ends up in the start of two different applications namely the manager version and the employee version of the employee data display application. Customers may extend and customize Fiori scenarios without modifying any Fiori application code but by new/changed target mappings and application configurations.

Figure 359: Two Matching Targets for One Intent


285


In this example, the user has two roles assigned, the employee and the manger role. There are two targets mappings for the same intent and the target application are therefore not unambiguous. As mentioned above currently the first matching target mapping is used.

pe rs on al us e

The concrete application targets have to be configured in the back-end system via customizing (LPD_CUST). This decoupling from the technicalnavigation target has the advantage that applications can be better developed and deployed in parallel, i.e. the wiring contracts are defined on logical semantics, not on concrete application implementations.

Beside the object/action pair, the link (hash) definition can contain an optional context part generated by the back-end (in this case, uniqueness is ensured) and parameters which are passed to the target application. Intentbased Navigation

●


Intents are comprised of the following parts: Semantic object

-

●

Action -

●

Represents a business entity such as a customer, a sales order, or a product. Using semantic objects, you can bundle applications that reflect a specific scenario. They allow you to refer to objects in a standardized way, abstracting from concrete implementations of these objects. You can either use semantic objects shipped by SAP, or create new semantic objects

Describes which operation (such as display or approvePurchaseOrders) is intended to be performed on a semantic object (such as Purchase Order or Product)

Semantic object parameters -

Define the instance of the semantic object (e.g. by specifying the employee ID)

Navigation Flow

The following are basic properties of the navigation flow: ●

●

The user logs on to the SAP Fiori Launchpad and sees the assigned tiles in the home page When the user selects a tile, the system checks if an intent with the semantic object/action pair exists in the PFCG permissions of the user

at

●

An administrator has set up navigation using the Launchpad designer and transactions PFCG and LPD_CUST

If yes, the system resolves the navigation target using the information stored in the LPD_CUST configuration and navigates the user to the target application

C op

yr

ig

ht

m

●

286

Best Practices for Cross-App Navigation Best Practices for Cross-App Navigation are: ●

Use the CrossApplicationNavigation service to construct shell fragments and links from local fragments. Do not construct them yourself

●

Use startup parameters to pass information to the next app

●

Use only single-value parameters in the Launchpad intent



It is not recommended to use multi-valued parameters

●

Do not use deep links to the app-specific fragment for passing information to the next app


pe rs on al us e

●

C op

yr

ig

ht

m

at

Figure 360: Cross-App Navigation


287

ht

ig

yr

C op


at

m

pe rs on al us e


288


Unit 12 Exercise 10

Business Example

pe rs on al us e

Navigate in SAP Fiori


In the following exercise you will implement two small SAPUI5 applications. You will deploy these applications on the frontend server and you will configure SAP Fiori tiles for both of them. Afterwards, you will implement a link in the first applications which offers to navigate to the second application in the SAP Fiori Launchpad.

Note: In this exercise, when the values include ##, replace the characters with the number that your instructor assigned to you.


1. Create a new SAPUI5 project with the name NavigationStart. In the process, add an XML view called Main to the project. Use the name space sap.training.navigation1##.

2. Repeat step 1 for a project named NavigationEndPoint. Use the name space sap.training.navigation2## for this project.

Implement the application NavigationStart

1. Implement the application NavigationStart.

Implement the application NavigationEnd

1. Implement the application NavigationEnd.

Create the Launchpad configuration

1. Create the Launchpad configuration.

at

Create semantic objects

C op

yr

ig

ht

m

1. Create semantic objects.

Perform the Target Mapping and create Tiles 1. Perform the Target Mapping and create Tiles. Create a role 1. Create a role. Add the tiles to the Launchpad 1. Add the tiles to the Launchpad.


289


Implement the navigation Now you can access the applications from the Launchpad, so you can begin to implement the navigation.

Process parameters

C op

yr

ig

ht

m

at


1. Process parameters.

pe rs on al us e

1. Implement the navigation.

290


Unit 12 Solution 10

Business Example

pe rs on al us e

Navigate in SAP Fiori


In the following exercise you will implement two small SAPUI5 applications. You will deploy these applications on the frontend server and you will configure SAP Fiori tiles for both of them. Afterwards, you will implement a link in the first applications which offers to navigate to the second application in the SAP Fiori Launchpad.

Note: In this exercise, when the values include ##, replace the characters with the number that your instructor assigned to you.


1. Create a new SAPUI5 project with the name NavigationStart. In the process, add an XML view called Main to the project. Use the name space sap.training.navigation1##. a) For this step, no substeps are given. To get them, refer to a previous exercise.

2. Repeat step 1 for a project named NavigationEndPoint. Use the name space sap.training.navigation2## for this project. a) For this step, no substeps are given. To get them, refer to a previous exercise.

Implement the application NavigationStart

1. Implement the application NavigationStart.

a) In the NavigationStart project, open the Main.view.xml file.

c) To the view add an element of type sap.m.Button and assign an event handler called onPress to the press event of the button.

d) Save your changes. e) Make sure that your view looks the following:

C op

yr

ig

ht

m

at

b) Add an element of type sap.m.Link to the view. Define an id for the Link element with the value navLink, and add the attribute text to the Link element with the value Start navigation.


291


pe rs on al us e


Figure 361: Implementation of Main.view.xml

f) To deploy the NavigationStart application to the frontend server, use ZUI5NavStart## as application name. Enter a meaningful description, and use the package provided by the trainer or a package created by yourself.

Figure 362: Deployment

Implement the application NavigationEnd

1. Implement the application NavigationEnd.

a) Close all open editors. Open the Main.view.xml file of the NavigationEndPoint project.

C op

yr

ig

ht

m

at

b) To the view add an element of type sap.m.Label and provide a meaningful label text.

292



pe rs on al us e


Figure 363: Implementation of: Main.view.xml


d) Deploy your application to the frontend server. For this purpose, use ZUI5NavEnd## as application name. Enter a meaningful description, and use the package provided by the trainer or a package created by yourself.

Figure 364: Deployment

Create the Launchpad configuration

1. Create the Launchpad configuration.

b) Call the transaction LPD_CUST. c) Choose New Launchpad. Enter the value ZNavi## into the Role field. Into the Instance field, enter the value TRANSACTIONAL and provide a meaningful description. Confirm your input.

C op

yr

ig

ht

m

at

a) Log on to the frontend server with your username and your password.


293

Figure 365: Entries in the transaction screen

pe rs on al us e


d) On the next dialog, you are asked, if you want to create the Launchpad without name space. Confirm this question.


e) On the next screen, choose the New Application button.

Figure 366: New Application

C op

yr

ig

ht

m

at

f) Into the Link Text field, enter the value NavigationStart## and as Application Type choose URL. Into the URL field, enter /sap/bc/ui5_ui5/sap/zui5navstart##. This is the ICF path of your application.

Figure 367: Entries in the Link Details screen

g) Choose the button Show Advanced (Optional) Parameters. h) Now, choose the button next to the entry Application Aliasand define the alias NavigationStart##. i) Into the Additional Information field, enter the namespace of your component SAPUI5.Component=sap.training.navigation1##. j) Save your changes. k) Repeat the steps given above for the second application. Please make sure, that you adapt the names accordingly. You can also make a copy of the created application and then change the settings of the copy correspondingly.

294



Create semantic objects 1. Create semantic objects. a) Execute the transaction /UI2/SEMOBJ.

pe rs on al us e

Note: The semantic objects have to be created on the Front-End Server, that is system FSD. You can use the expression /o/UI2/SEMOBJ to start the needed transaction.


Note: If you want to execute the transaction in the same session, enter /n/UI2/ SEMOBJ, if you want to open a new session, enter /o/UI2/SEMOBJ.

Note: The required URL is as follows:http://fsdhost.wdf.sap.corp:8000/sap/bc/ ui5_ui5/sap/arsrvc_upb_admn/main.html?scope=CUST. It is subject to change.

b) Change to the edit mode and confirm the displayed message. If another user is just carrying out the configuration, please wait a moment and try again. c) Choose New Entries.

d) As shown below, make two new entries. Please make sure, in contrast to the shown screenshot, that your semantic objects end with your group number, that is NavigationStart## and NavigationEnd##.

Figure 368: New Entries: Overview of Added Entries, screen

e) Save your changes and afterwards leave the edit mode of the transaction.

at

Perform the Target Mapping and create Tiles

a) Open a browser, preferably Google Chrome. b) Enter the following URL: http://:/sap/bc/ui5_ui5/sap/ arsrvc_upb_admn/main.html?scope=CUST.

C op

yr

ig

ht

m

1. Perform the Target Mapping and create Tiles.

Note: The server name as well as the port are provided by your trainer. c) Log on to the Launchpad Designer with your user and your password.


295


d) Click on the gear icon in the upper right corner.

Figure 369: Gear Icon

pe rs on al us e

e) In the next dialog, remove the None (Local Object) selection and instead select your transport request from the list.


Note: The figure below is just a sample. The name of the transport request used in the training differs from that shown.

Figure 370: Assign transport request

f) In the SAP Fiori Launchpad Designer, click on the plus icon.

Figure 371: +-icon

g) In the next dialog, in the Title field, enter ZWDE390_Nav##, and in the ID field enter ZWDE390_##.

h) Choose Save.

i) Choose Target Mapping.

C op

yr

ig

ht

m

at

Figure 372: Create Catalog screen

Figure 373: Target Mapping

j) in the footer, choose CREATE TARGET MAPPING.

296



Figure 374: Create Target mapping


pe rs on al us e

k) Define a target mapping for the Semantic Object NavigationStart## as shown in the following screenshot. Please use the previously created Semantic Object NavigationStart## and the Launchpad role ZAVI00. Confirm the form with Save.

Figure 375: Screen: Configure Target mapping for NavigationStart##

Figure 376: Screen: Configure Target mapping for NavigationEndt##

m) Now, two target mappings in the list of target assignments should be visible:

C op

yr

ig

ht

m

at

l) Create another Target Mapping for the Semantic Object NavigationEnd##. After entering, save the form using Save.


297


pe rs on al us e


Figure 377: List of target assignments

n) Click on the tiles icon.

Figure 378: Tiles Icon

Figure 379: Empty tile

p) In the following screen, select the entry App Launcher - Static.

C op

yr

ig

ht

m

at

o) Then press on the tile with the plus icon:

Figure 380: App Launcher - Static

298




Figure 381: Entries in the form

pe rs on al us e

q) Fill in the form as shown below:

r) Choose Save.

s) Create another tile for the Semantic Object NavigationEnd##.

Figure 382: Configuration of NavigationEnd##

t) Save your entries.

C op

yr

ig

ht

m

at

u) Finally, you should have created two tile configurations.

Figure 383: Result of this step

Create a role 1. Create a role. a) Start the SAP GUI and log on to the frontend server. b) Call the transaction PFCG.


299



pe rs on al us e

c) Create a new role with the role name ZWDE390_##. To do this, in the Role field, enter ZWDE390_##, then choose the Single Role button.

Figure 384: Role Maintenance


e) Choose the Menu tab.

f) Select the small triangle in the lower corner of the Transaction button.

Figure 385: SAP Fiori Tile Catalog

h) In the next dialog screen, into the Catalog ID field enter the catalog ID ZWDE390_Nav##. This was created in the previous section.

C op

yr

ig

ht

m

at

g) From the list, Choose SAP Fiori Tile Catalog.

300



pe rs on al us e


Figure 386: Catalog ID

i) Confirm the dialog by hitting Enter.

j) Select the User tab and assign your user to the role.

Figure 387: Assigning the new role

k) Don’t forget to save your changes.

Add the tiles to the Launchpad

C op

yr

ig

ht

m

at

1. Add the tiles to the Launchpad.

a) Launch the Google Chrome browser and open the SAP Fiori Launchpad using the following URL: http://:/sap/bc/ui5_ui5/ui2/ushell/shells/abap/ Fiorilaunchpad.html?sap-client=100&sap-language=EN

b) Log on to the Launchpad. c) On the Homepage, select the button Personalize Home Page.

Figure 388: The Personalize Home Page button

d) Select the My Home group and press the tile with the plus icon.


301

pe rs on al us e


Figure 389: My home


e) From the Tile Catalog select the catalog ZWDE390_Nav##.

Figure 390: catalog ZWDE390_Nav##

f) Press the plus button under the tile Navigationsstartpunkt (left tile).

g) Press the plus button under the tile Navigationsendpunkt (right tile).

Figure 391: Points in the Navigation

C op

yr

ig

ht

m

at

h) Navigate back to the homepage and exit the personalization mode. To do this, press the pencil icon.

302

i) Test your tiles by calling them.

Implement the navigation Now you can access the applications from the Launchpad, so you can begin to implement the navigation. 1. Implement the navigation. a) Switch to the SAP Web IDE and open the file Main.controller.js. Implement the onInit function on the view controller. Obtain a reference for the Link element of the view by means of the byId function.




pe rs on al us e

b) Next, store a reference to the getService function of the Shell container in a member variable. Use this reference to access the cross-application navigation service and create a navigation URL for your semantic object NavigationEnd##. For this purpose, use the hrefForExternal function of the service. Store the so generated URL in a local variable and call the setHref function of the sap.m.Link element.


c) Now implement an event handler for the Pressevent of the button. Call the toExternal function on the cross-application navigation service reference. Pass the function a target for the semantic object NavigationEnd.


d) Save your changes and deploy your application.

C op

yr

ig

ht

m

at

Make sure that you use the setting Update existing Application at deployment.

e) Log on to the SAP Fiori Launchpad, push the NavigationStart tile and press the Link. Navigate back to the NavigationStart application and press the Now button. In both cases, you should navigate to your NavigationEnd application.

Process parameters 1. Process parameters. a) In the project NavigationStart open the Main.controller.js file . Enhance the event handler of the press event of the button. The effect should be, that you pass a parameter to the navigation target with the Text key. To this Text assign a value, e.g. Hello World.


303


pe rs on al us e


b) Deploy your application again. Please make sure that you specify that the existing application is to be updated. c) Open the Main.view.xml file in the NavigationEndPoint project.


d) Add the attribute id to the existing Label element. Assign the value helloText to this attribute.


e) Open the Main.controller.js file in the NavigationEndPoint project.

f) Implement the onInit function and read the startup parameters from the navigation parameters of the component. Afterwards, obtain a reference to the Label of the view. Read the Text parameter from the startup parameters and display the passed string on the Label element.


g) Deploy your application again. Please make sure that you specify that the existing application is to be updated.

C op

yr

ig

ht

m

at

h) Start the Launchpad and test your application.

304



LESSON SUMMARY You should now be able to: Understand the SAP Fiori Launchpad Services

C op

yr

ig

ht

m

at


pe rs on al us e

●


305

ht

ig

yr

C op


at

m

pe rs on al us e


306


Unit 12

1. What navigation types do you know? Choose the correct answers. A Intented based navigation


X

pe rs on al us e

Learning Assessment

X

B Inner-App navigation

X

C Cross-app navigation

X

D Fiori-navigation

X

E SAP Launchpad navigation

2. When do you need intent-based navigation? Choose the correct answers.

A Depending on the user's role, a different application or view of an application should be displayed

X

B You want to define an ambiguous navigation target. This means that, at runtime, a list of potential targets is offered to the user

X

C To extend and customize Fiori scenarios, you can change a target without modifying the Fiori application code

X

D To implement inner app navigation is analytical apps

C op

yr

ig

ht

m

at

X


307

Unit 12

1. What navigation types do you know? Choose the correct answers. A Intented based navigation


X

pe rs on al us e


X

B Inner-App navigation

X

C Cross-app navigation

X

D Fiori-navigation

X

E SAP Launchpad navigation

2. When do you need intent-based navigation? Choose the correct answers.

A Depending on the user's role, a different application or view of an application should be displayed

X

B You want to define an ambiguous navigation target. This means that, at runtime, a list of potential targets is offered to the user

X

C To extend and customize Fiori scenarios, you can change a target without modifying the Fiori application code

X

D To implement inner app navigation is analytical apps

C op

yr

ig

ht

m

at

X

308


SAP Fiori Foundation

pe rs on al us e

UNIT 13

Lesson 1

Learning the Difference between Application Framework, Page Layout and Floorplans


Lesson 2

310

Understanding Fullscreen Exercise 11: Create a FullScreen Application

312 315

Lesson 3

Understanding SplitScreen Exercise 12: Create a Master-Detail Application

334 339

UNIT OBJECTIVES

Learn the difference between application framework, page layout and floorplans

●

Understand FullScreen

●

Understand SplitScreen

C op

yr

ig

ht

m

at

●


309

Unit 13 Lesson 1

pe rs on al us e

Learning the Difference between Application Framework, Page Layout and Floorplans

●




Difference between Application Framework, Page Layout and Floorplans Scenario

In this unit, you will learn the about the difference between Application Framework, Page Layout and Floorplans. All these objects are required for plan, build and run a great user experience. Foundation Application Framework

The user interfaces for one business process are referred to as an app. All the user’s apps are presented in the form of tiles on the Homepage, which forms the heart of the Launchpad. Most apps’ designs are based on one of the two basic templates: ●

●

Master/Detail

Full Screen

Page Layouts ● A page layout specifies the overall layout of the application ●

The application framework is based on a page layout, so they go hand in hand

at

Foundation: When using which template? ● When deciding which template to use for your app, you will need to consider what the user wants to achieve when working in the app. For this it is helpful to answer questions on the nature of the tasks.

●

The outcome will provide guidance on what type of template to use.

C op

yr

ig

ht

m

●

Foundation: When to use which template? 1/3 Question: Is viewing, inspecting or editing details one or several elements from a list of elements an important use-case? Outcome: If so, use the master/detail pattern, for example a tracking app.

310


Lesson: Learning the Difference between Application Framework, Page Layout and Floorplans

Foundation: When to use which template? 2/3 Question:

Outcome: If so you should use a full screen app with an icon tab bar. Foundation: When to use which template? 3/3 Question:

pe rs on al us e

Is inspecting the status of one or more objects important?


Are the objects you are inspecting so complex that you require charts to illustrate a point fast? Outcome:

If so you should use a full screen app with charts.

Page Layouts and Floorplans ● A developer creates applications based on so called floorplans

●

A floorplan is a UI-design pattern that solves repeating UI-problems in a consistent way

●

A floorplan is displayed within the overall page layout



C op

yr

ig

ht

m

at

●


311

Unit 13 Lesson 2

LESSON OBJECTIVES After completing this lesson, you will be able to: Understand FullScreen


●

pe rs on al us e

Understanding Fullscreen

FullScreen

Foundation: Full Screen 1/2

The full screen template affords maximum flexibility while still providing the look and feel of SAP Fiori.

Figure 397: Foundation: Full Screen 2/2

C op

yr

ig

ht

m

at

The template for the full screen does not present a pre-defined hierarchy of content and thus provides a higher degree of flexibility. UI elements inside the template can be arranged individually based on the app’s use cases.

312


Figure 398: sap.m.semantic.FullscreenPage


Full Screen Layout

pe rs on al us e

Lesson: Understanding Fullscreen

The full screen layout lets you exploit the full width of the screen. Use this layout for apps that need to display large amounts of data, large visualizations, or wide tables.

Avoid switching between full screen and split screen layouts within an app. If your app has some screens that require the full width, and others that do not, decide on one layout and stick to it. The full screen layout offers considerable freedom and flexibility.

The list report floorplan is the common floorplan for full screen layout. When to Use and When Don't Use Full Screen Layout

The following are guidelines about using fullscreen or not:

●

Use it: -

●

your app content requires the full width of the screen (for example, large tables, charts, or other types of visualization)

Don’t use it: -

you are not sure how to structure your information on the screen

C op

yr

ig

ht

m

at

-

you only need to display a small amount of information. If you cannot avoid using the full screen layout, use letterboxing to mitigate the issue


313


pe rs on al us e

Unit 13: SAP Fiori Foundation

Figure 399: Structure of Full Screen Layout

Like all layouts, the full screen layout is embedded in the shell bar of the SAP Fiori Launchpad. From the header, users have access to the Launchpad services, Including the home page, search, settings, and help. Apps are embedded in the shell and have little influence over its features. The uppermost app element is the app header, with the back navigation, the app title, and one optional action. The long scrollable page below contains the app content. You can either use one of the predefined floorplans, or create your own layout. You can also add an application-specific footer toolbar at the bottom of the screen. Caveat - Full Screen Layout

The following are some guidelines about using caveat: ●

●

Content is not adjusted automatically, as it is for the split screen layout.

You need to select the right layout and controls, and make any necessary adjustments yourself.

Letterboxing means limiting the width of the content area to 1280 px. This prevents the app content from becoming too “stretched” on wide screens, and optimizes readability.

at

●

Make sure that the app is responsive or adaptive across devices.

C op

yr

ig

ht

m

●

314


Unit 13 Exercise 11

Business Scenario

pe rs on al us e

Create a FullScreen Application

In this exercise you will implement a Full-Screen Application with the following functionality:

The Start View of the application is to show an overview of the existing carriers. Use a two columns table to display Id and Name of the carriers. The data will be read by the Travel OData Service that has been used also in the previous exercise.


●

●

●

On selection of a carrier by the user a Detail View is to be displayed showing Id, Name, Currency, and URL.

A navigation button shall enable the user to go back from Detail View to Start View. The navigation is Hash based. An empty hash leads to display the Start View while pattern carriers/{carrierId} leads to the Detail View.

Figure 400: Navigation of Full-Screen Application

C op

yr

ig

ht

m

at

An entry of an invalid URL pattern or of a non-existent Id a Not-Found View is to be displayed. This Not-Found View has a navigation button that allows to navigate back to the last valid hash. If there is no such hash in the history the Start View is to be displayed.

Figure 401: Not-Found View for invalid URL-Pattern or non-existent Id

Create the following views for the implementation of the application: ●

App View App.view.xml


315


This view shall contain only the root element sap.m.App that is needed for the application. Start View Overview.view.xml

●

Detail View Carrier.view.xml

●

This view displays the details of a selected carrier. Not-Found View NotFound.view.xml

●

pe rs on al us e

This view displays the overview table of the carriers.


This view is to display an error message if an invalid URL pattern or of a non-existent Id has been entered.

Figure 402: Application Structure

In this exercise, in SAP Web IDE, you will create a new project (name FullScreenExercise) via project template SAPUI5 Application Project. Implement the Full-Screen application as a SAPUI5 Component. With the help of a Component Container place the Component within a sap.m.Shell to control the width on the screen. To make it easier you can copy a template for the required Application Descriptor manifest.json from the template solution. There you will find file manifest_template.json. Adapt the copied content for your Component.

C op

yr

ig

ht

m

at

Save the static User Interface texts in a Resource Bundle File to enable the translatability of the application. Within the project create a folder i18n and within this folder a file i18n.properties.

316

Note: In this exercise, no solution steps are described. All steps where already performed in the previous exercises. If required, refer to the substeps given there.

1. Create in SAP Web IDE a new project, named FullScreenExercise, using the SAPUI5 Application Project project template.



pe rs on al us e


Figure 403: Project Structure

2. Create the view for the implementation of the application: App.view.xml App View.

Figure 404: i18n.properties

C op

yr

ig

ht

m

at

This view shall contain only the root element sap.m.App that is needed for the application.


317


pe rs on al us e


Figure 405: App.controller.js

Figure 406: App.view.xml

3. Create the view for the implementation of the application: Start View Overview.view.xml.

C op

yr

ig

ht

m

at


Figure 407: Overview.controller.js

318



pe rs on al us e


Figure 408: Overview.view.xml

C op

yr

ig

ht

m

at

Figure 409: Component.js

Figure 410: Index.html


319


pe rs on al us e


Figure 411: manifest.json, Fig 1

C op

yr

ig

ht

m

at


320



pe rs on al us e



4. Create the view for the implementation of the application: Detail View Carrier.view.xml.

Figure 414: Carrier.controller.js, Fig 1

C op

yr

ig

ht

m

at

This view displays the details of a selected carrier.


321


pe rs on al us e



Figure 416: Carrier.view

5. Create the view for the implementation of the application, the Not-Found View NotFound.view.xml.

C op

yr

ig

ht

m

at


322


pe rs on al us e



Figure 417: NotFound.controller.js

C op

yr

ig

ht

m

at

Figure 418: NotFound.view.xml


323

Unit 13 Solution 11

Business Scenario

pe rs on al us e

Create a FullScreen Application

In this exercise you will implement a Full-Screen Application with the following functionality:

●

●

The Start View of the application is to show an overview of the existing carriers. Use a two columns table to display Id and Name of the carriers. The data will be read by the Travel OData Service that has been used also in the previous exercise.


●

On selection of a carrier by the user a Detail View is to be displayed showing Id, Name, Currency, and URL.

A navigation button shall enable the user to go back from Detail View to Start View. The navigation is Hash based. An empty hash leads to display the Start View while pattern carriers/{carrierId} leads to the Detail View.

Figure 400: Navigation of Full-Screen Application

C op

yr

ig

ht

m

at

An entry of an invalid URL pattern or of a non-existent Id a Not-Found View is to be displayed. This Not-Found View has a navigation button that allows to navigate back to the last valid hash. If there is no such hash in the history the Start View is to be displayed.

Figure 401: Not-Found View for invalid URL-Pattern or non-existent Id


324




This view shall contain only the root element sap.m.App that is needed for the application. Start View Overview.view.xml

●

Detail View Carrier.view.xml

●

This view displays the details of a selected carrier. Not-Found View NotFound.view.xml

●

pe rs on al us e




Figure 402: Application Structure

In this exercise, in SAP Web IDE, you will create a new project (name FullScreenExercise) via project template SAPUI5 Application Project. Implement the Full-Screen application as a SAPUI5 Component. With the help of a Component Container place the Component within a sap.m.Shell to control the width on the screen.

To make it easier you can copy a template for the required Application Descriptor manifest.json from the template solution. There you will find file manifest_template.json. Adapt the copied content for your Component.

C op

yr

ig

ht

m

at

Save the static User Interface texts in a Resource Bundle File to enable the translatability of the application. Within the project create a folder i18n and within this folder a file i18n.properties.

Note: In this exercise, no solution steps are described. All steps where already performed in the previous exercises. If required, refer to the substeps given there. 1. Create in SAP Web IDE a new project, named FullScreenExercise, using the SAPUI5 Application Project project template.


325


pe rs on al us e



2. Create the view for the implementation of the application: App.view.xml App View.


C op

yr

ig

ht

m

at


326



pe rs on al us e




3. Create the view for the implementation of the application: Start View Overview.view.xml.

C op

yr

ig

ht

m

at


Figure 407: Overview.controller.js


327


pe rs on al us e


Figure 408: Overview.view.xml

C op

yr

ig

ht

m

at


Figure 410: Index.html

328



pe rs on al us e



C op

yr

ig

ht

m

at



329


pe rs on al us e



4. Create the view for the implementation of the application: Detail View Carrier.view.xml.


C op

yr

ig

ht

m

at


330



pe rs on al us e



Figure 416: Carrier.view


C op

yr

ig

ht

m

at

5. Create the view for the implementation of the application, the Not-Found View NotFound.view.xml.


331

pe rs on al us e




C op

yr

ig

ht

m

at


332



LESSON SUMMARY You should now be able to: Understand FullScreen

C op

yr

ig

ht

m

at


pe rs on al us e

●


333

Unit 13 Lesson 3

pe rs on al us e

Understanding SplitScreen

LESSON OBJECTIVES After completing this lesson, you will be able to: Understand SplitScreen


●

SplitScreen

Split Screen Layout

Split screen layout is optimized for displaying and processing a list of items. The split screen layout is divided into two separate areas: ●

●

Master list area: the master list displays the items available to the user. The user can navigate between the items, perform a basic search, and organize the list using sort, filter, and grouping functions. Currently, only the master list is allowed in this area. For more details, see the Master List pattern. Details area: this content area displays the details for single or multiple items that are selected in the master list. The details area can contain one of the following floorplans: -

Object view floorplan

-

Flat object view floorplan

-

“Edit” page floorplan

-

“Create” page floorplan

C op

yr

ig

ht

m

at

Both areas have separate application headers and footer bars with navigation and actions

334



pe rs on al us e

Lesson: Understanding SplitScreen

Figure 419: Structure of the Split Screen Layout

Usage of the SplitScreen-Pattern Use the split screen layout if: ●

your users need to review and process different items quickly with minimal navigation

Do not use the split screen layout if:

●

●

you need to offer complex filters for the list of items

users need to see several attributes for each item in the list, and compare these values across items you want to display a single object

●

you want to display different facets of the same object in the master list

C op

yr

ig

ht

m

at

●

Figure 420: The Master List as Part of the Split Screen Layout


335


The master list consists of three main areas: Master list header - located on top of the master list. It offers means for back navigation, action, and search.

●

Back navigation

●

Item title and count

pe rs on al us e

●

An optional action can be added at the right side. There are currently two possible actions allowed: switch multi-selection on/ off, set a context filter.

A search field can be embedded in the optional subheader (sap.m.Toolbar) area below the master list.

●

●

●


Master list - located in the center, containing the list items representing the individual items displayed in the list. The master list has to use one of the following list items: Object list item (default, sap.m.ObjectListItem) - for most cases.

Standard list item (sap.m.StandardListItem) - for simple cases or groups.

Custom list item (sap.m.CustomListItem) - if none of the available list items suits your needs, you can build own list items.

Master list footer - located below the master list. It offers access to actions and the means to filter, sort, and group the master list. Foundation: Master/Detail 1/2

The master/detail template consists of a list that shows a number of items of which the details are shown on selection. This template is used in several apps. It offers a smart layout and is responsive to different form factors and orientation.

C op

yr

ig

ht

m

at

The template for master/detail consists of a master list on the left-hand side and a details area on the right-hand side of the screen.

Figure 421: Foundation: Master/Detail 2/2

336


ht

ig

yr

C op


at

m

pe rs on al us e


Figure 422: Foundation: sap.m.MasterPage


337

ht

ig

yr

C op


at

m

pe rs on al us e


338


Unit 13 Exercise 12

Business Scenario

pe rs on al us e

Create a Master-Detail Application

In this exercise you will implement a Master-Detail Application with the following functionality: The Master View of the application is to show an overview of the existing carriers. Use a list to display Id and Name of each carrier. The data will be read by the Travel OData Service


●

●

If the user selects a carrier in the Master-View then a Detail View is to be displayed showing Id, Name, Currency, and Url of the selected carrier. Additionally the carrier’s connections are to be displayed in a table

Figure 423: UI of the Master-Detail Application

The navigation within the application is to be hash-based according to the following rules:

C op

yr

ig

ht

m

at

●

●

for an empty hash: For a phone only the Master View is to be displayed. For bigger devices, a Master View and Detail View are to be displayed simultaneously. In this case the first list entry in the Master View shall be preselected so that in the Detail view the corresponding data for this entry is displayed.

for hashes that are built following the pattern Carriers/{objectId}: For a phone only the Detail view with the corresponding data for this carrier is displayed. For bigger devices the Master View is displayed as well. In its list the corresponding carrier entry is shown as selected. If the value passed for objectId is invalid then a Detail-Object-Not-Found View with an error message is to be displayed instead. For bigger devices in this case make sure that no entry is shown as selected in the Master View’s list.


339

pe rs on al us e


●


Figure 424: Detail-Object-Not-Found View for non-exitent Id

when entering an invalid URL pattern a Not-Found View with a suitable error message is to be displayed. For bigger devices additionally the Master View is to be displayed. In this case make sure that no entry is shown as selected in the Master View’s list.

Figure 425: Not-Found View for invalid URL-Pattern



This view shall contain only the root element sap.m.App that is needed for the application. Master-View Master.view.xml

●

yr

C op

This view displays the overview list of the carriers. Detail View Detail.view.xml


ig

ht

m

at

●

●

Detail-Object-Not-Found View DetailObjectNotFound.view.xml This view is to display an error message if anon-existent Id has been entered.

●

• Not-Found View NotFound.view.xml This view is to display an error message if an invalid URL pattern has been entered.

340


Figure 426: Structure of Application

pe rs on al us e



Detail-View, Detail-Object-Not-Found View and Not-Found View need a navigation button that is to be displayed if the application runs on a phone. This button allows to navigate back to the last valid hash. If there is no such hash in the history the Master View is to be displayed. To make it easier you will not begin from scratch but start from a given project template. You trainer will supply the project. Import it into your SAP Web IDE. Make yourself familiar with the cloned project and implement the parts that are marked with TO DO.

Note: In this exercise, no substeps are given, only the required results are dísplayed. For the substeps, refer to the previous exercises.

C op

yr

ig

ht

m

at

1. Perform the exercise. Refer to the figures as template for the steps, you have to perform.



341



pe rs on al us e


Figure 430: Detail.controller.js, fig. 2

C op

yr

ig

ht

m

at


342



Figure 431: DetailObjectNotFound.controller.js

pe rs on al us e


C op

yr

ig

ht

m

at

Figure 432: ListSelector.js, fig. 1



343


pe rs on al us e


Figure 434: Master.controller.js, fig 1


C op

yr

ig

ht

m

at


344


pe rs on al us e




C op

yr

ig

ht

m

at


Figure 439: Detail.view.xml


345


pe rs on al us e


Figure 440: DetailObjectNotFound.view.xml

C op

yr

ig

ht

m

at

Figure 441: Master.view.xml

346



pe rs on al us e



C op

yr

ig

ht

m

at



347


pe rs on al us e


Figure 444: index.html

C op

yr

ig

ht

m

at

Figure 445: manifest.json, fig. 1

348



pe rs on al us e



C op

yr

ig

ht

m

at




349

Unit 13 Solution 12

Business Scenario

pe rs on al us e

Create a Master-Detail Application

In this exercise you will implement a Master-Detail Application with the following functionality:

●

The Master View of the application is to show an overview of the existing carriers. Use a list to display Id and Name of each carrier. The data will be read by the Travel OData Service


●

If the user selects a carrier in the Master-View then a Detail View is to be displayed showing Id, Name, Currency, and Url of the selected carrier. Additionally the carrier’s connections are to be displayed in a table

Figure 423: UI of the Master-Detail Application

The navigation within the application is to be hash-based according to the following rules: for an empty hash: For a phone only the Master View is to be displayed. For bigger devices, a Master View and Detail View are to be displayed simultaneously. In this case the first list entry in the Master View shall be preselected so that in the Detail view the corresponding data for this entry is displayed.

C op

yr

ig

ht

m

at

●

350

●

for hashes that are built following the pattern Carriers/{objectId}: For a phone only the Detail view with the corresponding data for this carrier is displayed. For bigger devices the Master View is displayed as well. In its list the corresponding carrier entry is shown as selected. If the value passed for objectId is invalid then a Detail-Object-Not-Found View with an error message is to be displayed instead. For bigger devices in this case make sure that no entry is shown as selected in the Master View’s list.



Figure 424: Detail-Object-Not-Found View for non-exitent Id

pe rs on al us e


●

when entering an invalid URL pattern a Not-Found View with a suitable error message is to be displayed. For bigger devices additionally the Master View is to be displayed. In this case make sure that no entry is shown as selected in the Master View’s list.

Figure 425: Not-Found View for invalid URL-Pattern

Create the following views for the implementation of the application:

●



●

yr

C op

Master-View Master.view.xml

This view displays the overview list of the carriers. Detail View Detail.view.xml


ig

ht

m

at

●

●

Detail-Object-Not-Found View DetailObjectNotFound.view.xml This view is to display an error message if anon-existent Id has been entered.

●

• Not-Found View NotFound.view.xml This view is to display an error message if an invalid URL pattern has been entered.


351

Figure 426: Structure of Application

pe rs on al us e



Detail-View, Detail-Object-Not-Found View and Not-Found View need a navigation button that is to be displayed if the application runs on a phone. This button allows to navigate back to the last valid hash. If there is no such hash in the history the Master View is to be displayed. To make it easier you will not begin from scratch but start from a given project template. You trainer will supply the project. Import it into your SAP Web IDE. Make yourself familiar with the cloned project and implement the parts that are marked with TO DO.

Note: In this exercise, no substeps are given, only the required results are dísplayed. For the substeps, refer to the previous exercises.

C op

yr

ig

ht

m

at

1. Perform the exercise. Refer to the figures as template for the steps, you have to perform.

352





pe rs on al us e



C op

yr

ig

ht

m

at



353


Figure 431: DetailObjectNotFound.controller.js

pe rs on al us e


C op

yr

ig

ht

m

at



354



pe rs on al us e




C op

yr

ig

ht

m

at



355

pe rs on al us e




C op

yr

ig

ht

m

at


356

Figure 439: Detail.view.xml



pe rs on al us e


Figure 440: DetailObjectNotFound.view.xml

C op

yr

ig

ht

m

at

Figure 441: Master.view.xml


357


pe rs on al us e



C op

yr

ig

ht

m

at


358



pe rs on al us e


Figure 444: index.html

C op

yr

ig

ht

m

at



359


pe rs on al us e



C op

yr

ig

ht

m

at



360



LESSON SUMMARY You should now be able to: Understand SplitScreen

C op

yr

ig

ht

m

at


pe rs on al us e

●


361

ht

ig

yr

C op


at

m

pe rs on al us e


362


Unit 13

pe rs on al us e

Learning Assessment

1. What to pattern do you use if the user has to inspect the status of one or more objects? Choose the correct answers. A Master-Detail with icon tab bar


X X

B Full screen app with icon tab bar

X

C Full screen

X

D Master-Detail with filter

2. What of the following is true? Choose the correct answers. X

A A developer creates applications based on so called floorplans

X

B A developer instantiates a floorplan object

X

C A floorplan is a UI-design pattern that solves repeating UI-problems in a consistent way

X

D A floorplan is displayed within the overall page layout

3. To what namespace is the class FullscreenPage assigned?

X

A sap.semantic

X

B sap.m.semantic

X

C sap.screenelement.semantic

X

D sap.m.page.FullScreen

C op

yr

ig

ht

m

at



363


4. When is it recommended to use Full Screen Layout? Choose the correct answers. A Your app content requires the full width of the screen (for example, large tables, charts, or other types of visualization)

X

B You only need to display a small amount of information. If you cannot avoid using the full screen layout, use letterboxing to mitigate the issue

X

C You are not sure how to structure your information on the screen

5. When is it recommended to use SplitScreen-Pattern?



pe rs on al us e

X

X

A Your users need to review and process different items quickly with minimal navigation

X

B You need to offer complex filters for the list of items

X

C users need to see several attributes for each item in the list, and compare these values across items

X

D You want to display a single object

X

E You want to display different facets of the same object in the master list

6. : What are the three main areas of the master list? Choose the correct answers.

A Master list header - located on top of the master list. It offers means for back navigation, action, and search

X

B Filter actions

X

C Sort actions

X

D Back navigation

X

E Item title and count

C op

yr

ig

ht

m

at

X

364


Unit 13

pe rs on al us e


1. What to pattern do you use if the user has to inspect the status of one or more objects? Choose the correct answers. A Master-Detail with icon tab bar


X X

B Full screen app with icon tab bar

X

C Full screen

X

D Master-Detail with filter

2. What of the following is true? Choose the correct answers. X

A A developer creates applications based on so called floorplans

X

B A developer instantiates a floorplan object

X

C A floorplan is a UI-design pattern that solves repeating UI-problems in a consistent way

X

D A floorplan is displayed within the overall page layout

3. To what namespace is the class FullscreenPage assigned?

X

A sap.semantic

X

B sap.m.semantic

X

C sap.screenelement.semantic

X

D sap.m.page.FullScreen

C op

yr

ig

ht

m

at



365


4. When is it recommended to use Full Screen Layout? Choose the correct answers. A Your app content requires the full width of the screen (for example, large tables, charts, or other types of visualization)

X

B You only need to display a small amount of information. If you cannot avoid using the full screen layout, use letterboxing to mitigate the issue

X

C You are not sure how to structure your information on the screen

5. When is it recommended to use SplitScreen-Pattern?

pe rs on al us e

X



A Your users need to review and process different items quickly with minimal navigation

X

B You need to offer complex filters for the list of items

X

C users need to see several attributes for each item in the list, and compare these values across items

X

D You want to display a single object

X

E You want to display different facets of the same object in the master list

6. : What are the three main areas of the master list? Choose the correct answers.

A Master list header - located on top of the master list. It offers means for back navigation, action, and search

X

B Filter actions

X

C Sort actions

X

D Back navigation

X

E Item title and count

C op

yr

ig

ht

m

at

X

366



Lesson 1

369 373


Describing the General Concepts of the SAP Fiori Design Guidelines Exercise 13: Work with Messages

pe rs on al us e

UNIT 14

Lesson 2

Describing App Types Defined in the SAP Fiori Guidelines

387

Lesson 3

Describing Floorplans Defined in the SAP Fiori Guidelines Exercise 14: Implement Value Helps

391 395

Lesson 4

Describing the Object View, as Defined in the SAP Fiori Guidelines Exercise 15: Implement an ObjectView

403 407

Lesson 5

Describing the List Report, as Defined in the SAP Fiori Guidelines Exercise 16: Implement a List Report

416 419

Lesson 6

Describing the Flat Object View, as Defined in the SAP Fiori Guidelines Exercise 17: Implement the EditPage Floorplan

429 433

at

Lesson 7

445 449

C op

yr

ig

ht

m

Creating Main Entities, as Defined in the SAP Fiori Guidelines Exercise 18: Implement the Create Floorplan

Lesson 8 Describing the Worklist, as Defined in the SAP Fiori Guidelines Exercise 19: Implement the Worklist Floorplan

456 459

Lesson 9 Describing the Draft Handling, as Defined in the SAP Fiori Guidelines


465

367


Lesson 10 468

pe rs on al us e

Describing the SAP Fiori Locking

UNIT OBJECTIVES

●

●

●

●

●

●

●

●

Describe the structure and usage of the different app types defined in the SAP Fiori Guidelines Describe floorplans defined in the SAP Fiori Guidelines

Describe the Object View, as defined in the SAP Fiori Guidelines Describe the List Report, as defined in the SAP Fiori Guidelines

Describe the Flat Object View, as defined in the SAP Fiori Guidelines Create main Entities, as defined in the SAP Fiori Guidelines

Describe the Worklist, as defined in the SAP Fiori Guidelines

Describe the Draft Handling, as defined in the SAP Fiori Guidelines Describe SAP Fiori Locking

C op

yr

ig

ht

m

at

●

Describe the general concepts of the SAP Fiori Design Guidelines


●

368


Unit 14 Lesson 1



pe rs on al us e

Describing the General Concepts of the SAP Fiori Design Guidelines

●

Describe the general concepts of the SAP Fiori Design Guidelines

General Concepts of the SAP Fiori Design Guidelines Scenario

In this unit, you will learn the SAP Fiori Design Guidelines. Working with Messages

Messaging describes how to display messages like errors, warnings, success messages, confirmation and information to the user. There are different controls available, you should use for different types of messages. Are expressed in plain language, precisely indicate the problem, and constructively suggest a solution. Do not display error code only. Even better than good messages is a careful design which prevents a problem from occurring in the first place. Types of messages: Error

●

Warning

●

Success

●

Information

at

●

C op

yr

ig

ht

m

●

Confirmation

Message Components - Form Field Validation Message Components - Form Field Validation: ●

●

Errors, warnings and success messages on form fields are shown directly in the form by setting the status of the field (valueState) and providing a meaning full text to the user Some controls are able to show inline errors, warning and success messages


369


pe rs on al us e


Figure 449: Message Components - MessageBox

C op

yr

ig

ht

m

at

Figure 450: Implementation of a MessageBox of Type Information

Figure 451: Message Components - Message Popover

370



Figure 452: MessagePopoverItem - Implementation

pe rs on al us e

Lesson: Describing the General Concepts of the SAP Fiori Design Guidelines

Message Components - MessageToast

A toast message is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.

The sap.m.MessageToast is always positioned horizontally centered, and at the bottom of the screen. It has the same behavior on all devices (Adjustment of the width is possible). Prefer using a MessageToast to MessageBox for success messages. Do not use the message toast if ●

you want to display an error or warning message

●

you want to interrupt the user in his action and make sure the user reads the info

●

you want the users to be able to copy e.g. a transaction number to their clipboard (show success message dialog)

Figure 453: Locking

C op

yr

ig

ht

m

at

.

The concept of locking ensures that business objects can only be changed by one person at a time (“exclusive editing”). If a user is already working on an object, it is locked for other users. The object remains locked until the user has finished editing.


371

ht

ig

yr

C op


at

m

pe rs on al us e


372


Unit 14 Exercise 13

pe rs on al us e

Work with Messages

Business Scenario

In this exercise you will implement a SAPUI5 Component with the following functionality:

the Component is to display within its Root XMLView a form with an input field for a Carrier Id. On pressing the associated button the carrier’s name that corresponds to the Id is to be retrieved and to be displayed in another input field. The data will be supplied via the Travel OData Service


●

for the Id input field use Simple Type sap.ui.model.type.String as data type with minimal string length of 1 and maximal length of 3. Validation errors are to be displayed with a sap.m.Table that in turn uses sap.m.MessageStrip UI Elements.

●

When pressing a button, the UI Message Button pressed is to be created and as well to be displayed in the table.

●

Error messages that are returned by the OData Service (e.g. on invalid Id) also are to be displayed in the table.

●

Finally, the table must have a Toolbar with a button which allows to delete all existing messages.

C op

yr

ig

ht

m

at

●


1. Create a new project, called sap.training.exc16.messages in your SAP Web IDE. Use the following data: Field

Value

Project template


View Type

None

View Name

delete the suggested value, to create a project without initial view.


373


Field

Value

namespace

sap.training.exc16.messages

pe rs on al us e

2. Add a connection to the OData Service ZBC_TRAVEL_SRV to your project. 3. The file serviceBinding.js that has been generated by the wizard is not needed and therefore can be deleted.

4. Create now a folder (name view) within your project for the implementation of the XML Root View of the Component. In this folder create a new XML View with the wizard’s help. 5. Put a SimpleForm UI-Element into the Main View. Use the following data: Attributes


UI Element sap.m.Label

The label has text Carrier Id

sap.m.Input

Bind the value property to the carrierIdproperty of the JSON Model (that we will define later). Later this JSON Model will be given the Model Name input. This Model Name must be respected at Data Binding.

For the Model Property as data type use Simple Type sap.ui.model.type.String with minimal string length of 1 and maximal length of 3. The button has text Show Carrier Name. Its press event is to be bound to the event handler onShowCarrier that we will create later

sap.m.Label

The label has text Carrier Name

sap.m.Input

With attribute enabled make sure that the user cannot edit the field content. Bind the value attribute to Carrname property of Entity Types Carrier from the OData Service. For the related OData Model you will later set Model Name travel. This Model Name must be respected at Data Binding

m

at

sap.m.Button

C op

yr

ig

ht

6. Create a sap.m.Table UI Element, idMsgTable. 7. Instantiate a JSON Model with a new sap.ui.model.json.JSONModel(). 8. Implement the event handler onShowCarrier in the Main View Controller.

9. implement the onDeleteMessages event handler. 10. Create the Component Controller that is needed for the Component. 11. Create the Application Descriptor that is needed for the Component. 12. Instantiate the Component via an Application Script in index.html file, and place it on the HTML page by using a Component Container.

374



pe rs on al us e


C op

yr

ig

ht

m

at

Figure 468: Implementation of index.html


375

Unit 14 Solution 13

pe rs on al us e

Work with Messages

Business Scenario

In this exercise you will implement a SAPUI5 Component with the following functionality:

the Component is to display within its Root XMLView a form with an input field for a Carrier Id. On pressing the associated button the carrier’s name that corresponds to the Id is to be retrieved and to be displayed in another input field. The data will be supplied via the Travel OData Service


●

for the Id input field use Simple Type sap.ui.model.type.String as data type with minimal string length of 1 and maximal length of 3. Validation errors are to be displayed with a sap.m.Table that in turn uses sap.m.MessageStrip UI Elements.

●

When pressing a button, the UI Message Button pressed is to be created and as well to be displayed in the table.

●

Error messages that are returned by the OData Service (e.g. on invalid Id) also are to be displayed in the table.

●

Finally, the table must have a Toolbar with a button which allows to delete all existing messages.

C op

yr

ig

ht

m

at

●

376


1. Create a new project, called sap.training.exc16.messages in your SAP Web IDE. Use the following data: Field

Value

Project template


View Type

None

View Name

delete the suggested value, to create a project without initial view.



Field

Value

namespace

sap.training.exc16.messages

pe rs on al us e

a) For the substeps, refer to a previous exercise and use the data from the table above. 2. Add a connection to the OData Service ZBC_TRAVEL_SRV to your project.

a) To do so, on the project node, call the context menu and select New → OData Service. b) On the first dialog of the wizard that appears choose Service ZBC_TRAVEL_SRV and press Next.


c) Terminate the wizard with Finish.

Figure 455: Assigning the OData service

3. The file serviceBinding.js that has been generated by the wizard is not needed and therefore can be deleted. a) Select the file and from the context menu choose Delete.

C op

yr

ig

ht

m

at

b) Delete as well the <script>additions which the wizard has inserted into file index.html. With these additions the serviceBinding.js file is loaded and the method initModel(), which is stored there is called.

Figure 456: Deleting unnecessary file

4. Create now a folder (name view) within your project for the implementation of the XML Root View of the Component. In this folder create a new XML View with the wizard’s help. a) From context menu of the view folder, choose New → SAPUI5 View. b) In the wizard in the namespace field enter sap.training.exc16.messages and in the View Name enter XML View.


377

Figure 457: Project structure


5. Put a SimpleForm UI-Element into the Main View. Use the following data:

pe rs on al us e


UI Element

Attributes

sap.m.Label

The label has text Carrier Id

sap.m.Input

Bind the value property to the carrierIdproperty of the JSON Model (that we will define later). Later this JSON Model will be given the Model Name input. This Model Name must be respected at Data Binding.

For the Model Property as data type use Simple Type sap.ui.model.type.String with minimal string length of 1 and maximal length of 3. The button has text Show Carrier Name. Its press event is to be bound to the event handler onShowCarrier that we will create later

sap.m.Label

The label has text Carrier Name

sap.m.Input

With attribute enabled make sure that the user cannot edit the field content. Bind the value attribute to Carrname property of Entity Types Carrier from the OData Service. For the related OData Model you will later set Model Name travel. This Model Name must be respected at Data Binding

a) Put a SimpleForm UI-Element into the Main View that you just have created. To be able to access this Layout Control you must add the following attribute to the View tag of the Main View to declare the XML Namespace: xmlns:f="sap.ui.layout.form.

C op

yr

ig

ht

m

at

sap.m.Button

378



pe rs on al us e


Figure 458: Implementation of: Main.View.xml

b) Add the following UI elements to the content aggregation of the SimpleForm (with respect to the given order). Use the data from the table above. Note: • To make it easier we do without the translatability of the UI texts, i.e. you do not have to create a Resource Bundle and a Resource Model. Instead the texts will be hard coded.

Figure 459:

6. Create a sap.m.Table UI Element, idMsgTable.

C op

yr

ig

ht

m

at

a) In the Main View below the SimpleForm, create a sap.m.Table UI Element, the Id is idMsgTable

b) With this table the Messages from the Message Model are to be displayed. As Model Name use message. Bind the items aggregation of the table to the root node of the Message Model by assigning the {message>/} value to the items attribute of the Table Tag. c) Add a sap.m.Column Element to the table’s columns aggregation to define a table column. This element in turn is to contain a sap.m.Text UI Element which is used to set the column’s heading Messages. d) Add a sap.m.ColumnListItem UI Element to the table’s items aggregation. The cells aggregation of this Column List Items is to contain a sap.m.MessageStrip UI element to display the Messages. To do so, bind the message property from the Message Model and the type attribute of the MessageStrip UI element to the type property of the Message Model. Set attribute showIcon of the MessageStrip UI element to true.


379



pe rs on al us e

e) Finally add a sap.m.Toolbar element to the headerToolbar aggregation of the table. The content aggregation of this Toolbar is to contain a sap.m.Button with text Delete All Messages. The button’s press event is to be bound to onDeleteMessages event handler that we will implement later. Set attribute type of the button to Emphasized.


7. Instantiate a JSON Model with a new sap.ui.model.json.JSONModel().

a) In the onInit() method of the Main View Controller instantiate a JSON Model with new sap.ui.model.json.JSONModel().

b) Assign this model to the Main View by calling the setModel() method from the instance view. Specify input as the model’s name. Note: You have used this name already for the binding above.

Note: You have used this name already for the binding above.

C op

yr

ig

ht

m

at

c) Get access to the view’s table. Assign the Message Model to this table by calling the setModel() method from the table instance. Specify message as the model’s name.

380



pe rs on al us e



8. Implement the event handler onShowCarrier in the Main View Controller. a) Implement the onShowCarrier event handler in the Main View Controller. Note: This handler has been used above.

C op

yr

ig

ht

m

at

b) Create a UI Message per API that informs that the button has been used successfully. Pass to the Constructor of sap.ui.core.message.Message class the following key-valuepairs: Key

Value

message

Button pressed

type

sap.ui.core.MessageType.Success

processor

Instance of class sap.ui.core.message.ControlMessageProcessor

c) Bind the view to the Carrier Entity that belongs to the user input so that the carrier’s name that is to be displayed in the view can be resolved relatively to this binding.

d) To do so, on the view instance call getModel(“input“) to get access to the JSON Model. Assign the model data to a variable with name oInputData by calling the getData() method on the JSON Model. The returned oInputData object contains the carrierId property that contains the user input. With this information call method bindElement() on the view instance as follows: bindElement({path: "travel>/CarrierSet('" + oInputData.carrierId + "')"});


381

pe rs on al us e



9. implement the onDeleteMessages event handler.


a) In the Main View controller, implement the onDeleteMessagesevent handler. Note: This event handler has been used above.

b) With sap.ui.getCore().getMessageManager() get access to the Message Manager and call the removeAllMessages() method. Note: This method has no parameters.

Figure 463: Implementation of Main.Controller.js

10. Create the Component Controller that is needed for the Component.

a) Create the Component Controller that is needed for the Component. To do so create a file Component.js in the project directory.

b) In this file, define a module with sap.ui.define(). This module shall depend on the sap/ui/core/UIComponent module.

C op

yr

ig

ht

m

at

c) The module value that is returned by the Factory Function is to be a subclass of class sap.ui.core.UIComponent with name sap.training.exc16.messages.Component.

382

d) On the UIComponent module, call the extend() method that has been passed from the Factory Function. For the first parameter pass class name sap.training.exc16.messages.Component as a string. e) For the second calling parameter pass an literal object. Via the metadata property of this object, publish the existence of the Application Descriptors manifest.json. You will create this Descriptor in the next step.



pe rs on al us e


Figure 464: Implementation of Component.js

11. Create the Application Descriptor that is needed for the Component.

a) In the project directory, create a file manifest.json. To make things easy, copy the content of the manifest_template.json file from the template solution into your file manifest.json.

b) In manifest.json file assign the appropriate values at all places that are marked with <...>. Ensure the following: ●

The URI of the Travel OData Services is: /sap/opu/odata/sap/ZBC_TRAVEL_SRV/

●

Make sure that for the OData Model the Model Name travel is used

C op

yr

ig

ht

m

at

c) Via the Application Descriptor activate the automatic generation of messages.


383


pe rs on al us e


Figure 466: Implementation of manifest.json, fig. 2

C op

yr

ig

ht

m

at

Figure 465: Implementation of manifest.json, fig. 1

384



pe rs on al us e


Figure 467: Code fixes

12. Instantiate the Component via an Application Script in index.html file, and place it on the HTML page by using a Component Container.

C op

yr

ig

ht

m

at

a) Implement the code as displayed in the screenshot:

Figure 468: Implementation of index.html


385


LESSON SUMMARY You should now be able to: Describe the general concepts of the SAP Fiori Design Guidelines

C op

yr

ig

ht

m

at


pe rs on al us e

●

386


Unit 14 Lesson 2



pe rs on al us e

Describing App Types Defined in the SAP Fiori Guidelines

●

Describe the structure and usage of the different app types defined in the SAP Fiori Guidelines

App Types Defined in the SAP Fiori Guidelines

Purpose of App Types

m

at

An App-Type defines the overall structure and patterns

C op

yr

ig

ht

Figure 469: Approval App

Behaviour and Interaction ● The approval app is used to display a number of work items in the master list and the work item’s details in the details area. This allows the user to get a quick overview of the work items, directly select them, and take action without navigation. Implementation of the Master List the approval app consists of the following components:

●


387

-

master list that contains object list items (sap.m.ObjectListItem)

-

detail area that contains an object view page

Implementation of the Detail Area ● The object view page in the detail area can have tabs in in the icon tab bar (sap.m.IconTabBar) Common Tabs are: -

Info Tab

-

Notes Tab

-

Attachment Tab

-

Approver Tab


●

pe rs on al us e


Figure 470: Master-Detail-App

m

at

Behaviour and Interaction ● please use the master-detail app to display a number of items in the master list and further information to that item in the details area. This allows the user to quickly get an overview of the items. The user is able to select one or multi existing item(s) in order to edit it or can create a new one without navigating.

C op

yr

ig

ht

●

388

the master-detail app consists of the following components: -

-

master list that contains object list items (sap.m.ObjectListItem) detail area that contains an object view floorplan or a flat object view floorplan in edit mode



pe rs on al us e

Lesson: Describing App Types Defined in the SAP Fiori Guidelines

Figure 471: Shopping-App

Behaviour and Interaction - Product List (all products) Tthe master screen contains a responsive table with all products and is usually a fullscreen app. The header contains an indicator of how many products are in the shopping cart. This indicator also serves as navigation trigger to the shopping cart. The user can filter the items with the filter bar above the table.

●

●

Sort, group, and personalization is positioned in the table toolbar. The Personalize button allows the user to show/ hide or rearrange columns.Any filters that are set and the personalization of the table can be saved with the variant management in the object header.

Behaviour and Interaction - Product Detail Page The detail screen contains the product details of a selected product.

●

●

The object header can contain following items: -

C op

yr

ig

ht

m

at

-

-

-

Product name, picture, price, category, subcategory, the status and if applicable, a favorite icon marks objects as favorites.

Besides other information like manufacturer, supplier and so on can be listed in the content area. With a click on the product picture it will be enlarged. The user can also add a review to the product. Finally the user can add the product from the detail screen to cart via “Add to Cart” button in the footer tool bar.

Behaviour and Interaction - Add to Cart (Action) 1/2 ● The user has two possibilities to add a product to the cart: -

Add a product directly on the product list.

-

Add a product on detail page.

A message toast confirms the success. If an error occurred, an error dialog will be shown.


389


Behaviour and Interaction - Add to Cart (Action) 2/2 The user has two possibilities to add a product to the cart: -

Add a product directly on the product list.

-

Add a product on detail page.

pe rs on al us e

●

A message toast confirms the success. If an error occurred, an error dialog will be shown. Behaviour and Interaction - Shopping Cart ● Shows all collected products with quantity, unit price, and subtotal.

●

●

The users can change the quantity of the containing products or remove items from the cart.With a click on the item the product details page will be shown.


●

The back button in the header brings the users back to the last page.

The Go to Checkout button brings the users to the check out step(s).

Behaviour and Interaction - Checkout ● The checkout consists of one or more steps and ends with the ordering of the products. ●

Usually the users need to enter delivery information. Other steps might be necessary too, e.g. entering accounting information.The screen also contains a list of the products that will be ordered.


Describe the structure and usage of the different app types defined in the SAP Fiori Guidelines

C op

yr

ig

ht

m

at

●

390


Unit 14 Lesson 3



pe rs on al us e

Describing Floorplans Defined in the SAP Fiori Guidelines

●

Describe floorplans defined in the SAP Fiori Guidelines

Floorplans

Floorplans ● A floorplan is a UI-pattern that provides a consistent User Experience for a specific task or operation ●

SAP identified various common user tasks of the daily work and realized some UI-patterns to implement a consistent UI over application boundaries

C op

yr

ig

ht

m

at

●

The consistent usage of floorplans provides a high recognition value to the user

Figure 472: Initial Page

Problem and Solution Problem: You want to provide an entry point where the user can search and navigate to a found object of the search result Solution:


391



pe rs on al us e

The Initial Page provides a single page as interaction starting point where the user can start the selection of object and navigate to the object for work.

Figure 474: Value Help

C op

yr

ig

ht

m

at

Figure 473: Initial Page

392



pe rs on al us e

Lesson: Describing Floorplans Defined in the SAP Fiori Guidelines

Figure 476: Value Help - Tabular 2/2

C op

yr

ig

ht

m

at

Figure 475: Value Help - Tabular 1/2


393

ht

ig

yr

C op


at

m

pe rs on al us e


394


Unit 14 Exercise 14

Business Scenario In the following exercise you will implement value helps.



pe rs on al us e

Implement Value Helps


Add a Service Reference

1. Add a Service Reference.

Implement a Value Help

1. Implement a Value Help

2. Implement a function _handleValueHelpClose.

Implement an entry assistant with suggestions in tabular form

C op

yr

ig

ht

m

at

1. Implement an entry assistant with suggestions in tabular form.


395

Unit 14 Solution 14

Business Scenario In the following exercise you will implement value helps.



pe rs on al us e

Implement Value Helps


a) With the SAP Web IDE create a new project, name it ValueHelp. Use project template SAPUI5 Application Project. As View Type choose XML and as name enter S1. As namespace use sap.training.valuehelp.



a) Select your new project and via context menu call function New → OData Service.

b) Select the training system. Then select the ZBC_TRAVEL_SRV Service from the list of available OData Services.

Figure 477: Data connection

d) Open the manifest.json file and check whether the service reference has been created correctly.

C op

yr

ig

ht

m

at

c) Confirm with Next and terminate the dialog with Finish.

396



pe rs on al us e


Figure 478: Implementation of manifest.json

e) In the manifest.json file, scroll down to the model definition and define for data source ZBC_TRAVEL_SRVan unnamed model.

Figure 479: Implementation of: ZBC_TRAVEL_SRV

f) Save your changes.

Implement a Value Help

a) Insert a sap.ui.layout.VerticalLayout element into the content area of the app element.

b) Put an element of type sap.m.Label into the layout element and add a meaningful text. c) Put an element of type sap.m.Input beneath the sap.m.Label element and specify it as shown below.

C op

yr

ig

ht

m

at

1. Implement a Value Help



397



pe rs on al us e

d) Add a new XML fragment to the view folder, name it Dialog and specify it as shown below.

Figure 481: Implementation of Dialog.fragment.cml

e) Open the controller of the S1 view.

f) Define a member variable, name it inputId and initialize it with an empty string literal.

C op

yr

ig

ht

m

at

g) Implement a function handleValueHelp. It should look as shown below:

Figure 482: Implementation of: handleValueHelp

398




This function is to specify the search function of the dialog.

pe rs on al us e

h) Implement a function_handleValueHelpSearch. To do so read from the function’s event parameter the value that has been entered in the search dialog. Parameterize a filter object for Carrid attribute and apply this filter for the list. Before this enhance the define definition of your controller so that class sap.ui.model.Filter will be loaded. Before this enhance the define definition of your controller so that class sap.ui.model.Filter will be loaded.


Figure 484: Implementation of _handleValueHelpSearch

2. Implement a function _handleValueHelpClose.

Figure 485: Implementation of _handleValueHelpClose

b) Test your application. Enter a value for carrier into the text field and/or press F4:

C op

yr

ig

ht

m

at

a) Implement a function _handleValueHelpClose. This function’s task is to read the selected element from the selection dialog from the function’s event handler, and then read the title attribute of the element and bind it to the input field from view S1. Finally remove the filter applied in the previous exercise step.

Figure 486: Test


399


Implement an entry assistant with suggestions in tabular form 1. Implement an entry assistant with suggestions in tabular form. a) Close all tabs from the previous exercise.

pe rs on al us e

b) Put a new field of type sap.m.Label below the sap.m.Input field of the previous exercise and add a meaningful text to it.


c) Define a sap.m.Input field below the label. Set the showSuggestion parameter to true. For the value suggestionRows use the binding of collection CarrierSet of the data model.


d) Implement the aggregation suggestionColumns and add three column elements with captions: CarrierId

●

Carrier Name

●

Carrier Url

C op

yr

ig

ht

m

at

●

400


e) Add aggregation suggestionRows and create a ColumenListItem template element with bindings for:



CarrierId

●

Carrier Name

●

Carrier Url


pe rs on al us e

●


f) Test your application. This is the result:

C op

yr

ig

ht

m

at

Figure 490: Result of this exercise


401


LESSON SUMMARY You should now be able to: Describe floorplans defined in the SAP Fiori Guidelines

C op

yr

ig

ht

m

at


pe rs on al us e

●

402


Unit 14 Lesson 4



pe rs on al us e

Describing the Object View, as Defined in the SAP Fiori Guidelines

●

Describe the Object View, as defined in the SAP Fiori Guidelines

Object View

Figure 491: Object View

Problem and Solution

C op

yr

ig

ht

m

at

Problem:

You want to display all the information of simple or complex object with different facets in a responsive way Solution: The Object View Floorplan defines a floorplan that fits into full screen an Master Detail applications. It defines a stable UX when displaying complex objects with different facets.


403


pe rs on al us e


Figure 492: When to Use Object View?

Figure 493: Structure of the Object View

Working with TABS 1/2

m

at

The key element of the object view is the icon tab bar. Each of the tabs shows a certain facet of the object. There are two primary facet types:

●

C op

yr

ig

ht

●

404

Form-based facets display attributes of the object in a form layout (for example, object details or contact details). Tabular facets show a list of similar attributes or relationships in a list or table structure (such as attachments, contacts, or products).

Working with TABS 2/2 In the object view two icon tab bar types are allowed: ●

Icon tabs: Use icons if you only need standard tabs

●

Text only: Use texts if you need tabs for non-standard object facets


Lesson: Describing the Object View, as Defined in the SAP Fiori Guidelines

Some rules: Do not mix the text-only and icon tab types

●

Do not use separators between the tabs

●

Do not use any other icon tab bar types (tabs as filters of process steps)

●

Do not add tab specific actions into the footer bar

●

Actions in the footer toolbar will not change when switches the tabs

Variants The following variants are known: Create


●

pe rs on al us e

●

●

Edit

Create Variant ● The “create” action creates a new object. ●

●

●

The corresponding button can either be a “+” button or a button with a meaningful text (such as, “Add Product”).

When the user creates a new object, the display changes to a flat object view in edit mode.

Switching to this flat layout prevents user input and validation errors from being scattered across multiple tabs.

●

In the flat object view, users can fill out the details and save the object.

●

After saving, the new object is shown using the standard object view.

●

If the user navigates away from the object without saving the entries made so far, the app warns the user with a data loss dialog.

Edit Variant When the user clicks or taps the Edit button, the floorplan switches from the display mode with tabs to the edit mode with the flat object view.

●

●

C op

yr

ig

ht

m

at

●

●

The Edit-button is replaced by Save and Cancel buttons.

Switching to this flat layout prevents user input and validation errors from being scattered across multiple tabs. Save or Cancel takes the user back to the display mode of the object view with tabs. Cancel ignores any changes made, while Save keeps the changes. If the user navigates to another object or navigates away from the edit page without saving, the app warns the user with a data loss dialog. If the object view does not have any tabs, the page keeps its layout and structure in edit mode. Exception: If the object view includes tabs, but only a few tabs have editable fields, you can also use in-place editing and keep the structure of the tabs. In this case, the edit button is positioned next to the editable content

Common Guidelines ● Only use the two icon tab bar types “icon tabs” and “text only” in the object view. Do not use the other types.


405


●

You can hide empty tabs, but only if there is no way of adding content to the tab. For example, you still need to show an empty “Attachments” tab to enable users to upload attachments.

Try to persist the selection state of tabs during a session so that the user finds a similar view while navigating between instances.

C op

yr

ig

ht

m

at


●

Do not switch the actions in the footer toolbar when the user switches tabs. The footer toolbar is global and constant. If you have tab-specific actions, place them in the tab content area.

pe rs on al us e

●

406


Unit 14 Exercise 15

Business Scenario

pe rs on al us e

Implement an ObjectView

In this exercise you will display detail information for the selected carrier. For reasons of simplicity we will work without navigation.


Create a new SAPUI5 project

1. Create a new SAPUI5 project, called FlightSystem.



Implement a BaseController

1. Implement a BaseController.

Implement the ObjectView

1. Implement the ObjectView.

Create a Fragment

C op

yr

ig

ht

m

at

1. Create a Fragment, named CarrierDetail.


407

Unit 14 Solution 15

Business Scenario

pe rs on al us e

Implement an ObjectView

In this exercise you will display detail information for the selected carrier. For reasons of simplicity we will work without navigation.


Create a new SAPUI5 project

1. Create a new SAPUI5 project, called FlightSystem. a) Create a new project, name it FlightSystem.

b) Create a new XML view, called Main.

c) Use the namespace sap.training.flight.



a) Select your new project and via context menu call the function New → OData Service.

C op

yr

ig

ht

m

at

b) Select the training system. Then select the ZBC_TRAVEL_SRV Service from the list of available OData Services.

Figure 494: OData services

c) Choose Next and terminate the dialog with Finish.

408



Figure 495: Implemented service reference

pe rs on al us e

d) Open the manifest.json file and check whether the service reference has been created correctly.


e) In the manifest.json file scroll down to the model definition and for data source ZBC_TRAVEL_SRV define an unnamed model.

Figure 496: Unnamed model for ZBC_TRAVEL_SRV

f) Save your changes.

Implement a BaseController

1. Implement a BaseController.

a) Create a file BaseController.js in directory controller. From this controller all view controllers will inherit during the exercise.

b) Implement a class that inherits from sap.ui.core.mvc.Controller.

●

getRouter

●

getModel

●

setModel

●

getResourceBundle

●

onNavBack

d) The function getRouter returns a reference to the router of the component. e) The function getResourceBundle returns the i18n model to the caller. f) The function onNavBack implements the navigation from one page to the previous page.

C op

yr

ig

ht

m

at

c) Implement the functions:


409


pe rs on al us e


Figure 497: BaseContoller.js

Implement the ObjectView


a) Open the Main.view.xml file and adapt the code in analogy with the FullScreen page layout.

C op

yr

ig

ht

m

at

b) In the Main view create an element of type App and name it app.

410

Figure 498: MainView.XML

c) Create a view, named CarrierSelection. d) Adapt the implementation of the CarrierSelection controller in such a way that it inherits from the BaseController.



pe rs on al us e


Figure 499: CarrierSelection.controller.js

Figure 500: Routing

f) Open the CarrierSelection file and insert the value help of the previous exercise there.

C op

yr

ig

ht

m

at

e) The CarrierSelection View is to be the default view of the application. To achieve this define a route in the manifest.json file.


411


pe rs on al us e


Figure 501: Value help in CarrierSelection.xml

g) Copy the event handler of the value help exercise into the controller of the CarrierSelection view.

h) Copy the Detail fragment from the previous exercise into the view folder. Please consider that maybe you have to adapt the namespaces. i) Insert an element of type sap.m.Panel and with the name carrierDetail into the CarrierSelection view.

Figure 502: carrierDetail


C op

yr

ig

ht

m

at

j) In the controller of the CarrierSelection view, implement the function onInit. Get a reference to the panel that you have just created. Save the panel in a member variable.

412

Create a Fragment 1. Create a Fragment, named CarrierDetail. a) Create a Fragment and name it CarrierDetail. b) Implement the fragment in the following way: ●

an element of type ObjectHeader with attributes:


-

Carrname,

-

CurrCode,

-

Carrid, and

-

Url

●

will be displayed in a VerticalLayout

●

also create attribute Number with an empty string


Without this assignment NumberUnit would not be displayed.

pe rs on al us e


Figure 504: CarrierDetail implementation

C op

yr

ig

ht

m

at

c) Change the implementation of _handleValueHelpClose in such a way that fragment sap.training.flight.view.CarrierDetail will be instantiated. On this instance perform an element binding so that the panel contains the selected carrier.


413


pe rs on al us e


Figure 505: _handleValueHelpClose, implementation

C op

yr

ig

ht

m

at

d) Test your application.

414



LESSON SUMMARY You should now be able to: Describe the Object View, as defined in the SAP Fiori Guidelines

C op

yr

ig

ht

m

at


pe rs on al us e

●


415

Unit 14 Lesson 5

●



pe rs on al us e

Describing the List Report, as Defined in the SAP Fiori Guidelines

Describe the List Report, as defined in the SAP Fiori Guidelines

List Report

Problem and Solution Problem:

You want to display a large collection of items and the user should be able to take some actions Solution:

C op

yr

ig

ht

m

at

The List Report Floorplan can show a large collection of items and provide the some actions to the user.

416

Figure 506: List Report

The list report: ●

allows users to work with a large list of items and take actions

●

provides functions for filtering large lists


Lesson: Describing the List Report, as Defined in the SAP Fiori Guidelines

●

provides different ways of displaying the items

●

is only applicable when using full screen layout

Use the list report floorplan if: ●

●

you need to display and filter large lists of items

you want to combine different visualizations for large data sets, such as graphics and tables

Do not use the list report floorplan if:

the user work primarily on a specific list of items. If so the focus of the application lies more on actions and less on filtering. (See worklist floorplan)


●

pe rs on al us e

Use / Don't use

Figure 508: The Filter Area

C op

yr

ig

ht

m

at

Figure 507: General Structure

These functions are offered by the filter bar control (sap.ui.comp.smartfilterbar.SmartFilterBar), which is mandatory for any list report floorplan. When you use the filter bar as part of the list report floorplan, you do not need to make any specific modifications. For more information, see the guideline for the filter bar itself. The variant management functions allow users to define and manage predefined filter sets. They can set a default variant, and specify how the variant is executed. If Execute on Select is active, the variant is executed as soon as the user selects it (live update). In this case,


417


the content area is populated automatically. If Execute on Select is not active, the user can modify the query, but has to execute the search manually to display the data (delayed update).

The toolbar area: ●

pe rs on al us e

The Toolbar Area

can contain only basic table functionality such as table title(count), free text filter and table personalization

●

can contain alternative visualizations

●

can perform context sensitive actions only, when item is selected


The Content Area

There are various options for displaying large data sets ●

●

●

●

Table (sap.m.Table)

Analytical Table (sap.m.AnalyticalTable / sap.ui.comp.smarttable.SmartTable)

TreeTable (sap.ui.table.TreeTable)

Charts (sap.viz.ui5.controls.VizFrame)

Figure 509: Actions

C op

yr

ig

ht

m

at

●

List (sap.m.List)

418


Unit 14 Exercise 16

Business Scenario

pe rs on al us e

Implement a List Report

In the following exercises you will learn how to implement the ListReport UI Pattern with detail navigation.


This is the result of this exercise:

Figure 510: Output of the ListReport UI Pattern

Implement the tabular display

1. Implement the tabular display.

Implement the Details View

1. Implement the Details View.

Enhance the Routing Definition

1. Enhance the Routing Definition.

Implement the Flight Selection

C op

yr

ig

ht

m

at

1. Implement the Flight Selection.

Implement the Booking View Controller

1. Implement the Booking View Controller. Implement Booking Actions 1. Implement Booking Actions.


419

Unit 14 Solution 16

pe rs on al us e

Implement a List Report

Business Scenario

In the following exercises you will learn how to implement the ListReport UI Pattern with detail navigation.


This is the result of this exercise:

Figure 510: Output of the ListReport UI Pattern

Implement the tabular display

1. Implement the tabular display.

a) From the ObjectView exercise open the CarrierDetail fragment.

b) Enhance the implementation in such a way that below of the ObjectHeader element a table is displayed.

C op

yr

ig

ht

m

at

This table is to display all flights of the selected carrier.

420



pe rs on al us e


Figure 511: Table implementation

c) Save your changes and test the application.

Implement the Details View

1. Implement the Details View.

a) Create an XML view, name it Bookings, to display the bookings of a flight.

b) Adapt the controller of the Bookings view so that it inherits from BaseController.

Figure 512: Bookings.controller

C op

yr

ig

ht

m

at

c) Into the view implement a table that reads and displays the current bookings from entity set Flights.


421


pe rs on al us e


C op

yr

ig

ht

m

at

Figure 513: Bookings.view, fig 1

Figure 514: Bookings.view, fig 2

Note: The lines of code in the second screenshot must be added directly after the code lines of the first screenshot. Please don`t be confused, that the first screenshot ends with row 39 and the second starts with row 32. Enhance the Routing Definition 1. Enhance the Routing Definition.

422




pe rs on al us e

a) Enhance your routing in such a way that it is possible to navigate from the CarrierDetail fragment to Booking.view.xml. Define your routing in such a way that CarrierId, ConnId, and FlightDate can be forwarded to the navigation target.

Figure 515: Implementation of the routing definition

b) Enhance the implementation of the init function of Component.js so that the router with the routing configuration will be initialized.

Figure 516: init function

Implement the Flight Selection

a) Implement the event handler for the selectChange event of the flight data table. On selection of a flight the application is to navigate to the bookings page. Please consider that the flight date has to be encoded, otherwise there would be an error with the routing of the SAPUI5 appearance.

C op

yr

ig

ht

m

at

1. Implement the Flight Selection.


423


pe rs on al us e


Figure 517: handleFlightSelection

Implement the Booking View Controller

1. Implement the Booking View Controller.

a) Implement the Booking View Controller.

b) Define an _onObjectMatched function. This function is to be called when a navigation to the booking view takes place.

Figure 518: Function: _onObjectMatched

●

implement an event handler

●

that reacts to the incoming navigation event and

●

that calls function _onObjectMatched from the previous step

C op

yr

ig

ht

m

at

c) Implement the onInit function in the following way:

424


Figure 519: new functionality in onInit


d) Specify the function _bindView.

pe rs on al us e


Figure 520: Function: _bindView

e) Define a function _onBindChange. This function is to display a NotFound view if no data has been supplied by the backend. To do so please create a routing and a view.

C op

yr

ig

ht

m

at

Note: This step is optional.


425


pe rs on al us e


Figure 521: Function: _onBindChange

f) Test your application.

Implement Booking Actions

1. Implement Booking Actions.

a) Add three columns to the Bookings table in the Bookings view: ●

●

one column displays the current reservation status

the other columns contain push buttons to cancel a booking and to confirm a booking.

C op

yr

ig

ht

m

at

For the confirmation action use function ConfirmBooking of the Odata service, for the cancellation action use function CancelBooking. Both functions require the import parameters Carrid and Bookid. Implement corresponding CustomData definitions for the push buttons.

426

Figure 522: Implementation of booking actions

b) Specify the handleConfirmPressed function. Call Odata function ConfirmBooking. As parameters, use carrid and bookid.



Figure 523: Implementation of: handleConfirmPressed

pe rs on al us e


c) Implement the handleStornoPressed function. Call the Odata function CancelBooking. As parameters use carrid and bookid.

Figure 524: Implementation of: handleStornoPressed

d) Test your application.

Figure 525: Result of the task

C op

yr

ig

ht

m

at

This is the result:


427


LESSON SUMMARY You should now be able to: Describe the List Report, as defined in the SAP Fiori Guidelines

C op

yr

ig

ht

m

at


pe rs on al us e

●

428


Unit 14 Lesson 6



pe rs on al us e

Describing the Flat Object View, as Defined in the SAP Fiori Guidelines

●

Describe the Flat Object View, as defined in the SAP Fiori Guidelines

Flat Object View

Figure 526: Flat Object View


C op

yr

ig

ht

m

at

Problem:

You want to display all the information of an object on a long scrollable page and have the same layout for both the display and edit mode: Solution: The Flat Object View Floorplan provides a definition of such a fullscreen layout based pattern


429


pe rs on al us e


Figure 527: When to Use the Flat Object View?

C op

yr

ig

ht

m

at


430



pe rs on al us e

Lesson: Describing the Flat Object View, as Defined in the SAP Fiori Guidelines

Figure 529: Display Mode

C op

yr

ig

ht

m

at

Figure 530: Edit Mode


431

ht

ig

yr

C op


at

m

pe rs on al us e


432


Unit 14 Exercise 17

pe rs on al us e

Implement the EditPage Floorplan

Business Scenario


In this exercise you will implement an easy version of the EditPage floorplan. You will implement a fullscreen application that allows to toggle between display mode and edit mode with a button in the footer. Create a SAPUI5 project


Implement a Display Fragment

1. Implement a Display Fragment.

Implement the change mode

1. Implement the change mode.

Implement the view

1. Implement the view. Use the following data: ID

Text

Event handler

edit

Edit

handleEditPress

save

Save

handleSavePress

cancel

Cancel

handleCancelPress

Implement three functions

1. Implement a function _getFormElement.

2. Create a function with name _showFormFragment.

Test your application 1. Test your application.

C op

yr

ig

ht

m

at

3. Create a function with name _toggleButtonsAndView.


433

Unit 14 Solution 17

Business Scenario

pe rs on al us e

Implement the EditPage Floorplan


In this exercise you will implement an easy version of the EditPage floorplan. You will implement a fullscreen application that allows to toggle between display mode and edit mode with a button in the footer. Create a SAPUI5 project


a) Create a SAPUI5 project with a name your choice. As package identifier use com.sap.training.editpage. While creating the project, define an initial view with name S1.

C op

yr

ig

ht

m

at

b) Create a folder with name model, if it does not already exists, and create a file with name data.json in this folder. Specify the following JSON object there:

434

Figure 531: Implementation of: data.json

c) In the model folder create a file with name models.js, if it does not already exists. In this file, create a function createMockModel. This function is to create a JSON model with the above data and to return it to the caller.



pe rs on al us e


Figure 532: Implementation of: models.js

d) From your component implementation call function createMockModel and save the reference to the model in your component into the model identifier data.

Figure 533: Implementation

e) Open the controller implementation of your project and there perform an element binding to the JSON model object.

Figure 534: Controller Implementation

Implement a Display Fragment

1. Implement a Display Fragment.

a) In the view folder create a new file with name Display.fragment.xml.

b) Open this file. Create a FragmentDefinition and insert into it an element of type sap.ui.layout.Grid.

C op

yr

ig

ht

m

at

c) Define the content aggregation of the Grid element.


435


pe rs on al us e


Figure 535: Implementation of: Display.fragment.xml

C op

yr

ig

ht

m

at

d) Create two SimpleForm elements into the GridLayout.

436

Figure 536: Implementation of the SimpleForm elements

e) In the first SimpleForm element implement a Title element with a Text attribute. Assign the value Office to the Text attribute. Implement combinations from sap.m.Label and sap.m.Text elements for the display of the data model’s attributes as shown below.


Figure 537: Implementation of the first SimpleForm

pe rs on al us e



f) In the second SimpleForm element create a sap.ui.core.Title element and assign values Online to the Text attribute. Repeat this for attributes Url and Twitter.

Figure 538: Implementation of the second SimpleForm

g) Save your changes.

Implement the change mode

1. Implement the change mode.

a) In the view folder, create a new file with name Change.fragment.xml.

b) Open the file. Create a FragmentDefinition and insert into it an element of type sap.ui.layout.Grid.

Figure 539: Imlementation of: Change.fragment.xml

d) In the GridLayout, create two SimpleForm elements :

C op

yr

ig

ht

m

at

c) Define the content aggregation of the Grid element:


437


pe rs on al us e


Figure 540: Imlementation of: Change.fragment.xml, SimpleForm elements

e) Implement a title element in the first form as you did with the display fragment but replace the sap.m.Text elements with sap.m.Input elements.

Figure 541: Implementation of the title element

C op

yr

ig

ht

m

at

f) Repeat the previous step for the second SimpleForm:

Figure 542: Implementation of the second SimpleForm

g) Save your changes. Implement the view 1. Implement the view. Use the following data:

438



Text

Event handler

edit

Edit

handleEditPress

save

Save

handleSavePress

cancel

Cancel

handleCancelPress

a) Open view S1, created in the first step.

pe rs on al us e

ID

b) Define a footer aggregation into the Page element that has been created with the project template.


c) In the footer, define three elements of type sap.m.Button and give them the properties from the table above. Your view implementation should look like the screenshot:


C op

yr

ig

ht

m

at


e) Open the controller of view S1.

f) Create a JavaScript Objectmap with name _formFragments. Figure 544: _formFragments

Implement three functions 1. Implement a function _getFormElement. a) Implement a function _getFormElement. It has a passing parameter with name sFragmentName. The function is to instantiate the requested fragment and to return it to the caller. Thereby first should be a check whether an instance for the requested


439



pe rs on al us e

fragment already exists in the Map that has been defined in a previous step or whether a new instance has to be created.

Figure 545: Implementation of _getFormElement

2. Create a function with name _showFormFragment.

a) Create a function with name _showFormFragment, that allows the change between both modes. This function has a passing parameter with name sFragmentName. The caller sets the parameter depending on the mode (display mode or edit mode) with the right fragment name.

b) In the first step of the implementation the function gets the reference to the page object (via the byId function of the view). After this please call the removeAllContent function of the Page object. With the _getFormFragment function (and its parameter sFragmentName) retrieve the fragment object. Finally pass the Fragment object to the insertContent function of the Page object.


Figure 547: Implementation in onInit

d) Implement the onExit function of the controller in such a way that with the deletion of the controller instance all fragments that do exist at this moment will be removed from the object map.

C op

yr

ig

ht

m

at

c) Extend the onInit function and initialize your application with display mode.

Figure 548: Implementation of onExit

440



3. Create a function with name _toggleButtonsAndView. a) Create a function with name _toggleButtonsAndView. This function contains a Boolean passing parameter with identifier bEdit. This parameter is set by the caller with true for edit mode or with false for display mode.

pe rs on al us e

b) Depending on the mode, set the visibility of the buttons of the S1 view . In display mode the button with Id edit is to be displayed; in edit mode the edit button must be hidden and the buttons with Ids save and cancel are to be displayed.


c) Finally call function _showFragment. Depending on the value of the bEdit parameter pass either value Change or Display to the function.


d) In the controller, Implement the event handler handleSavePress. In this function merely call function_toggleButtonsAndView and pass value false.


C op

yr

ig

ht

m

at

e) Implement the event handler for the pressing of the edit button. Create function handleEditPress. Copy the currently displayed model data into a member variable _oSupplier and call _toggleButtonsAndView with value true.

Figure 551: Implementation of handleEditPress


441



pe rs on al us e

f) Implement the handleCancelPress event handler for the cancel button of the view. Reset the model data. Use thereby the clone _oSupplierof the previous step. Call function _toggleButtonsAndView with value false.

Figure 552: Implementation of handleCancelPress

Test your application

1. Test your application.

a) Start your application.

Figure 553: Start of the test

c) Now switch to edit mode with the Edit button. Change the data and press Cancel.

C op

yr

ig

ht

m

at

b) After the start of your application, it should be displayed in display mode.

442



pe rs on al us e


C op

yr

ig

ht

m

at



443


LESSON SUMMARY You should now be able to: Describe the Flat Object View, as defined in the SAP Fiori Guidelines

C op

yr

ig

ht

m

at


pe rs on al us e

●

444


Unit 14 Lesson 7



pe rs on al us e

Creating Main Entities, as Defined in the SAP Fiori Guidelines

●

Create main Entities, as defined in the SAP Fiori Guidelines

Main Entities


Problem:

The user needs to create or maintain objects. The user may need flexibility depending on the amount of data to be processed

Solution:

C op

yr

ig

ht

m

at

The Create and Edit floorplans with their different variants may help you to implement an easy to use UI for creating and maintaining objects.

Figure 555: The Edit Pattern and It's Variants


445


pe rs on al us e


Figure 556: Create Page

Edit Page - Simple Edit ● Used within a Split-Screen-App ●

yr

ig

ht

m

at

Figure 557: Edit Page

Flow:

C op

-

-

-

●

446

User clicks on the edit button Application switches into the edit-mode, user is able to modify the data, at the end save button is pressed After successful save-operation the updated object is marked in the master view. Details will show the modified entity

Make sure that a Data-loss message is shown when the user tries to navigate away


Lesson: Creating Main Entities, as Defined in the SAP Fiori Guidelines

Edit Page - Partial Edit Used when the user should be able to switch into the edit mode on every category of information shown in the Object-view

●

The edit mode is accessed via transparent button above the category

●

The Partial Edit is the preferred way to switch into the edit mode

●

pe rs on al us e

●

After switching into the edit-mode the edit-button will be replaced with save and cancel buttons

●

Show a data loss message if the user tries to navigate away

●

Partial Edit with Dialog is a specific variant of the standard floorplan

Use the variant if the switch from display mode into edit mode involves an extensive layout change


-

Edit Page with Subpages / Edit Flow

SAP Fiori distinguishes between two edit flows: ●

●

Local edit flow -

User edits one page by pressing the Edit-button.

-

Before navigate away save action is required

Global edit flow -

User press Edit on one page and every subpage linked to that page changes to the edit mode.

-

Navigation is unrestricted.

-

Discard Changes function is provided

-

Main page provides Save- and Cancel action

Local Edit Flow Local means that the user edits one page by pressing the edit-Button

●

●

m

at

●

Store the data by pressing the save-Button that is provided in the footer

There are various possibilities for implementing the save-procedure depending on the use case -

C op

yr

ig

ht

-

-

●

Click Save and Next brings the user to the next subpage and stays in the edit mode Click Save and Next brings the user to the next subpage and switches into the display mode Press Save stores the data and the user stays on the current page

To leave the page the user has to use the back-Button or the Home-Icon of the app header in the shell bar

Global Edit Flow ● Global means that the user clicks the Edit-Button on one page and all subpages will be switched into the edit mode


447


●

●

Subpages do not provide edit/save/cancel-Button, but they to provide discard-Changes and Back-to-Main-Page-buttons If there are identical input fields on Main Page and on Subpages only the field on the Main Pages is open for edit A marker called “modified” should be displayed when an object is modified (use sap.m.Table)

C op

yr

ig

ht

m

at


●

After the switch the edit-Button will be replaced with save- and cancel-Button

pe rs on al us e

●

448


Unit 14 Exercise 18

pe rs on al us e

Implement the Create Floorplan

Business Scenario

In this exercise you will enhance the existing application so that the user can book a flight. This is done with the Create floorplan.


This is the result:


Enhance the booking overview page

1. Enhance the booking overview page. Use the following data: Value

text

{i18n>createbooking}

icon

sap-icon://press

press

handleCreatePressed

C op

yr

ig

ht

m

at

Attribute


449

Unit 14 Solution 18

pe rs on al us e

Implement the Create Floorplan

Business Scenario

In this exercise you will enhance the existing application so that the user can book a flight. This is done with the Create floorplan.


This is the result:


Enhance the booking overview page

1. Enhance the booking overview page. Use the following data: Attribute

Value

text

{i18n>createbooking}

icon

sap-icon://press

press

handleCreatePressed

C op

yr

ig

ht

m

at

a) Open the Bookings.view.xml file and create a new push button in the footer. Assign the values to attributes text, icon from the table above.

450



Figure 559: Implementation of the footer

pe rs on al us e


b) Open the file i18n.properties in the directory i18n and create a new entry createbooking. To this entry enter a suitable value. c) Create a new XML view, named CreateBooking. To do so, choose the webapp folder and via the context menu call New → SAPUI5 View.

d) Adapt the implementation of the CreateBooking controller in such a way that it inherits from BaseController.

Figure 560: Implementation of CreateBooking

f) Open the manifest.json file and define a new target, call it createbooking. This target is to point to the previously created view.

C op

yr

ig

ht

m

at

e) Implement the view as follows:

Figure 561: Implementation of createbooking

g) Open the Bookings.controller.js file and specify function handleCreatePressed. This function is to navigate to the previously created target and is to pass values for carrid, connid, and fldate to the navigation target at navigation time.


451


pe rs on al us e


Figure 562: Implementation of: handleCreatePressed

h) In the CreateBookings view open the controller and specify function onInit:

Figure 563: Implementation of: onInit

C op

yr

ig

ht

m

at

i) Implement function _onDisplayMatched:

452



pe rs on al us e


Figure 564: Implementation of: _onDisplayMatched

C op

yr

ig

ht

m

at

j) Implement functionhandleSavePressed.

Figure 565: Implementation of: handleSavePressed

k) Implement function handleCancelPressed.

Figure 566: Implementation of: handleCancelPressed

l) Save your implementation.


453

ht

ig

yr

C op


at

m

pe rs on al us e


m) Test your application.

454



LESSON SUMMARY You should now be able to: Create main Entities, as defined in the SAP Fiori Guidelines

C op

yr

ig

ht

m

at


pe rs on al us e

●


455

Unit 14 Lesson 8

●



pe rs on al us e

Describing the Worklist, as Defined in the SAP Fiori Guidelines

Describe the Worklist, as defined in the SAP Fiori Guidelines

Worklist

Problem and Solution Problem:

You want to display a collection of items and process them or delegate them to someone other. Solution:

C op

yr

ig

ht

m

at

The worklist floorplan defines a floorplan that provides you with a floorplan to show a collection of items, display details of each item and process or delegate each of them.

456

Figure 567: When to Use Worklist?



pe rs on al us e

Lesson: Describing the Worklist, as Defined in the SAP Fiori Guidelines


Types of the Worklist Floorplan ● Simple Worklist: Used when working down a list of items ●

KPI Worklist: Allows the user to track a KPI while processing the worklist. The KPI can be displayed in the subheader of the application.

C op

yr

ig

ht

m

at

●

Category Worklist: Use the icon tab bar to provide a categorized access to specific lists of items


457

ht

ig

yr

C op


at

m

pe rs on al us e


458


Unit 14 Exercise 19

Business Scenario In this exercise you will implement the Worklist UI pattern.


1. Import the project template.

pe rs on al us e

Implement the Worklist Floorplan

2. Implement the worklist.


4. Implement the error handling.

C op

yr

ig

ht

m

at

5. Test the application.


459

Unit 14 Solution 19

Business Scenario In this exercise you will implement the Worklist UI pattern.


1. Import the project template.

pe rs on al us e

Implement the Worklist Floorplan

a) Import the project WorklistExerciseTemplate that is supplied by the trainer.

b) Make yourself familiar with the project’s parts.

2. Implement the worklist.

a) Open file Worklist.view.xml and make yourself familiar with the implementation.

b) Add a table to the FullscreenPage:

Figure 569: Implementation of the table

C op

yr

ig

ht

m

at

c) Specify the table as shown in the following screenshot:

460


Figure 570: Specification of the table

pe rs on al us e



d) Save your changes. Open the Worklist view’s controller. Make yourself familiar with the implementation. e) Implement function onSearch.

f) Implement the event handler onPress.

C op

yr

ig

ht

m

at

Figure 571: Implementation of onSearch

Figure 572: Implementation of onPress

3. Implement the ObjectView. a) Open file Object.view.xml. b) Add an element of type ObjectHeader to the content aggregation of the FulscreenPage element. Specify the table as shown in the following screenshot:


461


pe rs on al us e


Figure 573: Specification of the table

c) Open formatter.js file and implement a function numberUnit. This function is to round the value that is passed into it to two decimals.

Figure 574: Implementation of numberUnit

d) Open Object.controller.js file and make yourself familiar with the implementation. e) Implement the function _onObjectMatched. Read the objectId parameter from the navigation information. With this object Id, create the navigation path and finally bind the view to this path. Use function _bindView for the binding.

C op

yr

ig

ht

m

at

This function is executed when a navigation to the Object view takes place.

Figure 575: Implementation of _onObjectMatched

4. Implement the error handling. a) Open the ErrorHandler.js file and make yourself familiar with the implementation. b) Implement function _showServiceError. Implement the function in such a way that if there are several errors only the first error will be displayed. This function is used to display errors in a message box.

462



pe rs on al us e


Figure 576: Implementation of _showServiceError

5. Test the application.

a) The application is tested by using simulated data. Before you test the application make yourself familiar with the configuration of the MockServer. To do so open the project settings. In the project explorer choose the project and call via context menu entry Project Settings. In the next dialog select Mock Data. Make sure that the selection of the Mock Data Source is set to JSON.

b) Start your application. Select the index.html file and via context call Run → Run with Mock Data.

C op

yr

ig

ht

m

at

Figure 577: Mock data


463


LESSON SUMMARY You should now be able to: Describe the Worklist, as defined in the SAP Fiori Guidelines

C op

yr

ig

ht

m

at


pe rs on al us e

●

464


Unit 14 Lesson 9



pe rs on al us e

Describing the Draft Handling, as Defined in the SAP Fiori Guidelines

●

Describe the Draft Handling, as defined in the SAP Fiori Guidelines

Draft Handling

Drafting ● Stateful apps work with in-memory copy of data

●

-

Life of the copy is tied to the UI session

-

UI owns pessimistic locks

When editing data in a browser, the data is stateless -

●

In a statefull app the in-memory copy is replaced with a „draft“ document that is stored in a database

-

●

If the browser is closed or loses ist connection to the back-end all data modifications are lost

The draft document is the owner of pessimistic locks

The draft concept retains all data even if the browser is closed – no data is lost

Draft Handling: Draft Types Basic draft types include:

●

ht

m

at

●

-

New drafts – for initial data entry, where no active documents yet exist

-

Edit drafts – for editing an existing active document

Behavioural draft types include:

yr

ig

-

C op

-

-

●

Exclusive drafts – limit visibility to a specific user Shared drafts – may become visible to multiple users, but modified by only one user at a time Collaborative drafts – visible and modifiable by multiple users simultaneously

Each behavioural type has both a new and edit version -

For example, there is a Shared New and a Shared Edit draft type


465


pe rs on al us e


Figure 578: Draft Handling: Drafting in the Sample Apps

C op

yr

ig

ht

m

at

Figure 579: Draft Handling: Product.js Helper in Manage Products App

466



Figure 580: Draft Handling: ProductEdit Controller in Manage Products App

pe rs on al us e

Lesson: Describing the Draft Handling, as Defined in the SAP Fiori Guidelines

Figure 581: RemoveService.js


Describe the Draft Handling, as defined in the SAP Fiori Guidelines

C op

yr

ig

ht

m

at

●


467

Unit 14 Lesson 10

pe rs on al us e

Describing the SAP Fiori Locking

LESSON OBJECTIVES After completing this lesson, you will be able to: Describe SAP Fiori Locking


●

SAP Fiori Locking

Optimistic Locking Control – OData and ETags

OData uses HTTP ETags for optimistic concurrency control. A few special considerations apply for ETags: ●

●

when retrieving an Entry the server returns an ETag

when retrieving a single Entry, the ETag returned as a HTTP response header named ETag -

●

●

●

when getting several Entries in a feed, the ETag value is included as metadata in the Entry itself for POST, PUT and merge operations, the server computes a new ETag and returns it in a response header

When sending a PUT, MERGE or DELETE request, clients need to indicate an ETag in the IfMatch HTTP request header -

-

If it is acceptable to overwrite any version of the Entry in the server, then the value “*” may be used

If a given Entry has an ETag and a client attempts to modify or delete the Entry without an If-Match header the request should fail with a HTTP 412 response code

OData servers will often use weak ETags as a way of indicating that two resources may be semantically equivalent but a particular request may see a different representation of it

C op

yr

ig

ht

m

at

●

the server can choose to include the ETag to the body

468

The following interfaces provide methods for ETag handling: ●

/IWBEP/IF_MGW_APPL_SRV_RUNTIME method GET_IS_CONDITIONAL_IMPLEMENTED

●

/IWBEP/IF_MGW_REQ_ENTITY_U method GET_CONDITIONAL_INFO

●

/IWBEP/IF_MGW_REQ_ENTITY_D method GET_CONDITIONAL_INFO



Figure 582: Optimistic Locking Control

pe rs on al us e

Lesson: Describing the SAP Fiori Locking

The figure gives an review the syntax of the update of the ODataModel. Notice the last parameter is an ETag.

ETags allow us to perform optimistic locking control for our apps. LESSON SUMMARY You should now be able to:

Describe SAP Fiori Locking

C op

yr

ig

ht

m

at

●


469

ht

ig

yr

C op


at

m

pe rs on al us e


470


Unit 14

1. What types of messages do you know? Choose the correct answers. A Error


X

pe rs on al us e

Learning Assessment

X

B Warning

X

C Success

X

D Information

X

E Confirmation

2. What is a message popover? Choose the correct answers. X

A A message popover is a control that can handle multiple messages

X

B A message popover is a standard ui area of the SAP Launchpad

X

C A message popover is structure of a message area

3. What are common tabs for the icon tab bar in the detail area?

C op

yr

ig

ht

m

at


A Info Tab

X

B Notes Tab

X

C Attachment Tab

X

D Message Tab

X

E Data Tab

X

F Approver Tab


471


4. When do you use the initial page floorplan? Choose the correct answers. A An initial page floorplan is used in Master Detail Applications to choose single objects in the detail view

X

B An initial page floorplan is used when the user needs to navigate to a single object

X

C An initial page floorplan is used when you have to search for a specific entity in the master view

pe rs on al us e

X


5. What standard ui control of SAPUI5 is used when the user has to choose an entity of a set of data inside a dialog? Choose the correct answers. X

A sap.m.Dialog

X

B sap.m.SelectDialog

X

C sap.m.ChooseDialog

X

D sap.m.SelectionDialog

6. You want to display all the information of simple or complex object with different facets in a responsive way. What floorplan do you have to choose? Choose the correct answers. X

A Worklist

X

B Actionlist

X

C ObjectView

X

D ObjectList

7. How many facets are recommended for the object view?

C op

yr

ig

ht

m

at


472

X

A No limitations

X

B 5-7

X

C Up to 20

X

D 12



8. You want to display a large collection of items and the user should be able to take some actions. What floorplan do you have to choose?

X

A List Report

X

B Objectlist Report

X

C Entity Report

X

D Worklist Report


9. When do you use the list report floorplan?

pe rs on al us e



A You need to display and filter large lists of items

X

B The user work primarily on a specific list of items. If so the focus of the application lies more on actions and less on filtering. (See worklist floorplan)

X

C You want to combine different visualizations for large data sets, such as graphics and tables

10. What elements are part of the flat object view floorplan? Choose the correct answers. X

A Detail App Header

X

B Footer Toolbar

X

C Footer Buttonbar

X

D Object Header

X

E Content App Area

C op

yr

ig

ht

m

at

11. In what area of the flat object view floorplan do you add, in the standard case, your action buttons? Choose the correct answers. X

A Detail App Header

X

B Footer Toolbar

X

C Footer Buttonbar

X

D Object Header

X

E Content App Area


473


12. What patterns do you know for maintaining entities?

X

A Create page

X

B Edit page

X

C Edit with workflow

X

D Edit with Subpages

X

E Delete page


13. How do you trigger the create mode in a Master-Detail-application?

pe rs on al us e



A In the master list footer

X

B In the detail content area

X

C In the detail area footer

X

D In the master list

14. What worklist floorplans do you know? Choose the correct answers. X

A Simple worklist

X

B Standard worklist

X

C Category Worklist

X

D KPI Worklist

X

E Default Worklist

C op

yr

ig

ht

m

at

15. Is it recommended to implement the worklist floorplan when you want to show large items lists with data visualization?

474


A Yes

X

B No

X

C It depends on the type of visualization



16. What basic draft types are described by the SAP Fiori Guidelines?

X

A New drafts

X

B Delete drafts

X

C Edit drafts

X

D Change drafts


17. When do you use a shared draft?

pe rs on al us e


18. How do you implement optimistic concurrency control within OData? Choose the correct answers. X

A This is not possible

X

B Implementing the softstate

X

C Using ETags

X

D Implementing a semaphore object

19. What interfaces are providing a method for ETag handling? Choose the correct answers.

A /IWBEP/IF_MGW_APPL_SRV_RUNTIME

X

B /IWBEP/IF_MGW_REQ_ENTITY_U

X

C /IWBEP/IF_MGW_REQ_ENTITY_D

X

D /IWBEP/IF_MGW_REQ_ENTITY_C

C op

yr

ig

ht

m

at

X


475

Unit 14

pe rs on al us e


1. What types of messages do you know? Choose the correct answers. A Error


X X

B Warning

X

C Success

X

D Information

X

E Confirmation

2. What is a message popover? Choose the correct answers. X

A A message popover is a control that can handle multiple messages

X

B A message popover is a standard ui area of the SAP Launchpad

X

C A message popover is structure of a message area

3. What are common tabs for the icon tab bar in the detail area? Choose the correct answers. A Info Tab

X

B Notes Tab

X

C Attachment Tab

X

D Message Tab

X

E Data Tab

X

F Approver Tab

C op

yr

ig

ht

m

at

X

476



4. When do you use the initial page floorplan? Choose the correct answers. A An initial page floorplan is used in Master Detail Applications to choose single objects in the detail view

X

B An initial page floorplan is used when the user needs to navigate to a single object

X

C An initial page floorplan is used when you have to search for a specific entity in the master view

pe rs on al us e

X


5. What standard ui control of SAPUI5 is used when the user has to choose an entity of a set of data inside a dialog? Choose the correct answers. X

A sap.m.Dialog

X

B sap.m.SelectDialog

X

C sap.m.ChooseDialog

X

D sap.m.SelectionDialog

6. You want to display all the information of simple or complex object with different facets in a responsive way. What floorplan do you have to choose? Choose the correct answers. X

A Worklist

X

B Actionlist

X

C ObjectView

X

D ObjectList

C op

yr

ig

ht

m

at

7. How many facets are recommended for the object view? Choose the correct answers. X

A No limitations

X

B 5-7

X

C Up to 20

X

D 12


477


8. You want to display a large collection of items and the user should be able to take some actions. What floorplan do you have to choose?

X

A List Report

X

B Objectlist Report

X

C Entity Report

X

D Worklist Report


9. When do you use the list report floorplan?

pe rs on al us e



A You need to display and filter large lists of items

X

B The user work primarily on a specific list of items. If so the focus of the application lies more on actions and less on filtering. (See worklist floorplan)

X

C You want to combine different visualizations for large data sets, such as graphics and tables

10. What elements are part of the flat object view floorplan? Choose the correct answers. A Detail App Header

X

B Footer Toolbar

X

C Footer Buttonbar

X

D Object Header

X

E Content App Area

C op

yr

ig

ht

m

at

X

478



11. In what area of the flat object view floorplan do you add, in the standard case, your action buttons?

A Detail App Header

X

B Footer Toolbar

X

C Footer Buttonbar

X

D Object Header

X

E Content App Area


X

pe rs on al us e


12. What patterns do you know for maintaining entities? Choose the correct answers. X

A Create page

X

B Edit page

X

C Edit with workflow

X

D Edit with Subpages

X

E Delete page

13. How do you trigger the create mode in a Master-Detail-application? Choose the correct answers.

A In the master list footer

X

B In the detail content area

X

C In the detail area footer

X

D In the master list

C op

yr

ig

ht

m

at

X


479


14. What worklist floorplans do you know?

A Simple worklist

X

B Standard worklist

X

C Category Worklist

X

D KPI Worklist

X

E Default Worklist


X

pe rs on al us e


15. Is it recommended to implement the worklist floorplan when you want to show large items lists with data visualization? Choose the correct answers. X

A Yes

X

B No

X

C It depends on the type of visualization

16. What basic draft types are described by the SAP Fiori Guidelines? Choose the correct answers. X

A New drafts

X

B Delete drafts

X

C Edit drafts

X

D Change drafts

A shared draft is used, when multiple users are working with the same list of entities, but an entity is only modified by only one user at a time.

C op

yr

ig

ht

m

at

17. When do you use a shared draft?

480



18. How do you implement optimistic concurrency control within OData?

X

A This is not possible

X

B Implementing the softstate

X

C Using ETags

X

D Implementing a semaphore object

19. What interfaces are providing a method for ETag handling?

pe rs on al us e




A /IWBEP/IF_MGW_APPL_SRV_RUNTIME

X

B /IWBEP/IF_MGW_REQ_ENTITY_U

X

C /IWBEP/IF_MGW_REQ_ENTITY_D

X

D /IWBEP/IF_MGW_REQ_ENTITY_C

C op

yr

ig

ht

m

at

X


481

ht

ig

yr

C op


at

m

pe rs on al us e


482


SAP Fiori Extension Concept

Lesson 1 Explaining the Extension Point Concept of SAPUI5

484


Lesson 2

pe rs on al us e

UNIT 15

Implementing View Replacements, Modifications and Extensions Exercise 20: Implement an ExtensionPoint

493 499

Lesson 3

Implementing Controller Extensions and Hook Methods

507

Lesson 4

Extending Translations with Customer Properties Exercise 21: Provide an i18n Resource Text Customization

512 515

UNIT OBJECTIVES

Explain the extension point concept of SAPUI5

●

Implement View replacements, modifications and extensions

●

Implement Controller extensions and hook methods

●

Extend translations with customer properties

C op

yr

ig

ht

m

at

●


483

Unit 15 Lesson 1

pe rs on al us e

Explaining the Extension Point Concept of SAPUI5

●


LESSON OBJECTIVES After completing this lesson, you will be able to: Explain the extension point concept of SAPUI5

Extension Point Concept of SAPUI5 Scenario

In this unit, you will learn to use the extension point concept of SAPUI5. SAPUI5 and Extensibility

SAPUI5 allows application developers to: ● Include their own JavaScript, HTML and CSS into UI5 based pages ●

●

●

●

Include other JavaScript libraries where UI5 is lacking controls or functionality

Create composite controls from existing UI5 controls Write new UI libraries and new controls Write plug-ins for the UI5 core

C op

yr

ig

ht

m

at

This way, SAPUI5 development groups should not become a bottleneck for application groups in need of a certain functionality.

Figure 583: SAPUI5 Development Environment

Depending of the use case, you can choose one of the following development environments:

484


Lesson: Explaining the Extension Point Concept of SAPUI5

SAP Web IDE Develop complex apps using latest innovations Develop and extend SAP Fiori apps

Extend SAP Web IDE with plug-ins and templates Web IDE available in the Hana Cloud Platform and On Premise SAPUI5 Tools for Eclipse Develop apps for simple use cases OpenUI5


Develop apps with the environment of your choice

pe rs on al us e

Develop mobile hybrid applications

Node.js: Modify OpenUI5 based in Node.js used as a server with a build process based in Grunt

C op

yr

ig

ht

m

at

Figure 584: Model-View-Controller (MVC) & Extension Possibilities


485


pe rs on al us e

Unit 15: SAP Fiori Extension Concept

Figure 585: Find out what extensibility is provided by the App

Figure 586: UI Extensibility

at

Configuration of Components

C op

yr

ig

ht

m

Customization is based on the configuration of Components. A special area of their configuration is dedicated to customization information. This configuration is located in a JavaScript file named Component.js, or Configuration.js.

Custom extension project Customization can be performed on a custom application that extends a delivered standard application. The custom application is located in a separate project. Both applications contain the Component.js (or Configuration.js) file and the custom application contains all the changes. Modification free The delivered standard application remains unchanged and hence the extension is considered to be modification free.

486



Custom application The custom application becomes the start-up project which then launches the delivered standard application with the additional customizing configuration.


pe rs on al us e

For more details, see https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/ Customization.html


Configuration of Components

Customization is based on the configuration of Components. A special area of their configuration is dedicated to customization information. This configuration is located in a JavaScript file named Component.js, or Configuration.js.

Custom extension project

Customization can be performed on a custom application that extends a delivered standard application. The custom application is located in a separate project. Both applications contain the Component.js (or Configuration.js) file and the custom application contains all the changes. Modification free

C op

yr

ig

ht

m

at

The delivered standard application remains unchanged and hence the extension is considered to be modification free.

Custom application The custom application becomes the start-up project which then launches the delivered standard application with the additional customizing configuration. For more details, see https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/ Customization.html


487


Figure 588: Create an Extension Project

pe rs on al us e


C op

yr

ig

ht

m

at

Figure 589: Repository Selection

488

Figure 590: Select the Application to Extend



pe rs on al us e


Figure 591: Name of the Extension Project

C op

yr

ig

ht

m

at

Figure 592: Create an Extension Project - Confirmation


489


pe rs on al us e


Figure 593: The Extensibility Pane

C op

yr

ig

ht

m

at

Figure 594: Open Extension Code

490



pe rs on al us e


Figure 595: Extension Options of SAP Web IDE

Manifest.json

Extension configuration exists within manifest.json of the extended application by utilizing the following properties: ●

●

●

●

sap.ui.viewExtensions is used for providing custom view content in a specified extension point in the standard delivered application

sap.ui.viewModifications is used for overriding certain properties of controls in the standard delivered application sap.ui.viewReplacements is used for replacing a view in a delivered standard application with a custom view

sap.ui.controllerExtensions is used for replacing a controller in a delivered standard application with a custom controller

These are the methods that build upon the standard application's Component.js file allowing the original to be extended by the extension project.

C op

yr

ig

ht

m

at

The function viewModifications is used to hide or show different properties. But this is somewhat limited.


491


pe rs on al us e


Figure 596: Component.js Example

Figure 597: Runtime and Design-Time Representation

m

at


Explain the extension point concept of SAPUI5

C op

yr

ig

ht

●

492


Implementing View Replacements, Modifications and Extensions



pe rs on al us e

Unit 15 Lesson 2

●

Implement View replacements, modifications and extensions

View Replacements, Modifications and Extensions

View Extension

SAPUI5 uses extension points for extending standard views with custom content.

The assignment of a custom view to an extension point is done in component customizing. Extension points are inserted in a standard view to indicate the position within the view where you can insert custom content. In XML views, the tag is used and replaced by the controls provided by the customer. The tag should, therefore, be placed in the view where also a control would be placed and document the types of controls that are suitable.

Caveats - View Extensions

The following are some basics about Caveats - View Extensions: ●

●

C op

yr

ig

ht

m

at

●

●

●

if the extension point is removed or renamed or in an area or container which is invisible under certain conditions, the view extension will no longer be applied

if the view name is changed or the extension point is moved to a different view, the view extension will no longer be applied if the controls around the extension point have changed or the extension point has been moved to a different environment inside the same view, view extensions may look weird, have a broken layout or display or do not really fit the new environment if the updated application requires the extension to be of a certain control type, the view extension may break the application if custom code relies on the presence of the extensions, the view extension may break the application


493


pe rs on al us e


Figure 598: Add Extension to Existing Extension Project

Figure 599: View / Fragment Extensions in the SAP Web IDE

View Modification

at

The following are some properties of the view modification:

view modification is currently restricted to the visible property of controls

●

the controls must have the visible property and the control's ID must be defined in the view

●

C op

yr

ig

ht

m

●

494

●

the view name together with the control ID uniquely determines the control in the standard application view modification is available for XML views, JS views and HTML views



pe rs on al us e

Lesson: Implementing View Replacements, Modifications and Extensions

Figure 600: View Modification within the Extensibility Pane

C op

yr

ig

ht

m

at

Figure 601: View Modifications

Figure 602: Working with the Extension Pane


495


Figure 603: Working with the Extension Pane

pe rs on al us e


C op

yr

ig

ht

m

at

Figure 604: Result of the View Modification

Figure 605: Example: View Modification

496



pe rs on al us e


Figure 606: Example: View Modification - manifest.json

Caveats - View Modifications

The following are properties of Caveats - View Modifications:

●

●

if the original view name is changed or the view is no longer used, an invalid view modification will no longer be applied however, a view modification is simply ignored and will never lead to a crash

C op

yr

ig

ht

m

at

●

if the original control is no longer used or has a different or not a given ID, a view modification will no longer be applied

Figure 607: Controller Hook Methods in the SAP Web IDE


497


Figure 608: View Replacement

pe rs on al us e


Caveats - View Replacement

If the original view name is changed or the view is no longer used, view replacements will no longer be applied.

C op

yr

ig

ht

m

at

As long as no other custom code relies on the view to be present, view replacements should not cause a crash.

498


Unit 15 Exercise 20

Business Example

pe rs on al us e

Implement an ExtensionPoint


In this exercise you will extend the flight data application. View Bookings for the display of all bookings is to be extended so that flight information will be displayed above the bookings table. This is the result of this exercise:


Note: In this exercise, when ever the figures include ##, replace ## by the number, your trainer assigned to you.

1. Define an extension point.

C op

yr

ig

ht

m

at

2. Implement the extension point.


499

Unit 15 Solution 20

Business Example

pe rs on al us e

Implement an ExtensionPoint


In this exercise you will extend the flight data application. View Bookings for the display of all bookings is to be extended so that flight information will be displayed above the bookings table. This is the result of this exercise:


Note: In this exercise, when ever the figures include ##, replace ## by the number, your trainer assigned to you.

1. Define an extension point.

a) Create a copy of your project FlightSystem or continue to work on this project.

b) Open Bookings.view.xml file.

C op

yr

ig

ht

m

at

c) Create an extension point, and name it bookingsextensionpoint directly below of the content aggregation of the page.

500



pe rs on al us e


Figure 610: Implementation of: Bookings.view.xml


e) Open manifest.json file and concatenate your group number to the already existing value at attribute id in sap.app section.

C op

yr

ig

ht

m

at

Note: In the following screenshot ## is used to mark the place in file manifest.json where you have to add your group number.

Figure 611: Implementation of manifest.json


501


f) Deploy the project on the training’s frontend server. As application name use ZFlightSystem##.

2. Implement the extension point. a) Select File → New → Extension Project.

pe rs on al us e

Note: You will be given the access information through the trainer. If you have already deployed during the class please use the Web IDE’s update function to update the existing application on the frontend server.


b) In the following dialog press Select Application and choose SAPUI5 ABAP Repository. c) From the list of existing applications choose your application ZFlightSystem##. Confirm with OK.

Figure 612: Application selection

Note: The system shown here is only an example. The system in your class may have a different identifier. As well the shown application is only symbolic. Please choose the application that you have created.

C op

yr

ig

ht

m

at

d) After confirming the selection dialog choose Next. Your dialog should look like the following screenshot:

502

Figure 613: New Extension Project, step 1

e) Confirm the next dialog with Finish. Make sure that Open extension project in extensibility pane is checked.


Figure 614: New Extension Project, step 2


After this dialog the SAP Web IDE’s Extension Tool opens up.

pe rs on al us e


Figure 615: SAP Web IDE Extension Tool

Figure 616: Path

ht

m

at

f) Expand Bookings —> sap.m.page —> content —> bookingsextensionpoint and press Extend. Choose Extend View/Fragment.

C op

yr

ig

Note: It might happen, that the Expand icon is not displayed. Nevertheless it is possible to expand the tree. g) The next dialog informs you, that the implementation of the extension point has been added to your extension project. Choose Open Extension Code.


503


pe rs on al us e

Figure 617: Open Extension Code


h) In your extension project, open the Component.js file. Take a look at the generated code.

Figure 618: Generated code of Component.js

i) The SAP Web IDE opens the fragment containing the extension code for the extension point.

C op

yr

ig

ht

m

at

Your extension project should look like the following;


j) Open the fragment, if this did not happen automatically. As you can see it contains the decommented code of view Bookings. k) Delete the decommented code of the Bookings view from the extension fragment. l) Add an element of type sap.m.Title and assign a suitable value to the text property. m) Define an element of type ObjectHeader, with Id exObjHeader. Of the flight show the Carrid property in the title attribute and show the Connid property in the number

504




pe rs on al us e

attribute. Add three elements of type ObjectAttribut to aggregation attributes. These attributes are to display the properties Seatsocc, Seatsmax and Fldate of the flight.

Figure 620: Implementation of Bookings_bookingsextension

n) Save your application. o) Test your application.


C op

yr

ig

ht

m

at

The result should look like the following:


505


LESSON SUMMARY You should now be able to: Implement View replacements, modifications and extensions

C op

yr

ig

ht

m

at


pe rs on al us e

●

506


Unit 15 Lesson 3



pe rs on al us e

Implementing Controller Extensions and Hook Methods

●


Controller Extensions and Hook Methods Controller Extension

The following are properties of the controller extension:

●

●

●

Extend the controller of a standard SAP Fiori application with customer specific functionality

Methods others then the standard hook methods of the controller are replaced by implementing a method with the same name in the custom controller Standard hook methods are not replaced with the corresponding methods in the custom controller the methods are processed in the following way:

-

-

Custom implementations of onInit and onAfterRendering are called after the corresponding method of the base controller are processed Custom implementations of onExit and onBeforeRendering are called before the corresponding method of the base controller are processed

C op

yr

ig

ht

m

at

The new controller extends the controller that is provided by SAP. Methods of the custom controller override standard methods with the same name (except for the controller lifecycle methods that are called in addition to the original controller method implementations). When overriding a controller method, any functionality that was previously provided by the SAP controller in this method is no longer available. Likewise, any future changes made to the SAP controller method implementation will not be reflected in the custom controller. Providing Hooks in the Standard Controller The following are properties of hooks: ●

Hooks are extension points in the controller code

●

Hooks make the extension concept for controller code much more stable

●

Instead of override call the specific method from the custom controller

Attention:


507


●

a Hook works only for one extension layer

●

the last extension overrides any other hook implementation

Providing Hooks in the Standard Controller To prode hooks in the standard controller, perform the following steps:

pe rs on al us e

if multi-layer extensions are needed it is recommended that middle-layer extensions provide and document their own hook function

●

1. in the application, identify a strategic location within the controller code where customers may want to plug in and execute their customized code.


2. in the application, define a new function name which is reserved for the extension, document the function and any arguments the function may receive or return.

3. add code lines in the application (see code snippet below) to check whether the function has been implemented, and, if so, to call the function. We also recommend to implement sanity checks for return values. 4. the customer can then configure a controller extension, implementing exactly this one function. 5. SAPUI5 runtime merges the new controller extension into the standard controller. If customizing is enabled, the new function can be executed.

C op

yr

ig

ht

m

at

Figure 622: Example for Working with Controller Hooks

Note: This only works for one extension layer as the most specific or last extension overrides any other hook implementations. To allow multi-layer extensions, we recommend that middle-layer extensions provide and document their own hook functions. This also requires flat, non-inherited controllers defined with the sap.ui.controller(...) function used as extension controller, and not with typed controllers.

508


Lesson: Implementing Controller Extensions and Hook Methods

Controller Replacement For a controller replacement, the following guidelines apply:

●

●

a view that replaces a standard view can use the standard controller of the replaced view a view that replaces a standard view can use the standard controller and extend the standard controller a view that replaces a standard view can use a totally new controller


●

standard controller can be replaced by specifying a new controller name in a replacement View and implementing this Controller

pe rs on al us e

●

C op

yr

ig

ht

m

at

Figure 623: Controller Extension SAP Web IDE

Figure 624: Create a Copy or a New Empty Controller


509


pe rs on al us e


Figure 625: Confirm the Controller Enhancement/Replacement

C op

yr

ig

ht

m

at


Figure 627: Copy of an Existing Controller

510


Lesson: Implementing Controller Extensions and Hook Methods

Caveats - Controller Extensions The following are guidelines for the use of Caveats - Controller Extensions:

●

●

If the extension code makes assumptions about the application which are no longer valid after an update, controller extensions can lead to a crash If original code is overwritten which is required for the application to run properly, controller extensions can lead to a crash If the controller name is changed, controller extensions are no longer applied


●

If the extension code accesses parts of the original application which are changed, for example, removed, have a different type or a different ID, controller extensions can cause a crash

pe rs on al us e

●



C op

yr

ig

ht

m

at

●


511

Extending Translations with Customer Properties

●



pe rs on al us e

Unit 15 Lesson 4

Extend translations with customer properties

Translations Extended with Customer Properties

Figure 628: i18n Resource Text Customization

It is possible to enhance the ResourceModel with custom resource bundles.

The ResourceModel tries to resolve the i18n text from the customized bundle first.

C op

yr

ig

ht

m

at

If text does not exist in the customized bundle the ResourceModel tries to look up in the standard bundle.

512

Figure 629: Customize i18n-Texts



pe rs on al us e

Lesson: Extending Translations with Customer Properties

Figure 630: Change and Extend the i18n-File

Useful Links

SAP Fiori: Official documentation http://help.sap.com/fiori . Additional Related Information to SAP Fiori: ●

●

SAP Web Dispatcher: http://help.sap.com/saphelp_oil472/helpdata/en/5f/ 7a343cd46acc68e10000000a114084/frameset.htm SAP NetWeaver Gateway 2.0: http://help.sap.com/nwgateway20

SCN (SAP Community Network):

●

What is SAP Fiori (provided by RIG): http://scn.sap.com/docs/DOC-41598

●

SAPUI5: http://scn.sap.com/community/developer-center/front-end

●

SAP for Mobile: http://scn.sap.com/community/mobile

UI5:

●

https://openui5.hana.ondemand.com/

●

OpenUI5: http://sap.github.io/openui5/

ht

m

at

●

●

UI Development with SAPUI5 documentation: https://help.hana.ondemand.com/help/ frameset.htm?e8fdaa44bb5710148368de02b150bce3.html

SAP HANA Marketplace: http://marketplace.saphana.com.

C op

yr

ig

UI Development Toolkit for HTML5 - Demo Kit (interactive doc on SAPUI5 / OpenUI5): https://sapui5.netweaver.ondemand.com/sdk/


513

ht

ig

yr

C op


at

m

pe rs on al us e


514


Unit 15 Exercise 21

Business Scenario

pe rs on al us e

Provide an i18n Resource Text Customization

In this exercise you will add language dependent texts to the fragment from the previous exercise. To achieve this you will use the SAPUI5 language extension concept.


C op

yr

ig

ht

m

at


This is, how it should look like:

Note: In this exercise, when the values include ##, replace ## by the number, your trainer assigned to you.

1. Create a translation file.


515

Unit 15 Solution 21

Business Scenario

pe rs on al us e

Provide an i18n Resource Text Customization

In this exercise you will add language dependent texts to the fragment from the previous exercise. To achieve this you will use the SAPUI5 language extension concept.


This is, how it should look like:

C op

yr

ig

ht

m

at


Note: In this exercise, when the values include ##, replace ## by the number, your trainer assigned to you.

1. Create a translation file. a) Choose the extension project ZFLIGHTSYSTEM##Extension from the previous exercise.

516



Figure 632: New translation file, step 1

pe rs on al us e

b) In the context menu choose New → Extension. A dialog appears in which you can create extensions for existing extension projects.


c) Check whether the correct project is shown in the project selection and press Next.

d) In the next dialog choose i18n Resource Text Customization and confirm with Next.

Figure 633: New translation file, step 2

e) Confirm the next dialog with Finish.


g) Open the i18n.properties file and add the following lines at the end.

C op

yr

ig

ht

m

at

f) The assistant has created a new folder, called i18n, and in this folder a new file, called i18n.properties was created. Your project should look like shown below.


517


pe rs on al us e


Figure 635: Extension of: i18n.properties

h) Save your changes.

C op

yr

ig

ht

m

at

i) Open the extension fragment and specify the text attributes according to the common SAPUI5 notations. Specify as well the binding of the title attribute.

Figure 636: Implementation of Bookings_bookingsextensions

j) Save your changes and run your extension project. The result should look like shown below.

518


ht

ig

yr

C op


at

m

pe rs on al us e


Figure 637: Result


519


LESSON SUMMARY You should now be able to: Extend translations with customer properties

C op

yr

ig

ht

m

at


pe rs on al us e

●

520


Unit 15

pe rs on al us e

Learning Assessment

1. What different types of extensions are described by the extension concept of SAPUI5? Choose the correct answers. A View Extension


X X

B View Modification

X

C View Replacement

X

D Controller Extension

X

E Model Replacement

2. Where can you find out what extension aspects are provided by a SAP Fiori standard app?

3. What tag is used inside XMLViews to define an extension point? Choose the correct answers. A ExtendPoint

X

B ExtensionPoint

X

C ExtensionAspect

X

D Extension

C op

yr

ig

ht

m

at

X

4. What kind of customizing do you have to define when you want to hide an ui-element? Choose the correct answers. X

A sap.ui.viewElementModification

X

B sap.ui.viewModifications

X

C sap.ui.elementModification

X

D sap.viewModifications


521


5. What of the following ae properties of hooks? Choose the correct answers. A Hooks are extension points in the controller code

X

B Hooks make the extension concept for controller code much more stable

X

C Instead of override call the specific method from the custom controller

X

D Hooks are extension points in view controllers

X

E Hooks do only work only when using OData-models

C op

yr

ig

ht

m

at


pe rs on al us e

X

522


Unit 15

pe rs on al us e


1. What different types of extensions are described by the extension concept of SAPUI5? Choose the correct answers. A View Extension


X X

B View Modification

X

C View Replacement

X

D Controller Extension

X

E Model Replacement

2. Where can you find out what extension aspects are provided by a SAP Fiori standard app? The SAP Fiori Apps Library provides a detailed description about the extensions.

3. What tag is used inside XMLViews to define an extension point? Choose the correct answers. A ExtendPoint

X

B ExtensionPoint

X

C ExtensionAspect

X

D Extension

C op

yr

ig

ht

m

at

X

4. What kind of customizing do you have to define when you want to hide an ui-element? Choose the correct answers. X

A sap.ui.viewElementModification

X

B sap.ui.viewModifications

X

C sap.ui.elementModification

X

D sap.viewModifications


523


5. What of the following ae properties of hooks? Choose the correct answers. A Hooks are extension points in the controller code

X

B Hooks make the extension concept for controller code much more stable

X

C Instead of override call the specific method from the custom controller

X

D Hooks are extension points in view controllers

X

E Hooks do only work only when using OData-models

C op

yr

ig

ht

m

at


pe rs on al us e

X

524


Lean Development Infrastructure

Lesson 1

526


Understanding the Lean Development Infrastructure

pe rs on al us e

UNIT 16

UNIT OBJECTIVES

Understand the Lean Development Infrastructure

C op

yr

ig

ht

m

at

●


525

Understanding the Lean Development Infrastructure

●



pe rs on al us e

Unit 16 Lesson 1


Lean Development Infrastructure

As major part of the development is the set up of the project team. In this unit we give some ideas about a “lean” development infrastructure.

Figure 638: Fiori Development Projects

Continuous Integration

Continuous Integration means:

Continuous Integration (CI) is a practice that involves developers checking-in their code several times a day to a central code repository

at

●

m

●

●

C op

yr

ig

ht

●

526

●

each time code is checked in, automated builds and tests run problems are detected early

this practice requires: a Continuous Integration server which runs the automated builds and tests a version control system that tracks changes in the codebase



pe rs on al us e

Lesson: Understanding the Lean Development Infrastructure

Figure 639: Development Process

At the beginning of the development process each application developer of the project team has to setup his personal development environment. Currently Web IDE (former called WATT resp. River RDE) and also the local Eclipse can be used.

Even if you can use also Eclipse it is recommended to use SAP Web IDE as development environment. In case you want to create a new application you must use Web IDE for the initial application content creation due to the Fiori templates are no longer supported in Eclipse. But in general it is of course possible to use both development environments in parallel, so that you can also use local Eclipse if you like or in situations where it is not possible or difficult to work online. To check in and check out source changes done in the personal development environment to the central Git repository (called "Fetch" and "Push and Commit") a Gerrit configuration of the development environment is needed. Each developer has based on his project membership the authority to use the central Git repository, and to do a code review via the Gerrit tool. Only a reviewed and approved code change will be merged into the Git repository. Additionally, a Fiorivoter resp. Gerrit Voter Job running on the Build Server (Jenkins Job) of the development infrastructure performs automatically a Maven test build as technical code check after each Push and Commit.

C op

yr

ig

ht

m

at

Also automatically triggered by the development infrastructure is the upload to the translation system where localization relevant code elements are translated to different languages, and again the download back into the development and test landscape. The repository management part is taken over by Nexus in which built applications are stored and from where the upload is done to distribute applications to the ABAP standalone UI test systems. Development tests can be done in the local Tomcat with mock data but also with backend data by using oData Services. Thus, each developer is able to test his UI changes without backend services at all or with backend data before publishing his changes to other developers via merge into the central Git. If needed also a central Tomcat server can be installed to test centrally the Fiori UI before dispatching to the ABAP UI test systems, even if this option is mostly not used due to administration effort (i.e. manual upload).


527


Figure 640: Lean DI Overview: Tools

pe rs on al us e

Unit 16: Lean Development Infrastructure

Git is a free & open source, distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Every Git clone is a full-fledged repository with complete history and full revision tracking capabilities, not dependent on network access or a central server. Branching and merging are fast and easy to do. The central Git/Gerrit repository contains and controls the project source code. It is a distributed version control system keeping track of the developed software revisions/source code with a corresponding hub in the Gerrit code review tool for the project. Jenkins is an application which executes and monitors repeated jobs. It has extensive support for continuous build, test, and integration of software projects, but due to its flexibility it is very well suited for all kinds of development processes Nexus

Nexus - a remote Maven repository. Nexus allows you to share and reference versioned components. For more information, see Nexus and Nexus Landscape. Release Build

C op

yr

ig

ht

m

at

The ldirelease release server is an offering of Lean DI which uses Jenkins, but not as continuous integration server. The release server is only used to produce software releases in an SAP standard compliant way.

528



pe rs on al us e

Lesson: Understanding the Lean Development Infrastructure

Figure 641: Developer's Workplace: SAP Web IDE on SAP HANA Cloud Platform

The following diagram gives an overview of the Developer's Workplace using SAP Web IDE environment:

●

●

●

●

●

C op

yr

ig

ht

m

at

●

●

SAP Web IDE is available in the HANA Cloud platform

While source code is stored in a file system via Orion it is possible to use Git to manage App projects.

Orion is an open source platform for cloud based development. In SAP Web IDE, Orion is mainly used for the Git integration SAP UI5 apps can be deployed in SAP HCP or SAP Gateway.

In case of SAP HCP the app is retrieved from SAP HCP while the data is retrieved from the on premise SAP Business Suite Systems via an on premise SAP Gateway system that is connected to SAP HCP via the SAP HANA Cloud Connector. Retrieving data from two different web pages is usually not supported by modern browsers that support the same origin policy. The problem is solved by using the HTML5 App Dispatcher that acts like a reverse proxy. From a consumer perspective the Odata service and the HTML5 source code now seem to stem from the same location. Another option is to deploy the SAPUI5 app on the SAP Gateway Server on premise. The Gateway server is also called Frontend server in such a scenario. The same origin policy is fulfilled since the Odata service and the SAP UI5 source code reside on the same system. The integration with on premise SAP Gateway systems is available via SAP HANA Cloud Connector.

HTML5 Applications Development: https://help.hana.ondemand.com/help/frameset.htm? 39723061bc4b4b679726b120cbefdf5a.html. LESSON SUMMARY You should now be able to: ●



529

ht

ig

yr

C op


at

m

pe rs on al us e

Unit 16: Lean Development Infrastructure

530


ht

ig

yr

C op


at

m 1. What is continuous integration?


pe rs on al us e

Unit 16

Learning Assessment

531

Unit 16

1. What is continuous integration?

pe rs on al us e


C op

yr

ig

ht

m

at


Continuous Integration (CI) is a practice that involves developers checking-in their code several times a day to a central code repository.

532


SAP Copyrights and Trademarks © 2017 SAP SE or an SAP affiliate company. All rights reserved.

pe rs on al us e

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://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.


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 SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE 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.

C op

yr

ig

ht

m

at

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, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.


iii

Ux410 en Col02 Ilt Fv Part a4 Wm

Recommend Documents