你是UI5和Fiori的新手?来对地方了. 对我来说,今年是不得不“跟上时代”去提升自己ABAP世界以外的技术技能的困难的一年.幸运的是,有很多可免费获得的信息和课程可以帮你实现这个跳跃.不要等着别人送你去训练——自己花时间提高技能! 学习web技术技能 了解UI5的基础部分HTML, CSS, Javascript和JQuery是个好主意,有助于你理解自定义的UI5应用的基本特性.如果你对它们不熟悉的话, Codecademy 和 codeschool有一系列好的课程,可以帮助你理解这些技术的…

正文 你是UI5和Fiori的新手?来对地方了. 对我来说,今年是不得不“跟上时代”去提升自己ABAP世界以外的技术技能的困难的一年.幸运的是,有很多可免费获得的信息和课程可以帮你实现这个跳跃.不要等着别人送你去训练——自己花时间提高技能! 学习web技术技能 了解UI5的基础部分HTML, CSS, Javascript和JQuery是个好主意,有助于你理解自定义的UI5应用的基本特性.如果你对它们不熟悉的话, codecademy 和 codeschool有一系列好的课程,可以帮助你理解这些…

概述 目前SAPUI5 SDK 提供了两种方式来开发一个SAPUI5 App.一种方式是传统的SAPUI5开发方式,一种是利用SAP Fiori Elements通过模板快速构建应用的方式. 本文简单介绍这两种方式如何实现,并进行对比,使读者更清楚这两种方式的优缺点以及适合的开发场景. SAPUI5 SDK的官方网站在这里.我采用的开发工具是SAP Web IDE. 简介 SAPUI5 freestyle 就是SAPUI5 提供的最普通的最基本的开发方式,之所以给它起名字叫freestyle,就…

公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[Fiori系列]浅谈SAP Fiori的设计美感与发展历程   前言部分 大家可以关注我的公众号,公众号里的排版更好,阅读更舒适. 正文部分 最近一段时间比较忙,有很多读者的消息没有及时回复,公众号里消息回复有时长限制,而且超过时间就不能回复了,大家也可以选择在文章末尾留言,这样就不会有时间限制. 我在之前的文章推送里写了关于SAP Fiori…

封面图片来自Google搜索,关键字: Fiori Deployment 方式1 On premise环境下以BSP应用作为Fiori应用部署和运行的载体 在SAP成都labs我曾经担任过CRM这几个Fiori应用的开发和维护工作: 在Google上搜索关键字Fiori Architecture, 能找到这样一张图片,其中CRM和S/4 HANA的Fiori应用都以BSP应用的方式运行在下图我标注了红色方框的ABAP前台服务器上. 以CRM的My lead应用为例,在Chrome的develop…

2017年3月28日,我到国内一个SAP CRM客户那里,同他们的架构师关于二次开发的UI框架选择SAP UI5还是Vue进行了一番探讨.回到SAP研究院之后,我把这个问题扔到了公司的微信群里,引起了大家的热烈讨论. 因为出差回来之后,我需要向我老板和老板的老板汇报工作,因此写了这篇blog: https://blogs.sap.com/2017/03/31/is-jquery-based-ui-framework-obsolete/ 时光飞逝,转眼间2018年也快过完了.今天上午上班路上,忽然…

1995年7月,台湾大宇公司发布了一款国产单机角色扮演游戏神作:<仙剑奇侠传1>,所谓"一包烟,一杯茶",就能在电脑面前坐一整天. 这么经典的游戏Jerry当然已经通关过无数次了.在试炼窟最深处的女娲遗迹里,可以习得冰系最强法术:雪妖. 雪妖施展后,全屏幕会渲染出漫天雪花,攻击对方全体.本文Jerry会介绍如何给SAP Fiori Launchpad增加和雪妖施法一样的雪花纷飞效果. 先从这个视频里看下Fiori Launchpad加了雪花后的效果. Jerry从2014年…

