Conditionaly change the color of a browse cell.

[JPMacDonald]

Using NT 7.04

I want to change the color of the contents of a browse cell depending on whether the value of that cell is positive or negative, i.e. black or red.

On the CSS tab for that field I added the following to the Additional CSS Properties selecting color as the property to change and for the Value entered: CHOOSE(locAvailable < 0, ' red', ' red')

I specifically made both choices 'red' here as I was not getting the expected result. When I inspect the cell with Fire Fox I see:

<div id="div1722349161_div" class="RightJustify" style="color: #000000;">-1,089.52</div>

No matter what I try the color is always #000000.

Where am I going wrong?

Regards

Parker

[Bruce]

additional properties take a specific value, not the name of a class.

Your CHOOSE statement should go into the CSS setting for the field, not an additional property.

cheers
Bruce

[JPMacDonald]

Bruce,

Sorry for being a bit daft here but I'm not quite getting it.

Isn't the CSS setting for the field looking for a class? In which case I would need to build a Custom CSS class and use it not the color attribute correct? If I put my CHOOSE in there as is it will be looking for a class of .red or .black

In any case since I have selected 'RightJustify' for the Column CSS I cannot use the Contents or Cell setting since they become disabled.

Using the Additionl CSS Properties still makes sense to me since that is exactly what I want to do, just add to the already selected CSS and my CHOOSE was crafted to provide the specific value for the color, red or black.

If I go into the CSS tab and use the Additional Properties and select color and set a value of just ' red', no fancy CHOOSE, I would expect the column to display as red all of the time but it doesn't and FF just shows style="color: #000000 even though in the generated source I see it building the style with the parameter 'red'.

Again, sorry for being anal on this but I'm missing the Eureka moment for this.

Regards

Parker

[springguy]

Parker,
I do something like this a lot, and I've found the following to be reliable:

1. In the browse, on the field you want to color, on the Conditional Tab, set the Condition like this:

Condition: LOC:variablename = 'G'

CSS field: 'greenback'

I often use multiple color options depending on what I am testing for.  So, I would enter a second entry on the Conditional Tab:

Condition: LOC:variablename = 'Y'

CSS Field: 'yellowback'

As Bruce always warns, remember CSS is case sensitive.

2. Then, on the browse, I embed some code to set the LOC:variablename:

   3 Inside Browse Loop
      5. Before Table Rows

     Put your code to test whatever is relevant to you and set the LOC:variablename field's value (to 'G' or 'Y' in my example).

3. Add the styles to your custom.css file:

.greenback {
  color:black;
  background: #A9F5A9 !important;
}

.yellowback {
  color:black;
  background: #FFFF66 !important;
}

Make sure you run the gzip and make sure you update the users Styles and Themes folder.  I didn't realize that the Themes folder has to be updated.

Hope that helps a bit.  While I do the browse coloring on a cell (column) by cell basis, I understand that you can also do it on a row by row basis, but I don't do that.  But, maybe this will help move you along in your project.
Mike Springer

[JPMacDonald]

Mike/Bruce,

Thank you both so much, I just had my Eureka moment!

Looking through the source I notice that it was processing my color selection using p_web.ColorWeb. Looking at the source for this I see that it is looking fot he HEX color codes not red, blue, green etc. Eureka occured here.

So now back to Additional Properties and I select color for the CSS property and my new CHOOSE for the value:

CHOOSE(vCB:Amount<0,'#FF0033','#000000')

Works as expected!

Thank you both again.

Regards

Parker

[JPMacDonald]

Bruce,

Would I be pushing my luck here if I were to request that the Additional Properties feature be made available on the Totaling Tab?

Applying the conditional color works so well on the rows but doesn't apply to the total row that gets created.

I can use a custom CSS class for now but the Additional Properties feature here would be much nicer IMHO.

Regards

Parker

[Bruce]

Hi Parker,

>> I can use a custom CSS class for now

from this I gather you've figured out how to use CHOOSE on the CSS setting for the Footer?

>> but the Additional Properties feature here would be much nicer IMHO.

actually - no. I know it probably seems that way for now, but really it's not.

The additional properties is really there _only_ so you can use _data_ to set the colors. ie you want the color set to some value which is stored in your TPS or SQL table. You shouldn't use it to "hard-code" colors on the fly.

The reason I say this is because of theming. You want, as much as is possible, to separate the "colors" of things from the code. That's what the CSS file is for. Creating custom classes with custom colors is perfect. Doing it this way keeps the styling "outside" the code, and that's a really really big deal later on when you decide to change the look (the "theme") of a site. I know it doesn't seem like a big deal now, and just filling in the colors into the template seems quicker, but trust me - you'll thanks me later on if you do it right.

This approach of separation doesn't really have an equivalent in Clarion windows programming, so it can be hard to grasp the value of it at first - but this is one of those things that will make your draw drop in a couple years when you realize just how easy it is to control the look of your app.

cheers
Bruce

[JPMacDonald]

Bruce,

II agree 100% that theming the general look to a web site through CSS is the correct way to go.

In this specific case I am dealing with an accounting web application where negative numbers mean you are in the red and positive numbers means you are in the black. That is a generally accepted practice and is independent of any corporate look to the website. I wouldn’t want to allow a web designer to override that particular feature through CSS. If the Clarion picture attribute supported color, just like it supports a negative sign and a currency symbol, I would use that.

