UI Frameworks based on HTML5, JavaScript and CSS

SAP Fiori Launchpad

Setting Up the Launchpad

Activating SAP NetWeaver Gateway OData Services

Configuring ICF Nodes

SICF Services

External SAP NetWeaver Gateway System has a Different Client to the Front-end ABAP System

Configuring SAP Web Dispatcher

Configuring SAP Web Dispatcher for Search

Configuring SAP Web Dispatcher to Dispatch Requests to Different Systems

Defining the Host Name of SAP Web Dispatcher

Configuring the Launchpad

Launchpad Configuration Parameters

Setting Parameters in the Launchpad URL

Setting Parameters in a Launchpad Configuration File

Creating a Launchpad Configuration File

Uploading a Launchpad Configuration File to the BSP Repository

Uploading a Launchpad Configuration File to the MIME Repository

Providing Access to a MIME Repository Folder

Referencing a Launchpad Configuration File

Defining Configuration Parameters in Customizing

Setting Parameters in the FioriLaunchpad.html File

Configuring Authorization Roles

Assigning Users to Roles

Assigning Tile Catalogs and Groups to Roles

Assigning Tile Catalogs to Roles

Assigning Groups to Roles

Launching the Launchpad

Configuring the Option to Contact Support from the Launchpad

Determining the Support Message Component

Configuring Logout from Integrated Systems

Adding SAP Web Dispatcher Logout Rules

Creating a Custom Logout Page

Using the Launchpad Designer

Configuring Login Screen for Launchpad Designer

Launching the Launchpad Designer

Protecting Access to Launchpad Designer

Scopes for Adapting Content

Setting Up Catalogs, Tiles, and Groups

Catalogs and Tiles

Creating or Removing Catalogs

Copying Catalogs

Outdated Catalogs

Remote Catalogs

Creating or Editing Remote Catalogs

Copying or Deleting Remote Catalogs

Working with HANA Catalogs

Working with SAP Jam Catalogs

Adding or Removing Tiles or Target Mappings

Assigning a CHIP to the Universal Fiori Launchpad Catalog

Copying Tiles or Target Mappings

Searching for Tiles or Target Mappings Within a Catalog

Verifying Catalogs for Targets and Tiles

Creating Missing App Launchers or Target Mappings

Configuring Tiles

Static App Launcher Tiles

Dynamic App Launcher Tiles

OData Structure for Dynamic App Launchers

News Tile

Groups and Tiles

Creating or Removing Groups

Adding Tiles to and Removing Tiles from Group

Common Tasks for Catalogs and Groups

Editing Title of Catalogs or Groups

Searching for Catalogs or Groups

Navigating to Catalogs or Groups

Creating Transport Requests for User Changes

Creating Customizing and Workbench Request

Setting Default Transport Request Information from Launchpad Designer

Setting Default Transport Request Information from Back-End

Configuring Navigation

Setting up Navigation

Customizing Navigation Targets

Overwriting the System Alias for the Target Application

Creating Custom Semantic Objects

Configuring Target Mapping

Running a Standalone Application

Adjusting the Visual Appearance of the Launchpad

Displaying a Custom Logo in the Launchpad Header Bar

Translating Custom Tiles, Catalogs, and Groups

Using the Launchpad

Running an SAP Fiori App

Saving an SAP Fiori App as a Tile

Personalizing the Home Page

Managing Groups Using the Group Panel

Adding Tiles to Groups Using the Tile Catalog

Hiding Groups

Setting a Theme

Contacting Support from the Launchpad

Searching for Business Objects and Apps

Extending the Launchpad

Implementing a Custom Launchpad UI

Implementing a Custom Tile Type

Troubleshooting

Launchpad Designer

Launchpad Content Checks

Checking Launchpad Content

Determining Catalog and PFCG Role for Tile ID

Determining Tile ID in SAP Fiori Launchpad

Determining Tile ID in SAP Fiori Launchpad Designer

Determining Catalog and PFCG Role for Tile ID

Determining Groups Assigned to a User

Analyzing Intents for SAP Fiori Launchpad

Ascertaining Roles for an Intent

Performance

Client-Side Caching of Target Mappings

SAPUI5 Developer Guide

Installing SAPUI5

Support and Maintenance Strategy

SAPUI5 Tools

SAPUI5 Tools Installation

Upgrading SAPUI5 Tools

Uninstalling SAPUI5 Tools

SAPUI5 Runtime Installation

Versioning of SAPUI5

Upgrading jQuery for SAPUI5

Documentation