iPhone资源->iPhone商务软件 SAP Fiori Client 固件要求:需要 iOS 9.0 或更高版本.与 iPhone.iPad 和 iPod touch 兼容. 利用适用于 iPhone 和 iPad 的 SAP Fiori Client 移动应用,可以通过随时随地为您处理最常用日常业务任务来提高您的效率.此移动应用是为超过 1100 个 SAP Fiori 应用的 Web 版本提供的增强版移动运行时,可支持全屏操作和增强的附件处理. 版本中的新功能 - iOS 11 支持-…

如果您够细心,您或许会发现有的SAP Fiori应用的footerbar区域内的按钮有高亮显示,有的则没有. 如何自己分析这两种按钮的实现原理? 还是借助Chrome Development Tool.更多Chrome development tool的使用技巧,参考我的博客 Chrome Development Tool tips used in my daily work 使用network tab可以观察到实现高亮实现的CSS class: 记下这个css class的名称sapMBtnE…

公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[Fiori系列]为什么SAP Fiori活的如此精致   前言部分 大家可以关注我的公众号,公众号里的排版更好,阅读更舒适. 正文部分 时间追溯到1992年,SAP的创始人们发布了R3版本,这是一个经典的出现.这个版本的系统提供包括所有业务领域的业务处理流程的集成的解决方案. SAP R3的三层架构体系得到了大范围的认可,这也是SAP可以推广成…

比如我们知道在SPRO里下面这个路径的customizing activity里打开Fiori Launchpad designer: SAP Netweaver->UI technologies->SAP Fiori->Configure Launchpad content->Adding Apps to SAP Fiori Launchpad->Configure Target Mappings and Tiles->SAP Fiori Launchpad Desi…

公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FIORI系列]SAP 一文读懂SAP Fiori是什么   前言部分 大家可以关注我的公众号,公众号里的排版更好,阅读更舒适. 正文部分 SAP Fiori很难定义为一个产品,而是一个标准.符合这个标准的应用程序可以叫做SAP Fiori应用. Fiori的产生是为了应对全平台的需求与优化用户体验的潮流,改善过去SAP产品前端体验不佳与风格不…

我们知道Fiori的角色跟ERP的角色是不通用的,即使你的账号有SAP_ALL的权限,但打开Fiori的时候一样是空的一片: 只有给账号加上fiori需要的角色,并激活相关服务才能用fiori app,否则打开Fiori apps会报错,具体错误可以通过GUI事务代码:/n/iwfnd/error_log 查看具体的原因. 首先打开fiori支持库网站: https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/# 在左侧…

今天一同事问我这个问题:S/4HANA Fiori应用里的列表,一旦Scroll到底部就会自动向后台发起新的请求把更多的数据读取到前台显示. 以Product Master这个应用为例,我点击搜索之后,结果区域显示当前系统一共有140个product,但是只有前25个返回并显示在浏览器里. 这个分页效果是UI5 OData的参数实现的:$skip=0&top=25. 而总数140,是通过参数$inlinecount实现,其原理和ABAP Open SQL的SELECT COUNT(*)类似. 从…

在SAP WebIDE UI5应用编辑器里的菜单View->Show Hidden files点击后,即可发现项目文件夹下有一个隐藏文件project.json: 内容如下: 这也解释了为什么build之后,UI5应用文件夹下会多出一个dist的文件夹,内容和webapp里的代码几乎一致: databinding节点下罗列出了每个视图绑定的OData数据集的节点名称,非常实用: generation节点记录了应用创建的时间戳和基于的Fiori模板ID和版本号,translation包含了和翻译相…

方法1: ETAG机制 SAP CRM Fiori采用了这种机制. 看一个具体的例子来理解.假设我用用户名Jerry选中了这个ID为3456的Opportunity,点击Edit按钮之后: 会触发一个读操作发到后台: 后台响应这个读请求,并且在响应的头部字段ETAG里写入了对应的值. 这个26AE结尾的ETAG的值可以由应用程序采取不同的逻辑计算,可以直接采用请求节点对应的最后修改时间戳(Last Changed Timestamp), 例如下面这段ABAP代码: 也可以基于数据的完整内容计算一…

