什么是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. FilelistCreator --- 导出文件列表神器 及其他好用工具

    https://www.sttmedia.com/ Standard Software WordCreator: Creates readable words, sentences or texts ...

  2. thinkphp项目部署在phpstudy里的nginx上

    朋友的一个thinkphp做的项目,让我帮他部署一下的,LINUX服务器,用宝塔. 第一台服务器,装上宝塔,宝塔里装NGINX,PHP5.6,再建立网站,绑定域名,访问成功,一切正常! 昨天试着给另一 ...

  3. row_number() over()分组排序功能 partition by 用于给结果集分组

    select * from ( select row_number() over(partition by Gid order by Gid ASC) as RowN, * from( select ...

  4. asp.net 的log4net的helper类

    using log4net; using System; using System.Diagnostics; namespace MxWeiXinPF.Common.log { public stat ...

  5. fragment原来的页面切换被重新实例化,无法继续保持上一次的内容。只让它执行一次

    最好的方法是: 定义类.静态变量的方式 保存数据,从这里取. 用网上其他人的方法,fragment切换速度太快会报错 child view 没有从parent view 中移除: 只执行一次,定义一个 ...

  6. nginx过滤access_log中HEAD、OPTIONS请求记录

    网上很多教程说是这样做: if ($request_method = HEAD) { access_log off; } 试了之后是不行的,正确的做法如下: http { map $request_m ...

  7. 设计模式php+java版本(1) 基础篇 七大原则

    2019年9月6日11:15:46 关于设计模式,其实就是编程思想的一个体现,有比较完善的编程思想写出的项目代码和没有编程思想的写出的差距巨大,代码的可读性,可维护性,可扩展性天差地别,有些刚接触的编 ...

  8. SpringBoot小技巧:统一异常处理

    SpringBoot小技巧:统一异常处理 情景描述 对于接口的定义,我们通常会有一个固定的格式,比如: 但是调用方在请求我们的API时把接口地址写错了,就会得到一个404错误,且不同于我们定义的数据格 ...

  9. nodejs调试工具 node-inspect

    1.安装 npm install -g node-inspect 2.chrome设置 chrome://flags/#enable-devtools-experiments 3.测试 测试代码mai ...

  10. [ARM-Linux开发]linux dmesg命令参数及用法详解(linux显示开机信息命令)

    功能说明:显示开机信息.语 法:dmesg [-cn][-s <缓冲区大小>]补充说明:kernel会将开机信息存储在ring buffer中.您若是开机时来不及查看信息,可利用dmesg ...