The Additional Properties feature allows me to do this and seems as natural as a baby’s smile. Seems a shame it cannot be extended to the total row of the browse, but I’ll take what I can get.

Thanks

Parker

[Bruce]

Hi Parker,

it's a fair point - but I think even then it would be better in CSS.

a) Just because it is in CSS doesn't mean the designer would necessarily override it (and obviously if they did they'd be "wrong").

b) they may just want to change to a different shade of red - a lot of design is about picking the right "version" of a color. So they may end up with a Red which is still Red, but perhaps fits better with other colors in the site.

c) There may be situations where the color _should_ be changed - even though "red" is the accepted norm for that field. The most obvious example of this is for things like color-blindness, or other accessibility issues.

d) making it a CSS Class means you can set it on place, but use it all over the place - even in other apps. So, for example, you might create a .profit class and a .loss class. Now you can re-use that class on different screens, or even in different apps.

In short - it would be convenient to just set the property, but in practice I might just be saving you from yourself. I don't mean to be condescending or patronizing at all when I say this though - it's just that I'm maybe a tad further along the CSS road than you are right now and maybe you might change your mind if you could see what's coming.

cheers
Bruce

[springguy]

Parker,
I have to agree with Bruce.  When I was first getting started trying to get my head around NetTalk, I thought is was a shame that the templates would not let me define things like colors.  It would be so easy, it seemed to me.  But, my context was that I didn't fully grasp the beauty of CSS.  As Bruce pushed me to spend more time getting more familiar with the whole CSS strategy, I became convinced he was correct.

I have to admit that there are still some situations where it would be just so easy to have a template option, but the bigger strategy gets "violated" then, and as new features come into the picture, well, we get boxed in.

So, I agree, now, that Bruce is offering all of us good advice.
Mike Springer

[JPMacDonald]

Bruce/Mike,

I will gladly defer to experience and I do appreciate you guys saving me from grief further down the road. I think one of my biggest problems is ignornace and I am honeslty happy when someone beats a little bit of that out of me, regardless of the subject material ;-)

My biggest fear is that a lot of design/code choices I have made with my NT apps may not be considered best practice. It's not from lack of wanting to do it right it's not knowing any better.

I hate cluttering up the forum here with my questions, particularly in light of the above mentioned ignorance and the fact it takes several back-and-forth replies on my part before the light turns on for me.

To continue with my example I've gone down this path on the total line. I had to go into the code to see what the field name was it was using for that particular column total and found the loc:total[7] array field. Because I wanted to keep all the other settings and just add my color CSS, I used FF to inspect the cell and saw the currently applied NT CSS and came up with this entry for that particualr cell.

CHOOSE(loc:total[7]<0,'nt-browse-table-footer RightJustify my-red','nt-browse-table-footer RightJustify')

Did I get it right or have I over complicated the matter?

While we're at it, can CSS be used in this case to add the $ currecny symbol to this cell only? There is only one palce for a picture entry in the templates but I would only want to see the $ on the total line.

Thanks again.

Parker

[Bruce]

I should also have pointed out that classes like red and black exist already. So you can, if you like just use those in your Choose statement. The following are all defined;

.black{color: #000000!important;}
.maroon{color: #800000!important;}
.green{color: #008000!important;}
.olive{color: #808000!important;}
.orange{color: #FF8000!important;}
.navy{color: #000080!important;}
.purple{color: #800080!important;}
.teal{color: #008080!important;}
.gray{color: #808080!important;}
.silver{color: #C0C0C0!important;}
.red{color: #FF0000!important;}
.lime{color: #00FF00!important;}
.yellow{color: #FFFF00!important;}
.blue{color: #0000FF!important;}
.fuchsia{color: #FF00FF!important;}
.aqua{color: #00FFFF!important;}
.white{color: #FFFFFF!important;}

cheers
Bruce

[Bruce]

>> I hate cluttering up the forum here with my questions, particularly in light of the above mentioned ignorance and the fact it takes several back-and-forth replies on my part before the light turns on for me.

the forum isn't paid for by the post, so there's no limit on the number of questions you can ask. And I think there are a lot of folk happy to answer questions.

>>  I had to go into the code

Looking at the coide is _never_ a bad idea!

>> CHOOSE(loc:total[7]<0,'nt-browse-table-footer RightJustify my-red','nt-browse-table-footer RightJustify')
>> Did I get it right or have I over complicated the matter?

looks just fine to me.

>> While we're at it, can CSS be used in this case to add the $ currency symbol to this cell only?

no, I don't think so. Well maybe it can, but that would be quite advanced CSS. I'd have to experiment quite a bit myself to make that work. Hint to those feeling adventurous - read up on the :before and :after CSS elements.

>> There is only one place for a picture entry in the templates but I would only want to see the $ on the total line.

The template assumes the same pic for the column, and the result - but maybe I can be a bit creative with the CSS.

cheers
Bruce

[bruce2]

ok, add this to your custom classes;

.currency:before{
  content: "$"; 
  float:left;     
}

then add currency to the list of classes attached to the total.

hint: it won't make the column wider, so if you need to make the column wider by making the header longer, or setting a min-width for the header etc.

cheers
BRuce

[JPMacDonald]

Bruce,

You went above and beyond the call of duty on this, neat CSS trick, lots to play with there.

I forgot to ask, in one of the previous posts to this thread you said "... maybe you might change your mind if you could see what's coming."

Did you mean in the next version of CSS/HTML5 or Nettalk?

Regards

Parker