Data transforming style of label in a tablerow

Question

I'm currently databinding to a TableView a and below is the code:

<Alloy>
    <TableViewRow backgroundColor="{background}" id="businessRow">
        <Label id="st1" class="ribbonIcon1" color="{highlight1}" text="{st1}"/>
        <Label id="st2" class="ribbonIcon2" color="{highlight2}" text="{st2}"/>
        <Label id="st3" class="ribbonIcon3" color="{highlight3}" text="{st3}"/>
        <Label id="st4" class="ribbonIcon4" color="{highlight4}" text="{st4}"/>
        <Label id="st5" class="ribbonIcon5" color="{highlight5}" text="{st5}"/>
    </TableViewRow>
</Alloy>

Each label is an icon font which is being defined by {st1}. I'm using icomoon fonts referencing the ligatures so I can change the icons accordingly. I'm using the checkbox font icon for this test.

I'm then doing a datatransform to highlight the icons with a blue colour that have businesses associated with them and grey if not which is pulled from a SQLite database (DesQuery).

SQL snippet and functions

...COUNT(BusinessSites.BusinessID) AS Bqty, sum(case when     Services.ServiceID = "1" then 1 else 0 end) ST1, sum(case when Services.ServiceID = "2" then 1 else 0 end) ST2, sum(case when Services.ServiceID = "3" then 1 else 0 end) ST3, sum(case when Services.ServiceID = "4" then 1 else 0 end) ST4, sum(case when Services.ServiceID = "5" then 1  else 0 end) ST5 FROM...



    function DescOrder(){
        Junctions.fetch({query:DesQuery});
        Junctions.setSortField("display_order", "DESC");
        Junctions.sort();
        transformJunctionList(Junctions);
        toggleOrder = "DESC";
    }

function AscOrder(){
    Junctions.fetch({query:DesQuery});
    Junctions.setSortField("display_order", "ASC");
    Junctions.sort();
    transformJunctionList(Junctions);
    toggleOrder = "ASC";
}

function transformJunctionList(model) {
    var transform = model.toJSON();
                transform.st1 = "checkbox";
                transform.ST1 > "0" ? transform.highlight1 = "#4993cc" : transform.highlight1 = "#ebe9e9";
                transform.st2 = "checkbox";
                transform.ST2 > "0" ? transform.highlight2 = "#4993cc" : transform.highlight2 = "#ebe9e9";
                transform.st3 = "checkbox";
                transform.ST3 > "0" ? transform.highlight3 = "#4993cc" : transform.highlight3 = "#ebe9e9";
                transform.st4 = "checkbox";
                transform.ST4 > "0" ? transform.highlight4 = "#4993cc" : transform.highlight4 = "#ebe9e9";
                transform.st5 = "checkbox";
                transform.ST5 > "0" ? transform.highlight5 = "#4993cc" : transform.highlight5 = "#ebe9e9";`

The output on iOS is working but giving me this warning:

`

[WARN] : Hex color passed looks invalid:

However, it crashes Android at the point the tableView loads. This was working on previous versions without error. If I remove the {highlight1} etc and replace with a valid hex it runs fine.

This is a current screen snippet of the output on the iPhone.

Any advice on how to achieve the same result would be fantastic.

Answer 1

We ran into this issue as well with the new version. For us it was we had a color we set sometimes. In the previous versions it would just ignore the ones without a color, but in this version it tries to parse null. We fixed it by having a default color of white set to all models in the transform function and then change it if needed.