FIORI ELement list report 细节开发,设置过滤器,搜索帮助object page跳转等

本文介绍了如何在Fiori应用中实现默认过滤器的配置、初始化显示列、搜索帮助的F4下拉与日期筛选,自定义按钮的设计,以及Objectpage的菜单导航和行项目集成。通过详细的步骤和代码示例,助您快速掌握个性化Fiori界面技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

1、默认过滤器

2、初始化显示列

3、搜索帮助

3.1 F4搜索帮助

3.2 下拉列表

        3.3日期的搜索帮助

4、自定义按钮

5、Object page跳转

5.1  菜单导航 UI.FieldGroup,UI.ReferenceFacet

5.2  行项目UI.LineItem

5.2.1 新建EntitySet

5.2.2 添加Annotations

5.2.3 在manifest配置pages


1、默认过滤器

    在没有初始化过滤的时候每次进来都需要手动去调整过滤器,初始化后,每次都会把默认的过滤器显示出来,使用Annotation的UI.SelectionFields 属性    

<Annotation Term="UI.SelectionFields">
    <Collection>
	  <PropertyPath>Vbeln</PropertyPath>
	  <PropertyPath>ernam</PropertyPath>
	  <PropertyPath>Erdat</PropertyPath>
	</Collection>
</Annotation>

是否支持过滤,需要在Entity上去指定

2、初始化显示列

        列的初始化也是在annotation里面去设置,可以写代码,也可以用annotation Modeler,如果不去初始化列,进去直接执行的时候会报一个,没有显示列的错误。

 还是直接复制代码比较快一点,效果是一样的

	<Annotation Term="UI.LineItem">
		<Collection>
			<Record Type="UI.DataField">
				<PropertyValue Property="Value" Path="Vbeln"/>
			</Record>
			<Record Type="UI.DataField">
				<PropertyValue Property="Value" Path="Erdat"/>
			</Record>
			<Record Type="UI.DataField">
				<PropertyValue Property="Value" Path="Ernam"/>
			</Record>
			<Record Type="UI.DataField">
				<PropertyValue Property="Value" Path="Netwr"/>
			</Record>
			<Record Type="UI.DataField">
				<PropertyValue Property="Value" Path="Waerk"/>
			</Record>
			<Record Type="UI.DataField">
				<PropertyValue Property="Value" Path="Vtweg"/>
			</Record>
			<Record Type="UI.DataField">
				<PropertyValue Property="Value" Path="Vkorg"/>
			</Record>
		</Collection>
	</Annotation>

3、搜索帮助

3.1 F4搜索帮助

        搜索帮助需要分几步去做,首先需要导入一个F4搜索帮助的entity(tcode: segw),右击Data Model导入search help

   

导入搜索帮助后把搜索帮助的entityset 和对应字段绑定

<Annotations Target="ZSALESORDERSLISTS_SRV.SaleslLists/Vbeln"> <!--绑定到对应搜索帮助的字段-->
	<Annotation Term="com.sap.vocabularies.Common.v1.ValueList">
		<Record>
			<PropertyValue Property="Label" String="Sales Order Type"/>
              <!--绑定导入的搜索帮助-->
			<PropertyValue Property="CollectionPath" String="ZshvbelnSet"/> 
			<PropertyValue Property="SearchSupported" Bool="true"/>
			<PropertyValue Property="Parameters">
				<Collection> 
                     <!--相当于指定主键,搜索帮助的返回值-->
					<Record Type="com.sap.vocabularies.Common.v1.ValueListParameterOut">
						<PropertyValue Property="LocalDataProperty" PropertyPath="Vbeln"/>
						<PropertyValue Property="ValueListProperty" String="Vbeln"/>
					</Record>
                     <!--搜索帮助其它列,描述什么的在这里设置-->
					<!--<Record Type="com.sap.vocabularies.Common.v1.ValueListParameterDisplayOnly">-->
					<!--	<PropertyValue Property="ValueListProperty" String="Netwr"/>-->
					<!--</Record>-->
				</Collection>
			</PropertyValue>
		</Record>
	</Annotation>