Before you Start

Naming Conventions for Control and Application Development

Naming Conventions for Control Artifacts

Reserved Characters for Control IDs

Reserved IDs for DOM Nodes and Elements

Reserved DOM Attributes

Reserved URL Parameters

Control CSS

Compatibility Rules

Experimental Flag

Browser and Platform Matrixes

sap.ui.core, sap.ui.layout, sap.ui.unified

sap.ui.commons, sap.ui.ux3, sap.ui.table

sap.m

Device Specific Policies

Security Information for SAPUI5

Browser Security

Transport Security

Server Security

Third-Party Libraries

Secure Programming Guide

Using the SAPUI5 Repository Based on BSP Repository

Security Concepts

Cross-Site Scripting

URL White List Filtering

HTML5 Sanitizer

Getting Started with SAPUI5

Create Your First SAPUI5 Application

Create Your First Mobile SAPUI5 Application

Create an HTML Page for Your Mobile App

Initialize the Mobile App

Add Content Pages

Run Your First Mobile App

Develop Your First Application using SAPUI5 Tools

Create an SAPUI5 Application Project

Add a Control to Your View

Implement a Method in the Controller

Create an Additional View

Integrate a New View

JavaScript Code Completion

Linking your Eclipse Editor to the Demo Kit

Use JavaScript and XML Templates

SAPUI5 Snippets

Testing SAPUI5 Applications

Test Your SAPUI5 Application on an ABAP Server

Test in SAPUI5 Application Preview

Test Your SAPUI5 Application on a Java Web Server

Use a SimpleProxyServlet for Testing to Avoid Cross-domain Requests

Set up Tomcat to test SAPUI5 applications

The SAPUI5 Mock Server

Concepts

Model View Controller (MVC)

Definition of Fragments

HTML Fragments

XML Fragments

JS Fragments

Application Best Practices

Step 3: Navigation and Routing

Step 4: Internationalization

Step 5: Device Model

Step 6: Custom Utilities

Step 7: Model View Controller

Step 8: Master View

Step 9: Detail View

Step 10: Detail XML Fragments

Step 11: AddProduct View

Step 12: NotFound View

Summary

Initializing and Loading SAPUI5

Bootstrapping: Loading and Initializing SAPUI5 in HTML Pages

Standard Variant for Bootstrapping

noJQuery Variant for Bootstrapping

Preload Variant for Bootstrapping

All-in-one per Library Variant for Bootstrapping

sap-ui5 Variant for Bootstrapping

Initialization Process

Loading of Additional Resources During Bootstrap

Dynamic Loading of Libraries

Configuration of the SAPUI5 Runtime

Configuration Options

Using Runtime Default Values for Configuration

Using Script Tag Attributes for Configuration

Using Single and Complex Attributes for Configuration

Using the Global Configuration Object for Configuration

Using URL Parameters for Configuration

Using a Runtime Configuration Object for Configuration

Compatibility Version Information

Models and Data Binding

Data Binding: Getting Started

Models and Data Binding in Applications

Creating a Model Instance

Creating a Resource Model Instance

Binding Path Syntax for Resource Models

Binding Texts to a Resource Bundle

Implementing a JSON Model

Sorting and Filtering in JSON Models

Binding Path Syntax for JSON Models

Implementing an OData Model

Binding Path Syntax for OData Models

OData Write Support

Experimental Two-Way Binding

Implementing an XML Model

Sorting and Filtering in a XML Model

XML Namespace Support

Binding Path Syntax for XML Models

Implementing a Custom Model

Assigning the Model to the UI

Defining a Binding Path

Binding Controls to the Model

Setting the Default Binding Mode

Using the Data Binding Type System

Example: Using Data Types

Handling Wrong User Input

Simple Types

sap.ui.model.type.Integer

sap.ui.model.type.Float

sap.ui.model.type.String

sap.ui.model.type.Boolean

sap.ui.model.type.Date

sap.ui.model.type.Time

sap.ui.model.type.DateTime

Data Types for Use Without Data Binding

sap.ui.core.format.DateFormat

sap.ui.core.format.NumberFormat

Calculated Fields for Data Binding

Custom Formatter Functions

Extended Syntax for Calculated Fields

Defining a Formatter

Using Extended Syntax to Add Filters and Sorters

Using Extended Syntax in XML and HTML Views

Using Data Binding for Data Export

Property Metadata Binding

Building the UI

Instantiating Views

Implementing XML Views

Namespaces in XML Views

Aggregation Handling in XML Views

Using Native HTML in XML Views

