SAP Fiori Elements 公开课第一单元概要介绍

简介: SAP Fiori Elements 公开课第一单元概要介绍

Open SAP 课程地址

很多 SAP 从业者反映,open SAP 上的视频,因为网络原因无法访问,所以我会陆续在我的个人微 信 号“汪子熙”上面,把这些视频配上中文字幕并发布出来,敬请关注。image.png本文是 Open SAP 上的课程之一,SAP Fiori Elements 公开课第一单元视频的中文字幕及概要介绍。


大家好。欢迎来到第一周的学习单元,Open SAP 的学习课程,开发和扩展 SAP Fiori Elements 应用


我是 Stephanie Hager, SAP Fiori Elements 的产品经理


还有另一位SAP Fiori Elements 的产品经理 Peter Spielvogel


本单元我们会一起给大家介绍 SAP Fiori Elements


在接下来的四周中,您将学习到如何创建一个 SAP Fiori Elements 应用,以及如何对其进行扩展


在第一周,我们将介绍一些基础的架构知识,解释 OData 服务如何在 SAP Fiori Elements 体系里发挥作用


在第二周和第三周,我们将创建几种不同类型的 SAP Fiori Elements 应用,并熟悉各种工具的用法


这里的目的是介绍您在SAP Fiori Elements 开发项目期间将遇到的大多数技术


第四周主要围绕 Fiori Elements 应用的 Extensibility 话题展开image.png这是一门开发课程,显然是为开发人员开设的


但对于任何其他角色的 SAP 从业者,只要有兴趣,也可以通过该课程了解构建 SAP Fiori Elements 应用是多么容易


所以我们将一起构建几种不同类型的Fiori Elements 应用程序


本课程提供了一些可选的练习,鼓励大家跟着我们一起做


这些练习还包含了一些额外的材料。因为我们无法涵盖所有我们想在课堂上展示的内容


本课程会开发一个供旅游柜台职员 Jay 使用的应用,用来管理旅行和预订信息


该职员可以通过旅行概览(Travel Overview)了解最重要的商业数据


在应用里,他可以导航到旅行列表,进一步查看旅行细节,也可以使用预订分析功能


我们还将在旅行场景之外创建一个额外的应用程序,管理外出携带的食物和饮料


这里我们将使用一个外部 OData 服务,该 OData 服务并未由 SAP 提供


这里给大家做一个简单的 demo,展示该应用完成之后的使用效果


在这门课程里我们会一起把这个应用做出来


这是 Jay 所有的 Travel 数据


这里用卡片总结了 Jay 最重要的业务数据,包括一些分析信息


这里提供一个最重要的包含快速链接的列表。通过这个列表卡,可以一眼看到哪些旅行需要特别注意image.png这些是即将推出的,但还没有被批准的旅行


点击这个列表的头部区域


可以导航到 Travel list. 这个列表是根据我们的 List Report 绘制的


我们提供了很多开箱即用的功能


例如,variant management,generic search 和 table personalization


表格列中的过滤字段是由应用程序开发者通过 metadata 提供的


还可以导航到旅行详情页面。这又是 Fiori Elements 的一个标准功能


这个类型为 Object Page 的页面,提供了很多开箱即用的功能,比如编辑功能,包括草稿管理(Draft management)


您看到的这张地图是 GeoMap 控件的一部分


这是我们在 SAP Fiori Elements 标准中不支持的特性。 所以本课程我们也将学习如何增强 Fiori Elements 应用,开发不在其开箱即用功能列表里的那些特性


之前我提到过 Jay 也可以通过预订分析应用程序来分析预订信息


这是基于平面图类型分析列表页面,提供了额外的用于对数据进行切片和切块的分析功能


特别是这里的这些交互式图表,以及视觉过滤器


简单演示就到这里。现在 Peter 将解释用户体验一致性背后的技术


以及为什么用户体验一致性非常重要


谢谢您, Stephanie. 您的演示展示了 SAP Fiori Elements 在跨所有应用程序提供一致体验方面的价值


UX(用户体验)一致性对 SAP 很重要


这是我们从各个渠道,比如来自客户和合作伙伴的用户组会议,SAP会议和发送给我们的电子邮件里听到的呼声image.png这是从他发布的一个博客中摘取的链接


我们的开发工作专注于交付一致的用户体验,而 SAP Fiori Elements 在这方面起着重要的作用


这是我们为 SAP S/4HANA开发应用的主要工具之一


使用 SAP Fiori Elements,您所构建的应用程序的外观和体验,将与 SAP 发布的 S/4HANA 应用完全一致


我们再重申为什么一致的用户体验如此重要image.png企业级软件开发的挑战之一,是让所有开发人员遵循相同的用户体验标准


用户体验一致性包括字体和颜色,屏幕上信息的布局以及所有交互模式


优秀的 UX 能够带来可衡量的好处


优秀用户体验的核心是一致性


一个优秀的应用 UX 意味着大家都喜欢您的应用。没有什么比编写一个没人使用的应用更令人沮丧的了


知道如何在自己的屏幕上找到信息,以及如何通过应用程序导航,可以让用户在使用应用时更自信,更有效率


一致性促进用户的快速学习曲线,因为用户已经知道点击哪里,以及菜单如何工作


简单一致的屏幕也意味着人们犯的错误更少。因此系统中的数据更 clean


所有这些可衡量的好处加在一起,意味着用户会更乐于使用您创建的应用


使用 Fiori Elements 可以让您获得所有这些益处,同时控制开发和维护成本


这就是为什么 SAP 内部如此依赖 Fiori Elements 的原因


SAP Fiori Elements 采用 SAP UI5 技术