</Annotations>

 实现效果如下:

3.2 下拉列表

      如果需要把搜索帮助改成下拉框的形式,需要在Odata 的类ZCL_ZSALESORDERSLISTS_MPC_EXT重定义DEFINE方法

    "搜索帮助,下拉框显示
    "Method-local declarations:
    DATA lo_entity_type   TYPE REF TO /iwbep/if_mgw_odata_entity_typ.
    DATA lo_property      TYPE REF TO /iwbep/if_mgw_odata_property.
    DATA lo_annotation    TYPE REF TO /iwbep/if_mgw_odata_annotation.
    DATA lo_odata_model   TYPE REF TO /iwbep/if_mgw_odata_model.
    DATA lv_entitytype    TYPE /iwbep/if_mgw_med_odata_types=>ty_e_med_entity_name.

    "Call parent:
    super->define( ).

    "Set the appropriate annotations for each property of the Contract entity:
    lo_entity_type = model->get_entity_type( 'SaleslLists' ).

    IF lo_entity_type IS NOT INITIAL.

      "Set ContractType as fixed-value list:
      lo_property = lo_entity_type->get_property( iv_property_name = 'Vbeln' ).
      IF lo_property IS NOT INITIAL.

        lo_annotation = lo_property->/iwbep/if_mgw_odata_annotatabl~create_annotation( /iwbep/if_mgw_med_odata_types=>gc_sap_namespace ).
        lo_annotation->add( iv_key = 'value-list' iv_value = 'fixed-values' ).

      ENDIF.
    ENDIF.

实现效果如下:

 同样,下拉框是可以多选的,如果想要把下拉框改成单选,同样的位置,添加如下代码

CALL METHOD CL_FIS_FILTER_ANNOTATION=>SINGLE_VALUE"获取单一值
  EXPORTING
    IO_MODEL       = model
    IV_ENTITY_TYPE = 'SaleslLists'
    IV_PROPERTY    = 'Vbeln'
    .

3.3日期的搜索帮助

"调整日期
cl_fis_filter_annotation=>is_date(
   io_model       = model
   iv_entity_type = 'SaleslLists'
   iv_property    = 'Erdat' ).

CALL METHOD CL_FIS_FILTER_ANNOTATION=>SINGLE_VALUE
  EXPORTING
    IO_MODEL       = model
    IV_ENTITY_TYPE = 'SaleslLists'
    IV_PROPERTY    = 'Erdat'
    .
=

4、自定义按钮

     自定义的按钮在 manifest.json里的    "extends": 下扩展,这里是一个MVC的结构,事件逻辑需要写在,controller里面

		"extends": {
			"extensions": {
				"sap.ui.controllerExtensions": {
					"sap.suite.ui.generic.template.ListReport.view.ListReport": {
						"controllerName": "zsalesorderzsalesorder.controller.Message",
						"sap.ui.generic.app": {
							"SaleslListsSet": {
								"EntitySet": "SaleslListsSet",
								"Actions": {
									"onMessage": {
										"id": "messageID",
										"text": "Message",
										"press": "onMessage"
									}
								}
							}
						}
					}
				}
			}
		}

 controller这里要保证格式和路径正确

项目结构

sap.ui.controller( "zsalesorderzsalesorder.controller.Message", {
	onInit: function() {},
	onExit: function() {},
	onBeforeRendering: function() {},
	onAfterRendering: function() {},
	onMessage: function(oEvent){
		sap.m.MessageToast.show("OK!");
	}
});

如果message报错的话在component里面引用一下

jQuery.sap.require("sap.m.MessageToast");

5、Object page跳转

        object page是对某一个单个对象的详细信息的展示页面,List Report的每一条数据的详细信息,默认是object page显示的。

