SAP Fiori 实战课程（二）：新建页面

已于 2025-03-12 18:07:29 修改
阅读量1.4k 收藏 18
点赞数 11
CC 4.0 BY-SA版权
分类专栏： Fiori 文章标签： SAP Fiori javascript
于 2024-07-21 17:21:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bigbearxyz/article/details/140572999

课程回顾

上一课中，利用Visual studio Code 新建、并运行了一个Demo工程。可以实现对项目的启动，启动后进入一个List清单。

那么本次课程的目前就是在上一节Demo的基础上，从零开始新建一个完整的页面。实现从首页清单，选择行后，鼠标点击，进入下一个页面。

准备工作

在开始之前，把上一节代码中的页面的显示的清单抽取成一个单独的json文件，这样controller层的代码就显得没有那么臃肿。但是标准版的做法其实是需要把清单数据，直接放到JSONModel对象里面。

这里演示下View层的数据如何从指定文件夹取。

1 首先把product.json文件，放在webapp文件夹下

2 在manifast.json文件内model属性配置如下：

"models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "project1.i18n.i18n"
        }
      },
      "products": {
        "type": "sap.ui.model.json.JSONModel",
        "uri": "products.json"
      },

主要是为了引入products.json文件。

然后修改View1的xml和controller如下：

<mvc:View controllerName="project1.controller.View1"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.m">
    <Page id="page" title="{i18n>title}">
        <content>
        <List
		items="{products>/ProductCollection}"
		headerText="Products">
		<ObjectListItem
			title="{products>Name}"
			type="Active"
			press="onListItemPress"
			number="{
				parts:[{path:'products>Price'},{path:'products>CurrencyCode'}],
				type: 'sap.ui.model.type.Currency',
				formatOptions: {showMeasure: false}
			}"
			numberUnit="{products>CurrencyCode}">
			<firstStatus>
				<ObjectStatus
					text="{products>Status}"
					state="{
						path: 'products>Status',
						formatter: 'project1.controller.Formatter.status'
					}" />
			</firstStatus>
			<ObjectAttribute text="{products>WeightMeasure} {products>WeightUnit}" />
			<ObjectAttribute text="{products>Width} x {products>Depth} x {products>Height} {products>DimUnit}" />
		</ObjectListItem>
	</List>
        </content>
    </Page>
</mvc:View>

主要的区别是所有的属性前面都加入了 products>。

View1.controller.js修改后：

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    'sap/m/MessageToast',
    './Formatter',
    'sap/ui/model/json/JSONModel'
],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller, MessageToast, Formatter, JSONModel) {
        "use strict";

        return Controller.extend("project1.controller.View1", {
            onInit: function () {
            },

            onListItemPress: function (oEvent) {
                MessageToast.show("Pressed : " + oEvent.getSource().getTitle());
            }
        });
    });

 新建详情页面

首先要知道一个前提，Fiori使用了经典的MVC分层理论，即外面前面见过的view.xml视图层，controller.js业务逻辑层，和刚才我们配置的model层：products.json。

相当于把原来一个页面的业务进行了解耦分层，从结构层面来说，功能划分比较清晰。

所以新建页面我们也需要分别新建一整套MVC结构，由于这是一个可以直接用于生产的Demo项目，还要在manifest.json文件配置路由信息。

新建View

在view文件夹下新建文件View1Detail.view.xml：

