Tuesday, October 13, 2009

A question on formatting Text in XPages

I have an XPage and on that XPage is a table and within that Table is a Computed field containing the formula:
@DbLookup(@DbName(),"LKRegion","South","Area")+ "\n" +
@DbLookup(@DbName(),"LKRegion","South","Population")+ "\n" +
@DbLookup(@DbName(),"LKRegion","South","Value")
I'm getting out the values that I want, but the line spacing between those values is set too high - looks like 1.5 lines above and beneath each line. eg

170 sq km

470,000

>30 million

I would prefer to see it displayed as :

170 sq km
470,000
>30 million

In Notes I would go to the properties box and change the line spacing but I can't see how to do it in Xpages. I'm not using any Style sheets in this application and all of the style-related Margin/Padding/etc settings are on 'Auto'. Could some kind guru tell me where to find the line spacing setting or do I need to find a clever way to do it in Javascript?

It would also be good to change some of the text attributes depending on the calculated values eg change the 'Value' color to red if greater than $50 million.

170 sq km
470,000
>60 million

I could do it in Notes by preformatting the individual results and then using Lotusscript to concatenate them and then paste them into a Rich Text field, but I think it might be beyond Javascript.
.

4 comments:

Patpicos said...

Re: changing the color of some text based on the value, have a look at http://xpagesblog.com/xpages-blog/2009/9/23/coloring-specific-view-rows-using-a-dynamic-table-and-css-in.html
It should give you an idea

Patpicos said...

http://dominoextnd.blogspot.com/2009/10/xpages-alternate-view-row-colors-made.html is another source explaing another way

Patpicos said...

re: line-height, see the following CSS resource
http://technopedia.info/tech/2006/04/10/text-tricks-in-css.html

The parameter you are looking for is .doublespaced { line-height: 1.5; }

So place the output of your @DBLookup's in a div section and add the class to the attributes

Jeremy Hodge said...

I would suggest a change in method. Create a repeat control, change the Data Binding to Advanced, and use the folowing code:

var myVals = new Array();
myVals.concat(@DbLookup(@DbName(),"LKRegion","South","Area"),@DbLookup(@DbName(),"LKRegion","South","Population"), @DbLookup(@DbName(),"LKRegion","South","Value"))
return myVals

That will create a repeat control with the values of your three dbLookups as the repeat source. Then you can assign the Collection and Index variable, and inside the repeat control add your Computed Text field. From there, you can process each value independently for formatting (ie, color, newlines, etc)...

BTW, you are getting the extra spaces because you are specifically adding a new line (+ "\n" +) in between your values... its not a css issue...