这是一个现代的 Web 开发框架,可以用一套代码实现,创建一系列跨平台使用的应用程序


将 SAP UI5 用于您的 Web 应用程序有几个关键优势。它为您提供最新的 SAP Fiori 体验


并且随着设计系统的发展


它将继续提供包括对 SAP 企业级产品标准的内置支持,比如 security, integration 和 accessibility


因为 SAP UI5 是一种基于 web 的技术,可以在所有平台,浏览器和设备上运行


因此可以实现编写一次,就同时拥有桌面和移动应用程序的效果image.pngFiori Elements 还使您能够使用 SAP UI5 的灵活性扩展 SAP 标准应用程序并自定义 UI,而无需任何编码image.png在下一个关于 Fiori Elements 体系架构的单元中,我们将更多地讨论 SAP UI5 的优点


课程的最后一周,我们将专注于使用 SAP UI5 来扩展标准应用程序


至此,您已经在 demo 中看到了一些 SAP Fiori Elements 的例子,以及关于 SAP UI5 的一些知识


那么,到底什么是 SAP Fiori Elements?


SAP Fiori Elements 是一个 UI 库,可提供多个标准平面图(Floor Plan). SAP Fiori Elements 使用元数据,因此您可以使用最少的编码创建 Fiori 应用程序image.png元数据决定了应用的外观和行为。 这种元数据驱动的开发方式有几个关键的好处

您从设计用于在各种常见布局中执行的符合企业级应用质量标准的代码开始自己的开发工作

这种低代码方法可提高您的开发效率,因为您只关注业务逻辑

而不需要为用户界面编写任何代码image.png平面图已经包含 Fiori 设计,因此您编写的所有应用程序的一切看起来都是一致的。因为 SAP 提供了 UI, 所以我们也维护它


随着 Fiori 设计的发展, 您的 Fiori Elements 应用程序可以继承这些更新。现在 Stefanie 将介绍不同的平面图


通过提供标准平面图,开发人员的工作效率得到显着提高


企业中的大多数场景都涉及提供业务相关数据的概述,及围绕这些概述数据的一些变化


以及对这些数据提供管理功能。屏幕上显示的这五种平面图,是 SAP Fiori Elements 设计出来用于覆盖业务用例的绝大多数情况


Overview 页面(概览页), 提供对某些业务区域的数据的概览


Overview 页面是业务流程的起点, 比如我们从概览页,跳转导航到旅游列表界面


旅游列表界面是基于 SAP Fiori Elements 另一种类型的平面图:List Report


List Report 被设计用来过滤和排序大量项目数据


List Report 允许用户导航到一个对象页面即 Object Page,以提供具体的进一步细节洞察


Analytical List 页面具有额外的分析功能,比如之前我们在预订分析应用程序中看到的图表和视觉过滤器


第五大 Floor Plan 就是 Worklist page,为处理任务列表而优化。在本课程我们没有时间介绍这个平面图


使用 SAP Fiori Elements 构建的应用程序自动成为"企业级就绪(Enterprise Ready)"的应用程序。


我们的框架提供开箱即用的高质量、稳定、优化的 UI 代码


这意味着您不必编写、测试或维护大量复杂的 UI 代码


相信大家之前也听说了 SAP UI5 Freestyle 同样能够提供编写企业级就绪应用的能力


那么,SAP Fiori Elements 和 SAP UI5 Freestyle 各自有着何种使用场合呢?Peter 能够给我们介绍一下它们的技术选型吗?


当然


显然这两种都是开发 SAP Fiori 应用不错的选择方式


最适合您的方法取决于您的实际情况和需要满足的业务需求


简而言之,如果选择 SAP Fiori Elements,意味着您决定牺牲一定的灵活性来换取效率image.png如果您的业务需求基本上能被前面介绍的 Fiori Elements 五种 Floor Plan 所涵盖,使用 Fiori Elements 能高效构建应用出来


因为这种情况下,您只需要专注于定义注解,而应用的 UI界面及控制逻辑,已经由 SAP 框架代码提供了


这种简化的流程减少了开发和维护的时间和成本


如果你需要实现的场景不在这些平面图的覆盖范围内,那么扩展这些平面图将会耗费大量的时间


此时 SAP UI5 Freestyle 才是更好的选择


使用 SAP UI5 Freestyle,您将全权负责 UI 开发,您的设计有完全的灵活性


显然,这将导致更高的开发和维护成本


本课程我们将介绍开发 SAP Fiori Elements 所必需的知识


而 SAP UI5 Freestyle 开发是 Open SAP 另外一门课程单独介绍


在本课程最后一周,我们将利用 SAP UI5 Flexibility 来扩展一个 SAP 标准应用程序


希望大家都能很高兴地加入到 SAP Fiori Elements 的开发旅程中来


最后做个总结。在本单元中,我们讨论了为什么一致的用户体验能给您的业务带来益处


以及为什么 SAP UI5 和 Fiori Elements 的结合,能提高应用开发效率


以及用户体验一致性的重要地位在大规模构建企业级应用程序中的体现


最后我们讨论了 Fiori Elements 的适用场合以及同 SAP UI5 Freestyle 的互为补充


在下一单元中 我们将讨论 SAP Fiori Elements 的架构话题, 以及所有不同的底层技术如何协同工作。感谢收看本视频,下期再见。image.png



相关文章
|
6月前
|
数据库 API
启用SAP Fiori之前的一些注意事项
启用SAP Fiori之前的一些注意事项
|
6月前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
|
6月前
|
UED
什么是 SAP Fiori 的 Technical Catalog 和 Business Catalog
什么是 SAP Fiori 的 Technical Catalog 和 Business Catalog
|
6月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
6月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
6月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
6月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
6月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
|
6月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版