SAP FIORI专题之四：使用fiori element构建over page

1overview page有哪些

说白了，就是数据集调用smart bi，跟BW功能相似（不过BW也几乎没几个人玩了）。

1.1 表格

1.2 列表

1.3 卡片

1.4 图表

1.5 链接

2 建CDS VIEW

2.1 产生测试数据sepm_dg

2.2 建CDS VIEW

@AbapCatalog.sqlViewName: 'ZLGZOVP'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Overview Page Training'

@OData.publish: true

@UI.headerInfo: {
    typeNamePlural: 'Sales Orders',
    imageUrl: 'imageLink',
    typeName: 'Sales Order',
    title: { label: 'Order ID', value: 'sales_order_id' },
    description: { label: 'Customer', value: 'company_name' }
}

@UI.chart: [{
    qualifier: 'ordNetChart',
    title: 'Sales Orders',
    chartType: #SCATTER,
    dimensions: ['sales_order_id'],
    measures: ['net_amount', 'tax_amount'],
    dimensionAttributes: { dimension: 'sales_order_id', role: #CATEGORY },
    measureAttributes: [{measure: 'net_amount', role: #AXIS_1}, {measure: 'tax_amount', role: #AXIS_1}]
}]

@UI.presentationVariant: [{qualifier: 'top5Changed', maxItems: '5', sortOrder.by: 'changed_at', sortOrder.direction: #DESC }]

define view ZLGZ_OVP as select from sepm_cds_sales_order as so {
  key so.sales_order_key,
  @UI.selectionField: [{ position: 10 }]
  @Consumption.semanticObject: 'Action'
  @UI.identification: { type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: 'toappnavsample2', position: '10', label: 'Nav Sample' }
  @UI.lineItem: [
    { label: 'sales order', type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: 'toappnavsample', qualifier: 'tableCard'},
    { position: '10', label: 'Sales Order', qualifier: 'tableCard' }
  ]
  so.sales_order_id,
  so.created_by,
  so.created_at,
  so.changed_by,
  so.changed_at,
  so.note_guid,
  so.currency_code,
  so.gross_amount,
  @UI.dataPoint: {
    title: 'Net Amount',
    criticalityCalculation: { 
        improvementDirection: #TARGET,
        deviationRangeLowValue: 1000,
        toleranceRangeLowValue: 1500,
        toleranceRangeHighValue: 7000,
        deviationRangeHighValue: 15000
    }
  }
  @UI.lineItem: { position: '30', label: 'Net Value', qualifier: 'tableCard', type: #AS_DATAPOINT }
  so.net_amount,
  so.tax_amount,
 @UI.dataPoint:{title: 'Order Target Value', criticalityCalculation: {
   improvementDirection: #MAXIMIZE,
   toleranceRangeLowValue: 8000,
   deviationRangeLowValue: 9000} 
 }
  1000.00 as myTarget,
  so.lifecycle_status,
  so.billing_status,
  so.delivery_status,
  so.buyer_guid,
  so.customer,
  so.items,
  @UI.selectionField: [ { position: 20 } ]
  @UI.lineItem: { position: '20', label: 'Customer', qualifier: 'tableCard' }
  so.customer.company_name,
  '/resources/sap/ui/core/mimes/logo/sap_50x26.png' as imageLink,
  @UI.identification: { type: #WITH_URL, label: 'Customer Site', url: 'web_address', position: '20' }
  so.customer.web_address,
  @UI.fieldGroup: { groupLabel: 'Contact Details', label: 'Email', position: '10', qualifier: 'cusContact' }
  so.customer.email_address,
  @UI.fieldGroup: { groupLabel: 'Contact Details', label: 'Phone Number', position: '20', qualifier: 'cusContact' }
  so.customer.phone_number
} 
  
  
  
  
  
  

2.3 维护服务，由于CDS已经publish，后端自动发布服务

添加服务即可

数据集是有3个的，把子CDS VIEW的也都定义为数据集了。

3 使用webide创建OVP

4 card模拟

4.1 新建table card

这儿annotationPath填写：com.sap.vocabularies.UI.v1.LineItem#tableCard

其中tableCard是在CDS VIEW定义的lable

运行效果如下：

4.2 新建list card

4.3 新建stack card

2.新建一个annotation1.xml

3.运行效果

4.4 chart card

重新调整内容：

关于CDS VIEW的UI Annotations，可以参见SAP官方网页：

https://help.sap.com/doc/saphelp_nw751abap/7.51.0/en-US/f8/af07bb0770414bb38a25cae29a12e9/content.htm?no_cache=true