Using CSS Style Sheets in XML Views

Handling Events in XML Views

Handling Events in JSON Views

Typed Views and Controllers

File Names and Locations (View and Controller)

View Cloning

Support for Unique IDs

Fragments

Instantiation of Fragments

Programmatically Instantiating JS Fragments

Programmatically Instantiating XML Fragments

Programmatically Instantiating HTML Fragments

Instantiating Fragments in Declarative Views

Using Other Objects Instead of Controllers

Inline Definition and Instantiation of Fragments

Unique IDs

IDs in Declarative XML or HTML Fragments

IDs in JS Fragments

IDs of Fragments in Views

Retrieving Control Instances by their ID

Example: JS Fragments Used in XML Views

Dialogs and other Popups as Fragments

Defining Dialogs as Fragments

Using Dialogs Defined as Fragments

Fragments with Multiple Root Nodes

HTML Templating in SAPUI5

Expressions and Helpers for HTML Templating

Example: Use of HTML Templating in SAPUI5

Navigation

Configuration Parameters for Navigation

Routing in Components

Methods and Events for Navigation

Navigation with Multiple Apps Inside the Launchpad

Working with Controls in SAPUI5

Developing UI5 Controls in JavaScript

Defining the Control Metadata

Object Metadata and Implementation

UI Control Constructors

Adding Method Implementations

Normal Methods

init() Method

exit() Method

Event Handler Methods

Browser Events

Renderer Methods

Defining Control Properties

Examples for Creating and Extending Controls

Creating a Simple Control

Creating a Simple Square Control

Creating a Simple Container Control

Extending Buttons with Additional Events

Extending TextField Rendering

Writing a Control Renderer

Prevention of Cross-site Scripting

Implementing Focus Handling

Convenience Functionality

Item Navigation - Supporting Keyboard Handling in List-like Controls

Integrating the ItemNavigation in your Control

Right-to-Left Support in Controls

Programmatic Access to RTL

Impact on the Applications

Custom Data - Attaching Data Objects to Controls

Writing Data to the HTML DOM as DATA-* Attribute

CSS Classes for Theme Parameters

List of Supported CSS Classes

SAPUI5 Controls

Smart Filter Bar

Declarative Support

Enabling Declarative Support

Defining Controls

Declarative Support: Properties

Declarative Support: Associations

Declarative Support: Events

Declarative Support: Aggregations

Declarative Support: Data Binding

Compiling Declarative HTML

Theming

Setting Themes

Loading External Custom Themes

Enhanced Theming Concepts

Theming FAQ

Creating Themable User Interfaces

Structuring SAPUI5 Applications

Modularization and Resource Handling

Modularization and Dependency Management

Loading a Module

Multiple Module Locations

Dependency Resolution Tools

Avoiding Duplicates

Why not Simply Concatenating Modules?

Loading jQuery.sap.require

Cyclic Dependencies

Resource Handling

SAPUI5 Library Location Used for Testing

Cache Buster

Application Cache Buster

Application Cache Buster: Index File

Application Cache Buster: Configuration

Application Cache Buster: Request Flow

Enable the Filter for Java Applications

Application Cache Buster: Enhanced Concept

SAPUI5 Components

component.js File

Component Metadata

Methods Controlling the Initial Instantiation

Component Containers

Using UI Components in Applications

Registering Component Resources

Handling IDs in UI Components

Creating a New SAPUI5 Component

Advanced Concepts for SAPUI5 Components

Component Configuration

Translating SAPUI5 Applications

Identifying the Language Code / Locale

Resource Bundles

Use of Localized Texts in Applications

Extending SAPUI5 Applications

Example: Component Configuration

Providing Hooks in the Standard Controller

Controller Replacement

I18n Resource Text Customization

Limitations

Caveats Regarding Stability Across Application Upgrades

Supportability

Building Mobile Applications with SAPUI5

Handling Navigation and Lifecycle Events

Events Fired Centrally by the App or the NavContainer

Events fired on the Pages

Passing Data when Navigating

Adapting to Platform and Form Factors

Built-in Adaptation of SAPUI5 Mobile

Adapting Automatically to Different Screen Sizes using SplitApp

The First SplitApp

Layouting with FlexBox

Getting Started With FlexBox

Important FlexBox Layout Concepts

Checking the Operating System your Application is Running on

Options for Further Adaptation

Compact Mode for sap.m.controls in Blue Crystal

Working with Lists and Tables

Lists

Creating a Custom List Item

Swipe for Action in Lists

List and Table Events

