Change HAlign based on contents of a table cell

Question

I am using SAPUI5 with a Matrix Layout and a table. I am retrieving 3 rows of data from my JSON call. The data will always have 3 rows - two with data retrieved from a database, and 1 is a total line. What I would like to do is to right align the last line.

This is the current output:

This is the current output

What I would like to do is to move the word "Total" over to be on the right.

This is my XML for the column (Customer Type shown in picture). I removed the rest of the table, because I didn't think it is needed here.

<cl:MatrixLayoutCell colSpan="2">
   <table:Table id="prodStats" selectionMode="None" visible="true" rows="{/pstats}" title="Overall Statistics" >
                    <table:columns>
                        <table:Column >
                            <Label text="Customer Type"/>
                        <table:template>
                            <Text text="{partnerStatus}"  />
                        </table:template>
                        </table:Column>

My Data looks similar to:

"pstats":[
{"cnt1":"37","cnt2":"42","cnt3":"228","partnerStatus":"Customer"},
{"cnt1":"158","cnt2":"193","cnt3":"948","partnerStatus":"Partner"},
{"cnt1":195,"cnt2":235,"cnt3":1176,"partnerStatus":"Total"}
]

Is there a way to set the alignment of the word "Total" in the third row to be right aligned?

I've looked around to see if I could find something similar, but the closest was changing the column content type to be either Text or an Image/Link but those examples didn't use XML to create the matrix/table. I am not sure whether I need to change the Column or the Text - I was leaning towards the Column, but I can't figure out how to change only that column for that particular row.

I'd appreciate any help you can offer.

score 0 · Answer 1 · answered Jan 12 '15 at 13:06

0

I guess the easiest way in such a case is writing a css rule for this table instead. You could do something like .myTableStyleClass tr:lastChild td:first-child, assuming you attach myTableStyleClass to your table - see JSBin here: http://jsbin.com/guxodawefu/1/edit?html,css,output Hope that helps!

Best, 10littleOrcs

answered Jan 12 '15 at 13:06

10littleOrcs

151
1
6

I tried this as well. it didn't work. when i examined it, i could see the style was applied but there was another applied on top of it. when i unchecked that style, the format followed your example. I'm guessing I need to find a way to load this style somehow after the internal SAPUI5 styling takes over. Thanks. – user3861284 Jan 13 '15 at 13:09

Qualiture · Answer 2 · 2015-01-13T14:03:20.147

0

If your last line always have a partnerStatus with value Total, you could use a formatter function to have the third row aligned right only:

<table:template>
    <TextView text="{partnerStatus}" textAlign="{path:'partnerStatus', formatter:'.alignPartnerStatus'}"/>
</table:template>

And in your controller, specify the formatter function alignPartnerStatus as follows:

alignPartnerStatus : function(val) {
    return (val === "Total" ? "Right" : "Left");
}

Hope this helps!

EDIT: jsbin example at http://jsbin.com/lolife/1/edit?html,js,output

edited Jan 13 '15 at 14:03

answered Jan 12 '15 at 15:15

Qualiture

4,900
7
27
38

well this didn't work. it seems like it is getting overwritten by another format somewhere after this is called. It seemed to make sense though. thanks – user3861284 Jan 13 '15 at 13:06
I have updated my answer with a link to a working JSBin example using your data – Qualiture Jan 13 '15 at 14:04

Change HAlign based on contents of a table cell

2 Answers2