Our Agenda

  • SAPUI5 App Descriptor
  • Async Module Definition
  • Expression Binding
  • Message Handling
  • Smart Controls
  • Flexibility Services
  • Runtime Authoring
  • ++Performance
  • Addon: UI5 Inspector

SAPUI5 App Descriptor

  • Configuration settings for your web app
  • Higher flexibility
  • Automatic instantiation without bootstraping
  • Component.js refers to manifest.json
return UIComponent.extend("sap.anz.mvc", {
    metadata : {
        manifest: "json"
    },
    init : function () {
    // call the init function of the parent
    ...
    }

App Descriptor Sample

The Big Picture: Different Initialization Process

Async Module Definition (AMD)

  • or: Why the hell does the controller definition look different?
sap.ui.core.mvc.Controller.extend("sap.anz.controller.Master", {
  // instantiate every sinlge UI5 component you will need
});
sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
    // force strict mode for code interpretation
    // goal: catch mistakes, prevents 'unsafe' actions, disables 'poor' features
    // e.g. limit lookup scope to local and avoid global var declaration
   "use strict";
   return Controller.extend("sap.anz.controller.Master", {
      // your controller logic here
   });
});

Expression Binding

  • Control display using value-based calculation
  • Replace trivial formatter functions for XML views
  • Usage of very powerful, JS-ish expression language
  • Mind the syntax collision of XML
<!-- set data-sap-ui-bindingSyntax='complex' in bootstrap -->
numberState="{= ${products>UnitPrice} > ${/priceThreshold} ? 'Error' : 'Success' }"
<!-- either escape value for '<'/'&' or modify logic -->
numberState="{= ${products>UnitPrice} <= ${/priceThreshold} ? 'Success' : 'Error' }"
  • Use {:=one-time} binding for perfomance

Fun with Expression Binding

  • "value" property of TextArea is now only updated on submit or loose focus events, not every keystroke
  • For keystroke updates use "valueLiveUpdate" property

Message Handling

  • Using the Singleton sap.ui.get.core().getMessageManager()
  • Following the Publish-Subscribe pattern
  • Active automatic message generation in Component.js
return UIComponent.extend("sap.anz.mvc", {
    metadata : { manifest: "json", handleValidation  : true }...
  • Messages can be created manually and persisted
sap.ui.getCore().getMessageManager().addMessages(
    new sap.ui.core.message.Message({
        message: "ZIP codes must have at least 23 digits",
        type: sap.ui.core.MessageType.Error,
        target: "/input10/value",
        persistent: true
    }); );

Just another Model you can access ...

Smart*

or: How OData Metadata makes your life easier

Smart Controls

  • Regular UI5 controls making use of OData metadata
  • Requires SAP Annotations for OData to be enabled (e.g. in .xsodata)
  • Features include automatic rendering, value search and smart linking
  • Smart Field is the basic, reusable Smart Control

Smart Forms

  • Adaptation of a regular UI5 Form control with Smart Fields
  • Toggle between read-only and edit mode
  • Edit mode unleashes the potential of Smart Controls

Smart Tables

  • based on existing Table controls; either Analytical Table, Responsive Table (sap.m.Table) or regular Table (sap..ui.table.Table)
  • Key features: automatic filter enablement and personalization enablement
  • Excel export requires sap:supported-formats="xlsx" flag in OData annoations
  • Table personalization is very powerful: column order & visibility, sorting, filtering, and grouping
  • Use Variant Management to persist changes done to the table

How it looks like ...

How SmartFilterBar is configured ...

<smartFilterBar:SmartFilterBar 
                id="smartFilterBar"
                entityType="Product"
                persistencyKey="SmartFilterPKey">
                <smartFilterBar:controlConfiguration>
                    <smartFilterBar:ControlConfiguration
                        key="Category" visibleInAdvancedArea="true"
                        preventInitialDataFetchInValueHelpDialog="false">
                    </smartFilterBar:ControlConfiguration>
                </smartFilterBar:controlConfiguration>
            </smartFilterBar:SmartFilterBar>
  • add smartFilterBar:SelectOption for predefined data
  • to handle with custom fields, implement 'beforeVariantSave' / 'afterVariantLoad' in controller
  • 0-1 control configuration per key
  • persistencyKey required for Variant Management

How SmartTable is configured ...

<smartTable:SmartTable 
    smartFilterId="smartFilterBar" 
    tableType="ResponsiveTable" 
    editable="false"
    entitySet="Products" 
    useVariantManagement="true"
    useTablePersonalisation="true" 
    header="Products" 
    showRowCount="true"
    useExportToExcel="false" 
    enableAutoBinding="true"
    persistencyKey="SmartTablePKey">
</smartTable:SmartTable>
  • SmartFilterId references to a defined Smart Filter Bar
  • enableAutoBinding requires entitySet to be defined

How is it possible?

SAPUI5 Flexibility Services

Flexbility Services

  • Enabler for smart control change management and personalization features
  • Variant Management requires server-side storage and retrieval (Component-changes.json)
  • Variant repo divided into VENDOR, CUSTOMER, USER
  • Services run on the ABAP front-end server and NetWeaver 7.31 SP11 or higher
  • Also the enabler for Runtime Adaptation features

Experimental since v1.30: Runtime Authoring

Performance Matters

  • Rendering time of sap.ui.table reduced by around 80%
  • Version-specific CDN with documentation with 99.9% uptime
  • Resuage of aggregation bindings to avoid flickering in Lists/Tables
  • New OData Model (v2) implementation improves performance through reduced and more asynchronous requests
  • Translation files can be loaded async now, sap.ui.model.resource.ResourceMode.async=true
  • App- & CacheBuster for persistence of files to improve loading speed
  • Faster "One Page Acceptance" tests thanks to new behavior of "waitFor"

Addon: UI5 Inspector

  • Chrome Devtools extension
  • Inspect and modify UI5 controls, their properties, bindings, and data model

Thank You!

... any questions left?