什么是SAP Fiori?SAP Fiori不是SAP发布的某款产品,而是SAP新一代UI设计风格和用户体验的代号。
Fiori是一个意大利语中的单词,意思是“花”:

不得不说SAP确实对“花”情有独钟,因为SAP的另一款内存数据库HANA(全称:High-performance Analytic Appliance),在日语里也是“花”的意思。

再回到Fiori。SAP Fiori 2.0在2015年时,曾经获得全球最富盛名的设计竞赛,红点设计概念竞赛(Red Dot Award:Design Concept 2015)的大奖。这次竞赛有全球来自61个国家4680件作品参与角逐,最终SAP脱颖而出获此殊荣。
如果您想看看按照SAP Fiori这套规范设计出的前端应用到底长什么样,可以按照本文介绍的方法免费体验。
访问链接:https://www.sap.com/china/products/fiori.html
点击“免费试用”的按钮:

在跳转的页面里点击按钮“See it in action”:

然后我们就能看到一个Fiori应用的入口界面了,这个界面有个术语叫做Fiori Launchpad。我们也可以把下面这个链接加到收藏夹里,下次直接访问。
https://www.sapfioritrial.com/sites?helpset=trial&sap-client=001

Fiori Launchpad里每个方方正正的白色区域,我们称之为Tile。每个Tile代表一个Fiori应用。其中上图红色高亮的几个Tile代表的应用就是Jerry所在的SAP成都研究院的开发团队负责开发和维护的。
任意点击一个Tile,比如My Opportunities。在进入页面的过程中,能看到一个旋转的花瓣动画效果,这也呼应了Fiori的“花”的含义:

进入Opportunity应用后,您就能看到类似下图的界面了,这就是一个典型的SAP Fiori应用。

如果您对这些Fiori的前端实现好奇,想看看它们背后的JavaScript或者CSS的实现,那么同时按住Ctrl+Alt+Shift+P四个按键,会看到下面这个弹出窗口。选中“Use Debug Sources”的勾选项,

然后重新刷新浏览器,

这样就会加载SAP Fiori应用的调试版本了。如果不这样做的话,默认加载的是发布版本的前端代码,里面的JavaScript代码经过压缩,变量名和函数名完全不可读。
此时在Chrome浏览器的开发者工具的Networ标签里能看到一系列调试版本的脚本文件的加载。

稍等片刻之后,就可以到Chrome开发者工具的Sources标签页去阅读加载好的调试版本的脚本文件了。

要获取更多Jerry的原创文章,请关注公众号"汪子熙":

如何免费试用SAP的Fiori应用的更多相关文章

  1. SAP S4HANA1610/Fiori安装过程全记录

    经历各种坑,从硬件到文件,终于安装成功. 有需要安装或使用S4HANA(含Fiori)的同学可以参考. 安装文件分享给大家 链接:http://pan.baidu.com/s/1mi7LfIS 密码: ...

  2. SAP 登录Fiori的user和登录WEB UI的business role之间的关系。

    SAP 登录FIORI的user 会被assign 一些控制前端app显示的business role(是一些PFCG role的集合),该business role和登录web ui选择的S4C_S ...

  3. SAP Fiori里两种锁机制(lock)的实现

    方法1: ETAG机制 SAP CRM Fiori采用了这种机制. 看一个具体的例子来理解.假设我用用户名Jerry选中了这个ID为3456的Opportunity,点击Edit按钮之后: 会触发一个 ...

  4. 【Fiori系列】浅谈SAP Fiori的设计美感与发展历程

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[Fiori系列]浅谈SAP Fiori的设计美 ...

  5. SAP 前端技术的演化史简介

    Jerry之前曾经写过一篇微信公众号文章,题目叫<> 关注我的公号"汪子熙"后,在历史菜单"前端开发相关"里即可找到这篇文章: 该文章简单回顾了SA ...

  6. 在Kubernetes上运行SAP UI5应用(上)

    2018年只剩最后30天了.Jerry在2017年的最后一天,曾经立下一个目标:这个微信公众号在2018年保证至少每周发布一篇SAP原创技术文章. 从Jerry在后台统计的2018全年文章数量来看,这 ...

  7. Jerry的Fiori原创文章合集

    我曾经于2014年10月到2016年5月工作于SAP CRM Fiori应用的开发团队, 我所在的团队负责下列这8个Fiori应用的维护和持续开发: My Opportunities My Tasks ...

  8. 从SAP客户主数据里直接创建商机(Opportunity)

    在SAP CRM Fiori的Account应用里,直接在Account页面创建商机: 在SAP Cloud for Customer里: 要获取更多Jerry的原创文章,请关注公众号"汪子 ...

  9. 如何使用Prometheus采集SAP ABAP Netweaver的应用日志数据

    Prometheus是一套开源的系统监控报警框架.它启发于Google的borgmon 监控系统,由工作在 SoundCloud 的 google 前员工在 2012 年创建,作为社区开源项目进行开发 ...

随机推荐

  1. spark跑YARN模式或Client模式提交任务不成功(application state: ACCEPTED)(转)

    不多说,直接上干货! 问题详情 电脑8G,目前搭建3节点的spark集群,采用YARN模式. master分配2G,slave1分配1G,slave2分配1G.(在安装虚拟机时) export SPA ...

  2. Data truncation: Out of range value for column 'quanity' at row 问题解决方案

    由于之前在自己电脑上搭建了mysql 5.6的数据库,但是在服务器上搭建的是mysql 5.7的环境,在运行过程中出现了如下错误: Data truncation: Out of range valu ...

  3. Nginx的configure脚本支持选项整理

    在不同版本间,选项可能会有些许变化,请总是使用./configure –help命令来检查当前的选项列表. --prefix=<PATH> #Nginx安装路径.如果没有指定,默认为 /u ...

  4. Java12新特性 -- 默认生成类数据共享(CDS)归档文件

    默认生成类数据共享(CDS)归档文件 同一个物理机/虚拟机上启动多个JVM时,如果每个虚拟机都单独装载自己需要的所有类,启动成本和内 存占用是比较高的.所以Java团队引入了类数据共享机制 (Clas ...

  5. Ant Design Pro Vue 时间段查询 问题

    <a-form-item label="起止日期" :labelCol="{lg: {span: 7}, sm: {span: 7}}" :wrapper ...

  6. window 安装使用npm

    [安装步骤] 一.安装node.js 1.前往node.js官网下载并安装工具,这里安装路径选到D盘,D:\nodejs 安装完毕后在命令行输入以下命令测试是否安装成功,正确会出现版本号 npm -v ...

  7. bootstrap datetimepicker 添加清空按钮

    <div class="ys-datetimepicker"> <input class="form-control" size=" ...

  8. Spark sql -- Spark sql中的窗口函数和对应的api

    一.窗口函数种类 ranking 排名类 analytic 分析类 aggregate 聚合类 Function Type SQL DataFrame API Description  Ranking ...

  9. API设计之道

    接口安全要求: 1.防伪装攻击(案例:在公共网络环境中,第三方 有意或恶意 的调用我们的接口) 2.防篡改攻击(案例:在公共网络环境中,请求头/查询字符串/内容 在传输过程被修改) 3.防重放攻击(案 ...

  10. win7下IntelliJ IDEA使用curl

    curl是利用URL语法在命令行方式下工作的开源文件传输工具 curl命令可以在开发web应用时,模拟前端发起的HTTP请求 1.下载curl https://curl.haxx.se/downloa ...