Fiori Elements 的APP开发时,大部份功能可以在后端ODATA,或者是CDS中使用UI注释来标注生成对应的功能(参看),也可以在前端SAP WEB IDE中进行加入代码(参数)进行设置,以下以主要记录一些常用功能的设置
1.多选功能
默认在BOPF对应的消费CDS生成ODATA后,并生成的List Report的APP时,生成的主页中的项目是单选的,如需要进行多项选择时,需要对manifest.json文件进行修改,增加settings节点,并设置”multiSelect”: true,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
"sap.ui.generic.app": { "_version": "1.3.0", "pages": { "ListReport|ZPAYMENT_C_HEAD": { "entitySet": "ZPAYMENT_C_HEAD", "component": { "name": "sap.suite.ui.generic.template.ListReport", "list": true, "settings": { "type": "GridTable", "multiSelect": true, "selectAll": false, "selectionLimit": 5 } }, "pages": { "ObjectPage|ZPAYMENT_C_HEAD": { "entitySet": "ZPAYMENT_C_HEAD", "component": { |
2.用颜色标记行状态
在显示列表时,我们会希望每一行中数据的值来显示不同的颜色,以做记录,这时可对annotations.xml文件进行修改,在UI.LineItem下增加UI.Criticality来标记,其Path的值使用当前列表(或者关联association表)的字段,比如下面例子的就是关联表to_ZFST的zfstatus字段的值,其值对应如下。
也可以在CDS中使用注释:@UI.lineItem: [{criticality: ‘ZTSC’}] //行颜色标记
进行颜色标记。
‘0’ // – None (no color)
‘1’ // – Error (red)
‘2’ // – Warning (yellow)
‘3’// – Success (green)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<Schema xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="pay.ment.sappayment.ZPAYMENT_C_HEAD_CDS"> <!--=============================================================================== Entity Type from chosen collection ================================================================================--> <Annotations Target="ZPAYMENT_C_HEAD_CDS.ZPAYMENT_C_HEADType"> <Annotation Term="UI.LineItem"> <Annotation Term="UI.Criticality" Path="to_ZFST/zfstatus"/> <Collection> <Record Type="UI.DataFieldForAction"> <PropertyValue Property="Label" String="审批"/> <PropertyValue Property="Action" String="ZPAYMENT_C_HEAD_CDS.ZPAYMENT_C_HEAD_CDS_Entities/ZPAYMENT_C_HEADSet_approve"/> <PropertyValue Property="InvocationGrouping" EnumMember="UI.OperationGroupingType/Isolated"/> <PropertyValue Property="Determining" Bool="true"/> </Record> <Record Type="UI.DataField"> <PropertyValue Property="Label" String="支付单"/> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@AbapCatalog.sqlViewName: 'ZPAYMENT_C_ZFSTV' @AbapCatalog.compiler.compareFilter: true @AbapCatalog.preserveKey: true @AccessControl.authorizationCheck: #CHECK @EndUserText.label: '支付单状态' @UI.lineItem: [{criticality: 'ZTSC'}] //行颜色标记 define view ZPAYMENT_C_ZFSTATUS as select from ztr**** as HEAD { key HEAD.docno, HEAD.zzfstatus, cast( case HEAD.zzfstatus when '13' then '0' // - None (no color) when '26' then '1' // - Error (red) when '24' then '2' // - Warning (yellow) when '25' then '3'// - Success (green) else ' ' end as CHAR1 ) as zfstatus //支付单支付状态 } |
3.把BOPF按钮功能显示到页脚
在 List Report 默认生成时,BOPF对应的按钮是显示在列头上的,比如图中的“删除”“增加”按钮,如需要把BOPF的功能按钮显示在页脚,可以对annotations.xml文件进 修改,在对应的功能按钮上增加Determining属性,设置为TRUE.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<Schema xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="pay.ment.sappayment.ZPAYMENT_C_HEAD_CDS"> <!--=============================================================================== Entity Type from chosen collection ================================================================================--> <Annotations Target="ZPAYMENT_C_HEAD_CDS.ZPAYMENT_C_HEADType"> <Annotation Term="UI.LineItem"> <Annotation Term="UI.Criticality" Path="to_ZFST/zfstatus"/> <Collection> <Record Type="UI.DataFieldForAction"> <PropertyValue Property="Label" String="审批"/> <PropertyValue Property="Action" String="ZPAYMENT_C_HEAD_CDS.ZPAYMENT_C_HEAD_CDS_Entities/ZPAYMENT_C_HEADSet_approve"/> <PropertyValue Property="InvocationGrouping" EnumMember="UI.OperationGroupingType/Isolated"/> <PropertyValue Property="Determining" Bool="true"/> </Record> <Record Type="UI.DataField"> <PropertyValue Property="Label" String="支付单"/> |
在manifest.json,增加的按钮,可以放到页眉,页脚,如下“扩展功能”按钮。
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 |
"sap.ui5": { "resources": { "js": [], "css": [] }, "dependencies": { "minUI5Version": "1.32.1", "libs": { "sap.ui.core": {}, "sap.m": {}, "sap.ui.comp": {}, "sap.uxap": {}, "sap.suite.ui.generic.template": {}, "sap.ui.layout": {}, "sap.ushell": {}, "sap.collaboration": {} }, "components": {} }, "models": { "i18n": { "type": "sap.ui.model.resource.ResourceModel", "uri": "i18n/i18n.properties" }, "@i18n": { "type": "sap.ui.model.resource.ResourceModel", "uri": "i18n/i18n.properties" }, "i18n|sap.suite.ui.generic.template.ListReport|ZTRD_C_ACC_APPLY": { "type": "sap.ui.model.resource.ResourceModel", "uri": "i18n/ListReport/ZTRD_C_ACC_APPLY/i18n.properties" }, "i18n|sap.suite.ui.generic.template.ObjectPage|ZTRD_C_ACC_APPLY": { "type": "sap.ui.model.resource.ResourceModel", "uri": "i18n/ObjectPage/ZTRD_C_ACC_APPLY/i18n.properties" }, "": { "dataSource": "mainService", "settings": { "defaultBindingMode": "TwoWay", "defaultCountMode": "Inline", "refreshAfterChange": false } } }, "extends": { "extensions": { "sap.ui.controllerExtensions": { "sap.suite.ui.generic.template.ListReport.view.ListReport": { "controllerName": "ZACCOUT_APP.ext.controller.ListReportExtension", "sap.ui.generic.app": { "ZTRD_C_ACC_APPLY": { "EntitySet": "ZTRD_C_ACC_APPLY", "Actions": { "CreateExt": { "id": "Ext1", "text": "扩展功能", "press": "onCustomAction1", "logicalAction": "Create", "requiresSelection": false, "global": true, "global:true 在HEAD显示 ": true, "determining:true 在FOOT显示 ": true } } } } } } } }, |
4.把 List Report 显示为主从结构
在 List Report 默认生成后,点击主页,显示的明细页是完全为新页,这时是看不到主页数据的,可以对manifest.json文件进行修改 ,用于显示了主表结构,主页,与明细页显示为左右结构,这样就主页与明细页的数据都同时能见。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
"sap.ui.generic.app": { "_version": "1.3.0", "settings": { "flexibleColumnLayout": { "defaultTwoColumnLayoutType": "TwoColumnsMidExpanded", "defaultThreeColumnLayoutType": "ThreeColumnsEndExpanded" } }, "pages": { "ListReport|ZPAYMENT_C_HEAD": { "entitySet": "ZPAYMENT_C_HEAD", "component": { "name": "sap.suite.ui.generic.template.ListReport", "list": true, "settings": { "type": "GridTable", "multiSelect": true, "selectAll": false, "selectionLimit": 5 } |