5.1  菜单导航 UI.FieldGroup,UI.ReferenceFacet

     它的实现方式大概是这样:所有Header部分的内容都放在UI.Facets里面,然后在通过引用Field Group引进数据源。UI.CollectionFacet 会把多个group放入一个Section里面,用UI.ReferenceFacet,会直接新增一个Section,一个Section对应 一个导航

使用UI.HeaderInfo,UI.HeaderFacets 把相关数据放在表头

<Annotation Term="UI.HeaderInfo">
	<Record Type="UI.HeaderInfoType">
		<PropertyValue Property="TypeName" String="object page title"/>
		<PropertyValue Property="TypeNamePlural" String="list title"/>
		<PropertyValue Property="Title">
			<Record Type="UI.DataField">
				<PropertyValue Property="Value" Path="Vbeln"/>
			</Record>
		</PropertyValue>
	</Record>
</Annotation>
<Annotation Term="UI.HeaderFacets">
	<Collection>
		<Record Type="UI.ReferenceFacet">
			<PropertyValue Property="Label" String="基本信息"/>
			<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#PlainText"/>
		</Record>
	</Collection>
</Annotation>

 添加主体内容,生成三个导航

	<Annotation Term="UI.FieldGroup" Qualifier="PlainText">
		<Record Type="UI.FieldGroupType">
			<PropertyValue Property="Data">
				<Collection>
					<Record Type="UI.DataField">
						<PropertyValue Property="Value" Path="Vbeln"/>
					</Record>
					<Record Type="UI.DataField">
						<PropertyValue Property="Value" Path="Erdat"/>
					</Record>
					<Record Type="UI.DataField">
						<PropertyValue Property="Value" Path="Ernam"/>
					</Record>
				</Collection>
			</PropertyValue>
		</Record>
	</Annotation>
	<Annotation Term="UI.FieldGroup" Qualifier="NetValue">
		<Record Type="UI.FieldGroupType">
			<PropertyValue Property="Data">
				<Collection>
					<Record Type="UI.DataField">
						<PropertyValue Property="Value" Path="Netwr"/>
					</Record>
					<Record Type="UI.DataField">
						<PropertyValue Property="Value" Path="Waerk"/>
					</Record>
				</Collection>
			</PropertyValue>
		</Record>
	</Annotation>
	<Annotation Term="UI.FieldGroup" Qualifier="SalesInfo">
		<Record Type="UI.FieldGroupType">
			<PropertyValue Property="Data">
				<Collection>
					<Record Type="UI.DataField">
						<PropertyValue Property="Value" Path="Vkorg"/>
					</Record>
					<Record Type="UI.DataField">
						<PropertyValue Property="Value" Path="Vtweg"/>
					</Record>
				</Collection>
			</PropertyValue>
		</Record>
	</Annotation>
	<Annotation Term="UI.Facets">
		<Collection>
			<Record Type="UI.CollectionFacet">
				<PropertyValue Property="Facets">
					<Collection>
						<Record Type="UI.ReferenceFacet">
							<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#PlainText"/>
							<PropertyValue Property="Label" String="创建信息"/>
						</Record>
						<Record Type="UI.ReferenceFacet">
							<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#NetValue"/>
							<PropertyValue Property="Label" String="净值"/>
						</Record>
					</Collection>
				</PropertyValue>
				<PropertyValue Property="Label" String="一般信息"/>
			</Record>
			<Record Type="UI.ReferenceFacet">
				<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#SalesInfo"/>
				<PropertyValue Property="Label" String="销售信息"/>
			</Record>
			<Record Type="UI.ReferenceFacet">
				<PropertyValue Property="Target" AnnotationPath= "SalesOrderItemsSet/@UI.LineItem"/>
				<PropertyValue Property="Label" String="销售订单行项目"/>
			</Record>
		</Collection>
	</Annotation>

 效果如下所示:

5.2  行项目UI.LineItem

      添加行项目,首先需要在ODATA新增一个entity来获取行项目,关联两个entityset创建association,然后在Fiori端进行一些配置

5.2.1 新建EntitySet

创建新的entity,存储行项目

 右击data model创建association

 重写 SALESORDERITEMSS_GET_ENTITYSET获取行项目数据

  method SALESORDERITEMSS_GET_ENTITYSET.
**TRY.
*CALL METHOD SUPER->SALESORDERITEMSS_GET_ENTITYSET
*  EXPORTING
*    IV_ENTITY_NAME           =
*    IV_ENTITY_SET_NAME       =
*    IV_SOURCE_NAME           =
*    IT_FILTER_SELECT_OPTIONS =
*    IS_PAGING                =
*    IT_KEY_TAB               =
*    IT_NAVIGATION_PATH       =
*    IT_ORDER                 =
*    IV_FILTER_STRING         =
*    IV_SEARCH_STRING         =
**    IO_TECH_REQUEST_CONTEXT  =
**  IMPORTING
**    ET_ENTITYSET             =
**    ES_RESPONSE_CONTEXT      =
*    .
** CATCH /IWBEP/CX_MGW_BUSI_EXCEPTION .
** CATCH /IWBEP/CX_MGW_TECH_EXCEPTION .
**ENDTRY.
   DATA: LS_KEY LIKE LINE OF IT_KEY_TAB ,
         LV_VALUE TYPE vbak-VBELN .

    CLEAR LS_KEY.
    READ TABLE IT_KEY_TAB INTO LS_KEY WITH KEY NAME = 'Vbeln'.

    LV_VALUE = |{ LS_KEY-VALUE ALPHA = IN WIDTH = 10 }|.
    SELECT * INTO CORRESPONDING FIELDS OF TABLE ET_ENTITYSET
      FROM ZVBAP
     WHERE VBELN = LV_VALUE .
  endmethod.

5.2.2 添加Annotations

这里注意一下Target路径是否正确,还有导航的AnnotationPath

			<Annotations Target="ZSALESORDERSLISTS_SRV.SalesOrderItems">
				<Annotation Term="UI.LineItem">
					<Collection>
						<Record Type="UI.DataField">
							<PropertyValue Property="Value" Path="Vbeln"/>
						</Record>
						<Record Type="UI.DataField">
							<PropertyValue Property="Value" Path="Posnr"/>
						</Record>
						<Record Type="UI.DataField">
							<PropertyValue Property="Value" Path="Netwr"/>
						</Record>
						<Record Type="UI.DataField">
							<PropertyValue Property="Value" Path="Waerk"/>
						</Record>
					</Collection>
				</Annotation>
			</Annotations>

5.2.3 在manifest配置pages

 在manifest.json的节点 sap.ui.generic.app 里面配置object page,确保“navigationProperty”和“entityset”是正确的

	"sap.ui.generic.app": {
		"_version": "1.3.0",
		"pages": {
			"ListReport|SaleslListsSet": {
				"entitySet": "SaleslListsSet",
				"component": {
					"name": "sap.suite.ui.generic.template.ListReport",
					"list": true,
					"settings": {
						"gridTable": false,
						"multiSelect": true,
						"smartVariantManagement" : true
					}
				},
				"pages": {
					"ObjectPage|SaleslListsSet": {
						"entitySet": "SaleslListsSet",
						"component": {
							"name": "sap.suite.ui.generic.template.ObjectPage",
							"settings": {
								"showRelatedApps": true,
								"gridTable": false,
								"editableHeaderContent": true,
								"simpleHeaderFacets": true
							}
						},
						"pages": {
							"navigationProperty": "SalesOrderItemsSet",
							"entitySet": "SalesOrderItemsSet",
							"component": {
								"name": "sap.suite.ui.generic.template.ObjectPage"
							}
						}
					}
				}
			}
		}
	},

效果图:

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Gong JX

多谢鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值