企业官网建设流程全解析

1. SAP Fiori Launchpad 个性化改造实战指南

作为企业级应用的前端门户，SAP Fiori Launchpad 的标准化界面常常无法满足不同岗位员工的个性化需求。经过三个月的企业级项目实践，我总结出一套完整的Launchpad改造方法论，能够将标准Fiori应用转化为真正贴合用户工作习惯的智能工作台。

关键提示：所有个性化配置均基于SAP官方支持的扩展方式，无需修改底层代码即可实现90%的常见定制需求。

1.1 为什么需要个性化工作台

在制造业客户现场调研时发现，采购专员每天需要在15个标准App间频繁切换，而实际工作流只涉及其中5个核心功能。通过个性化配置，我们将其工作台改造为：

• 首页聚焦采购订单审批看板
• 左侧导航按"供应商管理->合同管理->订单跟踪"重组
• 高频操作添加快捷入口

改造后用户操作路径缩短62%，这是标准Launchpad无法达到的效果。

2. App个性化配置全流程

2.1 应用磁贴深度定制

通过修改manifest.json的sap.app区域参数，可实现：

"sap.app": { "title": "采购订单监控", "subTitle": "待审批: {/pendingCount}", "icon": "sap-icon://approvals" }

实测有效参数包括：

避坑指南：动态标题需绑定OData模型的$count属性时，务必在annotations.xml中明确定义：

<Annotation Term="UI.Identification"> <Record Type="UI.DataField"> <PropertyValue Property="Value" Path="/PurchaseOrders/$count"/> </Record> </Annotation>

2.2 视图布局优化方案

针对多步骤业务流程，推荐采用"主从视图+工作区"的混合布局：

1. 主视图：左侧保留标准树形导航
2. 工作区：中部嵌入Web Dynpro组件
3. 工具面板：右侧固定常用操作按钮

通过扩展Component.js实现动态布局切换：

sap.ui.define([ "sap/ui/core/UIComponent", "sap/f/FlexibleColumnLayout" ], function(UIComponent, FlexibleColumnLayout) { return UIComponent.extend("com.demo.Component", { createContent: function() { this._flexLayout = new FlexibleColumnLayout({ layout: "TwoColumnsMidExpanded" }); return this._flexLayout; } }); });

3. 链接清单高级用法

3.1 跨系统深度链接配置

在跨S/4HANA和SuccessFactors的场景中，使用Intent Navigation实现无缝跳转：

#Action-sfobject=Employee&sfid=1001

关键参数说明：

• #Action：触发目标应用的标准动作
• sfobject：SuccessFactors对象类型
• sfid：目标记录ID

3.2 动态参数传递技巧

在采购审批场景中，需要将当前订单号传递给下游应用：

var oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation"); oCrossAppNavigator.toExternal({ target: { semanticObject: "PurchaseOrder", action: "Approve" }, params: { "POId": currentOrderId, "approver": userContext.getId() } });

4. 企业级部署注意事项

4.1 权限管控策略

采用三层权限控制模型：

1. PFCG角色：控制应用可见性
2. Fiori Catalog：管理磁贴分组
3. UI5逻辑：前端操作权限校验

推荐在Component.js中实现细粒度控制：

getContentDensityClass: function() { if (!this._sContentDensityClass) { var oUserModel = this.getModel("user"); var bCompact = oUserModel.getProperty("/compactMode"); this._sContentDensityClass = bCompact ? "sapUiSizeCompact" : "sapUiSizeCozy"; } return this._sContentDensityClass; }

4.2 性能优化实测数据

对50个自定义磁贴的Launchpad进行优化前后对比：

具体实施步骤：

1. 在neo-app.json中配置资源缓存策略
2. 使用sap.ui.require动态加载非核心模块
3. 通过$expand替代多次单实体查询

5. 典型问题解决方案

5.1 动态磁贴数据不更新

根本原因：OData模型的自动刷新未触发磁贴重绘

解决方案：

oModel.setRefreshAfterChange(true); oModel.setDefaultRefreshMode(sap.ui.model.odata.v2.ODataModel.RefreshMode.Both);

5.2 跨应用跳转参数丢失

排查步骤：

1. 检查目标应用的manifest.json是否声明接收参数
2. 验证Intent名称是否与目标应用注册一致
3. 使用sap.ushell.services.CrossApplicationNavigation.getHref()调试生成的URL

6. 扩展开发建议

对于需要深度定制的场景，推荐采用以下扩展方式：

1. UI5扩展点：通过ExtensionPoint注入自定义内容
2. Fiori Elements扩展：使用ControllerExtension增强标准行为
3. 自定义CSS：通过.sapUshellShell选择器覆盖默认样式

在最近的项目中，我们通过组合使用这些技术实现了：

• 在标准采购订单App中嵌入供应商风险评估组件
• 为审批流添加电子签名板功能
• 改造标准列表页为甘特图视图

实现示例：

sap.ui.define([ "sap/ui/core/mvc/ControllerExtension", "sap/m/MessageToast" ], function(ControllerExtension, MessageToast) { return ControllerExtension.extend("com.demo.ext.PurchaseOrder", { override: { onBeforeRendering: function() { this.getView().byId("supplierInfo").bindElement({ path: "/Suppliers/123", model: "risk" }); } } }); });