Highlighting Rows and Columns

Growing

Implementing a Responsive Table

Table Personalization

Grouping in a Table

Working with Facet Filters

Facet Filter: Simple Type

Facet Filter: Light Type

Using the Facet Filter List and Facet Filter Item Controls

Events for Facet Filters

Data Binding for Facet Filters

Filter Search

Facet Filter Selection

Dependent Facets

Triggering Phone, SMS and E-Mail

Examples for Triggering Telephone, Text and E-Mail Applications

Notes

Scrolling in SAPUI5 Mobile

Scrolling: Implementation Details

Scrolling: Pull to Refresh

Running SAPUI5 Mobile Apps in Hybrid Web Containers

Using Images in Mobile Applications

Using Icon Font in SAPUI5

Message Handling

Mobile Events

Windows 8 Support

Windows 8 Support - Known Issues

Distinguish Control Behavior between Mobile and Desktop

Adapting Event Handling to Support Windows 8 Devices

Performance Behavior

Building Charts with MAKit

Creating a MAKit Chart

Properties of MAKit Charts

Combination Chart

Creating a Combination Chart

Combination Chart with Dual Axis

Configuration of Theme and Styling for MAKit Charts

Synchronizing with the SAPUI5 Repository

Using Eclipse to Synchronize

Setup

Sharing the SAPUI5 Application Project with the SAPUI5 Repository

Submitting the SAPUI5 Application Project to the SAPUI5 Repository

Retrieving the SAPUI5 Application Project from the SAPUI5 Repository

Using an Interactive ABAP Report to Synchronize

Handling Conflicts

Testing the SAPUI5 Application on an ABAP Server

Creating Alias for ICF Node with SAP Corbu Logon Screen

Using the ABAP Communication Log for Troubleshooting

SAPUI5 Runtime Libraries Server Version Check

Translation Guide for SAPUI5 Application Developers

Prerequisites for Translating Text Elements

Classification of Text Elements

Attributes of Text Elements

List of Text Types

Example for [name].properties File

Accessing Translated Texts During Runtime

Procedure for Development in Correction Phase

Information for Translators

Handling Placeholders in Transaction SE63

Finding the Where-Used Location of a Text Element

Troubleshooting

Debugging

Logging and Tracing

Troubleshooting: Common Issues

Browser Debugging for ABAP Developers

SAPUI5 Diagnostics

SAPUI5 Mobile Diagnostics

Testing in SAPUI5

QUnit Testing Fundamentals

QUnit Testing for SAPUI5 Controls

One Page Acceptance Tests (OPA5)

Getting Started with OPA5

Cookbook for OPA5

Developing Content for SAPUI5

Development Conventions and Guidelines

JavaScript Coding Guidelines

JavaScript Namespaces

Example for Defining a Class

Common Pitfalls in JSDoc

SAPUI5 Control Development Guidelines

Product Standards and Acceptance Criteria

File Names and Encoding

Tools

ESLint Code Checks

ESLint Configuration File

SAPUI5 Application Frameworks

SAP Smart Business

Setting up the SAP Smart Business Modeler Apps Framework

Upgrading and Migrating SAP Smart Business Entities

SAP Smart Business Modeler Apps

Create KPI

Create Evaluation

Manage KPI Authorizations

Configure KPI Tiles

Configure KPI Drill-Down

Manage KPI Associations

KPI Workspace

Migration Tool

Analysis Path Framework (APF)

Analytical Applications Based on APF

Components

The Core Component (sap.apf.core)

The UI Component

The Analysis Step Container

The Step Toolbar

The Analysis Path Display

The Analysis Step Gallery

The Analysis Path Gallery

Predefined Representation Types

Rendering of Charts

Concepts

Analysis Path Processing

Consuming APF

Configuration

Application Configuration

Analytical Content Configuration

The Configuration Root Object

The Step Object

The Request Object

The Binding Object

The Representation Object

The Representation Type Object

SAP NetWeaver User Interface Services

Configuration and Operations

Activating OData Services

SAP Web Dispatcher Configuration Reference

Server Runtime for SAP NetWeaver User Interface Services

Definition of Configuration Parameters in Customizing

Creating Launchpad References in Role Maintenance

Content Administration

Suite Page Builder

Prerequisites

Maintaining SAP NetWeaver Gateway OData Services

Activating SICF Services

Configuring ICF Nodes for Services

Configuring ICF Nodes in the ABAP Backend system if external SAP NetWeaver Gateway System has a Different Client

