• 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
    } 
      
      
      
      
      
      
    
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88

    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

  • 相关阅读:
    阿里云计算型弹性裸金属服务器ebmc4云服务器配置性能详解
    回收站里面的东西删除了怎么恢复?
    Oracle数据库从入门到精通系列之二十一:Oracle 19c数据库增加重做日志大小
    云原生应用开发培训,开启云计算时代的新征程
    day2 ARM基础
    MySQL Workbench 8.0 CE 汉化包下载
    Python--配置文件优化
    vuejs开发环境搭建
    SpringBoot 3.0 来啦!
    驱动程序开发:LCD屏显示驱动
  • 原文地址:https://blog.csdn.net/stuforever/article/details/125873596