SAP Fiori 集成与API：打通企业系统的技术实践

1.SAP Fiori 集成与API：打通企业系统的技术实践

SAP Fiori 作为现代化的用户体验设计语言和开发框架，其核心价值在于与后端系统的高效集成及灵活的API调用能力。本文将从与SAP S/4HANA的深度集成、第三方系统对接、API Business Hub的使用到OData服务开发，结合代码示例展开解析。

1.1.一、与 SAP S/4HANA 的深度集成

1.1.1.1.1 CDS视图与OData服务发布

SAP Fiori 通过CDS（Core Data Services）视图直接暴露S/4HANA业务数据，并通过OData协议提供服务。

示例：创建CDS视图并发布OData服务

// 定义CDS视图：ZCDS_SalesOrder
@AbapCatalog.sqlViewName: 'ZCDSSALESORDER'
@OData.publish: true
define view ZCDS_SalesOrder 
  as select from vbak 
{
  key vbak.vbeln as SalesOrder,
  vbak.erdat    as CreateDate,
  vbak.ernam    as CreatedBy,
  vbak.netwr    as NetAmount
}

// 定义CDS视图：ZCDS_SalesOrder

@AbapCatalog.sqlViewName: 'ZCDSSALESORDER'

@OData.publish: true

define view ZCDS_SalesOrder

as select from vbak

{

key vbak.vbeln as SalesOrder,

vbak.erdat as CreateDate,

vbak.ernam as CreatedBy,

vbak.netwr as NetAmount

}

通过事务码 SEGW 创建Gateway项目，将CDS视图导入并生成OData服务。前端通过以下方式调用：

javascript

// Fiori Controller中调用
onInit: function() {
  const oModel = new sap.ui.model.odata.v4.ODataModel({
    serviceUrl: "/sap/opu/odata4/sap/z_sales_order_srv/default/sap/zcds_sales_order/0001/"
  });
  this.getView().setModel(oModel);
}

// Fiori Controller中调用

onInit: function() {

const oModel = new sap.ui.model.odata.v4.ODataModel({

serviceUrl: "/sap/opu/odata4/sap/z_sales_order_srv/default/sap/zcds_sales_order/0001/"

});

this.getView().setModel(oModel);

}

1.1.2.1.2 使用注解增强元数据

通过注解实现UI语义化：

@UI: {
  headerInfo: { typeName: 'SalesOrder', typeNamePlural: 'SalesOrders' },
  identification: [ { position: 10, label: 'Order Number' } ]
}

@UI: {

headerInfo: { typeName: 'SalesOrder', typeNamePlural: 'SalesOrders' },

identification: [ { position: 10, label: 'Order Number' } ]

}

1.2.二、与第三方系统的集成

1.2.1.2.1 REST API调用（使用Axios）

// Controller中调用天气API
fetchWeather: function() {
  axios.get("/destinations/WeatherService/api/current?city=Berlin")
    .then(response => {
      const temp = response.data.temperature;
      sap.m.MessageToast.show(`Berlin温度: ${temp}°C`);
    })
    .catch(error => console.error("API调用失败", error));
}

// Controller中调用天气API

fetchWeather: function() {

axios.get("/destinations/WeatherService/api/current?city=Berlin")

.then(response => {

const temp = response.data.temperature;

sap.m.MessageToast.show(`Berlin温度: ${temp}°C`);

})

.catch(error => console.error("API调用失败", error));

}

1.2.2.2.2 SAP Cloud Connector配置

在neo-app.json中配置反向代理：

{
  "routes": [{
    "path": "/destinations/WeatherService",
    "target": {
      "type": "destination",
      "name": "EXTERNAL_WEATHER_API"
    }
  }]
}

{

"routes": [{

"path": "/destinations/WeatherService",

"target": {

"type": "destination",

"name": "EXTERNAL_WEATHER_API"

}

}]

}

1.3.三、使用 SAP API Business Hub

1.3.1.3.1 发现与测试API

访问 API Business Hub 搜索API，如Business Partner (A2X)。

1.3.2.3.2 集成到Fiori应用

xml

&lt;!-- manifest.json 配置 --&gt;
"dataSources": {
  "businessPartner": {
    "uri": "/sap/opu/odata/sap/API_BUSINESS_PARTNER",
    "type": "OData",
    "settings": { "odataVersion": "4.0" }
  }
}

"dataSources": {

"businessPartner": {

"uri": "/sap/opu/odata/sap/API_BUSINESS_PARTNER",

"type": "OData",

"settings": { "odataVersion": "4.0" }

}

运行 HTML

// 读取业务伙伴数据
const bpModel = new sap.ui.model.odata.v4.ODataModel({
  serviceUrl: sap.ui.require.toUrl("sap/opu/odata/sap/API_BUSINESS_PARTNER")
});

const list = this.byId("bpList");
list.bindItems({
  path: "/BusinessPartner",
  template: new sap.m.ObjectListItem({
    title: "{BusinessPartnerFullName}"
  })
});

// 读取业务伙伴数据

const bpModel = new sap.ui.model.odata.v4.ODataModel({

serviceUrl: sap.ui.require.toUrl("sap/opu/odata/sap/API_BUSINESS_PARTNER")

});

const list = this.byId("bpList");

list.bindItems({

path: "/BusinessPartner",

template: new sap.m.ObjectListItem({

title: "{BusinessPartnerFullName}"

})

});

1.4.四、OData 服务开发与使用

1.4.1.4.1 开发自定义OData服务（ABAP）

在SEGW中定义实体：

<!-- Entities.xml -->
<EntityType Name="Product">
  <Key><PropertyRef Name="ProductID"/></Key>
  <Property Name="ProductID" Type="Edm.String"/>
  <Property Name="Price" Type="Edm.Decimal"/>
</EntityType>

<EntityContainer Name="CatalogService">
  <EntitySet Name="Products" EntityType="ZPRODUCT"/>
</EntityContainer>

</EntityType>

</EntityContainer>

运行 HTML

1.4.2.4.2 前端消费OData服务

// 列表绑定
new sap.m.List({
  items: {
    path: "/Products",
    template: new sap.m.StandardListItem({
      title: "{ProductID}",
      description: "{Price} EUR"
    })
  }
}).bindItems("/Products");

// 列表绑定

new sap.m.List({

items: {

path: "/Products",

template: new sap.m.StandardListItem({

title: "{ProductID}",

description: "{Price} EUR"

})

}

}).bindItems("/Products");

1.5.五、最佳实践与注意事项

性能优化：使用$expand和$select控制数据量
安全性：通过XSJS实现CSRF Token验证
错误处理：统一封装API调用异常

javascript

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 403) {
      sap.m.MessageBox.error("无权限访问该API");
    }
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(

response => response,

error => {

if (error.response.status === 403) {

sap.m.MessageBox.error("无权限访问该API");

}

return Promise.reject(error);

}

);

通过以上技术手段，开发者可构建出既满足SAP标准集成需求，又能灵活对接异构系统的现代化Fiori应用。建议结合SAP BTP平台实现混合云场景下的复杂集成。

第7课-SAP Fiori 集成与API