Configuring Login Screen for Suite Page Builder and Suite Page Builder Admin Page

User Personas and Roles for Administrators and End Users

Suite Page Builder Admin Page

Testing the Admin Page

Creating and Enhancing CHIPs

Creating a CSR CHIP

Registering a CSR CHIP in a Catalog

Changing a CSR CHIP

Verifying that a CHIP was Created

Displaying the Contents of a CHIP

Creating the Catalog(s)

Adding CHIPs to the Catalog

Configuring the CHIP

Linking Catalog to Role

Creating an End User Page and Linking to a Role Menu

Resetting Personalization of a Page for the End User

Enabling or Disabling Personalization of a Page for the End User

Uploading the Background Image for the Suite Page Builder

Resetting Personalization of a Page by the End User

Authorizations

Protecting Access to Suite Page Builder Admin Page

Transporting the End User Page or Catalog

Scopes

Page Administration

Redirecting URLs to a Specific Page Builder

Troubleshooting

SAP Fiori Launch Page

Setting Up the SAP Fiori Launch Page

Catalog Administration

Creating Catalogs

Creating Tiles

Configuring App Launcher Tiles

OData Structure for Dynamic App Launchers

Changing the Title of the Launch Page

Authorizations for Tiles on the Launch Page

Providing Users Access to the Launch Page

Transporting Pages

Version Information Reporting

Logging and Tracing

Message Logging for SAP Fiori Launchpad

Supportability

How to Check Shared Objects

How to Use Internet Connection Manager

Cleanup of Expired Personalization

Security Information

Security Aspects for Back-End Systems

Security Aspects for Front-End UI Services

User Administration and Authentication

Authorizations

Network and Communication Security

Security Aspects for SAP Fiori Launchpad

Security Aspects for Catalogs and Groups

Ensuring Complete Logout from Integrated Systems

Security Aspects for Client-Side Caching of Target Mappings

Security Aspects for Launchpad Configuration Files

Security Aspects for Standalone Apps

Security Aspects for the Launch Page

Security Aspects for SAPUI5

Security Aspects for UI Theme Designer

Security Aspects for SAP NetWeaver Business Client

Security Aspects for SAP Jam Integration

Other Security-Relevant Information

SAP NetWeaver User Interface Services Developer Guide

Navigation Using Callable Entities

Adding Repositories (Assigning Navigation Providers)

Using Callable Entities as OData Developer

JavaScript Services

CHIP Development

CHIP Specification Schema

CHIP Definition XML

Creating a CSR CHIP

Accessing the CHIP API and the contracts

Accessing the "bag" Contract

Accessing the "configuration" Contract

Accessing the "writeConfiguration" Contract

Accessing the "fullscreen" Contract

Accessing the "navigation" Contract

Accessing the "refresh" Contract

Accessing the "searchProvider" Contract

Accessing the "url" Contract

API Reference

Creating a Client-Side Page Builder

Creating a Minimalist Page Builder

Including SAP NetWeaver User Interface Services Scripts

Supporting Full Screen Display

Supporting Refresh

Storing Page-Specific Settings

Catalog Pages

API Reference

Persisting Settings in Property Bags

Embedding an Application into a Shell

API Reference

Using SAP NetWeaver User Interface Services in SAPUI5 Applications

Creating an Application Shell

Accessing information from a back-end system

URL Parameters for Back-End Authentication

Accessing System and User Information

Propagating Settings to SAPUI5

Accessing Menu Information

Displaying the Complete Menu Tree

API Reference

OData Services

Launchpad Service

Displaying the Service Definition XML

Basic URIs

Examples for Basic Service Requests

List of all Launchpads

Root folder of a Launchpad

List of Child Folders of a Launchpad

List of a Folder's Content

Reference of Most Important URL Parts

Service Operations

LAUNCHPAD/ResolveLink

Entity Data Model for Launchpad Service

POWL Enabling Service

Architecture

Exposing a POWL as an OData Service

Cache for OData Services

Architecture

Registering an OData Service for Caching

ABAP APIs

Launchpad Service API

Method GET_LAUNCHPAD_LIST

Method GET_URL

Method GET_URLS

Method GET_URLS_MP

Method GET_LAUNCHPAD_CONTENT

Filtering URLs Using a Feeder Class

Developing Applications for the Launchpad

Local Sandbox Environment for the SAP Fiori Launchpad

Run the Sandbox Demo Application

Run Your Own Applications in the Sandbox

Creating a Local Configuration File

Embedding SAPUI5 Applications into the SAP Fiori Launchpad Application Container