Using formatter.js in a list

[former_member711680]

Hi experts,

I am building a custom master-detail Fiori application using XML views, and one of the requirements for our application was that we were to color code the status text of a master list based on what the text in the attribute field of the ObjectListItem  displayed. However, whenever I try to set a formatter for it in the XML view, it seems that my formatter keeps applying the custom CSS color to the next attribute down the list, rather than the one that it is evaluating.

In my XML view, here is where I am calling the formatter:

And here is the formatter itself:

And lastly here is the CSS that is being applied:

Is there a way to get the attribute on the XML view to properly render color based on the text?

Thanks in advance,

Ying

[former_member365727 · Accepted solution]

Hi,

Can you check if the first entry has any extra space at the end or beginning for the text 'APPROVED'.

[former_member711680 · Accepted solution]

Hi Srikanth,

The value being assigned to the field shows no leading or trailing spaces on every entry; including the first one:

The value that the formatter is using for the comparison is identical:

The end result still shows correct comparisons, with the only difference being that the desired CSS property is applied onto the subsequent record rather than the record that is being used in the comparison. Am I calling the wrong object to be compared, or am I calling the wrong object to be changed?

Thanks,

Ying

[former_member365727 · Accepted solution]

Hi Ying,

I was able to replicate your scenario and got the same results as you.

There are two things going wrong in the code

  1) ObjectListItem control will grow based on the data. i.e if the model has 10 records then at runtime there will be 10 list Items generated. Even though for attribute id is specified as "__attribute0" at runtime different ID's are generated.(Check the HTML DOM...none of the elements will have this id)

So the conclusion is inside a formatter function we shouldn't access any UI element which grows at runtime

   2) formatter function should be used only for data manipulation. This means we are not supposed to use formatter function to change the styles of any UI elements(it might lead to inconsistencies like in your case).

Solution:

Remove the formatter function from the view as it is trying to manipulate CSS. Instead create a function in the controller which loops through all the items and apply the styles. Lets call this function as _applyStyles(). Call this method in the event onUpdateFinished.

Below is the code and the corresponding output.

MasterView created with List having the ID as "list"

Method _applyStyles() in the view controller:

Output:

[former_member711680 · Accepted solution]

Thank you Srikanth!

This ended up working perfectly!

There is one caveat that I wanted to add though: in between the time I had submitted my initial problem and your response, I had added a grouping for my master list, which caused the getAttributes() function to throw an uncaught exception if it was attempted to be accessed on a grouping header (group headers don't have attributes).

Grouping added to the XML view here:

As a result, the section of the code that uses the attributes must be wrapped into a try-catch to prevent an uncaught exception from being thrown:

The colors then get applied to the attributes of the items correctly without being applied to the headers!

Thanks again for your help Srikanth!

[former_member365727 · Accepted solution]

Hi Ying,

Whenever grouping is used in the list a new ObjectListItem of type sap.m.GroupHeaderListItem is created. This is the group header and wont contain any attributes.

Your approach of try catch works fine.

Another solution would be to check the type of each item.....if the item type is sap.m.GroupHeaderListItem then skip to next iteration.

Regards

Srikanth

[saurabh_vakil]

Hi,

In the view's corresponding controller, are you loading the dependency to your formatter file and in the Controller.extend function are you setting the formatter property as below:

return Controller.extend("<Controller_Name>", {
formatter: formatter,
....
....
});

Reference - SAPUI5 SDK - Demo Kit

Regards,

Saurabh

[former_member711680]

Hi Saurabh,

Yes, I believe I am loading the dependency, right after my Controller.extend function.

Thanks,

Ying