到现在,我们已经可以让组件独立地显示.我们只是运行它.让它显示在Web UI中.让我们把组件整合进导航栏,使我们可以在正常登录Web UI时访问它. 步骤一: 为你的UI组件主窗体创建一个内向插件. 步骤二: 将你的组件的主窗体在运行时资源库中作为一个界面视图暴露出来(Interface View). 步骤三: 当我们从导航栏或者其它任何工作中心页(work center page)访问我们的组件时,它将被显示在UI的工作区中.因此为了在工作区显示组件,我们需要在工作组件库(WORKAREA C…

本来Jerry觉得这个知识点太简单了完全不值得写成微信公众号文章,但转念一想,可能网络上有一些刚刚初学UI5的朋友们可能会问到,所以还是写了. 今天一个成都同事问我这个问题,因为SAP WebIDE可以非常方便地将开发好的UI5应用一键部属到SAP的其他系统,比如On-Premises环境的SAP gateway系统:但对于SAP Cloud Platform之外的其他云平台,比如AWS或者阿里云,SAP官方文档讲得不多. 其实如果已经在WebIDE里完成了UI5应用的开发,要让它运行在其他Ia…

这周有位同事邀请我给团队讲一讲SAP技术的演进历史,所以我准备了下面几个主题来介绍. 其中SAP的技术回顾和演进,我的思路就是从前后台两方面分别介绍. 我画了一张非常简单的图: 去年5月我写过一篇文章:SAP UI和Salesforce UI开发漫谈,简要回顾了SAPUI技术的发展,从最古老的SAP GUI绘制界面,到Webdynpro / WebUI再到现在广泛使用的Fiori UX.当时这篇文章介绍到Fiori(UI5)就嘎然而止了,如今大半年过去了,我们继续聊聊Fiori的发展动向. 根据…

1 UI5代码结构 上一次我们一起用了20秒的时间完成一个UI5版的Hello World.应用打开后有一个按钮,按钮的文字是Hello World,点击这个按钮之后,按钮会慢慢的消失掉(Fade out). 那我们这次就来看一看为了实现这么一个简单的功能,OpenUI5框架至少需要提供哪些内容,或者说我们通过这么一个简单的应用来看一下一个最简单的UI5的应用程序的结构. HTML部分应该不用多说,我们只看和UI5相关的代码,第一部分我们称为Bootstrap,包含以下代码段: <!-- 1.)…

上期我们完成了一个简单的主从页面,但是页面是静态的,不能交互,功能也很简单,只有一个销售订单的列表. 我们今天就一鼓作气把代码全都写完,由于本次的代码量较大,所以只对重点代码部分进行讲解. 具体每个文件和代码就不一一贴出来了,代码都放在github中,需要的自行下载吧. 1 页面导航 可以先把代码下载到本地并跑起来,这样可以对这个最佳实践的程序有一个直观的了解. 页面导航如下: 销售订单列表(Master) -> 销售订单明细(Detail) -> 行项目明细(LineItem),在每个明细页…

UI5应用发布SCP 选择UI5应用项目,右键 Deploy - Deploy to SAP Cloud Platform 输入云平台子账号,项目名称,应用名称,如下图所示: 点击Open the registered application可以看到: 点击Open SAP Fiori Launchpad进入主页:…

本文转自:http://www.cnblogs.com/qianmarv/p/4671394.html 1 扫盲 什么是SAP Fiori? 了解SAP UI5必须要从SAP Fiori开始,两者概念经常被混淆,而两者也确实有着非常紧密的关系. 用过SAP的同学们都对SAP的传统的界面(SAP GUI)表示“呵呵”,其实传统的SAP GUI的界面功能还是很强大的,但是对于一个新用户来说,学会使用这套界面就需要花上一两 周的时间,所以SAP入门的第一步就是学会使用SAP GUI.此外,传统的SAP…