<mvc:View
	xmlns="sap.m"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:f="sap.ui.layout.form"
	controllerName="project1.controller.View1Detail"
	height="100%">

		<f:Form editable="true" class="sapUiSmallMargin" title="Product Detail">
                <f:layout>
                    <f:ResponsiveGridLayout labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12"
                        adjustLabelSpan="false" emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0"
                        columnsXL="1" columnsL="1" columnsM="1" singleContainerFullSize="false" />
                </f:layout>

                <f:formContainers>
                    <f:FormContainer>
                        <f:formElements>
                            <f:FormElement  label="ProductId" >
                                <f:fields>
                                   <Input  value="{/ProductId}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="Category" >
                                <f:fields>
                                   <Input  value="{/Category}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="MainCategory" >
                                <f:fields>
                                   <Input  value="{/MainCategory}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="TaxTarifCode" >
                                <f:fields>
                                   <Input  value="{/TaxTarifCode}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="SupplierName" >
                                <f:fields>
                                   <Input  value="{/SupplierName}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="WeightMeasure" >
                                <f:fields>
                                   <Input  value="{/WeightMeasure}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="WeightUnit" >
                                <f:fields>
                                   <Input  value="{/WeightUnit}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="Description" >
                                <f:fields>
                                   <Input  value="{/Description}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="Name" >
                                <f:fields>
                                   <Input  value="{/Name}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="DateOfSale" >
                                <f:fields>
                                   <Input  value="{/DateOfSale}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="ProductPicUrl" >
                                <f:fields>
                                   <Input  value="{/ProductPicUrl}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="Status" >
                                <f:fields>
                                   <Input  value="{/Status}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="Quantity" >
                                <f:fields>
                                   <Input  value="{/Quantity}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="UoM" >
                                <f:fields>
                                   <Input  value="{/UoM}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="CurrencyCode" >
                                <f:fields>
                                   <Input  value="{/CurrencyCode}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="Price" >
                                <f:fields>
                                   <Input  value="{/Price}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="Width" >
                                <f:fields>
                                   <Input  value="{/Width}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="Depth" >
                                <f:fields>
                                   <Input  value="{/Depth}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="Height" >
                                <f:fields>
                                   <Input  value="{/Height}" />
                                </f:fields>
                            </f:FormElement>
							<f:FormElement  label="DimUnit" >
                                <f:fields>
                                   <Input  value="{/DimUnit}" />
                                </f:fields>
                            </f:FormElement>
                        </f:formElements>
                    </f:FormContainer>
                </f:formContainers>
            </f:Form>
    

</mvc:View>

新建Controller

controller文件夹下新建js文件View1Detail.controller.js：

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    'sap/m/MessageToast',
    './Formatter',
    'sap/ui/model/json/JSONModel'
],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller, MessageToast, Formatter, JSONModel) {
        "use strict";

        return Controller.extend("project1.controller.View1Detail", {
            onInit: function () {
                var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                this.oRouter = oRouter;
oRouter.getRoute("View1Detail").attachPatternMatched(this._onObjectMatched, this);

            },

            _onObjectMatched: async function (oEvent) {
                // set explored app's demo model on this sample
                let parameter = oEvent.getParameter("arguments")
                var paramJson = decodeURIComponent(parameter["parameters"]);
                const param = JSON.parse(paramJson)
                this.getView().setModel(new JSONModel(param.data));
            },

        });
    });

注意这里需要注意的是 _onObjectMatched这个回调方法，在生产业务必须加上，否则会出现缓存问题，也就是点击清单第一条，进入了第一条数据详情，如果返回上一级页面，再点击第二条数据，进去看到的还是清单第一条的详情，会造成缓存问题。

新建Model

这里的model其实来源于清单页面点击后触发的函数来赋值的，具体代码如下：

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    'sap/m/MessageToast',
    './Formatter',
    'sap/ui/model/json/JSONModel'
],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller, MessageToast, Formatter, JSONModel) {
        "use strict";

        return Controller.extend("project1.controller.View1", {
            onInit: function () {
                var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                this.oRouter = oRouter;
            },

            onListItemPress: function (oEvent) {
                MessageToast.show("Pressed : " + oEvent.getSource().getTitle());
                let id = oEvent.oSource.oBindingContexts.products.sPath
                let dataIndex = id.substr(id.lastIndexOf("/") + 1);
                const products = this.getView().getModel("products");
                const productCollection = products.getProperty("/ProductCollection");
                const jsonParam = JSON.stringify({ data: productCollection[dataIndex] });
                this.oRouter.navTo("View1Detail", { parameters: encodeURIComponent(jsonParam) })
            }
        });
    });

可以看到，model数据来源于onListItemPress函数，通过获取当前页面的products模型的数据，再根据点击的行索引找到对应的详情数据，一encodeURI的形式，通过http参数的形式传递到下一个页面。 

新建路由

修改manifest.json文件routing属性：

"routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "async": true,
        "viewPath": "project1.view",
        "controlAggregation": "pages",
        "controlId": "app",
        "clearControlAggregation": false
      },
      "routes": [
        {
          "name": "RouteView1",
          "pattern": ":?query:",
          "target": [
            "TargetView1"
          ]
        },
        {
          "name": "View1Detail",
          "pattern": "View1Detail:parameters:",
          "target": "View1Detail"
        }
      ],
      "targets": {
        "TargetView1": {
          "viewType": "XML",
          "transition": "slide",
          "clearControlAggregation": false,
          "viewId": "View1",
          "viewName": "View1"
        },
        "View1Detail": {
          "viewType": "XML",
          "transition": "slide",
          "clearControlAggregation": false,
          "viewId": "View1Detail",
          "viewName": "View1Detail"
        }
      }
    },

详情页面预览

通过点击清单页面后，可显示产品详情：

点击选中行：

显示详情页面 

 结论

从零到一，新建了一个业务页面，有助于快速开放Fiori业务代码。

免费附件

products.json内容如下，无需使用vip下载：

{
    "ProductCollection": [
        {
            "ProductId": "HT-1000",
            "Category": "Laptops",
            "MainCategory": "Computer Systems",
            "TaxTarifCode": "1",
            "SupplierName": "Very Best Screens",
            "WeightMeasure": 4.2,
            "WeightUnit": "KG",
            "Description": "Notebook Basic 15 with 2,80 GHz quad core, 15\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro",
            "Name": "Notebook Basic 15",
            "DateOfSale": "2017-03-26",
            "ProductPicUrl": "https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1000.jpg",
            "Status": "Available",
            "Quantity": 10,
            "UoM": "PC",
            "CurrencyCode": "EUR",
            "Price": 956,
            "Width": 30,
            "Depth": 18,
            "Height": 3,
            "DimUnit": "cm"
        },
        {
            "ProductId": "HT-1001",
            "Category": "Laptops",
            "MainCategory": "Computer Systems",
            "TaxTarifCode": "1",
            "SupplierName": "Very Best Screens",
            "WeightMeasure": 4.5,
            "WeightUnit": "KG",
            "Description": "Notebook Basic 17 with 2,80 GHz quad core, 17\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro",
            "Name": "Notebook Basic 17",
            "DateOfSale": "2017-04-17",
            "ProductPicUrl": "https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1001.jpg",
            "Status": "Available",
            "Quantity": 20,
            "UoM": "PC",
            "CurrencyCode": "EUR",
            "Price": 1249,
            "Width": 29,
            "Depth": 17,
            "Height": 3.1,
            "DimUnit": "cm"
        },
        {
            "ProductId": "HT-1002",
            "Category": "Laptops",
            "MainCategory": "Computer Systems",
            "TaxTarifCode": "1",
            "SupplierName": "Very Best Screens",
            "WeightMeasure": 4.2,
            "WeightUnit": "KG",
            "Description": "Notebook Basic 18 with 2,80 GHz quad core, 18\" LCD, 8 GB DDR3 RAM, 1000 GB Hard Disc, Windows 8 Pro",
            "Name": "Notebook Basic 18",
            "DateOfSale": "2017-01-07",
            "ProductPicUrl": "https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1002.jpg",
            "Status": "Available",
            "Quantity": 10,
            "UoM": "PC",
            "CurrencyCode": "EUR",
            "Price": 1570,
            "Width": 28,
            "Depth": 19,
            "Height": 2.5,
            "DimUnit": "cm"
        },
        {
            "ProductId": "HT-1003",
            "Category": "Laptops",
            "MainCategory": "Computer Systems",
            "TaxTarifCode": "1",
            "SupplierName": "Smartcards",
            "WeightMeasure": 4.2,
            "WeightUnit": "KG",
            "Description": "Notebook Basic 19 with 2,80 GHz quad core, 19\" LCD, 8 GB DDR3 RAM, 1000 GB Hard Disc, Windows 8 Pro",
            "Name": "Notebook Basic 19",
            "DateOfSale": "2017-04-09",
            "ProductPicUrl": "https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1003.jpg",
            "Status": "Available",
            "Quantity": 15,
            "UoM": "PC",
            "CurrencyCode": "EUR",
            "Price": 1650,
            "Width": 32,
            "Depth": 21,
            "Height": 4,
            "DimUnit": "cm"
        },
        {
            "ProductId": "HT-1007",
            "Category": "Accessories",
            "MainCategory": "Computer Components",
            "TaxTarifCode": "1",
            "SupplierName": "Technocom",
            "WeightMeasure": 0.2,
            "WeightUnit": "KG",
            "Description": "Digital Organizer with State-of-the-Art Storage Encryption",
            "Name": "ITelO Vault",
            "DateOfSale": "2017-05-17",
            "ProductPicUrl": "https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1007.jpg",
            "Status": "Available",
            "Quantity": 15,
            "UoM": "PC",
            "CurrencyCode": "EUR",
            "Price": 299,
            "Width": 32,
            "Depth": 22,
            "Height": 3,
            "DimUnit": "cm"
        },
        {
            "ProductId": "HT-1258",
            "Category": "Smartphones and Tablets",
            "MainCategory": "Smartphones & Tablets",
            "TaxTarifCode": "1",
            "SupplierName": "Ultrasonic United",
            "WeightMeasure": 2.5,
            "WeightUnit": "KG",
            "Description": "8-inch Multitouch HD Screen (2000 x 1500) 32GB Internal Memory, Wireless N Wi-Fi, Bluetooth, GPS Enabled, 1.5 GHz Quad-Core Processor",
            "Name": "Cepat Tablet 8",
            "ProductPicUrl": "https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1258.jpg",
            "Status": "Available",
            "Quantity": 24,
            "UoM": "PC",
            "CurrencyCode": "EUR",
            "Price": 529,
            "Width": 38,
            "Depth": 21,
            "Height": 3.5,
            "DimUnit": "cm"
        }
    ],
    "ProductCollectionStats": {
        "Counts": {
            "Total": 123,
            "Weight": {
                "Ok": 53,
                "Heavy": 51,
                "Overweight": 19
            }
        },
        "Groups": {
            "Category": {
                "Accessories" : 34,
                "Desktop Computers" : 7,
                "Flat Screens" : 2,
                "Keyboards" : 4,
                "Laptops" : 11,
                "Printers" : 9,
                "Smartphones and Tablets" : 9,
                "Mice" : 7,
                "Computer System Accessories" : 8,
                "Graphics Card" : 4,
                "Scanners" : 4,
                "Speakers" : 3,
                "Software" : 8,
                "Telekommunikation" : 3,
                "Servers" : 3,
                "Flat Screen TVs" : 3
            },
            "SupplierName": {
                "Titanium": 21,
                "Technocom": 22,
                "Red Point Stores": 7,
                "Very Best Screens": 14,
                "Smartcards": 2,
                "Alpha Printers": 5,
                "Printer for All": 8,
                "Oxynum": 8,
                "Fasttech": 15,
                "Ultrasonic United": 15,
                "Speaker Experts": 3,
                "Brainsoft": 3
            }
        },
        "Filters": [
            {
                "type": "Category",
                "values": [
                    {
                        "text": "Accessories",
                        "data": 34
                    },
                    {
                        "text": "Desktop Computers",
                        "data": 7
                    },
                    {
                        "text": "Flat Screens",
                        "data": 2
                    },
                    {
                        "text": "Keyboards",
                        "data": 4
                    },
                    {
                        "text": "Laptops",
                        "data": 11
                    },
                    {
                        "text": "Printers",
                        "data": 9
                    },
                    {
                        "text": "Smartphones and Tablets",
                        "data": 9
                    },
                    {
                        "text": "Mice",
                        "data": 7
                    },
                    {
                        "text": "Computer System Accessories",
                        "data": 8
                    },
                    {
                        "text": "Graphics Card",
                        "data": 4
                    },
                    {
                        "text": "Scanners",
                        "data": 4
                    },
                    {
                        "text": "Speakers",
                        "data": 3
                    },
                    {
                        "text": "Software",
                        "data": 8
                    },
                    {
                        "text": "Telekommunikation",
                        "data": 3
                    },
                    {
                        "text": "Servers",
                        "data": 3
                    },
                    {
                      "text": "Flat Screen TVs",
                      "data": 3
                    }
                ]
            },
            {
                "type": "SupplierName",
                "values": [
                    {
                    "text": "Titanium",
                    "data": 21
                  },
                  {
                    "text": "Technocom",
                    "data": 22
                  },
                  {
                    "text": "Red Point Stores",
                    "data": 7
                  },
                  {
                    "text": "Very Best Screens",
                    "data": 14
                  },
                  {
                    "text": "Smartcards",
                    "data": 2
                  },
                  {
                    "text": "Alpha Printers",
                    "data": 5
                  },
                  {
                    "text": "Printer for All",
                    "data": 8
                  },
                  {
                    "text": "Oxynum",
                    "data": 8
                  },
                  {
                    "text": "Fasttech",
                    "data": 15
                  },
                  {
                    "text": "Ultrasonic United",
                    "data": 15
                  },
                  {
                    "text": "Speaker Experts",
                    "data": 3
                  },
                  {
                    "text": "Brainsoft",
                    "data": 3
                  }
                ]
            }
        ]
    }
}
 

