Sapx05 en Col10 Show
Short Description
Sapx05 en Col10 Show...
Description
SAPX05 Collection: 10 Material Number: 50131370
SAP SAPUI5 User Experience Development
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Abstract 1/2 Target Group
- Application Consultant - Business Process Owner/Team Lead/Power User - System Administrator - User
General Description
In this training, the participants will understand the SAPUI5 user experience strategy and learn to create SAPUI5 apps.
Learning Objectives
- Explain SAP User Experience Strategy - Explore Key Enablement Tools for SAP User Experience - Describe SAP Fiori in Relation to User Experience - Explain SAPUI5 Architecture - Explore the Relationship Between SAPUI5 and SAP Fiori - Install the SAPUI5 Eclipse Plugin - Set up a HANA Cloud Platform Account - Explore the Basics of SAP Web IDE - Develop using the Model View Controller (MVC) Design Pattern - Set up a Project - Configure and Use Core Elements of the Project - Describe UI Controls - Use Browser-based Debugging Tools - Explore Available SAPUI5 Documentation
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Abstract 2/2 Learning Objectives
- Explore SAPUI5 Framework Source Code - Describe Layouts - Create Custom Controls - Explore the model types JSON, XML and Odata - Perform Data Binding - Perform Property Binding - Perform Advanced Binding Techniques - Perform OData Query Options - Perform Common Data Operations: Format - Perform Common Data Operations: Sort and Filter - Perform Common Data Operations: Calculated Fields and Data Validation - Work with Resources - Build Apps Using Modularization - Perform Application Localization - Work with Components - Work with Charts - Use Third-party Libraries - Optimize SAPUI5 Apps - Use Themes in SAPUI5 - Add Styles to an Application
Duration
3 days
© 2016 SAP SE or an SAP affiliate company. All rights reserved
SAPX05 SAP SAPUI5 User Experience Development
SAPUI5 Overview
SAPUI5 Development Options
SAPUI5 Project Basics
SAPUI5 Controls © 2016 SAP SE or an SAP affiliate company. All rights reserved
60 minutes
130 minutes
SAPUI5 Application Debugging
90 minutes
Layouts and Custom Controls
120 minutes
Data Handling
280 minutes
Additional SAPUI5 Development Features
180 minutes
90 minutes
90 minutes
SAPUI5 Branding
50 minutes
Unit 1: SAPUI5 Overview
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Scenario
As a Business Process owner you are requested to permanently improve the user experience in your area of responsibility. Creating user interfaces is a critical aspect in the user experience. In this training, you will learn how to develop SAPUI5 user interfaces to induce a great user experience.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Describing SAP User Experience
Understanding SAPUI5 Architecture
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Lesson 1: Describing SAP User Experience
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Explain the SAP User Experience Strategy
© 2016 SAP SE or an SAP affiliate company. All rights reserved
User Experience Drives Innovation
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Design-Centric Companies Outperform the S&P Index
D.INDEX S&P INDEX
$40k
$39,922.89
$30k
228%
$20k
$17,522.15
Source: Design Management Institute http://c.ymcdn.com/sites/www.dmi.org/resource/resmgr/Docs/DMI_DesignValue.pdf
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Jun ’13
Jun ’11
Jun ’09
Jun ’07
Jun ’05
$10k
Jun ’03
D.INDEX: Whirlpool Ford IBM Nike Starwood Steelcase Coca-Cola Apple Newell Rubbermaid Target Starbucks Disney Herman Miller P&G Intuit
Shift From Information to Innovation Technology
28%
Drive business innovation
Drive business innovation
72%
Keep the lights on TODAY
Keep the lights on THE FUTURE
Source: Forrester IT survey, 2013
© 2016 SAP SE or an SAP affiliate company. All rights reserved
The Value of User Experience
Monetary Value
Gain Productivity
Save Training Costs
Decrease User Errors
Decrease Change Requests
UX Value Calculator
Human Value
Increase User Satisfaction
Increase Customer Loyalty
Increase Solution Adoption
Strengthen Relationship
Launch
(IT and Business)
http://experience.sap.com/designservices
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Mindset 1/2
People
Business
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Technology
Mindset 2/2
User Experience Innovation
People
Business
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Technology
SAP’s Direction: Digital Transformation
People • User-centered • Design-driven development • One
UX for SAP solutions
SAP Fiori
Business • Digitalization • Simplification • Cloud readiness
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Technology • Web &
open standards computing • Service orientation • In-memory
SAP FIORI Design Evolution
Me Area
Main Content
Notifications
Watch Video This is the current state of planning and may be changed by SAP at any time.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
SAP FIORI Design Principles Role-based: Deliver user interface depending on tasks to be done
© 2016 SAP SE or an SAP affiliate company. All rights reserved
SAP FIORI Design Principles Coherent: Single point of access across functional areas and across technologies
Finance
Human Resources
Provide the relevant tasks and activities for the user
© 2016 SAP SE or an SAP affiliate company. All rights reserved
CRM
Procurement
SAP FIORI Design Principles
Role-based
Responsive
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Simple
Coherent
Delightful
User Experience Meets Execution
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Execution of SAP’s UX Strategy
NEW & RENEW
EMPOWER
DELIVERYING SAP FIORI UX ACROSS SAP SOLUTIONS *
CUSTOMERS TO INNOVATE THROUGH USER EXPERIENCE
Workforce
Supplier
Education & Best Practices
Tools & Technologies
UX Design Services Assets
Customer
*: This is the current state of planning and may be changed by SAP at any time.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
SAP S/4 HANA NEW
New User Experience
SAP S/4HANA Cloud Editions
SAP FIORI § § §
efficient access to information user productivity complexity reduction
SAP S/4HANA On-Premise Edition
This is the current state of planning and may be changed by SAP at any time.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Boardroom Redefined NEW
Watch Demo Video >
Powered by SAP S/4HANA This is the current state of planning and may be changed by SAP at any time.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
SAP Business Suite RENEW SAP Fiori apps reference library www.sap.com/fiori-apps-library
SAP Fiori running on SAP HANA Cloud Platform
www.sap.com/fiori-demo
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Cloud E.g.
RENEW People Profile New Home Page
This is the current state of planning and may be changed by SAP at any time.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
…Customers to Innovate Through User Experience EMPOWER Education & Best Practices
Tools & Technologies
Discover
Design
Deliver
SAP UX Design Services This is the current state of planning and may be changed by SAP at any time.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Education & Best Practices To help you get the UX skills you need
EMPOWER
SAP Fiori Design Guidelines
Design Thinking Playbook
OpenSAP: UX courses
© 2016 SAP SE or an SAP affiliate company. All rights reserved
UX Value Calculator
Design for nondesigners
Communities
Scenes
Tools & Technologies To discover, design, develop, adjust and deploy SAP Fiori UX
EMPOWER Prototype Ideate
Discover Scope
Validate
Design Develop
Synthesize
Deploy Test
360° Research
* *
Deliver
SAP Web IDE UI theme designer SAP Screen Personas SAP Fiori launchpad SAP Fiori apps reference library *: This is the current state of planning and may be changed by SAP at any time.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Tools & Technologies Splash
EMPOWER Key capabilities Gallery of App Prototypes and Artifacts Inspiring app prototypes (e.g. SAP Fiori) Ability to clone the prototypes Comprehensive design-thinking artifacts for each app Method Cards, Best Practices, and Online Learning Guided steps and templates e-Learning about design-thinking methodologies Best-practice guidelines
Benefits Leverage inspiring app prototypes and design artifacts to create your own Up-skill your teams on user-centered design methodologies with learning and best practices
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Tools & Technologies EMPOWER RAPID PROTOTYPING & USER RESEARCH TOOL FOR NON-TECHNICAL USERS Virtual brainstorming to support ideation and synthesis Intuitive prototyping capabilities • Create new or start from an existing design template and modify • Design compliance to guidelines — i.e. smart templates • Create prototypes with sample data and data model consideration • High fidelity prototypes with UI code generation to jumpstart development Remote end-user feedback with ability to highlight hot spots and get synthesized analyses
https://experience.sap.com/news/want-build-better-user-experience/ https://www.youtube.com/channel/UCju0kVKOfkw5-hogBYPfgqg © 2016 SAP SE or an SAP affiliate company. All rights reserved
This is the current state of planning and may be changed by SAP at any time.
SAP’s UX Design Services SAP’s Support for a Successful Journey
Design Maturity
EMPOWER
INNOVATE
REALIZE
ADVISE
Design Thinking for Business Innovation
RDS* of SAP Fiori Apps
Design Service for User Experience
Develop Custom Solution
RDS* of SAP Screen Personas
Optimize Existing Solution
Empower Customer with Design
UX Advisory for Business, Technology & Strategy
*: Rapid Deployment Solutions
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Time
Your User Experience realized as a Service (UXaaS)
© 2016 SAP SE or an SAP affiliate company. All rights reserved
User Experience as a Service (UXaaS) To accelerate application design and development end-to-end
Discover
Design
Develop
Deploy
UXaaS
UXaaS is an integrated offering bringing existing and new tools together on SAP HANA Cloud Platform (HCP) to empower organizations to innovate and scale for a great User Experience.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
UXaaS Offers End-to-End Scenarios Combining New and Existing Tools
SAP Splash: Inspire, Learn, Community Build UI Theme Designer
Discover & Design related
SAP Web IDE SAPUI5 SAP Fiori launchpad / SAP HANA Cloud Portal HCP Mobile Services/ SAP Fiori Mobile SAP Jam SAP Web Analytics
SAP HANA Cloud Platform (HCP) This is the current state of planning and may be changed by SAP at any time.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Deliver = Develop & Deploy related
Summary
You should now able to: Explain the SAP User Experience Strategy
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Describing SAP User Experience
Understanding SAPUI5 Architecture
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Lesson 2: Understanding SAPUI5 Architecture
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Explain SAPUI5 Architecture Explore the Relationship Between SAPUI5 and SAP Fiori
© 2015 SAP SE or an SAP affiliate company. All rights reserved
SAPUI5 Defined
SAP’s UI development toolkit for HTML5 (SAPUI5) is a platform for developing rich user interfaces for modern Web business applications.
In slightly more concrete terms: SAPUI5 is a JavaScript package for User Interface development consisting of a feature-rich core and a really large number of UI controls (~ 200) which are organized in a handful of libraries. © 2015 SAP SE or an SAP affiliate company. All rights reserved
SAP UI Development Toolkit for HTML5 (SAPUI5)
Enterprise-Ready HTML5 Rendering Library Completely client-side UI Open and flexible Web development skills (HTML, CSS3, JavaScript) Includes popular jQuery library and complies with OpenAjax Extensibility and Theming 3rd Party JavaScript Integration Targets Multiple Devices Smartphone, Tablet, Desktop
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Advantages of SAPUI5
SAPUI5 is an enterprise-ready web toolkit with powerful development concepts: Built-in extensibility concepts at code and application level Data binding types and Model-View-Controller (MVC) Full translation support Keyboard interaction support and accessiblity features And many more.... Apps developed with SAPUI5 present one consistent user experience. SAPUI5 comes with many feature-rich UI controls for handling complex UI patterns and predefined layouts for typical use cases. Apps built with SAPUI5 are responsive across browsers and devices – they run on smartphones, tablets, and desktops. The UI controls automatically adapt themselves to the capabilities of each device. © 2015 SAP SE or an SAP affiliate company. All rights reserved
SAPUI5 Architecture
Mobile
Tablet
Controller View
Data Binding
Resource Handler
Libraries
Client / Browser
Model
Gateway Server
Applications
Server
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Desktop
Data
SAPUI5 Architecture – Another View
Themes SAPUI5 Libraries
Mobile +
Controls
Mobile +
Desktop
Optional server component
Desktop
Core JavaScript framework including jQuery Extension libraries
Data Binding
Control Base
Render Manager
jQuery.UI
Themes
UI SAPUI5 Core
Controls “Helper” assets like e.g.
Event
(Static) Web Server
Resources
Device
Utils
Logger
SAP jQuery Plug-ins
Less (less.js) the dynamic style language
jQuery
Code minimizer (via Grunt)
Resource Handler (optional)
© 2015 SAP SE or an SAP affiliate company. All rights reserved
UI5 Control Libraries sap.m Leading control library (optimized for mobile)
sap.ui.commons Focused on functionality for Desktops
First Choice – Works Everywhere
sap.ui.table Includes the full featured Table control
Others: sap.viz – Charts and Graphs sap.ui.layout – Layouts sap.ui.ux3 – Controls with UX 3.0 Guidelines …
And more, like sap.viz, sap.ui.dev … © 2015 SAP SE or an SAP affiliate company. All rights reserved
Supported SAPUI5 Library Combinations
sap.m
sap.ui.core
sap.ui.comp
sap.ui.layout sap.ui.commons
sap.suite
sap.ui.unified sap.ui.ux3
sap.viz
sap.ui.table
…
© 2015 SAP SE or an SAP affiliate company. All rights reserved
SAPUI5 Key Components
Client side Control libraries (JavaScript, CSS and image files) Core (JavaScript files) Test suite (HTML, JavaScript files)
Server side (optional)
Resource handler in Java and ABAP Theming generator Application/Control development tools via SAP Web IDE Application/Control development tools in Eclipse
© 2015 SAP SE or an SAP affiliate company. All rights reserved
SAPUI5 and Extensibility
UI5 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
This way UI5 development groups should not become a bottleneck for application groups in need of a certain functionality.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Browser Support
Internet Explorer
Firefox
Chrome
Safari
Version 8 and upwards
Version 10 and upwards Version 10 ESR and upwards
Version 1 and upwards
Version 3 and upwards
(with limitations)*
*Internet Explorer 8 is supported with graceful degradation for CSS3 features like rounded corners, text-shadows, etc.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
OpenUI5 What is OpenUI5 the Open-Source-licensed version of SAPUI5 Core framework and libraries are identical Some libraries like CVOM (sap.viz), BPM have been omitted http://openui5.org
What is the value for SAP and SAP customers Offer a license that allows our customers / partners to use and distribute SAPUI5 for SAP and non-SAP scenarios Get a community with SAP partners and other freelancers who are interested in making business in our ecosystem Get external contributions Various smaller internal effects like employee motivation, transparent need for better documentation, better code quality, more feedback, etc. © 2015 SAP SE or an SAP affiliate company. All rights reserved
SAP Fiori's Reliance on SAPUI5
Fiori is a design. Fiori is a development approach. Fiori is a set of applications that SAP is delivering in waves. The vast majority of Fiori applications leverage SAPUI5 – more specifically they use a set of SAPUI5 libraries (starting with sap.m) to provide responsive UIs that run on all devices. Currently there are over 520 Fiori applications that leverage SAPUI5 plus over 50 that use other technologies.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Fiori-Like Application Development
Fiori-Like Application development follows the same design principles and aesthetic used in Fiori applications. The SAP Web IDE includes Fiori based templates for jump starting Fiori-Like Development.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
SAP Fiori App Extensions
Integrated into SAP Web IDE in a semiautomated fashion. Available for very wide range of situations before modifications are necessary. Isolated coding from the original project. Also available in Eclipse (but more manual).
© 2015 SAP SE or an SAP affiliate company. All rights reserved
New
Summary
You should now able to: Explain SAPUI5 Architecture Explore the Relationship Between SAPUI5 and SAP Fiori
© 2015 SAP SE or an SAP affiliate company. All rights reserved
SAPX05 SAP SAPUI5 User Experience Development
SAPUI5 Overview
SAPUI5 Development Options
SAPUI5 Project Basics
SAPUI5 Controls © 2015 SAP SE or an SAP affiliate company. All rights reserved
60 minutes
130 minutes
SAPUI5 Application Debugging
90 minutes
Layouts and Custom Controls
120 minutes
Data Handling
280 minutes
Additional SAPUI5 Development Features
180 minutes
SAPUI5 Branding
50 minutes
90 minutes
90 minutes
Unit 2: SAPUI5 Development Options
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Scenario
As a Business Process owner you are requested to permanently improve the user experience in your area of responsibility. Creating user interfaces is a critical aspect in the user experience. In this training, you will learn how to develop SAPUI5 user interfaces to induce a great user experience.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Working with SAPUI5 in Eclipse
Setting up a HANA Cloud Platform account Exploring the Basics of SAP WEB IDE
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 1: Working with SAPUI5 in Eclipse
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Install the SAPUI5 Eclipse Plugin
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Eclipse Installation Prerequisites
Installation Requirements when installing SAPUI5 via tools.hana.ondemand.com: Windows XP-10, Mac OS X 10.5+, Linux Java JRE/JDK version 1.732-bit or 64-bit – Recommended Older versions possible when installing UI Development Toolkit for HTML5 with NetWeaver Development Studio (and downloading via service.sap.com) For using SAPUI5 ABAP Repository Team Provider: Windows + SAPGUI for Windows 7.30/7.40 Microsoft VC Runtime (VS2010)
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Eclipse Installation Process
To install SAPUI5 Tools, proceed as follows: • Download and Install Eclipse (Mars [4.5] or Luna [4.4]): http://eclipse.org • Run Eclipse and choose: Help > Install New Software... • Enter the update site URL: • Eclipse Mars: https://tools.hana.ondemand.com/mars • Eclipse Luna: https://tools.hana.ondemand.com/luna • Press Enter, then select: UI Development Toolkit for HTML5 • Accept defaults then confirm the license agreements and press Finish to start the installation. © 2016 SAP SE or an SAP affiliate company. All rights reserved
Demo 1: How to perform an Eclipse Post-Installation Walk-Through In this demo, we create a simple Hello World SAPUI5 application in Eclipse. 1. Access Eclipse (Mars) 2. Create new SAPUI5 Application Development Project 1. Library: sap.m 2. Development Paradigm: XML
3. Update View title with “Hello World” 4. Add XML View 5. Run app as a Web App Preview
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Summary
You should now able to: Install the SAPUI5 Eclipse Plugin
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Working with SAPUI5 in Eclipse
Setting up a HANA Cloud Platform account Exploring the Basics of SAP WEB IDE
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 2: Setting up a HANA Cloud Platform account
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Set up a HANA Cloud Platform Account
© 2016 SAP SE or an SAP affiliate company. All rights reserved
HANA Cloud Platform (HCP) Product Overview
HCP is SAP’s in-memory cloud platform that: Is a Platform-as-a-Service (PaaS) that frees customers from the costs and maintenance required to build your own platform Allows customers to build, deploy and administer cloud-based business apps
Application Services Database Services Infrastructure Services
Application runtimes
Hana Cloud Platform
Is based on open standards Provides a cloud-based development environment Provides a set of services for integration, mobility, collaboration and analytics Allows connectivity to both SAP and non-SAP back-end data sources that run in the cloud or onpremise © 2016 SAP SE or an SAP affiliate company. All rights reserved
On-premise Back-end
Internet Cloud Back-end
(SAP and non-SAP)
(SAP and non-SAP)
Components of HANA Cloud Platform (HCP)
© 2016 SAP SE or an SAP affiliate company. All rights reserved
HCP Infrastructure Service Option
HCP has three different service options depending on your needs Infrastructure services include the physical hardware on which the platform runs. For those sites where the infrastructure is running at SAP Data Centers you get: Certified Operations Advanced Network Security Service-Level Agreement (SLA) 99.9% Data backup Compliance Integrity Confidentiality
© 2016 SAP SE or an SAP affiliate company. All rights reserved
HCP Database Services Options
The HCP DB Services provide: An easy and low-cost method to start using SAP HANA in the cloud HANA native development and access to the HANA XS engine Typical transaction processing expected from a database engine Event streaming where data is continuously captured from devices/apps and once received, acted on by the platform Advanced analytics Text mining capabilities
© 2016 SAP SE or an SAP affiliate company. All rights reserved
HCP Application Services Options
The HCP App Services allow you to: Extend your current applications, either cloud-based or on-premise. Build next-generation applications by using these services. Increase developer productivity Leverage administrative and lifecycle capabilities Provide standards-based federated identity and authorization management – SAML-based SSO – Support for third-party Identity Providers (IdP) – Authentication against third-party LDAP servers, like Microsoft Active Directory – Support for OAuth 2.0 for securing Web APIs
© 2016 SAP SE or an SAP affiliate company. All rights reserved
HCP Application Services (Continued)
In total, the HANA Cloud Platform offers over 20 services that can be enabled to provide additional functionality to complement/enable your business development: Mobile Services (HCPms) – Primary SAP Mobility Platform capabilities via the cloud Cloud Portal – including quick site creation with design tools Trial accounts also give access to early beta previews of new services. © 2016 SAP SE or an SAP affiliate company. All rights reserved
Additional HCP Services
© 2016 SAP SE or an SAP affiliate company. All rights reserved
HCP Subscriptions
Subscriptions allow you to leverage additional tools from the HANA Cloud Platform. Features available include: Fiori Launchpad Portal SAP Mobile Platform for Cloud (HCPms) Administration Theme Designer SAP Web IDE (Enabled by default)
© 2016 SAP SE or an SAP affiliate company. All rights reserved
HCP Application Types
Applications are: Self-developed Those subscribed to, written by SAP or third-parties Accessible by URL
© 2016 SAP SE or an SAP affiliate company. All rights reserved
HCP Application Types: Self Developed
For self-developed apps, there are three application runtimes available: SAP HANA Extended Application Services (XS) XS is a small-footprint application server, web server and basis for an app development platform XS resides inside of SAP HANA – not a separate technology Can create HTTP-based UIs (browser or mobile) that run directly on HANA without external servers and components, reducing TCO
JAVA EE Uses SAP’s own Java Virtual Machine • Based on Java Standard Edition VM for Java 6 and Java 7 and derived from HotSpot Supports Java EE 6 Web Profile Appropriate for running Java Web apps based on JSR APIs Support for Apache Tomcat Java Web apps
HTML5 (SAPUI5) Allows you to run lightweight HTML5 apps in the cloud Can optionally use SAPUI5 libraries to develop your apps © 2016 SAP SE or an SAP affiliate company. All rights reserved
HANA Cloud Connector
The HANA Cloud Connector and HCP connectivity services provides: Secure, reliable and easy-toconsume access to your business data running • In the cloud • On-premise
A secure SSL VPN connection between the SAP HANA Cloud Platform and on-premise systems Complete administrator control and auditing
© 2016 SAP SE or an SAP affiliate company. All rights reserved
HCP Destinations
A destination is the entity where you configure data services and systems that are consumed by your applications and services. There are different types of destinations including: HTTP(S) – For connecting to an on-premise or internet based back-end data source (including SAP OData and repository systems)
RFC – Allows an app to invoke a function module in an on-premise ABAP system
email – Allows you to send an email from an app.
Destinations can be defined on any of these levels in HCP: – Account – Subscription – Application © 2016 SAP SE or an SAP affiliate company. All rights reserved
HCP Destinations: Properties when used with Web IDE Key
Value/Description
WebIDEEnabled
true
WebIDESystem
sap-client
WebIDEUsage
• odata_abap for the OData functionality of Gateway (/sap/opu/odata) • odata_gen for generic OData functionality • ui5_execute_abap for executing SAPUI5 apps from the ABAP repository • dev_abap for extensibility scenarios and developing/deploying to the ABAP repository • bsp_execute_abap for working with fact sheets • odata_xs for HANA XS OData services • plugin_repository for exposing optional plugin repositories
WebIDEAdditionalData
• api_mgmt for specifying an API key to retrieve metadata • full_url for specifying full URL of a service letting metadata be shown without choosing the service
© 2015 SAP SE or an SAP affiliate company. All rights reserved
HCP Cockpit
In order to create and access your account, you will need to use the HCP Cockpit. This is a browser-based administration UI, available at the following URL: https://account.hanatrial.ondemand.com/ On your first access you will need to register for your account If registered, can log in from the same page
© 2016 SAP SE or an SAP affiliate company. All rights reserved
HCP Cockpit: Screenshot
© 2016 SAP SE or an SAP affiliate company. All rights reserved
HCP Account Types
HCP offers three types of accounts: Developer Customer Partner The account type determines pricing, usage, resources, services available and where the landscape is hosted. Developer accounts use the trial landscape located in Europe. Customers and partners use a production landscape available on a regional basis.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
HCP Account Types: Comparison
Developer Overview
· · · ·
Services available
· Production · Beta · Can only run one app at a time · 1GB of database storage · 1GB of document storage · 1 user per account
Limitations
Free Self-registration No expiration Access to HANA Cloud Portal, SAP Mobile Platform and Gateway as a Service
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Customer
Partner
· Purchased account, · For building apps to just like any other SAP sell them to your software customers · Can receive the SAP partner logo package · Can advertise and sell via the SAP Store · Production
· Production
· Depends on contract
· Depends on your partner package
Demo 2: How to set up a HANA Cloud Platform (HCP) Account In this demo, we will show how to set up an HCP Account for this course. 1. Go To https://account.hanatrial.ondemand.com 2. Choose “Register” 3. Enter required information (including e-mail) 4. Use e-mailed confirmation to activate your account.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Exercise 1: Set up a HANA Cloud Platform (HCP) Account
20 minutes
Watch
Try
Self-Test
Print
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Create an HCP developer account (if you don’t already have one) and activate it.
Summary
You should now able to: Set up a HANA Cloud Platform Account
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Working with SAPUI5 in Eclipse
Setting up a HANA Cloud Platform account Exploring the Basics of SAP WEB IDE
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Lesson 3: Exploring the Basics of SAP WEB IDE
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Explore the Basics of SAP Web IDE
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Web IDE: Overview
SAP Web IDE is a browser-based Integrated Development Environment (IDE). In the past, we taught you how to use the Eclipse IDE for building apps using SAP’s UI Development Toolkit for HTML5 (SAPUI5). A better solution is to use SAP’s Web IDE. You get the same primary features (plus new ones) but now in a browser-based IDE. With Web IDE you can build apps quicker due to the inclusion of application templates and also the ability to build apps from sample (reference) applications.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Web IDE: Features and Benefits
Allows developers to rapidly develop SAPUI5 web applications for desktop and mobile devices Applying SAP Fiori UX guidelines
Speeds development due to: Code completion API reference support Wizards Templates and reference applications Layout Editor (WYSIWYG) – Capabilities still limited, but growing. Integration with Fiori Launchpad, Git, SAP ABAP Repositories
Lets you create apps using mock data without connecting to any back-end Allows you to deploy apps to HCP or SAP ABAP Server Team collaboration features allow sharing of a code repository © 2015 SAP SE or an SAP affiliate company. All rights reserved
Web IDE: Welcome View
Menu bar
Toolbar
Right sidebar Left sidebar
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Web IDE: Preferences
There are multiple preferences that can be set in SAP Web IDE: Code Completion Code Check Code Editor Git Settings Plugins
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Web IDE: Preferences: Code Completion
In SAP Web IDE, code completion is one of the preferences: Enabled by default Enabling code completion in comments is an option, but not enabled by default
Typically appears when typing in a code editor some object name followed by a period (or dot) For example: sap. Two means of accessing: Use the Up or Down arrow keys to cycle through your options Use CTRL+Space to display a scrollable dropdown of options
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Web IDE: Preferences: Code Completion Examples
Arrow key cycling through options: Enable in Comments Option
CTRL+Space displaying Scrollable Dropdown
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Web IDE: Preferences – Code Check
The Web IDE uses ESLint – based code checking rules (http://eslint.org) Can specify when to run code check On Save – display errors only when save is clicked On Change – display errors as you are typing the code
Can specify the code check level All Displays all errors, warnings and informational messages
Errors (only) Errors and Warnings (only) Disable Suppresses message display © 2015 SAP SE or an SAP affiliate company. All rights reserved
Web IDE: Preferences – Code Check – Project Settings
ESLint code checking rules for a project are configured in Project Settings. The following can be done: Enable/disable a check Clicking a rule will take you to the ESLint site so that you can learn more information about the check
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Web IDE: Preferences – Code Checking – In Action
Here we see a sample of ESLint code check in action. You see a(n): Error message foo and bar have not been declared
Informational message A string like ‘this stuff’ should be in double quotes
Warning message Used ==, expected ===
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Web IDE: Preferences – Editor Configuration Preferences
The following are the straight-forward editor preferences that can be set:
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Git
Git is a free open source distributed version control system that
Works with large or small projects Easy to learn Good Performance Available from http://git-scm.com/
Web IDE is Git-enabled automatically. There are several areas of configuration for Git in Web IDE: Preferences (shown here) Project Settings Right sidebar shows Git options
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Git – Project Configuration
By going to Project Settings, you can configure your Git repository, including: Create new entries Edit existing entries Delete entries
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Right Sidebar Options
The right sidebar of the Web IDE puts important functions right at your fingertips. Search/Replace – You can control the scope of the search and specify the file types to be included. API Reference – Coordinated with Code Assist (Code Completion) and displays brief documentation for the choices being considered.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Right Sidebar Options – Git
Git pane – Manage the source control operations of a given file or project. Git History pane:
Explore the history of any branch of your committed code View a list of commits Search commits by author, person who committed, date View the details of a commit View a list of all files packaged in a commit Execute certain Git commands Tag Cherry-Pick Revert Check Out
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Right Sidebar Options: Outline Pane
The Outline Pane helps you: Understand the structure of the associated file Supported for JavaScript files and for XML views when opened with the Layout Editor Displays an expandable/collapsible hierarchy of the file including the controls, objects, and functions. In JavaScript: Function nodes display the name and parameters Object nodes display the object name
Navigate through the code Allows quick navigation of your code Clicking a node in the outline view highlights the corresponding line or block of code or control in the editor.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Right Sidebar Options – Outline Pane: JavaScript
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Demo 3: How to Explore the Basics of SAP Web IDE In this demo, we will show how to access the SAP Web IDE from the HCP Cockpit and how to configure the preferences of the Web IDE. 1. Access HCP Cockpit 2. Go to Subscriptions 3. Click on SAP Web IDE link 4. Configure Preferences for Web IDE: 1. Code Check 2. Code Completion 3. Code Editor
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Exercise 2: Explore the Basics of SAP Web IDE
30 minutes
Watch
Try
Self-Test
Print
© 2015 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will review your HCP account options and adjust your SAP Web IDE preferences.
Summary
You should now able to: Explore the Basics of SAP Web IDE
© 2015 SAP SE or an SAP affiliate company. All rights reserved
SAPX05 SAP SAPUI5 User Experience Development
SAPUI5 Overview
SAPUI5 Development Options
SAPUI5 Project Basics
SAPUI5 Controls © 2016 SAP SE or an SAP affiliate company. All rights reserved
60 minutes
130 minutes
SAPUI5 Application Debugging
90 minutes
Layouts and Custom Controls
120 minutes
Data Handling
280 minutes
Additional SAPUI5 Development Features
180 minutes
SAPUI5 Branding
50 minutes
90 minutes
90 minutes
Unit 3: SAPUI5 Project Basics
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Scenario
As a Business Process owner you are requested to permanently improve the user experience in your area of responsibility. Creating user interfaces is a critical aspect in the user experience. In this training, you will learn how to develop SAPUI5 user interfaces to induce a great user experience.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Using the Model View Controller (MVC) Design Pattern
Creating a WEB IDE Project
Applying SAPUI5 Programming Basics
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 1: Using the Model View Controller (MVC) Design Pattern
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Develop using the Model View Controller (MVC) Design Pattern
© 2015 SAP SE or an SAP affiliate company. All rights reserved
MVC Overview
The Model View Controller (MVC) concept is used in SAPUI5 to separate the representation of information from the user interaction. Model – Manages application data View – Defines and renders the UI. Controller – reacts to view events and user interaction by modifying the view and model.
The separation has the following advantages: It provides better readability, maintainability, and extensibility It allows you to change the view without touching the underlying business logic and to define several views of the same data.
Views and controllers usually form a 1:1 relationship (but standalone controllers and views are possible) © 2015 SAP SE or an SAP affiliate company. All rights reserved
SAPUI5 Models Overview
A model holds the data, provides methods to fetch the data, and to set and update data. The model types are as follows: JSON – Client-side model. Intended for small datasets and can be used to bind controls to JavaScript object data. XML – Client-side model. Intended for small datasets. Does not support server based paging or loading of deltas. Resource – Handles resource bundles. Mainly for text translation. oData – Server-side model. Binds controls to oData services. Client only knows currently fetched rows and fields. Sorting and filtering only on the server. Multiple models and types are possible within a view, and the models may be set at different levels such as at the application level or for an individual control. The data binding is not dependent on the type of model used. © 2015 SAP SE or an SAP affiliate company. All rights reserved
SAPUI5 Views The view is responsible for defining and rendering the UI. SAPUI5 supports the following predefined view types: XML – The user interface is defined in an XML file or string. (Supports a mix of XML and plain HTML.) Preferred approach for Fiori apps. JSON – The user interface is defined in a file or string in JSON format. JS – The user interface is constructed with JavaScript. HTML – The user interface is constructed with HTML. Custom view types can be defined by extending base class sap.ui.core.mvc.View
© 2015 SAP SE or an SAP affiliate company. All rights reserved
SAPUI5 Controllers
SAPUI5 uses the controller to separate the view logic from the model logic. It has the following lifecycle hooks: • onInit() – Called when a view is instantiated and its controls (if available) have already been created; used to modify the view before it is displayed to bind event handlers and do other one-time initialization. • onExit() – Called when the view is destroyed; used to free resources and finalize activities • onAfterRendering() – Called when the view has been rendered and, therefore, its HTML is part of the document; used to do post-rendering manipulations of the HTML. SAPUI5 controls get this hook after being rendered. • onBeforeRendering() – Invoked before the controller view is re-rendered and not before the first rendering; use onInit() for invoking the hook before the first rendering. A controller can also define additional methods that serve as event handlers or additional functionality offered by the controller. © 2015 SAP SE or an SAP affiliate company. All rights reserved
Summary
You should now able to: Develop using the Model View Controller (MVC) Design Pattern
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Using the Model View Controller (MVC) Design Pattern
Creating a WEB IDE Project
Applying SAPUI5 Programming Basics
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 2: Creating a WEB IDE Project
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Set up a Project
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Web IDE Project Creation Options: New Project Options
The first productive thing a developer does in Web IDE is creates a project. Projects can be created as: New From a template From a sample (reference) app
Import From a ZIP file on the file system From a SAPUI5 ABAP repository From HCP
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Web IDE Project Creation Options: Creating Projects from Templates Several templates exist for creating new apps. Templates can be categorized as: For building SAP Fiori-like apps Master-Detail Fact Sheets
For building SAPUI5 apps Basic SAPUI5 apps Master-Detail Kapsel apps for the SAP Mobile Platform
For building HCP Cloud Portal aps Depends on Preference settings
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Web IDE Project Creation Options: Creating Projects from Sample Apps Sample, or reference apps can also be used to create a Web IDE project. Currently, there are five sample apps available, with more coming in later releases. The apps can be categorized as: Transactional Shop Manage Products Approve Purchase Orders
Analytical Visualization Extensions for SAP Lumira Work with Data Filter Create Custom Properties
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Web IDE Project Creation Options: Import Options
Finally, a Web IDE project can be created by importing from: The SAPUI5 ABAP Repository Where SAP Fiori apps reside For extending Fiori apps
The HANA Cloud Platform Import apps that reside on HCP into Web IDE
A ZIP file on the file system For example, you could have a SAPUI5 app created in Eclipse that you want to bring into Web IDE
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Web IDE Project Settings: Project Customization
The following can be customized in a Web IDE project: Code checking rules JavaScript Beautification Mock data usage Project types, including: SAP Fiori Web IDE Plugin creation
Run configurations Supported languages such as English, German and so on. When previewing the app, can choose between the enabled languages
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Web IDE Project Settings: Project Customization – JavaScript Beautification Options At the project settings level, JavaScript beautification can be configured:
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Web IDE Project Settings: Project Customization – Run Configurations Run Configurations can also be created as part of Web IDE project customization. You can have one to many run configurations per project. In each configuration, we specify the name as well as the file that will start the application:
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Demo 4: How to create a New Project In this demo, we will show how to create a basic “Hello World” SAPUI5 Application project and test it. 1. Choose to create new project from a SAPUI5 template. 2. Set project name, namespace and initial view. 3. Explore generated project 4. Add control to display “Hello World” 5. Test the new project.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Exercise 3: Create a new Project
15 minutes
Watch
Try
Self-Test
Print
© 2015 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will create a simple “Hello World” application and test it.
Summary
You should now able to: Set up a Project
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Using the Model View Controller (MVC) Design Pattern
Creating a WEB IDE Project
Applying SAPUI5 Programming Basics
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 3: Applying SAPUI5 Programming Basics
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Configure and Use Core Elements of the Project
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Index HTML
index.html is the default starting point of the application. It contains 3 main areas: Bootstrap – Contains Bootstrap configuration including the libraries to be loaded, resource root location, and theme. Application – Initial construction of application including Application placeAt method to attach application into primary UI Area UI-Area – Contains primary UI anchor. Best practice keeps minimal coding in index.html © 2016 SAP SE or an SAP affiliate company. All rights reserved
UI-Area
SAPUI5 Bootstrap
UI5 applications start with the bootstrap to load the UI5 runtime:
Attributes of the script tag are evaluated and used to configure the runtime: ‒ data-sap-ui-libs: the controls libraries to be used, comma-separated. ‒ data-sap-ui-theme: the theme ‒ There are more attributes: data-sap-ui-resourceroots, data-sap-uixx-bindingSyntax, … ‒ Instead of putting the attributes in the script tag, many can also be added as URL parameters (without the starting data-).
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Configuration of the UI5 Runtime
Individual configuration parameters take the form:
data-sap-ui-attribute data: to comply with W3C recommendation for custom attributes sap-ui: identifier for SAPUI5 attributes attribute: an specific configuration attribute At runtime, the configuration object can be retrieved via:
sap.ui.getCore().getConfiguration(); Additional information available in the documentation.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Runtime Behavior of the Bootstrap
jQuery enrichment with plugins – namespace jQuery.sap Creation global object sap SAPUI5 core class and all dependencies are executed Runtime configuration is determined All libraries and modules declared in the configuration and their dependencies are loaded The Style Sheets for the configured theme of each loaded library is added to the page Loading of libs is finished and document ready state à initEvent of the Core fired à all registered event handlers are executed.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Index HTML – Application Area
Best practice is to minimize the coding in this area Limited to the initial creation of the application and first page (when not using the component model) and placing them at a specified container (div). Limited to the initial creation of the root component (when using the component model) and placing them at a specified container.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Application Area: Internals about UI5 Rendering
UI5 control tree(s) are only rendered when the HTML page is finished loading Only then the UI areas do actually exist in the browser’s DOM This corresponds with jQuery’s $(document).ready() function
UI5 largely uses HTML strings to render its controls Historically using innerHTML for changing HTML was much faster than changing the DOM for the same purpose.
Changes to controls (add/remove properties) are not directly carried out
Onload at initialization (placeAt calls are buffered until then) After control event handlers have finished their work After application logic has finished changing controls (UI5 registers a timeout) When core method applyChanges() is triggered
© 2016 SAP SE or an SAP affiliate company. All rights reserved
UI Area
A UI Area is nothing more than a container in which we can add controls. The UI Area in index.html is a div (or even the body tag) that we can use as an anchor container to place controls into. We can also nest UI Areas and add new containers (as a new div or SAPUI5 container) from within the view.
Multiple UI areas in index.html:
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Multiple UI areas in an XML view:
Useful Core Functions
sap.ui.getCore()
jQuery.sap.domById(id)
Gets a core instance
Can be used to access removed controls (even though the id doesn’t exist in the DOM anymore)
Gets any HTML element with id id If there is also a UI5 control with id id, the element returned is the topmost HTML element of this UI5 control (the UI5 control id is always used there) Similar to document.getElementById but gets rid of IE bug which also retrieves elements with the name of id
sap.ui.getCore().applyChanges()
jQuery.sap.byId(id)
Carries out and renders the changes for UI5 controls immediately, before the runtime would do it (use carefully!!)
Returns the jQuery object of the DOM element with the specified id Similar to jQuery("#myId") or $("#myId") but handles escaping of dots and adds the hash character
sap.ui.getCore().byId(id) Gets an instance of a UI5 control which was created with id id
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Demo 5: How to configure Core Elements of a Project In this demo, we will walk through the basic configuration of an SAPUI5 application. 1. Explore Documentation: https://sapui5.netweaver.ondemand.com/sdk/#content/Overview.html 2. Review the SAPUI5 Bootstrap code 3. Configure the resource roots 4. Change the theme 5. Review initial HTML
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Exercise 4: Configure Core Elements of a Project
20 minutes
Watch
Try
Self-Test
Print
© 2016 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will investigate some of the basic configurations possible in a simple application.
Summary
You should now able to: Configure and Use Core Elements of the Project
© 2016 SAP SE or an SAP affiliate company. All rights reserved
SAPX05 SAP SAPUI5 User Experience Development
SAPUI5 Overview
SAPUI5 Development Options
SAPUI5 Project Basics
SAPUI5 Controls © 2016 SAP SE or an SAP affiliate company. All rights reserved
60 minutes
130 minutes
SAPUI5 Application Debugging
90 minutes
Layouts and Custom Controls
120 minutes
Data Handling
280 minutes
Additional SAPUI5 Development Features
180 minutes
SAPUI5 Branding
50 minutes
90 minutes
90 minutes
Unit 4: SAPUI5 Controls
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Scenario
As a Business Process owner you are requested to permanently improve the user experience in your area of responsibility. Creating user interfaces is a critical aspect in the user experience. In this training, you will learn how to develop SAPUI5 user interfaces to induce a great user experience.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Describing SAPUI5 UI Controls
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 1: Describing SAPUI5 UI Controls
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Describe UI Controls
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Overview of UI Controls https://sapui5.netweaver.ondemand.com/sdk/#content/Controls/index.html The UI-control gallery provides deep information many SAPUI5 controls with reference to the API. Currently, these are mostly for sap.ui.commons – rather than for sap.m (Explored uses mostly sap.m controls.) For each control there is: Introduction Example API Documentation
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Overview of UI Controls: Samples
SAPUI5 provides different types of UI-controls: Simple Controls Value Holders Layouts Complex Controls Dialogs UX3 Controls
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Overview of UI Controls: What is a Control?
An object that defines the appearance and behavior of a screen area. Typically has properties like text or width that modify the appearance or relate to the data displayed by the Control. It can aggregate other Controls: - This means it is a sort of container or layout Control when the application can add the child controls to use - or a composite Control if the Control itself decides what the child Controls are and just re-uses these available components.
It can also have associated Controls that are not part or children of this Control, but rather loosely related. A Control can fire well-defined events. - Typically, these have a meaning that relates to the Control's purpose and functionality and is on a semantically higher level than "click" or other browser events. Examples would be search in a SearchField or expand in a Panel.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Format for Declaring a Control in an XML View … Control – Name of the control. propertyX Y Z – Property for the specific control. See Documentation. Could also be an event.
subpropX Y sspX Y – Sub-properties in JSON string format. Can be nested. aggregation1 2 – Additional groups of data like nested controls, layout data, etc. © 2015 SAP SE or an SAP affiliate company. All rights reserved
sap.m.Label
Provides label text for other controls. Selected Properties:
text – The text of the label. design – Bold or standard text. required – Indicates that entry in the labeled control is required
textAlign – Alignment of the text within the label control. Possibilities are Begin, Center, End, Left, Right.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
sap.m.Input
Selected Properties:
type – HTML type for input tag. Supported by browsers natively (Text, Number, Email, Phone, …)
placeholder – Text to display in field before data entry.
description – Description of field data to be displayed after field.
fieldWidth – Width when using description Events:
liveChange – triggered as data is entered. (Assumed in the controller.) © 2015 SAP SE or an SAP affiliate company. All rights reserved
sap.m.Input – Suggestions / Value Help
Additional Properties:
showSuggestion – Show suggestions within a pop-up.
startSuggestion – How many characters need to be entered before suggestions start (default: 1)
showValueHelp – Show an icon to select value help Additional Events:
suggest – triggered when data is entered. (Assumed in the controller.)
valueHelpRequest – triggered when value help icon is selected. © 2015 SAP SE or an SAP affiliate company. All rights reserved
sap.m.ComboBox
ComboBox is similar to an Input with Suggestions and ValueHelp configured. Additional Properties:
selectedKey – Key for the selected item. (Used for initial selection or for binding). Additional Events:
selectionChange – After a new value is selected from the options.
change – triggered after a change is recognized (for example: after a selection when the user presses the drop down icon again) Inherited from InputBase. © 2015 SAP SE or an SAP affiliate company. All rights reserved
sap.m.Button
text – Text on the button press – Event fired when button is pressed. (Function assumed to be in controller.)
icon – All standard available choices: https://sapui5.hana.ondemand.com/iconExplorer.html
type – Predefined types including (Accept, Back, Default, Emphasized, Reject, Transparent, Unstyled, Up) … other properties in documentation.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
sap.m.Image
HTML-wrapper for images Selected Properties:
src – Where the source of the image can be found (can also be bound to a model).
alt – Text to display if image is unavailable.
width / height – Size of image densityAware – Look for best fit image density for device. Events:
press – triggered when image is pressed. (Assumed in the controller.)
© 2015 SAP SE or an SAP affiliate company. All rights reserved
sap.ui.table.Table
The Table control provides a set of sophisticated and comfort functions for table design. Additional Properties/Aggregations:
rows – Includes binding information for the data.
columns – Defines each column and can contain a data template based on the bound data.
sortProperty – At the column level supports user selected sorting based on the configured data. Many other options. Also see sap.m.Table for selected functionality optimized for mobile devices © 2015 SAP SE or an SAP affiliate company. All rights reserved
sap.m.Dialog
Dialogs prompt the user for decisions or additional information. Fully configurable and can contain other controls and views. Dialogs are typically instantiated in the controller based on a user action. The sample shows a pop-up that lets the user chose the appropriate product.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
sap.m.MessageBox
Specialization of sap.m.Dialog with configured texts and buttons. Additional Properties:
title – Displayed on top of the pop-up. icon – Icon for message type. Supported values: Error, Information, Success, None, Question, Success, Warning
actions – Button to be added to message. Supported Values: Abort, Cancel, Close, Delete, Ignore, No, Ok, Retry, Yes.
onClose – Method triggered when user presses on a button © 2015 SAP SE or an SAP affiliate company. All rights reserved
sap.viz.ui5.Donut
The sap.viz library contains over 25 chart and graph types. It is built on the open source component D3 and Scalable Vector Graphics. Selected Aggregations:
dataset – Used to define a FlattenedDataset to bind data to the chart.
dimensions – Defines the categories of data for a given chart.
measures – Defines the value for the given dimention of the chart.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Desktop-Focused Control Libraries
These libraries contain full-featured controls that focus on the needs in a traditional desktop environment.
sap.ui.commons – Common basic controls.
sap.ui.ux3 – Controls that implement SAP User Experience Guidelines 3.0 Not the focus of this course, but Exercise 13 will leverage these controls. Most of these controls now have a corresponding sap.m version (where the control is suitable for all device types)
© 2015 SAP SE or an SAP affiliate company. All rights reserved
sap.ui.commons.Tree Selected Properties:
Selected Events:
title – Displayed at the top of the
select – triggered
tree.
selectionMode – Controls how selections are possible (Multi, Single, None, Legacy)
selectable – Indicates a node can be selected. (At TreeNode level.)
© 2015 SAP SE or an SAP affiliate company. All rights reserved
when tree node is selected.
selectionChange – triggered when selected node is changed.
sap.ui.ux3.Shell
A UX3 shell is an application frame with navigation capabilities. Additional Properties / Aggregations:
content – Content for currently displayed workset item.
worksetItems – Used for main content navigation. Additional Events:
search – Triggered when the shell’s search icon is selected
worksetItemSelected – triggered when an item from the main navigation is selected. © 2015 SAP SE or an SAP affiliate company. All rights reserved
Demo 6: How to show different UI Controls In this demo, we will explore different SAPUI5 controls from the demo kit. 1. Go to the main demo kit page: https://sapui5.netweaver.ondemand.com/sdk 2. Choose the “Explored” tab 3. Select or search any control to view the samples that are available. 4. Select a sample to view the control in action. 5. Press the sample.
(code) button to display the source for a
6. Download the sample code if desired.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Demo 7: How to work with Different View Types In this demo, we will show how to work with different view types to create a simple form. 1. Show views of different types (HTML, JavaScript, JSON, XML) 2. Configure index.html to point at a specific view. 3. Show the resulting application.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Exercise 5: Work with Different View Types
30 minutes
Watch
Try
Self-Test
Print
© 2015 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will experiment with creating different view types and add some simple controls to the UI.
Summary
You should now able to: Describe UI Controls
© 2015 SAP SE or an SAP affiliate company. All rights reserved
SAPX05 SAP SAPUI5 User Experience Development
SAPUI5 Overview
SAPUI5 Development Options
SAPUI5 Project Basics
SAPUI5 Controls © 2015 SAP SE or an SAP affiliate company. All rights reserved
60 minutes
130 minutes
SAPUI5 Application Debugging
90 minutes
Layouts and Custom Controls
120 minutes
Data Handling
280 minutes
Additional SAPUI5 Development Features
180 minutes
SAPUI5 Branding
50 minutes
90 minutes
90 minutes
Unit 5: SAPUI5 Application Debugging
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Scenario
As a Business Process owner you are requested to permanently improve the user experience in your area of responsibility. Creating user interfaces is a critical aspect in the user experience. In this training, you will learn how to develop SAPUI5 user interfaces to induce a great user experience.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Using Browser-based Debugging Tools Exploring Available SAPUI5 Documentation Exploring SAP Web IDE Code Assist
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 1: Using Browser-based Debugging Tools
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Use Browser-based Debugging Tools
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Google Chrome Developer Tools Chrome Developer Tools (DevTools for short) are a set of web authoring and debugging tools built into Google Chrome. To Start:
à Tools à Developer Tools
Main Functions: Edit page elements and styles in real time Debug JavaScript Set Breakpoints Change JavaScript code on-the-fly (and save into separate location) Use a shell prompt to inspect objects and values
Insights into code optimization © 2015 SAP SE or an SAP affiliate company. All rights reserved
Developer Tools: Important Views
See everything in one DOM Tree
Monitor Performance
Inspection of Elements and on-the-fly editing of DOM
See time needed to download resources
View generated HTML and IDs
Real-time logging of Network traffic
Change CSS Styles in the Styles tab.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Developer Tools: Important Views (Continued)
View all loaded JavaScript and HTML Add breakpoints to JavaScript Make on-the-fly changes in routines.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Interact with page Log diagnostic information Provide shell prompt for checking JavaScript variables and interacting with the DOM.
Inspect Elements / Change Styles
Right clicking on an element in your application and choosing “Inspect Element” will have the following impact: Select the element in the Element view Show the styles associated with that element in the Styles window. From here you can edit the styles and the results will be immediately updated in the application view: •
Deactivate a style by unchecking it
•
Change a style by clicking on it and editing.
•
Add new style class by pressing the + sign
© 2015 SAP SE or an SAP affiliate company. All rights reserved
JavaScript Debugger
DevTools supplies powerful breakpoint features to help find and fix logic errors in your code. Add or remove breakpoints: Click the line number where you want to set a breakpoint (click again to remove the breakpoint). Uncheck box in sidebar to temporarily disable checkpoint. Step Through Code:
Resume, Step over, Step Into function, Step out of function
© 2015 SAP SE or an SAP affiliate company. All rights reserved
JavaScript Debugger: Using the Console Shell Prompt
When paused in the debugger, you can use the shell prompt at the bottom of the Console view to execute any JavaScript in the context of that breakpoint: Evaluate JavaScript expressions Enter commands that interact with the document Execute JQuery commands. Upon refreshing the browser: Breakpoints are preserved Other coding changes revert back to their original values. © 2015 SAP SE or an SAP affiliate company. All rights reserved
Demo 8: How to walk-through Chrome Developer Tools In this demo, we will show how to leverage the Chrome Developer tools for your SAPUI5 development. 1. Run and application and start the Chrome Developer tools 2. View errors in the console 3. Review available sources 4. Add breakpoints to JavaScript 5. View Elements and resulting HTML 6. Show how to inspect an element and Styles
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Exercise 6: Walk-trough Chrome Developer Tools
20 minutes
Watch
Try
Self-Test
Print
© 2015 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will practice using Chrome Developer tools and fix bugs in a sample program.
Summary
You should now able to: Use Browser-based Debugging Tools
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Using Browser-based Debugging Tools Exploring Available SAPUI5 Documentation Exploring SAP Web IDE Code Assist
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 2: Exploring Available SAPUI5 Documentation
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Explore Available SAPUI5 Documentation
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Official SAP Documentation
Documentation is available at http://help.sap.com under the topic “UI Development Toolkit for HTML5” The content available amounts to a Developer Guide which includes a summary of information around the: Fundamentals of SAPUI5 Framework Leveraged Programming Languages Open Source Technologies Development Tools Performance Notes NetWeaver specific information such as using with an ABAP SAPUI5 source repository. © 2016 SAP SE or an SAP affiliate company. All rights reserved
The UI5 Demo Kit contains all this developer information (except the platform specific info) plus much, much more.
SAPUI5 Demo Kit
The SAPUI5 Demo Kit is available at the following location: https://sapui5.netweaver.ondemand.com/ The Demo Kit provides a comprehensive overview of the SAPUI5 framework and is broken into the following entry points: Developer Guide – Summary of information around the leveraged programming languages, open source technologies, development tools and APIs. Controls – Descriptions and running examples of selected desktop based controls. Explored – Documentation and running samples of selected of a wide variety of SAPUI5 controls (focused primarily on sap.m) © 2016 SAP SE or an SAP affiliate company. All rights reserved
SAPUI5 Demo Kit: Additional Entry Points
The SAPUI5 Demo Kit is available at the following location: https://sapui5.netweaver.ondemand.com/ Entry points (continued): API Reference – Complete reference of the SAPUI5 language including all components with every supported property, method, and event. Demo Apps – A selection of fully functioning SAPUI5 applications that employ best practices and a range of controls and functionality. Icons – Samples of all 500 built-in icons that are a part of SAPUI5 including how they look by default in various contexts. © 2016 SAP SE or an SAP affiliate company. All rights reserved
Explored App
© 2016 SAP SE or an SAP affiliate company. All rights reserved
API Reference
The API Reference contains all controls and SAPUI5 objects by namespace and then by name. Each reference includes: Constructor, Events, Methods Origin of inherited events and methods. Constructor Detail including Properties, Aggregations, and Events Links to every referenced class Information on when the control was added and any deprecation information. Caution: All defaults are not always listed. May need to check delivered library. © 2016 SAP SE or an SAP affiliate company. All rights reserved
Summary
You should now able to: Explore Available SAPUI5 Documentation
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Using Browser-based Debugging Tools Exploring Available SAPUI5 Documentation Exploring SAP Web IDE Code Assist
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Lesson 3: Exploring SAP Web IDE Code Assist
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Explore SAP Web IDE Code Assist
© 2015 SAP SE or an SAP affiliate company. All rights reserved
SAPUI5 XML Source Code and Code Assist
SAP Web IDE has code completion capabilities called Code Assist: Works in JavaScript and XML Auto hint: Attempts to complete the statement you are entering. (Must be enabled in Settings.) Tab or Enter to accept proposal. •
CTRL-Space: Provides list of possibilities. Arrows or mouse over to the right entry in list. Click, Tab, or Enter to accept proposal.
Strikethrough – Deprecated - Just control or property - Template properties included © 2015 SAP SE or an SAP affiliate company. All rights reserved
- Boolean - Text - Enumerated List - Event Routine
SAPUI5 JavaScript Source Code and Code Assist
Auto hint: Attempts to complete the statement you are entering. (Must be enabled in Settings.) Tab or Enter to accept proposal.
- Method © 2015 SAP SE or an SAP affiliate company. All rights reserved
CTRL-Space: Provides list of possibilities. Arrows or mouse over to the right entry in list. Click, Tab, or Enter to accept proposal.
- Static class or namespace component
Demo 9: How to understand Issues Related to Code Assist In this demo, we will show how to use Code Assist to help complete your coding and be to be aware of the limitations in the context of adding an action to button. 1. Show code-assist while editing JavaScript. 2. Attach an action to a button. Test. 3. Show code-assist while editing XML Views. 4. Source of info on properties, collections, and methods is: https://sapui5.netweaver.ondemand.com/sdk/
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Exercise 7: Understand Issues Related to Code Assist
20 minutes
Watch
Try
Self-Test
Print
© 2015 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will get your hands on the Web IDE’s Code Assist feature and learn the limitations and where to go for further help.
Summary
You should now able to: Explore SAP Web IDE Code Assist
© 2015 SAP SE or an SAP affiliate company. All rights reserved
SAPX05 SAP SAPUI5 User Experience Development
SAPUI5 Overview
SAPUI5 Development Options
SAPUI5 Project Basics
SAPUI5 Controls © 2015 SAP SE or an SAP affiliate company. All rights reserved
60 minutes
130 minutes
SAPUI5 Application Debugging
90 minutes
Layouts and Custom Controls
120 minutes
Data Handling
280 minutes
Additional SAPUI5 Development Features
180 minutes
SAPUI5 Branding
50 minutes
90 minutes
90 minutes
Unit 6: Layouts and Custom Controls
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Scenario
As a Business Process owner you are requested to permanently improve the user experience in your area of responsibility. Creating user interfaces is a critical aspect in the user experience. In this training, you will learn how to develop SAPUI5 user interfaces to induce a great user experience.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Using Layouts and UI Areas
Creating Custom Controls
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 1: Using Layouts and UI Areas
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Describe Layouts
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Layout Options
sap.m.FlexBox – Flexible Box Layout sap.ui.layout.FitFlex – A fixed part for multiple controls and an adaptable part for one control.
sap.ui.commons.layout – layouts focused on desktop devices: AbsoluteLayout BorderLayout
sap.ui.layout.Grid – 12 column flow layout.
MatrixLayout
sap.ui.layout.HorizontalLayout
HorizontalLayout – deprecated use sap.ui.layout version.
sap.ui.layout.ResponsiveFlowLayout – Controls blown up to fit one line sap.ui.layout.VerticalLayout
ResponsiveFlowLayout – deprecated use sap.ui.layout version. VerticalLayout – deprecated use sap.ui.layout version.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Layout: sap.m.FlexBox
Selected Properties:
alignItems – Options include: Baseline, Center, End, Inherit, Start, and Stretch.
justifyContent – Options include: Center, End, Inherit, SpaceAround, SpaceBetween, and Start.
height / width – CSS sizes like “1px” or “2em” or “50%”. Aggregations:
items – Contains any controls.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
In this example, the controls are centered on the line and the space is evenly distributed between the controls.
Layout: sap.ui.layout.Grid A Grid is a 12 Column Flow Layout. You can specify how many columns a given element consumes.
GridData – Can be included in the layoutData of any control inside the Grid tags.
span – Inside GridData specifies how many columns the control will take in Large, Medium, and Small formats. Features like this make SAPUI5 responsive. The example below is from a medium screen. The label takes 2/12ths of the line while the input takes 3/12ths:
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Add the new namespace with the short-name “l”. Use the short-name prefix when writing the XML:
Demo 10: How to use Layouts and Controls In this demo, we will show how we can leverage layout controls to impact where controls are positioned on the screen how the screens can be responsive to different size screens. 1. Add a Grid layout control to an XML view 2. Test at various screen sizes 3. Add FlexBox for more fine alignment control 4. Retest
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Exercise 8: Use Layouts and Controls
20 minutes
Watch
Try
Self-Test
Print
© 2015 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will use layouts to format the data that you put on the UI in previous exercises.
UI Area Revisited As mentioned earlier, a UI Area is nothing more than a container that can hold controls/content. A div tag (either explicitly added in the index.html or when rendered as part of a control) UI Areas can be nested as necessary and there are several SAP controls with the primary function of being a container for other controls. Multiple UI areas in index.html:
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Multiple UI areas in an XML view:
sap.m.Shell
The Shell is a container that can be used as the root element of applications. Contains overarching functionality and takes care of visual adaptation (like a frame around the app) on desktop browser platforms. Selected Properties:
backgroundColor – CSS Color behind embedded controls
showLogout – Display the logout icon. Selected Events:
logout – Triggered on press of logout icon
© 2015 SAP SE or an SAP affiliate company. All rights reserved
The example used a Label for the App for simplicity. In our exercises, we will use sap.m.Shell as a simple container for our content inside a View. When used that way, many of the properties have no effect.
sap.m.Panel
A Panel is a container for controls with a solid background and a header text. Selected Properties:
headerText – Text placed in the always visible header.
expandable – Boolean. Indicates whether the Panel can be collapsed.
expanded – Boolean. Indicates whether the Panel should initially be open. Default: "false" Select Aggregations:
content – Contains the controls in the Panel. © 2015 SAP SE or an SAP affiliate company. All rights reserved
sap.m.Bar
The Bar can be used as a page header. It can center content like a title, and have a few controls on the left or right side. Selected Properties:
design – Determines how the bar is styled. Options include: Auto, Footer, Header, SubHeader Aggregations:
contentLeft / contentMiddle / contentRight – Places the contained controls in the specified position of the Bar.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Demo 11: How to create Multiple UI Areas In this demo, we will show the use of multiple containers within the same application to prepare for the upcoming exercise. 1. Replace the Page control with a Panel. 2. Wrap the Panel in a Shell. 3. Add a Bar to the Shell. 4. Add an additional Panel to the Shell. 5. Enclose the Shell contents in a VerticalLayout.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Exercise 9: Create Multiple UI Areas
15 minutes
Watch
Try
Self-Test
Print
© 2015 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will add controls that create additional UI Areas within the application you have previously been working on.
Core Functions Revisited
sap.ui.getCore().byId(id) As previously discussed, gets an instance of a UI5 control which was created with id id The DOM cannot contain more than one element with the same id. But what if two people working on different views just happen to use the same id? The SAPUI5 framework handles it by appending the id of the view to the id of the control, so the id from above becomes (including the “--” between the ids): -- If we embed views within views, then the id becomes: ---- For example, to access the First Name control of our View, it would be
sap.ui.getCore().byId("idView1--inpFirstName"); © 2015 SAP SE or an SAP affiliate company. All rights reserved
Demo 12: How to use Core Functions In this demo, we will show how to access values controls and values entered into the controls from core functions. 1. Show how to access any control with: sap.ui.getCore().byId("reference"); 2. Create the appropriate reference by combining the id of the view with the id of the desired control. 3. Use the core functions to retrieve user entered fields and display them in a MessageBox. 4. Test.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Exercise 10: Use Core Functions
15 minutes
Watch
Try
Self-Test
Print
© 2015 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will get data entered into the screen and display it in a new control. You will also add the secondary views created in an earlier exercise to be part of your application.
Summary
You should now able to: Describe Layouts
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Using Layouts and UI Areas
Creating Custom Controls
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Lesson 2: Creating Custom Controls
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Create Custom Controls
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Control Extension
This section deals with creating custom controls in JavaScript with the extend method. Since an IDE is not needed to create new controls with the extend method, these controls have been named "Notepad Controls". Technically, this extension ability is not restricted to Controls. Arbitrary objects derived from sap.ui.base.Object can be created or extended.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
The Extend Method
The extend() method is available on all Controls (and the base classes) and is used to define a new subclass. Creating a new control: sap.ui.core.Control.extend(sName, oDefinition); Creating a new Control which inherits from Button: sap.ui.commons.Button.extend(sName, oDefinition); The parameters of this function are the name and the definition of the new control type. ‒ The definition includes information about the control API, properties, aggregations, events, etc. for the control and the implementation of the control methods.
Some methods such as the getters and setters for the properties and aggregations or the methods for attaching/detaching event handlers are automatically created by UI5. © 2016 SAP SE or an SAP affiliate company. All rights reserved
Control Metadata: Properties
The metadata in the control definition consists of objects for the control properties, events and aggregations. Properties
Example
type: The data type of the Control property.
properties: { title: "string", btnTxt: { defaultValue: "Search"}, showLogoutButton: { type: "boolean", defaultValue: true }, width: { type: "sap.ui.core.CSSSize", defaultValue: "50px" } }
• • • •
string for a string property (default) int or float for number properties int[] for an array of integers, string[] for an array of strings, etc. sap.ui.core.CSSSize for a customdefined type
defaultValue: The default value of the property. (undefined if not set)
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Control Metadata: Events / Aggregations
Events
Aggregations
Events are specified by the event name only. In many cases there is nothing to configure about them, so just give an empty object.
Aggregations and associations are defined by their name, along with an object that can have a type, a multiple flag and a singularName.
Controls can enable events to be interrupted by the application, using the enablePreventDefault flag.
aggregations: { acceptButton: "sap.ui.commons.Button", worksetItems: { type: "sap.ui.ux3.NavigationItem", multiple: true, singularName : "worksetItem" } }
events: { logout: {}, close: { enablePreventDefault : true } }
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Control Methods: Cautions
After the metadata is defined, you can add any method implementations to your new Control. The method names can be chosen freely, some method names must be avoided though: ‒ Names of methods that are provided by a super class. ‒ Methods starting with set, get, insert, add, remove or indexOf may collide with setters/getters for properties or aggregations you defined. ‒ Methods starting with attach, detach or fire may collide with methods created for events.
There are some method names you may use but which have a special meaning: ‒ on...: Methods starting with "on" are event handlers that are automatically bound to browser events. ‒ init: Is the name of the initialization function called right after Control instantiation. ‒ renderer: The name of the function that creates the HTML for the control.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Control Methods: Other Notes
Public / private methods ‒ The convention is that private methods start with an underscore. All other methods are considered public.
init Method ‒ The init() method is invoked by the UI5 core for each control instance right after the constructor. Use this to set up things like internal variables or sub-controls of a composite. This method is considered private and only to be called by the UI5 core.
onAfterRendering Method ‒ The onAfterRendering() method is invoked after the controller's View is re-rendered.
Event handler methods ‒ Methods that have a name starting with on are reserved for event handlers. For common events such as click or keydown, browser event handlers for these methods are registered automatically by the UI5 core.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Control Method Examples:
// public method divide: function(x, y) { if (this._checkForZero(y)) { throw new Error("Second parameter may not be zero"); } return x / y; }, // private method _checkForZero: function(y) { if (y === 0) { return true; } return false; },
© 2016 SAP SE or an SAP affiliate company. All rights reserved
// init method, invoked when control // is instantiated init: function() { this._bSearchTriggered = false; this._oSearchBtn = new sap.ui.commons.Button( this.getId() + "-searchBtn", { text: "Search" } ); }, // event handler onclick: function(e) { alert("Control " + this.getId() + " was clicked."); }
Control Renderer Example:
The renderer method is responsible for creating the HTML structure that makes up the control. It is different from the other methods, as it is a static one, so the this keyword is not available. Instead, a control instance and a RenderManager instance are given to the method.
If an existing renderer should be used without modification, you can give the name of this renderer class. © 2016 SAP SE or an SAP affiliate company. All rights reserved
renderer: function(oRm, oCtrl) { oRm.write(""); oRm.writeEscaped(oCtrl.getText()); oRm.write(""); }
Using an existing renderer: renderer: "sap.ui.commons.ButtonRenderer"
Control Renderer: Writing a Control Renderer Class
Extract the implementation from the control to a separat rendering class: Method
Description
write()
Writes HTML output
writeControlData()
Writes ID and recognition data of control to HTML
renderControl()
Converts the specific control into HTML and adds the output to the HTML. This is used to render child components.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Control Definition: Basic Example
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Custom Controls: Example with Data Binding
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Demo 13: How to Create Custom Controls In this demo, we will show the steps to construct a custom control. (You will do your own custom control in a later exercise.) 1. Use sap.ui.core.Control.extend() to define the new control. 2. Add a metadata section to define the properties that will be in the new control. 3. Add an init method to create a div where our new control can be placed. 4. Add a renderer method to display the new content. 5. Add an onAfterRendering method to initialize the data for the control after it is rendered. 6. Add new control to view. Test.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Summary
You should now able to: Create Custom Controls
© 2016 SAP SE or an SAP affiliate company. All rights reserved
SAPX05 SAP SAPUI5 User Experience Development
SAPUI5 Overview
SAPUI5 Development Options
SAPUI5 Project Basics
SAPUI5 Controls © 2015 SAP SE or an SAP affiliate company. All rights reserved
60 minutes
130 minutes
SAPUI5 Application Debugging
90 minutes
Layouts and Custom Controls
120 minutes
Data Handling
280 minutes
Additional SAPUI5 Development Features
180 minutes
SAPUI5 Branding
50 minutes
90 minutes
90 minutes
Unit 7: Data Handling
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Scenario
As a Business Process owner you are requested to permanently improve the user experience in your area of responsibility. One essential part of the user experience with SAPUI5 is the handling of data, displayed in various screens. This unit informs about the possibilities of handling data with SAPUI5.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Exploring Model Types
Performing OData Query Options
Performing Binding Operations
Performing Common Data Operations: Format
Performing Property Binding Operations
Performing Common Data Operations: Sort and Filter
Performing Advanced Binding Techniques
Performing Common Data Operations: Calculated Fields and Data Validation
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 1: Exploring Model Types
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Explore the model types JSON, XML and OData
© 2015 SAP SE or an SAP affiliate company. All rights reserved
SAPUI5 Model Types The following model types are supported in binding data to controls:
XML model
JSON model Supports data in a JavaScript Object Notation format Client-Side Model Supports two-way binding
Supports XML data Client-Side Model Supports two-way binding
OData model Supports OData compliant data Server-Side Model Creates OData requests and handles responses Includes the open source library dataJS to handle OData requests and data Experimental two-way binding
Additionally, the ResourceModel helps binding translated texts Applications can create their own Model implementations © 2015 SAP SE or an SAP affiliate company. All rights reserved
JSON Data Overview
What is JavaScript Object Notation? Text-based open-standard designed for human-readable data interchange Derived from the JavaScript language for representing simple data structures and associative arrays, called objects Despite its relationship to JavaScript, it is language-independent, with parsers available for many languages “:” Used to separate key:value “{}” Used to enclose grouped properties which are separated by “,” “[]” Used to enclose arrays of grouped properties which are separated by “,”
© 2015 SAP SE or an SAP affiliate company. All rights reserved
OData supports the JSON format to make consuming OData services from JavaScript applications simple since JSON can be easily be turned into JavaScript objects for programmatic manipulation
XML Data Overview
What is Extensible Markup Language? Text-based open-standard designed for human-readable data interchange Defined by the W3C’s XML 1.0 and other related specifications. When data is encoded in XML, the result is typically larger than an equivalent encoding in JSON, mainly because of XML's closing tags. There are alternative ways to encode the same information because some values can be represented both as child nodes and attributes. Data is represented between and where tag is any value. Tags can be embedded and repeated to create groups and arrays. © 2015 SAP SE or an SAP affiliate company. All rights reserved
Also Possible:
OData Overview
Based on HTTP, Atom Pub format and JSON Enables provisioning of data services based on REST principles Released under an “open specification promise” by Microsoft Defines data queries using URLs constructed with specific rules Defines data formats representing resources like collections, entries, etc. in either Atom or JSON format Server-side interactions only for sorting, filtering, paging, etc. of the data. (* except with offline OData from SAP Mobility Platform).
OData URL structure: http://services.odata.org/OData/OData.svc/Category(1)/Products?$top=2 Service Root URI
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Resource path
Query options
OData – Service Document & Metadata
Service Document ‒ The service document (returned at the OData service root) gives you the titles and urls for each service feed:
http://services.odata.org/V3/OData/OData.svc/
$metadata ‒ The $metadata entry for an OData service return a EDMX file (Entity Data Model XML) that contains a complete description of the feeds, types, properties and relationships exposed by the OData service:
http://services.odata.org/V3/OData/OData.svc/$metadata Alternatively, this experimental API Explorer by the OData Service can be used: http://services.odata.org/ODataAPIExplorer/ODataAPIExplorer.html
© 2015 SAP SE or an SAP affiliate company. All rights reserved
OData – System Query Options
When accessing an OData service, you can supply some system query options to influence the returned entries:
Parameter Description
Example
$orderby
Orders entries by the entity supplied
/Products?$orderby=Rating,desc
$top
Selects only the first N items in a collection
/Products?$top=5
$skip
selects entries starting by N+1
/Products?$skip=2
$filter
filters entries based on the criteria
/Suppliers?$filter=Address/City eq 'Redmond'
$expand
expanded Entries are eagerly loaded and presented inline
/Categories?$expand=Products
$format
defines the format that the server must return
/Products?$format=json
$select
returns the subset of the specified properties
/Products?$select=Price,Name
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Creating a Model Instance
To use data binding in a SAPUI5 applications you will need to instantiate the appropriate model first. The constructor takes the URL of the model data or the data itself as the first parameter. JSON-Model:
XML-Model:
OData-Model:
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Model Assignment
After the model has been created you can assign the model to the Core or specific controls with the setModel method The relevant model for a control is the one which is nearest to it on the path up to the root. ‒ If there is no model in the root path found the one attached to the Core becomes the relevant model ‒ When using multiple SAPUI5 components, you must specify whether the Core model is propagated to any new component.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Summary
You should now able to: Explore the model types JSON, XML and OData
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Exploring Model Types
Performing OData Query Options
Performing Binding Operations
Performing Common Data Operations: Format
Performing Property Binding Operations
Performing Common Data Operations: Sort and Filter
Performing Advanced Binding Techniques
Performing Common Data Operations: Calculated Fields and Data Validation
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 2: Performing Binding Operations
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Perform Data Binding
© 2016 SAP SE or an SAP affiliate company. All rights reserved
UI5 Data Binding In UI5, DATA BINDING is used to bind UI5 controls to a data source that holds the application data, so that the controls are updated automatically whenever the application data is changed.
With TWO-WAY-BINDING the application data is updated whenever the value of a bound control changes, e.g. through user input.
application data
UI5 Control / Output
application data
John Doe
John Doe, 35
John Doe
John Doe
John Doe, 35
Age: 35
Age: 35 application data has been updated
UI5 Control / Output
Resulting UI5 Control / Output
Resulting application data
John Doe, 36
John Doe
Age: 36
UI5 Control / Output has been updated
John Doe, 36
Age: 36
Data binding supports binding of simple controls like Text and list type controls like Table. See the complete documentation on how data binding works and how to implement it in an application. © 2016 SAP SE or an SAP affiliate company. All rights reserved
Demo 14: How to Explore JSON In this demo, we will show how to create a JSON data model and bind it to UI controls. 1. Create a JSON string and fill it with the needed data. 2. Create a sap.ui.model.json.JSONModel(data); and initialize it with the JSON string. 3. In the XML view, bind the values from the model to the needed fields using the format {/property} Test.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Exercise 11: Explore JSON
15 minutes
Watch
Try
Self-Test
Print
© 2015 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will create a simple JSON model and bind the model to the fields we have displayed on the screen in previous exercises.
Summary
You should now able to: Perform Data Binding
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Exploring Model Types
Performing OData Query Options
Performing Binding Operations
Performing Common Data Operations: Format
Performing Property Binding Operations
Performing Common Data Operations: Sort and Filter
Performing Advanced Binding Techniques
Performing Common Data Operations: Calculated Fields and Data Validation
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 3: Performing Property Binding Operations
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Perform Property Binding
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Property Binding in an XML View
Assume the model shown on the right: Use curly braces {} to surround the desired key. If the key is an independent node, add a forward slash “/” in front of it. Optionally set with the path property as: "{ path:'/node' }" where node is the desired key. Using path is necessary if you need to set multiple/nested properties to an aggregation at the same time. We bound the aggregation items to the collection node data. We omit the / when binding the dependent key and text values. © 2016 SAP SE or an SAP affiliate company. All rights reserved
Property Binding in JavaScript Most of the properties of a control can be bound to model properties There are two ways to bind properties to the model, in the constructor with curly braces or using the bindProperty method bindProperty method: • oControl.bindProperty("controlProperty", "modelProperty");
curly braces syntax: var oControl = new sap.m.Input({ controlProperty: "{modelProperty}" });
(alternatively) by path: var oControl = new sap.m.Input({ controlProperty: { path: "modelProperty" } }); © 2016 SAP SE or an SAP affiliate company. All rights reserved
JavaScript Binding Example for Simple Control
© 2016 SAP SE or an SAP affiliate company. All rights reserved
About Binding Paths
Absolute binding paths within this model:
{ company: { name: "ACME", info: { employees: 3 }, contacts: [ { name: "Barbara", phone: "873" },{ name: "Gerry", phone: "734" } ] } } © 2016 SAP SE or an SAP affiliate company. All rights reserved
/company/name /company/info/employees /company/contacts (a collection!) /company/contacts/0/name
Relative binding paths within the "/company" context: name info/employees contacts
Relative binding paths within an aggregation binding of "/company/contacts": name phone
Summary
You should now able to: Perform Property Binding
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Exploring Model Types
Performing OData Query Options
Performing Binding Operations
Performing Common Data Operations: Format
Performing Property Binding Operations
Performing Common Data Operations: Sort and Filter
Performing Advanced Binding Techniques
Performing Common Data Operations: Calculated Fields and Data Validation
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 4: Performing Advanced Binding Techniques
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Perform Advanced Binding Techniques
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Aggregation Binding Aggregation binding is used to bind a collection of values, like binding multiple rows to a table. When binding to an aggregation, you will have to use a control that leverages a template. Aggregation
Data Collection Template
In JavaScript:
The aggregation binding can also be defined using the bindAggregation method of a control.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Example of Aggregation Binding
The collection teamMembers is bound to the aggregation rows. The firstName and lastName properties can then be bound to the template for the Column. © 2016 SAP SE or an SAP affiliate company. All rights reserved
Multiple / Named Models It is possible to set multiple models for an element or the core by specifying individual names for the models, which are used to identify them. When binding at the collection or property level, add the model name followed by the “>” then the property / collection name.
JavaScript Examples:
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Extended Data Binding Syntax
Instead of only using the token name of a model property, can also use the extended data binding syntax ‒ This enables you to use formatters and the type system for property binding and templates, filter and sorters for aggregation binding
To use the extended syntax, you supply an object literal for the bound property/aggregation. Extended property binding:
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Extended aggregation binding:
Demo 15: How to Perform Aggregation Binding In this demonstration, we will show how to bind an aggregation of names to a ComboBox dropdown list. 1. Create/Fetch the data for the list and assign it into a model. 2. Bind the model to the ComboBox’s items. 3. Test the result.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Exercise 12: Perform Aggregation Binding
15 minutes
Watch
Try
Self-Test
Print
© 2016 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will create a dropdown list of options for the first name field that you have created previously for your application.
Demo 16: How to Bind Data with AJAX In this demo, we will show how to obtain data from an external source and bind that data to a table. 1. Create an empty model. 2. Specify the service to be used to populate the model (along with any needed user-entered data) 3. Create controls for displaying the data, including a custom control. 4. Bind the fields from the model to the controls. 5. Create a routine to trigger the service to populate the model after the needed data is entered. Test.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Exercise 13: Use AJAX to bind Data
20 minutes
Watch
Try
Self-Test
Print
© 2016 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will be starting with a provided template focused on using the SAPUI5 desktop libraries. You will expand this template to use an AJAX based service to search for and return a list of songs from Apple. Finally, you will create a custom SAPUI5 control to play a few seconds of a given song.
Master-Detail Interfaces A master-detail relationship is a 1:n type relationship Examples of a masterdetail relationship are: ‒ A set of purchase orders and a set of line items belonging to each purchase order ‒ An expense report with a set of expense line items ‒ A department with a list of employees belonging to it
An application can use this master-detail relationship to enable users to navigate through the purchase order data and see the detail data for line items only related to the master purchase order selected © 2016 SAP SE or an SAP affiliate company. All rights reserved
Example of Master-Detail Interaction
An entry selected in the Clients table will update the screen to show the address information and orders for that client. To accomplish this: Listen for the event rowSelectionChange on Clients. When the event is fired, adjust the binding for the address. For the orders, we can filter the data being displayed. (More details on filtering in the a later section.) © 2016 SAP SE or an SAP affiliate company. All rights reserved
Select Master-Detail Coding
From the rowSelectionChange event on Clients, we get the rowContext and the id of the selected client. To bind the correct address to the controls, we use JQuery loop through the addresses until we find the one that matches our client. Then we bind that address to the container control that holds all the address data controls. For the Orders table, we filter the binding to show only the orders that match the selected client id.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Demo 17: How to use Explore_MasterDetailView In this demo, we will show controls that have Master and Detail data relationships and explain the steps necessary to bind the data. 1. Fetch/Create the related data and assign it to a model. 2. Create controls for the master and detail levels. 3. Bind initial data to the controls 4. On change of data at the master, update the detail controls with the appropriate data. Test.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Summary
You should now able to: Perform Advanced Binding Techniques
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Exploring Model Types
Performing OData Query Options
Performing Binding Operations
Performing Common Data Operations: Format
Performing Property Binding Operations
Performing Common Data Operations: Sort and Filter
Performing Advanced Binding Techniques
Performing Common Data Operations: Calculated Fields and Data Validation
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 5: Performing OData Query Options
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Perform OData Query Options
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Adding OData Query Options in an XML View
SAPUI5 handles most of the URL parameters for OData services automatically. You do have the ability to add query via declaration in an XML view as follows:
When the OData model is loaded from the associated service: 1. The rows of the Table will be bound to the Employees collection. 2. The load will also fetch the Orders that are linked to the Employees. 3. Only the Employees fields EmployeeID, FirstName, and LastName will be retrieved along with only the OrderID for the related orders. (Limiting the data retrieved is important for limiting network load and performance of the client.) © 2016 SAP SE or an SAP affiliate company. All rights reserved
Adding OData Query Options in JavaScript
In JavaScript, you have the option to manually add query options to the Odata call either by adding them to the service URL or passing a map of parameters when using bindElement or bindAggregation. Expand Parameter:
Select Parameter:
oControl.bindElement( "/Category(1)", { expand: "Products" } );
oControl.bindElement( "/Category(1)", { expand: "Products", select: "Name,ID,Products" });
oTable.bindRows({ path: "/Products", parameters: { expand: "Category" } });
© 2016 SAP SE or an SAP affiliate company. All rights reserved
oTable.bindRows({ path: "/Products", parameters: { select: "Name,Category" } });
Demo 18: How to use OData In this demo, we will show how to use an oData service via the Hana Cloud Platform and display that data in a table. 1. Create a new destination in HCP. 2. Configure the project to use the destination. 3. Create an empty model 4. Specify the service to be used to populate the model and when it should be triggered. 5. Create and bind controls for displaying the data. Test.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Exercise 14: Use OData
25 minutes
Watch
Try
Self-Test
Print
© 2016 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will create an HCP destination that is used to access an OData service and then display the data in a Table.
Summary
You should now able to: Perform OData Query Options
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Exploring Model Types
Performing OData Query Options
Performing Binding Operations
Performing Common Data Operations: Format
Performing Property Binding Operations
Performing Common Data Operations: Sort and Filter
Performing Advanced Binding Techniques
Performing Common Data Operations: Calculated Fields and Data Validation
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 6: Performing Common Data Operations: Format
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Perform Common Data Operations: Format
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Formatting Data
For properties you can supply a formatter function which will be called with the value of the model property. The return value of the formatter function is used as the value of the bound control: In XML View:
In JavaScript:
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Type System and Formatting Data
Data binding supports the definition of types which can be handed over when binding properties ‒ Bound properties with a defined type will automatically be formatted when displayed in the UI, input values in UI controls are parsed and converted back to the defined type in the model. For each Type you can define the following parameters in the constructor: ‒ format options: Format options define how a value is formatted and displayed in the UI. ‒ constraints (optional): Constraints define how an input value entered in the UI should look. When parsing the value will be validated against these constraints.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Date Type Formatting Example
In XML View:
In JavaScript:
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Custom Type Example
Suppose we wanted a type that would format 10-digit telephone numbers as: “(123) 456-7890” where the original data is 1234567890
Original Model Data
Displayed Result
With a custom type, it is also possible to make changes as the data is parsed and to validate user input values. (More on that later.) © 2015 SAP SE or an SAP affiliate company. All rights reserved
Demo 19: How to Format Data In this demo, we will show how to create a custom formatter and to apply it to an input field. 1. Create the formatter routine. 2. Listen for the event when the input field to be formatted changes. 3. Trigger the formatter when the field has changed. 4. Update the model with the input value after it has been formatted. Test. 5. For non-input fields, attach the formatter directly to the control displaying the data.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Exercise 15: Format Data
20 minutes
Watch
Try
Self-Test
Print
© 2015 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will create a custom formatter that will format the data in a field of your application.
Demo 20: How to work with Date Types In this demo, we will show how to specifically type a date field and then leverage specialized formatting options for that type. 1. Add a date into the model. 2. Add the type specifier to the text definition of the displaying control. 3. Add the formatting options to be leveraged when displaying the screen. 4. Test
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Exercise 16: Work with Date Types
15 minutes
Watch
Try
Self-Test
Print
© 2015 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will format a date and display it in your application.
Summary
You should now able to: Perform Common Data Operations: Format
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Exploring Model Types
Performing OData Query Options
Performing Binding Operations
Performing Common Data Operations: Format
Performing Property Binding Operations
Performing Common Data Operations: Sort and Filter
Performing Advanced Binding Techniques
Performing Common Data Operations: Calculated Fields and Data Validation
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Lesson 7: Performing Common Data Operations: Sort and Filter
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Perform Common Data Operations: Sort and Filter
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Sorters and Filters on Controls
When using aggregation binding, you can provide initial sorters and filters:
sap.ui.model.Sorter
sap.ui.model.Filter
path – The binding path used for the sorting.
path – The binding path used for the filtering.
descending – Boolean. False for ascending sort, true for descending sort.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
operator – Full options from sap.ui.model.FilterOperator. Partial list: BT – Between Contains EQ - Equals StartsWith …
Sorters and Filters with JavaScript
An example in JavaScript:
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Demo 21: How to Sort and Filter Data In this demo, we will show how to sort and filter the data that makes up the dropdown in our ComboBox. 1. Retrieve the items binding of our ComboBox. 2. Create a new instance of a sorter with the desired values. 3. Attach the sorter to the items binding. 4. Create a new instance of a filter with the desired values. 5. Attach the filter to the items binding.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Exercise 17: Sort and Filter Data
15 minutes
Watch
Try
Self-Test
Print
© 2016 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will sort and filter the data in the First Name ComboBox from a previous exercise. You will accomplish this both in the JavaScript controller as well as declaratively in the XML view.
Summary
You should now able to: Perform Common Data Operations: Sort and Filter
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Exploring Model Types
Performing OData Query Options
Performing Binding Operations
Performing Common Data Operations: Format
Performing Property Binding Operations
Performing Common Data Operations: Sort and Filter
Performing Advanced Binding Techniques
Performing Common Data Operations: Calculated Fields and Data Validation
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Lesson 8: Performing Common Data Operations: Calculated Fields and Data Validation © 2016 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Performing Common Data Operations: Calculated Fields and Data Validation
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Calculated Data Calculated Fields allow the binding of multiple properties in different models to a single property of a control. ‒ E.g. value property of text field may be bound to a property firstName and a property lastName in a model. Applications can access these values in a formatter function and decide how they will be processed or combined together: Property Declaration:
Formatter Function:
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Calculated Fields – Extended Syntax
The extended syntax for calculated fields can be used in declarative views such as XML and HTML views Because it is still experimental, it needs to be switched on via the configuration flag xx-bindingSyntax="complex" within the bootstrap This is added automatically in the SAPUI5 Application template of the Web IDE
Now you can mix the text and calculated fields:
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Example of Calculated Fields
In the XML View, we specify the various needed parts for the calculated field and the formatter that will generate the resulting text. Since our formatter is in it’s own special class, we need to use require in the controller to have it available. In the generateDescription formatter, we can use all the parts that were sent to us to calculate a result.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Data Validation
To catch invalid user input, you can register the following handlers to the SAPUI5 Core. ‒ attachFormatError ‒ attachParseError ‒ attachValidationError ‒ attachValidationSuccess Example:
© 2016 SAP SE or an SAP affiliate company. All rights reserved
When this exception is thrown, the function will be triggered.
Data Validation – Full Custom Type Example
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Demo 22: How to work with Calculated Fields In this demo, we will show how to create a calculated field that takes multiple inputs. 1. Create a custom formatter routine taking with the appropriate arguments. 2. Add a control to display the calculated field. 3. Adjust the XML view to pass the desired input to the custom formatter. 4. Save and test.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Exercise 18: Work with Calculated Fields
15 minutes
Watch
Try
Self-Test
Print
© 2016 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will use a calculated field to generate a single description from multiple values available from the model.
Summary
You should now able to: Performing Common Data Operations: Calculated Fields and Data Validation
© 2016 SAP SE or an SAP affiliate company. All rights reserved
SAPX05 SAP SAPUI5 User Experience Development 60 minutes
SAPUI5 Overview
SAPUI5 Development Options
130 minutes
SAPUI5 Application Debugging
90 minutes
Layouts and Custom Controls
120 minutes
Data Handling
280 minutes
Additional SAPUI5 Development Features
180 minutes
SAPUI5 Branding
50 minutes
90 minutes
SAPUI5 Project Basics
90 minutes
SAPUI5 Controls © 2015 SAP SE or an SAP affiliate company. All rights reserved
Unit 8: Additional SAPUI5 Development Features
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Scenario
As a Business Process owner you are requested to permanently improve the user experience in your area of responsibility. Creating user interfaces is a critical aspect in the user experience. In this training, you will learn how to develop SAPUI5 user interfaces to induce a great user experience.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Working with Resources
Working with Charts
Building Apps Using Modularization
Using Third-party Libraries
Performing Application Localization
Optimizing SAPUI5 Apps
Working with Components
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 1: Working with Resources
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Work with Resources
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Resource Handling
The Resource Handling of SAPUI5 is separated in two parts: Client-side Mechanisms Modularization ► Require/Declare for JavaScript files Localization ► Resource Bundles Both concepts are loading additional resources from a server where this server might be any kind of web server (simple, Java, ABAP …), independent of the server side technology.
Server-side Mechanisms SAPUI5 provides a Resource Handler for the Java server and the integration into the Cloud, SAP Web IDE, and Eclipse, aligned with the concept of the JavaServer Faces Resource Handler, also supports standard and test-relevant resources Additional features: ► Theme fallback ► Resource Bundle fallback SAPUI5 also provides a Resource Handler for the ABAP server which is used for SAPUI5 applications to serve the resources from the UI libraries properly.
Both parts are not dependent on each other. Furthermore they are complementary.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Summary
You should now able to: Work with Resources
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Working with Resources
Working with Charts
Building Apps Using Modularization
Using Third-party Libraries
Performing Application Localization
Optimizing SAPUI5 Apps
Working with Components
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 2: Building Apps Using Modularization
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Build Apps Using Modularization
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Modularization with Require The UI5 framework has built in support for modularizing larger JavaScript applications. ‒ Instead of defining (and loading) one large chunk of JavaScript code, an application can be split into smaller parts, which then can be loaded at runtime when they are needed. These smaller, individual units are called Modules in UI5. ‒ To load a module, the function jQuery.sap.require may be used. ‒ In a module name all “.” are replaced by “/” and an “.js” extension is added to create a path. So sap.m.MessageBox will become sap/m/MessageBox.js
This is an example: jQuery.sap.require("sap.m.MessageBox"); function onPressButton() { sap.m.MessageBox.alert("Hello World!"); } © 2016 SAP SE or an SAP affiliate company. All rights reserved
Modularization with Declare In order to create your own JavaScript Module you need to “declare” the module: ‒ A file becomes a module by calling the jQuery.sap.declare function. This tells the UI5 runtime about the name of the module. UI5 runtime keeps track which modules are already loaded. ‒ If a module is required (jQuery.sap.require) and it hasn’t been loaded before, it is loaded automatically. While it is carried out, it calls the declare method, so from now on UI5 knows that it has been loaded and when the next require comes about nothing needs to be done anymore. ‒ The declare function checks if the parent namespace object exists and if not, creates it. // declaration of the module. Will ensure that the namespace 'my.useful' exists. jQuery.sap.declare("my.useful.SampleModule"); // list of dependencies of this module jQuery.sap.require("sap.ui.core.Core"); jQuery.sap.require("some.other.Module"); jQuery.sap.require("you.can.Also", "list.multiple.Modules", "if.you.Want"); // create the 'main' object of the module my.useful.SampleModule = {}; © 2016 SAP SE or an SAP affiliate company. All rights reserved
registerModulePath Function
UI5 by default will try to load any required modules from its resource root URL, namely from the centrally deployed web application. This would fail for the modules contained in your web application. Mixed location scenarios are supported with jQuery.sap.registerModulePath
Example of using registerModulePath:
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Streamlined Modularization with sap.ui.define
•
Usage is one top-level call in one JavaScript resource (file).
•
If module name is omitted, name will be determined by location in project and the JavaScript file name.
•
Designed to support Asynchronous Module Definitions (AMD) – although currently internally still using the old UI5 synchronous load behavior.
•
In our exercises, this is used for all JS files – controllers, formatters, components
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Empty Controller Example webapp/controller/View1.controller.js
•
Best Practice: Don’t global references as module values (or the 4th parameter)
Add module dependency with sap.ui.require
Synchronous Retrieval of Single Module Value Example:
Asynchronous Loading of Multiple Modules Example: (Return in this case is undefined*)
* Experimental API – Not all aspects of sap.ui.require are settled yet.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Summary
You should now able to: Build Apps Using Modularization
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Working with Resources
Working with Charts
Building Apps Using Modularization
Using Third-party Libraries
Performing Application Localization
Optimizing SAPUI5 Apps
Working with Components
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 2: Performing Application Localization
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Perform Application Localization
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Localization with Resource Bundles
UI5 has a built-in localization concept, which is aligned to the ResourceBundle concept in Java. ‒ You can get the URL for a resource with this: var sUrl = sap.ui.resource("sap.ui.table","messagebundle.properties");
Get the resource bundle for a given language (if no locale is given, English is loaded by default): jQuery.sap.require("jquery.sap.resources"); var oBundle = jQuery.sap.resources({url : sUrl, locale: sLocale});
And then access the texts in the resource bundle: var sText = oBundle.getText(sKey);
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Localization with Resource Model With the ResourceModel, there is a wrapper for resource bundles that exposes the localized texts as a model for data binding. A ResourceModel can be instantiated with a bundleName or a bundleUrl which points to a resource bundle. When using the bundle name the file must have the .properties suffix. var oModel = new sap.ui.model.resource.ResourceModel({ bundleUrl: "myBundle.properties", // will use myBundle_en.properties bundleLocale: "en" // optional, default is current language, so better omit it }); // attach the resource model with the symbolic name "i18n"
sap.ui.getCore().setModel(oModel, "i18n"); // Use the model in an XML View or JavaScript
var oControl = new sap.m.Button({ id : "myButton", text : "{i18n>MyButtonText}"}); © 2016 SAP SE or an SAP affiliate company. All rights reserved
// this points to a named model
Demo 23: How to perform Application Localization In this demo, we will show how to incorporate localization into our existing application. 1. Create appropriate properties files. 2. Add key=value entries to the main properties file and the translation files. 3. Create a resource model based on the properties file. 4. Replace hard-coded texts with bound values from the resource model. 5. Test.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Exercise 19: Perform Application Localization
20 minutes
Watch
Try
Self-Test
Print
© 2016 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will localize selected fields from your application. You will also test your application in multiple languages.
Summary
You should now able to: Perform Application Localization
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Working with Resources
Working with Charts
Building Apps Using Modularization
Using Third-party Libraries
Performing Application Localization
Optimizing SAPUI5 Apps
Working with Components
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 4: Working with Components
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Work with Components
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Components Overview
UI5 components are independent and reusable parts of the UI5 Application that may be developed by different development teams in different projects. A UI5 component consists of a folder that has a name of the component with the following files: ‒ Component.js – the Component Controller that also includes the metadata for runtime ‒ manifest.json – Component descriptor that contains the metadata for design time (optional)
There are two types of components: ‒ a UIComponent has a UI part (examples: custom button or a form)
§ 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
Components can either inherit from their base classes or from other component in order to inherit and extend its functionality.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Component Creation: Component.js
1. Define an new (UI)Component: jQuery.sap.require("sap.ui.core.UIComponent"); jQuery.sap.require("sap.m.Button"); jQuery.sap.declare("sap.sapx05.components.button.Component");
2. Set the metadata (properties, aggregations, events of the new component): sap.ui.core.UIComponent.extend("sap.sapx05.components.button.Component", { metadata : { properties : { text: "string" } }});
3. Set the methods the component should have: sap.sapx05.components.button.Component.prototype.createContent = function(){ this.oButton = new sap.m.Button("btn"); return this.oButton; }; © 2016 SAP SE or an SAP affiliate company. All rights reserved
Component Creation: manifest.json
The manifest.json file is not necessary, but it can be used and leveraged by designtime tools. The Template we use for the exercises leverages this file. The file is not loaded during the runtime of an application and thus not needed there. { "name": "sap.sapx05.components.button", "version": "0.1.0", "description": "Button component", "keywords": [ "button", "example" ], "dependencies": { } }
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Component Use
Once the Component is defined as above, it can be used right away, just like any other UI5 Component. In an XML View:
In JavaScript: var oComponent = sap.ui.getCore().createComponent({ name: "sap.sapx05.components.button", id: "Comp", settings: {text: "Hello World"} }); var oComponentCont = new sap.ui.core.ComponentContainer("CompCont", { component: oComponent }); oCompCont.placeAt("content"); © 2016 SAP SE or an SAP affiliate company. All rights reserved
Demo 24: How to create an Application Utilizing a Component In this demo, we will show how to create a reusable component and use that component inside of an application. 1. Create a Component.js file at the root of the new component. 2. Use sap.ui.core.UIComponent.extend() to define the component. 3. Define how the component will be created. 4. Define any needed component overrides. 5. Add the component into our existing view. 6. Save and Test.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Exercise 20: Create an Application Utilizing a Component
25 minutes
Watch
Try
Self-Test
Print
© 2016 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will create a simple button component and add it to your application. Then you can turn your full application into a component.
Summary
You should now able to: Work with Components
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Working with Resources
Working with Charts
Building Apps Using Modularization
Using Third-party Libraries
Performing Application Localization
Optimizing SAPUI5 Apps
Working with Components
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 5: Working with Charts
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Work with Charts
© 2016 SAP SE or an SAP affiliate company. All rights reserved
sap.viz Library
The sap.viz.ui5 charting library provides a set of flexible chart controls that allow to easily represent business data.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Chart Types
Line
Pie
Donut
Bar
sap.viz.ui5.Line
sap.viz.ui5.Pie
sap.viz.ui5.Donut
sap.viz.ui5.Bar
Column
Combination
Bubble
Scatter
sap.viz.ui5.Column
sap.viz.ui5.Combination
sap.viz.ui5.Bubble
sap.viz.ui5.Scatter
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Additional Chart Types
Stacked Column
Stacked Column (%)
Dual Bar
Dual Line
sap.viz.ui5. StackedColumn
sap.viz.ui5. StackedColumn100
sap.viz.ui5.DualBar
sap.viz.ui5.DualLine
Dual Combination
Dual Column
Dual Stacked Column
Dual Stacked Column (%)
sap.viz.ui5. DualCombination
sap.viz.ui5. DualColumn
sap.viz.ui5. DualStackedColumn
sap.viz.ui5. DualStackedColumn100
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Demo 25: How to use Charts In this demo, we will show how the sap.viz library can be used to create charts. 1.
Decide on the type of chart that is appropriate.
2.
Bind the data to the chart.
3.
Create a FlattenedDataset to bind the data to the chart.
4.
For a Donut Chart, add the dimensions and measures aggregations.
5.
Test on Large and Medium screens.
6.
Notice differences on based on desktop or mobile.
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Exercise 21: Use Charts
20 minutes
Watch
Try
Self-Test
Print
© 2016 SAP SE or an SAP affiliate company. All rights reserved
In this exercise, you will add a sap.viz chart to your application.
Summary
You should now able to: Work with Charts
© 2016 SAP SE or an SAP affiliate company. All rights reserved
Agenda
Working with Resources
Working with Charts
Building Apps Using Modularization
Using Third-party Libraries
Performing Application Localization
Optimizing SAPUI5 Apps
Working with Components
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Lesson 6: Using Third-party Libraries
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Learning Objective
After completing this lesson, you will be able to: Use Third-party Libraries
© 2016 SAP SE or an SAP affiliate company. All rights reserved
External JavaScript Library Usage If UI5 doesn’t provide controls or behaviours that other JavaScript libraries offer, 3rd party libraries can added into UI5 based pages Some JS libraries are already included in UI5 and used by UI5 runtime and can be used without additional loading, e.g.: ‒ jQuery, jQuery UI ‒ dataJS, a Microsoft driven oData library which handles requests and takes care of creating and handling requests in JSON and XML format ‒ D3, an SVG-based graphical library to visualize data sets (used in sap.viz)
Other libraries need to be loaded separately, another library of interest is ‒ Flot, a -based jQuery plug-in for displaying data sets © 2016 SAP SE or an SAP affiliate company. All rights reserved
External JavaScript Library Usage – Flot
To show how to load and use an external library, we take a look at an example using Flot: ‒ One can place the script tags for the library just behind the UI5 bootstrap script tag in the HTML tag.
‒ The library can be downloaded and made part of the application project: ► For pie chart support you need also the flot.pie.js plugin
© 2016 SAP SE or an SAP affiliate company. All rights reserved
External JavaScript Library Usage // create the HTML control which will be a placeholder var oHTML = new sap.ui.core.HTML({
Most libraries require a starting point or a placeholder
id: "pieContainer“, content: "
View more...
Comments
