Customer Relationship Management Blogs by SAP
Stay up-to-date on the latest developments and product news about intelligent customer experience and CRM technologies through blog posts from SAP experts.
cancel
Showing results for 
Search instead for 
Did you mean: 
hongyan_shao
Active Contributor
0 Kudos
最近在内部系统里点来点去的时候发现了下面这个小问题。在Advance Search里面的Search Result表格中,如果先排序某列然后再设置一个过滤器,过滤器和排序的小图标就神奇般的都消失了。



放大这两个小图标给大家看,排序的以升序排序为例,除了降序排序图标以外其实小图标的形式还不止以下这些,且听后文细细道来。



联系了我们的开发,不出三天就生成了新的note 2615706 - Table filter/sort icons are sporadically missing解决了这个问题。效率高啊。赞一个。

我很好奇,想看看是什么样的bug,没准能看出过滤和排序小图标的显示机理,于是打开看了这个note里面修改的程序



哦,萝卜应该赋值给萝卜,黄瓜应该赋值给黄瓜,对应错了。但是完全看不出跟这两个图标的显示有什么关系。打算推敲一下。

就从这段程序debug起



程序生成了一串hidden input用来传参数到前端,生成的HTML如下。看到这里的#:#和#!#就马上有一种不明觉厉的感觉。

<input type="hidden" name="C31_W109_V110_V112_Table_sortValue" id="C31_W109_V110_V112_Table_sortValue" value="ACCOUNT_NAME#:#asc#!#"/>

我对前端的JS等一直懵懵懂懂,觉得探索到这里有点头疼了,难道是由JS控制的。决定还是尝试一下先不去触碰JS。使用F12先来研究一下这个screen element是什么东东。



然后仔细观察这个element的style,发现这个element继承了上层的一个属性拥有一个背景图片。



这个图片是啥?跑去后台GUI的SE80看一下,celler_up1_filter.gif就是我正在研究的小图标。而且惊喜地发现,不是过滤器图标加上排序图标,而是两个在一起的一个小图标。那么这个图标根据不同情况会变化,又是通过什么控制的呢?



继续研究F12,既然提示是继承来的,那么就看看上层的element有什么线索



仔细看上层的element会发现这个背景图片来自于element.style而不是class的CSS文件中定义的属性,也就是能在左边html源文件里面看到图片的信息。说明这个图片是通过ABAP程序直接付给该element的,应该在ABAP端能看到,这个对于我这个JS盲来说真是福音啊。然后继续观察这个element使用的诸多class中已经有表述该列是即被排序又被过滤过的th-clr-cel-sorted-filtered,同时还能看到th-clr-cel-sorted-asc等class id。



在WebUI里面生成页面html元素的最基本的ABAP class通常都是这样的命名规则

CL_*HTMLB_<screen element>

就这里一直在研究的search result表格而言,又借鉴note 2615706里面使用到的CL_THTMLB_CELLERATOR,我决定先在这个class里面尝试一下。直接大胆搜索th-clr-cel-sorted-filtered这个html class。



迅速定位到了Method RENDER_CELL,被定位的程序附近还是没有说到背景图片的事情,直接搜索图片的名字没有结果,其实在se80里面我们已经发现除了celler_up1_filter.gif以外还有up2,up3等等,估计这个小图标的图片名称是按照逻辑拼出来的。幸亏这个Method的总长度不是很长,稍微读一下就不难找到下面这段逻辑,原来图片的名字就是这样拼出来的,加入了html里面。



观察以上这段程序还有一个发现,这里有一段程序读取当前排序gt_sort里面的序列号,这就解释了为什么SE80里面会有1啊2啊3啊。这是什么功能呢?这个呢是一个由Note 2131434 - Multi-Column Sorting on Tables引入的新功能。在这个note之前search result里面同时只能排序一个字段,现在我们可以通过点personalize定义最多三个排序字段。如下,仔细看那个正序和倒序排练的图标上方或者下方分别是一个点,两个点,三个点来表示多重排序。很有意思的小功能吧?



到这一步其实最初提出的问题已经找到答案了。但是还有如下没有解答的问题:

那么为什么note 2615706提到的RENDER_HIDDEN_FIELDS里原来的程序能造成该图标无法显示呢?

在CL_THTMLB_CELLERATOR里的RENDER_HIDDEN_FIELDS和RENDER_CELL全部放上断点,然后在RENDER_HIDDEN_FIELDS里面模拟还是note 2615706之前的程序,把<ls_sort>-column的值付给<ls_sort>-value。



看到如下的拼图标文件名称的过程。拼出来的名字是不存在的,所以无法显示。



豁然开朗了吗?还是没有,在上面debug的过程中发现每一次都是RENDER_CELL方法先于RENDER_HIDDEN_FIELDS被叫到,也就是说影响这次图标文件名生成的是上一次RENDER_CELL里错误的赋值?

我们再做一遍以下操作,模拟note 2615706前的错误情况,同时开启F12的Network:

  • 第一步,排序;

  • 第二步,设过滤器;

  • 第三步,再次排序;


看看Network里面的结果。这里可以很清晰地看到,有一条红色,这个celler1_filter.gif没有取到。前后两次都成功取到图标了。那么我们来关心一下这个图片之前的那行



第一步,asc指令由前端正确发往后端,也拼出了正确的小图标文件名。



第二步,由于后端在RENDER_HIDDEN_FIELDS里面把asc错误的赋值成了列名,返回前端,所以在设置过滤器的时候,读出来的先前的排序状态是错误的,没法解析成正序或者倒序指令,造成拼成了错误的小图标文件名。



第三步,再次触发排序操作,一个崭新的asc指令发往后端,所以这次又能正确显示了。



到此为止本次推敲告一段落了。

 

为了避免我的行文思路给您带来的困扰,想总结一下本文主要说了以下这几点:

  1. 分析表格中过滤或者排序小图标显示的机制是什么

  2. Chrome F12 Element和Network在此类问题中分析的方法

  3. 一个小bug,note 2615706 - Table filter/sort icons are sporadically missing, 有时候过滤和排序图标会消失

  4. 一个小的好功能,note 2131434 - Multi-Column Sorting on Tables,多个字段排序

  5. Web ui页面生成的ABAP逻辑多在CL_*HTMLB_<screen element>中


本文没有涉及,本文作者缺乏相关知识的是(欢迎交流):

  1. 排序和过滤对表格数据条目显示的影响是怎样展开的,是纯前端行为还是后端?

  2. 有时候用F12 Network无法捕捉到celler_up1_filter.gif读取,这是为什么?