3. 动手运行第一个 SAP Fiori Elements 应用(ListReport 类型)

已于 2024-09-28 17:55:16 修改
阅读量996 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： SAP Fiori Elements 从入门到进阶 文章标签： 前端 javascript SAP UI5 Fiori 思爱普
于 2023-04-30 20:03:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i042416/article/details/130451031

本教程前两篇文章，我们对 SAP Fiori Elements 进行了概要介绍，也讲解了如何在本地使用 Visual Studio Code 搭建 Fiori Elements 开发环境。

本文我们即将理论结合实践，开始动手在本地运行第一个 Fiori Elements 应用。

笔者已经给大家提前准备好了一个 Fiori Elements 应用，地址在本文末尾。本文的任务是，大家按照我的介绍，在本地成功运行笔者准备的这个 Fiori Elements 应用。

按照本文介绍的步骤完成之后，最终大家会在浏览器里看到下面这个 Fiori Elements 应用的界面：

了解本专栏 订阅专栏 解锁全文
5. 动手开发第一个 SAP Fiori Elements 应用
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
06-03 1720
本教程的前五篇文章，我们已经为 SAP Fiori Elements 的创建做了足够的铺垫。是动手开始创建第一个 Fiori Elements 应用的时候了。大家可以跟着笔者一起，在本地电脑上用 Visual Studio Code 一步步创建 Fiori Elements 应用了。大家在动手之前，请务必按照上述编号为1的文章，完成自己本地 Visual Studio Code 的安装和环境搭建。如果大家在做的过程中遇到各种问题，可以在文末评论区留言，把你们遇到的错误消息发给我，或者把错误截图私信给我。
14. SAP Fiori Elements List Report 如何在扩展开发里使用代码获得当前选中的表格行项目
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
08-20 482
本文介绍了如何在 SAP Fiori Elements List Report 的自定义 Action 扩展开发中，使用 JavaScript 编码，获取当前选中的表格行项目的业务数据。 本教程下一篇文章，我们会介绍另一种更规范也是 SAP 推荐的 Extension API 的方式，同样能实现本文描述的需求。
SAP之FIORI(4)-列表
悦分享
06-01 913
SAP之FIORI(4)-列表 List的属性 growing：设置运行请求更多的条目 growingThreshold:每次请求的数据条数 mode list的模式 “None” "SingleSelect" "MutiSelect" "Delete" "noDataText" List的事件 delete 删除按钮点击时候触发 itemPress 点击条目触发 sele...
SAP Fiori Elements 在本地测试模式下如何修改 List Report 里字段标签和图标
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
04-20 507
通过 Jerry 这篇文章 在没有任何前端开发经验的基础上, 创建第一个 SAP Fiori Elements 应用 介绍的步骤，创建一个简单的 SAP Fiori Elements 应用。 在 Visual Studio Code 命令栏里，使用 start-mock，则能够以本地 mock 数据启动这个 Fiori Elements List Report 应用。 在项目工程文件里，找到 localService 文件夹下面的 metadata.xml, 定位到名为 SEPMRA_C_PD_Produ
Fiori2.0-如何对数据进行筛选。
期待一个富婆
12-15 832
筛选数据是很常用的功能之一。本篇我们就来讲讲如何利用fragment对数据进行筛选。
11. SAP Fiori Elements List Report 表格新增列扩展方式的工作原理
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
08-08 793
本文详细介绍了 SAP Fiori Elements 的 List Report 应用，针对 Table 区域新增自定义列开发方式背后的工作原理，主要围绕开发人员在 manifest.json 里注册的 fragment 在运行时如何被 SAP Fiori Elements 框架解析，并如何参与到整个表格列绘制过程中这两个技术实现点来阐述的。
13. 如何使用 Guided Development 给 Fiori Elements List Report 的工具栏添加自定义按钮
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
08-18 385
本文通过一个具体的例子，介绍了如何通过 SAP Fiori Tools 提供的 Guided Development 功能，在一系列步骤中维护要创建的自定义 Action 的明细，最终自动生成控制器扩展文件和在 manifest.json 文件里注册自定义 Action 的技术信息，以实现需求。
前端安全防护实战：如何保护你的游戏App免受DDoS攻击
@云安全小杜
06-26 363
当客户端防护不足以应对复杂攻击时，我们引入了。
vue2开发日历静态网页编程练习项目【web静态网页版】
最新发布
Json的知识梦工厂
06-29 184
摘要：本文分享了一个基于Vue2开发的静态网页版日历项目，采用Vue.js、Element UI和lunar-javascript技术栈实现。项目包含日历展示、月份切换、农历显示等功能，通过组件化方式组织代码结构。文章展示了项目效果图、目录框架和核心代码片段，包括日历渲染逻辑和样式设计。该项目适合前端初学者作为练习案例，帮助掌握基础开发技能。作者强调前端开发的趣味性，鼓励开发者通过实践提升技术能力。
Object.assign()
weixin_63043528的博客
06-25 253
直接赋值 `formData = result.data` 会破坏 Vue 的响应式系统。- 使用 `Object.assign` 可以保留 `formData` 的响应式特性。- 将 `result.data` 的所有属性复制到 `formData` 对象。- 只覆盖已存在的属性（如 `account` 和 `avatar`）- `Object.assign` 只修改属性值，不改变对象引用。- Vue 3 的 `reactive()` 创建的响应式对象。- 保持 `formData` 的引用不变。
ivx创建一个测试小案例
m0_46695127的博客
06-25 305
名称为"提交信息"，接收参数第一个参数名为name，第二个参数名为phone，返回参数第一个参数名为success，第二个参数名为message，第三个参数名为data。，外边距上设置为20，最上面设置为0，内容设置为"请输入姓名"，“请输入联系方式”。文本的高设置为36，左边的宽设置为30%，右边的宽设置为70%，将两个文本进行水平和垂直居中对齐，内容为姓名和联系方式。如果"请输入联系方式".内容类型非手机，系统界面显示提示语"请输入手机号"，外边距上设置为20，内容设置为"提交”，“跳转列表页”
数字孪生技术引领UI前端设计潮流：沉浸式体验的新篇章
assjzxcvb的博客
06-25 1261
数字孪生技术正推动 UI 前端设计迎来继响应式设计、扁平化设计之后的第三次范式革命 —— 从二维平面走向三维沉浸。这种变革不仅是技术栈的升级（Three.js/WebXR），更是设计思维的重构：当物理世界的每一个细节都能在虚拟空间中被精准镜像与交互，UI 设计师的工作不再局限于界面布局，而是成为数字世界的 “空间规划师” 与 “体验架构师”。从医疗手术仿真到城市交通管理，沉浸式数字孪生 UI 已展现出提升决策效率、降低认知成本的巨大价值。
规范：前端项目目录及文件命名规则
snow的博客
06-24 232
本文总结了前端项目的目录和文件命名规范：目录命名采用小写字母和连字符分隔（如src/components），要求语义化表达用途。文件命名同样使用小写字母和连字符（如user-profile.vue），需包含正确后缀并避免特殊字符。组件采用PascalCase命名（如UserProfile.vue）。文中还展示了一个示例项目结构，包含src/assets、components、pages等典型目录层次。这些规范有助于保持项目结构清晰，提高代码可维护性。
智慧校园电子班牌系统源码的开发与应用，基于Java/SpringBoot后端、Vue2前端、MySQL5.7数据库
爱笑的源码博客
06-25 465
智慧校园电子班牌系统通过Java/SpringBoot后端、Vue2前端、MySQL5.7数据库等技术实现系统包含考勤管理、课程展示、家校互通等功能模块，支持远程管理和数据统计。电子班牌采用安卓7.1系统，提供信息展示、考试管理、成绩查询等服务，家长可通过小程序查看学生情况。
黑马教程Webday4-1
weixin_50285694的博客
06-28 529
本文介绍了SpringBoot Web开发基础知识和入门程序实现。主要内容包括：Web基础知识（静态/动态资源、B/S和C/S架构）、SpringBoot简介、基于SpringBoot开发Web应用的步骤（创建工程、定义Controller类）、项目结构分析、pom.xml配置说明、入口类介绍、HTTP协议特点（基于TCP、请求-响应模型、无状态）以及请求数据格式。通过一个简单的"Hello Xxx"响应示例，展示了SpringBoot快速构建Web应用的能力，并解释了自动启动Tomca
LabVIEW远程面板交互控制
bjcyck的博客
06-28 736
环境准备与初始化：从项目（Remote Panel Methods.lvproj ）中打开 VI，确保启用远程面板服务器（通过 Tools > Options > Web Server 配置）。运行 VI 后，其作为服务端，用于配置远程面板连接参数，如获取并暂存当前远程面板服务器设置，后续会话结束后恢复。VI访问列表配置：打开目标 VI（如波形图表示例 VI）引用，将其添加到远程面板服务器的 VI 访问列表，允许客户端连接交互。连接与状态监测。
前端富文本实现方案有哪些，分别有什么优缺点
前端金牌摸鱼达人
06-26 681
优点完全可控，性能优化空间大不受浏览器默认行为限制缺点开发成本极高需要处理所有交互细节文本选择、复制粘贴等基础功能需要自己实现。
浏览器工作原理27 [#]PWA：解决了web应用哪些问题
qq_44376306的博客
06-27 826
先来看看 Service Worker 是怎么解决离线存储和消息推送的问题。其实在 Service Worker 之前，WHATWG 小组就推出过用 App Cache 标准来缓存页面，不过在使用过程中 App Cache 所暴露的问题比较多，遭到多方吐槽，所以这个标准最终也只能被废弃了，可见一个成功的标准是需要经历实践考量的。所以在 2014 年的时候，标准委员会就提出了 Service Worker 的概念，它的主要思想是在页面和网络之间增加一个拦截器，用来缓存和拦截请求。
Vue3插槽
sang521jia的博客
06-25 644
需求：封装一个通用列表组件，允许父组件根据条件控制每一项的展示方式。子组件负责数据遍历和结构，父组件控制显示。App.vue。
SAP Fiori Elements教程：示例OData V4服务材料
资源摘要信息:"fiori-elements-incident-management是一个包含SAP开发人员中心提供的教程示例OData V4服务的存储库。该教程涉及如何使用SAP Fiori Elements平面图进行开发。通过这个教程，SAP开发人员可以学习如何...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汪子熙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值