SAP Fiori Elements 扩展实战：UI 层扩展、OData 服务扩展、CDS 视图增强及全流程案例
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
05-03 246
UI 层扩展主要关注在不修改标准生成界面的基础上，自定义用户界面元素和交互逻辑。典型需求包括：在现有 Fiori Elements 界面上添加新的字段（如表格列或表单项）、增加自定义按钮并绑定操作、以及通过控制器扩展加入事件处理等。无论在 RAP 还是传统 BOPF 架构下，前端 UI 扩展通常采用 SAPUI5 提供的**扩展点（Extension Points）和控制器扩展（Controller Extension）**机制来安全地插入自定义代码。下面分别说明两种后端架构下 UI 扩展的实现方式。
Chrome net internals 在 SAP Fiori 性能调优中的妙用：深入解析、实战示例与最佳实践
最新发布
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
07-21 26
借助 Chrome NetLog，Fiori 开发者可以像外科手术般切开网络层，精准识别瓶颈。无论是慢启动、证书问题，还是批量请求降级，这份底层日志都能给出清晰答案。掌握它，等于为项目增加了一副 X‑ray 透视眼。愿这篇中文指南能帮你在下一个性能战役中事半功倍。文章引用资料：Chrome 官方NetLog捕获步骤(ChromiumNetLog文件结构说明(ChromiumSAP 社区对的推荐实践(Edge/Chrome 日志采集博客(text/plain。
SAP fiori 简易开发流程
11-20
SAP fiori的简易开发过程指南，从开发者角度出发，分后面ODATA开发环境和前端SAP UI5环境搭建，以及发布进行了讲解
SAP Fiori开发视频教程--由浅入深学习Fiori开发
06-09
SAP Fiori开发视频培训课程：SAP Fiori是SAP设计的对软件和应用的新用户体验。本课程将由浅入深，从后端到前端，从较早的Eclipse开发到现在流行的WebIDE开发，从SAPUI5到ABAP 再到CDS, 从简单的List APP到较为复杂的Fiori Element开发，系统性地讲述SAP Fiori的开发过程。学员学习本套课程后，能有如下收获1. 掌握Fiori核心功能Query以及CRUD前后端开发的基础2. 掌握CDS View的基本概念以及开发方式3. 掌握OData的开发以及测试4. 了解Fiori 开发中注解的概念，包含OData注解、CDS注解以及Local UI注解5. 掌握S4最常用报表List Report以及Overview Page的开发过程6. 掌握Fiori各类型磁贴的配置
【ABAP】从无到有 从接口到fiori的发布
Ramos丶
06-24 1019
2.在LPD_CUST配置启动版时，附加信息是唯一的，如果有其他前端应用的工程名与你一样，那么要改自己的工程名，否则无论URL配置的是否你的前端程序，优先度的是SAPUI5.Component=lgzFirstFiori的内容，这个也贼坑，老是断不到自己的前端工程，原来这儿必须不能跟别人重名。遇到一个坑的问题，在做fiori配置时，系统别名这个坑东西原来是有限制的，在权限里面做了限制，目前测试系统拥有的权限只有S4FIN的，我说为啥全部的fiori都是财务的，原来财务帐号多啊。再次感叹，SAP黄不了。
《SAP FIORI开发入门》课程上线
weixin_34038652的博客
07-13 447
经过将近三个月的不懈努力，终于上线了本人的第一个网络在线教育课程《SAP FIORI 开发入门》。这其中，包含了本人的大量的心血。课程从一个基础层面，系统的阐述了 SAP FIORI 应用开发的各种技巧。通过这个课程的学习，我可以很自信的说：不管你之前的基础如何，只要你认真学习了，做了相应的练习，直接加入正式的项目是没有任何问题的。本课程原价28元，但是从现在开始25天内购买...
SAP Fiori 2.0开发指南
12-10
描述SAP 最新产品特性，及开发事项。
SPA Fiori开发实战课程（一）
bigbearxyz的博客
07-19 1894
由于工作需要，对Fiori的开发有了一些具体实践，所以做一些记录和总结。
SAP FIORI专题之一：初次接触fiori，用sap hana studio开发发布UI5程序
热门推荐
stuforever的博客
07-07 1万+
fiori作为S4的最新开发工具，其强大毋庸置疑的。作为一个老开发，作为一个特别特别熟悉微服务和前后端开发的人来说（相对SAP业务来说的，相对开发自己就是小弟），我不去整整fiori开发的话，他瞄的同行都觉得不可思议。 本篇都是一些实践，当然是看的大神视频做的总结，肯定没原创。。这个所有代码以及内容，均是优快云大神胡诗君的视频，我是跟着一步步学习的。只要买了优快云超级会员都可以看。本篇只是笔记，如有侵权，及时告知（马上删除）。原视频非常精彩，浅而已懂，建议大家购买学习SAP Fiori开发视频教程–由浅
视频教程-SAP FIORI开发入门-其他
weixin_30977017的博客
05-28 857
SAP FIORI开发入门 SAP 从业将近15年，参与过各种 SAP 实施...
视频教程-SAP Fiori开发视频教程--由浅入深学习Fiori开发-其他
weixin_30267211的博客
05-28 1392
SAP Fiori开发视频教程--由浅入深学习Fiori开发 ABAP/Fi...
FioriDemo-FioriTools-Raz
03-08
FioriDemo-FioriTools-Raz
SAP 新一代用户界面体验Fiori
04-10
什么是SAP Fiori SAP UX策略 SAP Fiori设计指南(Design Guideline) SAP Fiori运行环境 SAPUI5与OpenUI5 OpenUI演示
SAP Fiori自适应设计实战：打造完美响应式应用的技巧
[SAP Fiori自适应设计实战：打造完美响应式应用的技巧](https://img-blog.csdnimg.cn/img_convert/7026acd9fc3ba72840d4ffb2605f40c7.jpeg) # 摘要 本文系统地介绍了SAP Fiori自适应设计的基础知识、基本原则以及在...
SAP CRM 服务工单 Fiori 应用增量：解锁 Edit 与 Save 的全流程实战
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
07-11 141
在基础版“查询-展示”Fiori 应用的成功搭建之后，不少团队希望继续为 CRM Service Order 场景添加编辑与保存能力。本文通过复刻官方示例，并结合实际项目经验，剖析如何仅修改少量 CDS 视图、手动创建 SEGW 项目、补充三段 ABAP 代码，即能让原本只读的工单列表摇身一变，支持在线修改 + 后端持久化。
1. SAP Fiori Elements 开发环境的搭建和开发准备工作
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
04-17 2517
本文介绍了本地使用 Visual Studio Code 进行 Fiori Elements 开发所需要安装的这个扩展包里6个能够提高 Fiori Elements 应用开发效率的扩展。在本教程后续步骤里我们会通过实际的例子介绍这些 Visual Studio Code 扩展的详细用法。
SAPFiori
weixin_30832983的博客
03-07 600
最新SAP Fiori常用事务代码持续更新中。。。谢谢支持 SLG1:アプリケーションログ出力 注意： 以 / 开头的事务码需要加/N或/O进入，否则进不去 SEGW:创建Gateway Service /UI2/FLP: 进入Launchpad /UI2/FLPD_CUST: 配置磁贴 /UI2/SEMOBJ: 维护语义对象 　/UI2/SEMO...
SAP Fiori 知识点大全的教程目录
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
07-16 1822
笔者的知识星球里,不少朋友向我提问的关于 `Fiori` 的问题,我在回答之余发现,这些朋友没有搞清楚 `Fiori`,`Fiori App` 和 `SAP UI5` 这些概念的区别和联系。 这个现象也不奇怪，因为就连我自己，在刚刚接触 `SAP Fiori` 不久时，也没能将这些易混淆的概念区分清楚，于是笔者在本教程的第一篇文章里，详细剖析了这些概念之间的区别和联系。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值