What makes Filter Sort Icon shown in Table / Cellerator

Recently when I was playing around in one of our internal system, and happen to find one tiny issue as following gif file shown. The issue is in Advanced Search, Search Result, if I click to sort firstly then click to filter on one value, the filter and sort icon does not display.

The following are some of the icons used for cellerator. Besides there are ascending and descending icons, there are more icons possible then what is listed below. In later part of this blog, I will mention them.

Then I contacted our developer. With less than 3 days, a bug fix note 2615706 – Table filter/sort icons are sporadically missing was issued. Very efficient! ?

I am very curious. Thus would like to check how the bug is fixed. And would like to see if I can find out how the icon was displayed by checking how the bug was fixed. Here is what has been corrected in the note

It is very straight forward. The value was incorrectly set. But how is this related to the icon display?

I tried to debug starting from this piece of program

The program generated a hidden input to pass value, and generated HTML coding as following.

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

Does this have something to do with Javascript? I am no expert in Javascript at least at the moment. Thus I’d like to try further without touching Javascript. Next step is to use F12 to analyze this icon screen element.

Then let’s observe the style of this element. It has inherited an attribute to have a background image.

What is this image? Let’s goto SE80 and check this file. celler_up1_filter.gif IS the icon we are analyzing. Surprisingly instead of having one icon for Filter plus one icon for Sort, it is actually one icon with filter and sort together.

And this icon can be changed depends on different situation, how is this be achieved?

Continue to check in F12. Since it is inherited, then let’s check at least one level above.

This time when we check the Style, we can see the background image comes from element.style instead of cascading style sheet attributes. This background image can be found on left side html source also. This indicates this image was set via ABAP program. Good news for a frontend idiot as me. When check further of the upper element, we can see the tag class has “th-clr-cel-sorted-filtered” and “th-clr-cel-sorted-asc” which shows the filter and sort status of this column.

For WebUI, we normally use ABAP class to render nearly all the screen element in the html. The ABAP class is normally named as following:

CL_*HTMLB_<screen element>

In note 2615706, CL_THTMLB_CELLERATOR has ben used, then I’d like to try firstly in this class. I blindly made a search using “th-clr-cel-sorted-filtered”.

It leads me to Method RENDER_CELL. Check the coding, it does not tell how the icon picture has been determined. If you still remember when we check in SE80, there are files not only celler_up1_filter.gif, but also up2, up3 files. I’d like to assume that the picture name will be composed using some logic. Fortunately that this method is not long. Thus by scanning the coding, I located the following coding. Here is the exact place where the icon file name was composed.

In the above logic, there are coding reading the index in gt_sort. This explains why in SE80 there is file with name 1, or 2, or 3. Then what is this function? This is a function introduced by Note 2131434 – Multi-Column Sorting on Tables. Before this note, search result can only be sorted on one column. Now if you call up personalize popup, you are able to define up to 3 columns to sort. If you check the icons closely, you may notice the little dot on or under the sort icon. 1 dot, 2 dotc, 3 dots. Isn’t it an interesting function?

We have located how the sort and filter icon been determined. But we still have doubt with the following question:

Why coding in method RENDER_HIDDEN_FIELDS before note 2615706 can lead to icon not display?

Let’s put breakpoint in both CL_THTMLB_CELLERATOR method RENDER_HIDDEN_FIELDS and method RENDER_CELL. Then in RENDER_HIDDEN_FIELDS, debug mode, let’s simulate the wrong situation before note 2615706. Set value of <ls_sort>-column mistakenly to <ls_sort>-value.

Then here is the logic to compose the file name. And this file does not exist. Thus the icon disappeared.

Everything clear now? Not yet. When debug just now, we can observe that the call of method RENDER_CELL happens before call of method RENDER_HIDDEN_FIELDS. Then does it mean that this time’s wrong value was because of last time’s wrong set in method RENDER_CELL?

Let’s make the following steps, at the same time simulate the wrong situation before note 2615706. And at the same time open F12 Network tab.

Step 1: Sort;

Step 2: Filter after sorted;

Step 3: Sort again after filtered;

Let’s check the result on Network tab. One red line, shows the wrong file the browser is trying to display but failed. The other two files were successfully displayed. We’d like to check the detail of the line before the icon file

Step 1, asc has been sent from frontend to backend, the correct file name was composed.

Step 2, method RENDER_HIDDEN_FIELDS overwritten asc with column name in previous step. The wrong value was sent to frontend and was stored in frontend. When we set filter, the wrong sort status was read, and can’t be interpreted by backend. Thus the file name was composed wrongly.

Step 3, click sort again, a brand new asc event was triggered. Thus the file name can be composed correctly, and the icon can be displayed.

Now I feel finally comfortable.

In order to avoid possible confusion, let me summarize some main points of this blog:

1. What makes Filter Sort Icon shown in Table / Cellerator
2. How to use Chrome F12 Element and Network to analyze web ui
3. A tiny bug, note 2615706 – Table filter/sort icons are sporadically missing
4. An interesting tiny functionality, note 2131434 – Multi-Column Sorting on Tables
5. Web ui page rendering logic normally is in ABAP class with naming rule as CL_*HTMLB_<screen element>

What is not touched in this blog, or author does not have enough knowledge in (discussion welcomed):

1. How sort and filter effect the table content display? Pure frontend event or backend involved?
2. Sometimes F12 Network can’t capture flow of celler_up1_filter.gif, why?