什么是SAP Fiori? 了解SAP UI5必须要从SAP Fiori开始,两者概念经常被混淆,而两者也确实有着非常紧密的关系. 用过SAP的同学们都对SAP的传统的界面(SAP GUI)表示“呵呵”,其实传统的SAP GUI的界面功能还是很强大的,但是对于一个新用户来说,学会使用这套界面就需要花上一两 周的时间,所以SAP入门的第一步就是学会使用SAP GUI.此外,传统的SAP GUI只能在Windows和Mac上使用,对于移动端用户没有直接的解决方案,WEBGUI的体验也非常不好. Fi…

今天继续由SAP成都研究院著名的菜园子小哥Wang Cong,给大家分享他作为一个SAP前端人员是如何看待SAP UI5和微信小程序的异同点的. 关于Wang Cong种菜的手艺,大家请移步到他以前的文章 SAP成都研究院非典型程序猿,菜园子小哥:当我用UI5诊断工具时我用些什么 去观摩,这里不再赘述. 下面是他的正文. 近几年微信小程序发展之势如火如荼,越来越多的用户放弃原生App,转而投入小程序的怀抱,大有"一个微信行天下"的趋势. 面对如此巨大的流量机遇,百度.阿里等公司也纷纷在…

2018年只剩最后30天了.Jerry在2017年的最后一天,曾经立下一个目标:这个微信公众号在2018年保证至少每周发布一篇SAP原创技术文章. 从Jerry在后台统计的2018全年文章数量来看,这个目标已经提前实现了.为了感谢大家的支持,在2018年的最后一天,Jerry会发布一个合集:<SAP成都研究院2018年XX篇原创文章合集>,包含了2018年全年SAP成都研究院的同事们发布过的文章. Jerry在11月份中旬去SAP上海研究院参加了Kubernetes的内部培训(详情参考我的前一…

Jerry: 我和周帅认识不久,自去年7月SAP成都研究院Cloud for Customer(以下简称为C4C)开发团队组建至今,根据这段时间和周帅愉快的合作经历,我觉得如果把周帅比作我读过的小说里的一位主人公,我认为是古龙<风云第一刀>中的主角李寻欢. 李寻欢出身名门,"一门七进士,父子三探花",连其宿敌上官惊鸿也曾当面吐槽:"你本是三代探花,风流翰林,名第高华,天之骄子,又何苦偏偏要到这肮脏江湖中来做浪子?" 周帅也是出身名校,美国研究生毕业,在美…

大家好,今天的文章来自我的同事,Yang Joey. 2017年7月,SAP成都研究院C4C开发团队刚刚建立.某个周一早晨的Scrum meeting,新出现一位眉清目秀的小伙子,向大家自我介绍:"大家好,我叫杨xiao". 我一听,哇塞,和明教光明左使杨逍同名.对于八零后武侠爱好者来说,94版倚天屠龙记中孙兴饰演的杨左使潇洒飘逸,孤傲自负且颜值爆表.连金庸看了之后都评价"孙兴的杨逍源于原著,但胜于原著".相信杨逍是很多少女的梦中情人. 杨逍年轻时的武功,金庸通过灭…

SAPUI5中支持利用Component对组件进行封装.想封装一个组件,Component的基本代码例如以下: sap.ui.define([ "sap/ui/core/UIComponent"], function (UIComponent) { "use strict"; return UIComponent.extend("", { init : function () { // call the init function of the…

这篇博文难产了很久,原来是打算一周更新一篇的,上周原计划写MVC,但是写了一半,发现带入了太多的细节,不太符合这个入门系列的主题. 当我们学习一个新的技能的时候,如果一开始就面对大量的细节,很容易陷入其中而只见树木不见森林,所以最后我想我们还是先按照开发文档的节奏,一起来做UI5的最佳实践练习.在练习中对常用的一些控件以及API有一个直观的感受,如果需要细节的信息再去查文档. 这个最佳实践练习的子系列又会分为若干篇,但是不会完全按照Tutorial里面的章节来分,因为我希望每一篇都是都是一个完整…