在Fiori元素对象页面上显示带有首字母或图像的头像，以便使用RAP获得更好的用户体验

我总是觉得在所有的FE对象页面应用程序中，当没有头像显示在头部时，有些东西是缺失的。我的意思是，只要检查下面的图像，看看它是多么美丽的化身控制在对象页面上。

与没有图像相比

没有头像，就太丑了，对吧?(在我看来)

问题:

• 如何在对象页面上显示头像?(正常的图片)

• 如果我们没有图像呢?(仍然想显示一些替代)然后我们可以显示对象的首字母(例如客户名称首字母)'

让我们在这篇博文中看看这两种方法

我用什么来实现这个目标:

如果你已经完成了下面的两个教程，就可以很容易地实现这篇博客文章中使用的例子。

1. ABAP云平台试用账号。和ABAP RAP
   • https://help.sap.com/viewer/923180ddb98240829d935862025004d6/Cloud/en-US/504035c0850f44f787f5b81e35791d10.html
   • https://developers.sap.com/tutorials/abap-environment-trial-onboarding.html
2. 业务应用程序工作室。
   • https://developers.sap.com/tutorials/abap-environment-deploy-cf-production.html

如何在对象页面上显示头像?(正常的图片)

这很简单，你们大多数人也都知道。通过使用imageURL注释。

但是如何在一个基于ABAP RAP的应用程序中做到这一点呢?一种方法是使用虚拟元素。

而在ABAP RAP中，虚拟元素只能在CDS投影视图中使用。让我们创建一个客户根视图。

@AccessControl。authorizationCheck: #CHECK @EndUserText。定义根视图实体Z_I_CUSTOMER_FE_IMAGE为select from /DMO/I_Customer as Customer {key Customer。CustomerID,客户。FirstName、客户。LastName、客户。标题,客户。街,客户。PostalCode、客户。城市,客户。CountryCode、客户。PhoneNumber、客户。EMailAddress、客户。_Country}

这是一个投影视图

@AccessControl。authorizationCheck: #CHECK @EndUserText。标签:'客户FE图像' @UI。headerInfo:{imageUrl: 'CustImageURL'，标题:{值:'CustomerID'}， typeName: '客户详细信息'，typename复数:'客户'，描述:{值:'FirstName'}}定义根视图实体z_c_customer_fe_image作为客户{@UI。@UI. facet: [{id: 'CustomerHeader'，用途:#STANDARD，类型:#IDENTIFICATION_REFERENCE，标签:'一般信息'}]selectionField: [{position: 10}] @用户界面。lineItem: [{position: 10}] @UI。身份:[{职位:10}]大客户。@UI CustomerID。lineItem: [{position: 20}] @UI。身份:[{职位:20}]客户。@UI FirstName。lineItem: [{position: 30}] @UI。身份:[{职位:30}]客户。@ObjectModel LastName。virtualElementCalculatedBy: 'ABAP:ZCL_VE_CUST_INITIAL' virtual CustImageURL: ABAP。字符串(256)，客户。CountryCode @UI。标识:[{position: 40}] @UI。lineItem: [{ position: 40 }] customer.PhoneNumber, @UI.identification:[{position: 50}] @UI.lineItem: [{ position: 50 }] customer.EMailAddress, customer._Country }

因此，我创建了虚拟元素“CustImageURL”和类ZCL_VE_CUST_INITIAL。类如下图所示:

类zcl_ve_cust_initial定义公共FINAL创建公共。公共部分。if_sadl_exit_calc_element_read接口。受保护的部分。私人部分。ENDCLASS。CLASS zcl_ve_cust_initial实现。if_sadl_exit_calc_element_read ~计算方法。数据客户类型标准表z_c_customer_fe_image的默认键。customers =对应的#(it_original_data)。 LOOP AT customers ASSIGNING FIELD-SYMBOL(). -CustImageURL = 'https://github.githubassets.com/images/modules/open_graph/github-octocat.png'. ENDLOOP. ct_calculated_data = CORRESPONDING #( customers ). ENDMETHOD. METHOD if_sadl_exit_calc_element_read~get_calculation_info. ENDMETHOD. ENDCLASS.

正如你所看到的，我只是传递一个虚拟的图像URL，在正常情况下，我们将根据对象ID传递图像。

然后创建服务定义和服务绑定。

现在在从BAS生成的Fiori List Report应用程序中使用相同的内容。

运行App并验证。

在头像中显示图像。

所以我们成功地展示了图像。

但如果我们没有那个特定物体的图像呢?相反，我们可以显示首字母。

如果我们没有图像呢?:-在化身中显示对象的首字母

现在让我们在投影视图中添加另一个虚拟元素，如下所示:

@ObjectModel。virtualElementCalculatedBy: 'ABAP:ZCL_VE_CUST_INITIAL' virtual customital: ABAP。Char (2)，

在虚拟元素类中添加以下代码

if_sadl_exit_calc_element_read ~ get_calculation_info方法。循环AT it_requested_calc_elements分配FIELD-SYMBOL()。情况下< fs_calc_element >。当“CUSTINITAL”。附加'FIRSTNAME'到et_requested_orig_elements。追加'LASTNAME'到et_requested_orig_elements。ENDCASE。ENDLOOP。ENDMETHOD。

注释下面的图片URL代码，这样首字母就会出现。

if_sadl_exit_calc_element_read ~计算方法。数据客户类型标准表z_c_customer_fe_image的默认键。customers =对应的#(it_original_data)。在客户处循环分配FIELD-SYMBOL(<客户>)。-CustInital = |{-FirstName(1)}{-LastName(1)}|. -CustInital = |{-FirstName(1)}" -CustImageURL = 'https://github.githubassets.com/images/modules/open_graph/github-octocat.png'. "ENDLOOP。ct_calculated_data =对应的#(客户)。ENDMETHOD。

现在，让我们转到业务应用程序工作室，打开服务建模器并在本地复制headerinfo注释。

添加下面的注释，并将initials属性添加到路径

现在让我们再次运行应用程序并检查。

就是这样，使用这样一个简单的注释可以将UX增加很多倍。这在ABAP中还没有，也许将来SAP会发布。所以现在，我们需要在本地添加这个注释。

这个ABAP项目的Git Hub URL:

https://github.com/mahesh0431/abapFEImage

让我知道你的想法。你也喜欢在对象页面上显示图像吗?

干杯!

马赫什