10 Golden Rules for Fiori Development by Robert Eijpe
SAP Fiori apps follow the SAP Design Guidelines (GR-01) SAP Fiori Apps always exists of a UI part and OData part which must be defined in different software components (GR-02) SAP Fiori UIs are built on top of SAPUI5 framework with a restricted set of the UI5 Controls and written in AMD syntax (GR-03) It is recommended to built SAP Fiori app with SAP Web IDE, based on the new Fiori templates (GR-04) Every SAP Fiori app must built as a component and defined by a set of metadata, so it can run in a container as a standalone web app, in the Fiori Launch Pad and as a native mobile App (GR-05) SAP Fiori UI Views are always build as XML views and Extension points need to be implemented (GR-06) Always use intent-based navigation to navigate within a app and between apps (GR-07) Use only the newest UI5 OData Model (v2) to access one OData Service node of the backend (GR-08) Bounded UI5 control must be typed and for OData Models bounded with OData annotations (GR-09) Use predefined UI5 style elements and change the look & feel with Theme Designer (GR-10)
SAP Fiori Apps exists of a UI part and OData part which must be defined in different software components FIORI for (re)new business applications UI5 as uniform and open UI technology ODATA for Uniform Data Access ASP.NET Web API 2
SAP Fiori UIs are built on top of SAPUI5 framework with a restricted set of the UI5 Controls in AMD syntax SplitContainer control (sap.m)
MasterPage control (sap.m.semantic) List control (sap.m)
DetailPage control (sap.m.semantic) ObjectHeader control (sap.m)
IconTabBar control (sap.m) SimpleForm control (sap.ui.layout.form) ProgressIndicator control (sap.m) VerticalLayout control (sap.ui.layout) Table control (sap.m)
Asynchronous Module Definition Syntax for Optimized Loading of Modules
(GR-03)
SAP Fiori UIs are built on top of SAPUI5 framework with a restricted set of the UI5 Controls in AMD syntax sap.ui.define(['sap/ui/core/mvc/Controller', "sap/m/MessageToast"], function(Controller, MessageToast) { "use strict"; return Controller.extend("sap.ui5.training.controller.myViewController",{ // onInit: function(e){}, // onBeforRendering: function(e){}, // onAfterRendering: function(e){}, // onExit: function(e){}, onPress: function(oEvent){ MessageToast.show("clicked button: " + oEvent.getSource().getId()); } }); });
Git Manage your development objects in your Git repository History Tag, cherry-pick, revert Collaboration Integration with SAP Jam Collaborate with project members API reference Context-sensitive Dynamic support 17
New Fiori Freestyle Templates in SAP Web IDE
(GR-04)
It is recommended to built SAP Fiori app with SAP Web IDE, based on the new Fiori templates
State of the art UI5 freestyle applications Worklists Master Detail Applications Include best practices App Descriptor Controls that adhere to responsive design Internationalization files Routing for inner app navigation App state in URL bookmarks Local testing via Quint and OPA5 test
Every SAP Fiori app must built as a component and defined by a set of metadata, so it can run in a container App Descriptor Descriptor for Applications, Components, and Libraries File called manifest.json, defined as metadata of the Component Contains all global application settings and parameters e.g. the app ID, name, version, used data sources and SAPUI5 dependencies Created with the application at development, delivered within the application and read-only after delivery
sap.ui.define([ 'sap/ui/core/UIComponent' ], function(UIComponent) { "use strict"; return UIComponent.extend("samples.project.Component", { metadata: { manifest: "json" }, /** * The component is initialized by UI5 during the startup of the app and * once. The resource and application models to be set and the router to * @public * @override */ init: function() { // call the base component's init function UIComponent.prototype.init.apply(this, arguments); // put your code here }, /** * In this function, the rootView is initialized and stored. * @public * @override * @returns {sap.ui.mvc.View} the root view of the component */ createContent: function() { // call the base component's createContent function 20 var oRootView = UIComponent.prototype.createContent.apply(this, argu
Call the Component
(GR-05)
Every SAP Fiori app must built as a component and defined by a set of metadata, so it can run in a container
SAP Fiori UI Views are always build as XML views and Extension points need to be implemented The wizards for adding extensions guide the user through a step-by-step process All extension options of the SAPUI5 extensibility concept are provided in the wizards: Create extension project Hide a control Extend a view Replace a view Extend a controller Replace a service i18n resource text customization Add new views to existing project
Intent-based navigation in Fiori App development Always use intent-based navigation to navigate within a app and between apps sap.m.routing.Router - SAPUI5 router class to load the pages and update the URL (change/replace hash) Routing configuration in the app descriptor Navigation events Animation between pages (show, slide, fade, flip)
App Descriptor "routing" : { // The default values for every route "config" : { ... }, // Define routes and pattern "routes" : { ... }, // Define which view to load "targets" : { ... }, } }
27
(GR-08)
OData Model in SAPUI5 Use only the newest UI5 OData Model (v2) to access one OData Service node of the backend
The OData model enables binding of control properties and aggregations to data from a remote server The complete dataset is stored on the server and only the requested fields are transferred to the client SAPUI5 supports multiple OData models, but the Fiori Guidelines state you should use OData V2 Model sap.ui.model.odata.v2.ODataModel All SAPUI5 OData models are currently based on OData specification version 2.0 (with support of annotations from OData specification version 4.0)
Batch Operator Use only the newest UI5 OData Model (v2) to access one OData Service node of the backend /IWFND/CATALOGSERVICE;v=2/$batch
Service Root URI
Resource path
•
The batch operator is used to bundle a collection of single OData requests and sent them together as one batch request call.
•
All single request will be handled by the OData server and all results will be combined in one batch response
•
The collection of single OData request will be sent in the payload of the HTTP call. This makes it possible to protect data, like query strings and header information, which is normally visible in normal OData call
OData Model Operation Modes Use only the newest UI5 OData Model (v2) to access one OData Service node of the backend
Client OperationMode
sap.ui.model.OperationMode.Client
Server OperationMode
sap.ui.model.OperationMode.Server
var oModel = new sap.ui.model.odata.v2.ODataModel({ serviceUrl: "/sap/opu/odata/iwfnd/USERSERVICE/", defaultOperationMode: sap.ui.model.OperationMode.Client });
Data Typing Process Every SAP Fiori app UI control binding must be typed
Data typing is important because the internal SAPUI5 model data format doesn’t have to be the same format in the back-end system as the data format you want to present on the UI. 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 on the UI, input values in UI controls are parsed and converted back to the defined type in the model. Format
Bounded UI5 control must be typed and for OData Models bounded with OData annotations
React to the specifically-typed
UI control only
36
(GR-09)
OData Primitive Types Bounded UI5 control must be typed and for OData Models bounded with OData annotations • •
•
UI5 supports simple types that are used together with OData models. These types support OData Version 2.0 + annotations from Version 4.0 including relevant property facets as constraints These types are used to support UI5 smart controls, Fiori Launchpad Cards and Fiori Smart Templates
Metadata Property Binding Bounded UI5 control must be typed and for OData Models bounded with OData annotations •
The extended syntax makes it possible to access the metadata for certain properties of an entity in OData services, such as heading, label, and precision using property binding.
•
The annotations can be addressed either absolute or relative to a data path and the path to metadata must therefore marked with /#.
•
An absolute binding path starts with the entity type name followed by the property name. Property attributes can be accessed with @ + propertyName, nodes can be accesses with the node name only. Entity Type
Bounded UI5 control must be typed and for OData Models bounded with OData annotations Consume OData annotations like data type, max. length, F4 help, groups, etc. and customize the control accordingly Supported Smart Controls are: FilterBar, Table, Field, Input, Form and ObjectPage
Use predefined UI5 style elements and change the look & feel with Theme Designer
Each box has a content area (e.g. text, an image) and optional surrounding padding, border, or margin areas. The final width (or height) of an element is the sum of the margin, padding, border and the given width (or height).
Use predefined UI5 style elements and change the look & feel with Theme Designer As of SAPUI5 1.28, SAPUI5 libraries let you influence spacing in between controls and within containers by using predefined CSS margin/padding classes.
EasyRun Fiori Launchpad by NL for Business Our Fiori Customers requested for additional functionality Easy setup for support by email Easy setup for Dynamic Tile Content Easy setup of User/Role specific Fiori Launchpad Configuration Easy setup of restricted Tiles by Network and Timeslot Easy setup for Custom Fiori Logon Page Easy replacement of Logo without Theme Designer Own SICF Logoff alias node in stead of fixed default
EasyRun Fiori Launchpad by NL for Business Our Fiori Customers requested for additional functionality Easy setup for support by email Out-of-the-box solution
Easy setup for Dynamic Tile Content Direct implementation using BAdI implementations
EasyRun Fiori Launchpad by NL for Business Our Fiori Customers requested for additional functionality Easy setup of User/Role specific Fiori Launchpad Configuration Multi Fiori Launchpad Configurations possible based on company, role or user Easy setup using Fiori App for customizing More secure and lower cost for support
EasyRun Fiori Launchpad by NL for Business Our Fiori Customers requested for additional functionality Easy setup of restricted Tiles by Network and Timeslot
Restrict tiles based on ip-address or host names Restrict tiles based on start and end date Easy setup and secure of internal and external facing Fiori Launchpad Fiori App for Customizing Tiles (available end November 2015)
EasyRun Fiori Launchpad by NL for Business Our Fiori Customers requested for additional functionality Easy setup for Custom Fiori Logon Page Easy replacement of Logo without Theme Designer Own SICF Logoff alias node in stead of fixed default Easy setup by configuration Lower cost and improves security Fiori App for Customizing Tiles (available end November 2015)
EasyRun Fiori Launchpad by NL for Business Now available for Fiori Launchpad on Business Suite Easy and personalized setup of the Fiori Launchpad by configuration app Adds additional functionality like Personalize Setup and Network and Timeslot restrictions Improves security Implemented in frontend server No need of a query string parameters for configurations
Lower maintenance cost Easy configuration by configuration apps No modification and no copy of the original code needed
My relation. with SAP. Founded in 2001. Certified Consultants. Located in. The Netherlands. UI5. GateWay/OData. Fiori. SAP Trainer. for. My Profile. My profile. Robert Eijpe. User Experience Architect. Fiori Consultant. SAP Consultant. since 1996. SAP Mentor. SAP Expert Innojam. Speaker at TechEd. Member of UI5 Team.
There was a problem previewing this document. Retrying... Download. Connect more apps... Try one of the apps below to open or edit this item. SAPTECHED ...
Dec 6, 2009 - To understand the role of Pc City's paid and owned media (website) in driving sales. ⢠To optimise the marketing and media mix to generate greater revenue from ..... 20. Drivers of Branded search queries. In addition to driving web tr
Possibility to differentiate advertising stimuli from market to market in order to isolate the specific impact of your media campaign on in-store sales. O2S. Geo Lab.
We offer a range of internships across EMEA and durations and start dates vary according to project and location. Our internships expose students to the ...
Page 1 of 4. beagle. B. B. B. B. B. B. B. B. B. B. B. J. G. J. A. J. C. J. J. E. G. B. D. G. I. J. C. B. B. C. J. G. A. G. J. B. B. B. B. B. B. B. B. B. B. B. B. J. G. G. G. G. G. D. D. J. G. J. H. J. I. A. J. E. G. G. J. G. A. G. B. B. B. B. B. B. B
Mar 19, 2018 - In addition, Google will reimburse qualifying successful applicants reasonable meals and social event expenses related to the BOLD Immersion program, subject to a cap as notified to applicants by Google. For the avoidance of doubt succ
to get a rare glimpse into the business side of the technology industry, a chance to grow your peer network, and exposure and insight ... with the Criteria by an internal panel of Google team members and the best 65 applications (as assessed by the .
