Xpage and dynamic classname of view-TR

hcl-bot · October 6, 2009, 1:46am

Hi,

My goal is to put up a nice looking auto-refreshing web page of documents of a view.

First thought was RSS, then just a HTML view and then I looked at XPage and that could be the right thing to use.

Setting up the view in an Xpage was easy. But there is 2 things I don’t know how to do.

Problem #1

Based on a datefield in the view I want the style class of the TR to change.

The goal is that the linecolor on the page should represent how many days until deadline there is.

Best solution for this, or other alternative to be able to highlight some values based on the date.

Problem #2

I need the page to autorefresh ever 30 seconds

Should be easy to solve?

~Johannes

hcl-bot · October 6, 2009, 3:11am

Subject: Re: Xpage and dynamic classname of view-TR

With regard to the dynamic styling, that’s an easy one. I presume that since you’re using tr, you’re using a repeat control. Within the code for your repeat control you’ll be specifying the variable for each row (as ‘var’), e.g.

<xp:repeat var=“reportDoc” rows=“30” indexVar=“reportCount” id=“repeat1”>

Now you have a handle on the content for each row of the data, so you can compute the styleClass property of the tr to whatever you want. Your script is going to be quite complicated, because for performance reasons it’s best to do your calculation in the XPage rather than as a column in your view. But you can use getItemValueDateTime to get the deadline from your document.

I haven’t used it to do different row colours based on dates, but have used it to change the font colour of a row based on comparison of a number in my document, to do alternate row colours etc.

hcl-bot · October 6, 2009, 6:36am

Subject: Page Refresh

I thought I’d seen something on page refreshing recently. Does this answer things?

http://iqjam.net/iqjam/iqjam.nsf/questions/20090928_How_do_I_do_an_automatic_parti.htm

hcl-bot · October 6, 2009, 4:32am

Subject: One solved, one to go

Thanks, solved partly the colorcoding.Texts now colorcoded, tried to set “styleClass” on column to get it on -tag but that did not seems to work. “style” works but not “styleClass”. That’s minor.

Still left to solve is to get the page to auto-refresh.

I will continue experiment on my own until I figure it out.

hcl-bot · October 6, 2009, 8:34am

Subject: 2 half-solutions

Solved the Javascript refresh (the hard part is figuring out how to modify the code so the JS-code is written out correctly. With some trial and error I finaly found out how its done).

I have 2 alternatives in the example below.

Using “dataTable”

– Missing here is Columnheaders…

Using “viewPanel”

– Missing here is to set the row or text class to the view field called “colorCode” (done in the dataTable view but can’t figure out how to do the same in a viewPanel).

Code:

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp=“http://www.ibm.com/xsp/core” rendered=“true”>

<xp:this.data>

	<xp:dominoView viewName="vHighlight" var="iFokus"></xp:dominoView>

	<xp:dominoView var="vHighlight" viewName="vHighlight"></xp:dominoView>

</xp:this.data>



<xp:this.resources>

	<xp:styleSheet href="/iFokus.css"></xp:styleSheet>



	<xp:script clientSide="true" type="text/javascript"

		rendered="true">

		<xp:this.contents><![CDATA[function timedRefresh(timeoutPeriod) {setTimeout("location.reload(true);",timeoutPeriod); } dojo.addOnLoad(timedRefresh(30000));]]></xp:this.contents>

	</xp:script>

</xp:this.resources>

<xp:span style="font-family:Sylfaen,serif;font-size:24pt">

	</xp:span><xp:br></xp:br><xp:span style="font-family:Sylfaen,serif;font-size:24pt">Put some light on me....

</xp:span>

<xp:br style="font-family:Sylfaen,serif;font-size:24pt"></xp:br>

<xp:br></xp:br>





<!--  trying dataTable, here there is no column headers.. -->



<xp:dataTable rows="15" id="lightTable" value="#{iFokus}"

	var="lightCollection" style="border-color:rgb(255,255,255)" rendered="false">

	<xp:column id="column3">

		<xp:text escape="true" id="computedField1"

			value="#{lightCollection.IssueNr}"

			styleClass="#{lightCollection.colorCode}">

		</xp:text>

	</xp:column>

	<xp:column id="column4">

		<xp:text escape="true" id="computedField2"

			value="#{lightCollection.Rubrik}"

			styleClass="#{lightCollection.colorCode}">

		</xp:text>

	</xp:column>

	<xp:column id="column5"

		styleClass="#{lightCollection.colorCode}">

		<xp:text escape="true" id="computedField3"

			value="#{lightCollection.Deadline}">

			<xp:this.converter>

				<xp:convertNumber type="number"

					integerOnly="true">

				</xp:convertNumber>

			</xp:this.converter>

		</xp:text>

	</xp:column>

	<xp:column id="column2"

		styleClass="#{lightCollection.colorCode}">

		<xp:text escape="true" id="computedField4"

			value="#{lightCollection.Kö}">

		</xp:text>

	</xp:column>

	<xp:column id="column1">

		<xp:text escape="true" id="computedField5"

			value="#{lightCollection.Tilldelad}"

			styleClass="#{lightCollection.colorCode}">

		</xp:text>

	</xp:column>

</xp:dataTable>

<xp:br></xp:br>



<!-- Trying viewPanel, Here I don't know how to get the styleClass for each row to be set to a view field called "colorCode -->





<xp:viewPanel rows="15" id="viewPanel1" showColumnHeader="true"

	var="varBulbs">

	<xp:this.facets>

		<xp:pager layout="Previous Group Next" xp:key="headerPager"

			id="pager1" rendered="false">

		</xp:pager>

	</xp:this.facets>

	<xp:this.data>

		<xp:dominoView var="vMyLights" viewName="vHighlight"></xp:dominoView>

	</xp:this.data>

	<xp:viewColumn id="viewColumn1" columnName="Deadline" styleClass="#{varBulbs.colorCode}">

		<xp:viewColumnHeader id="viewColumnHeader1"

			value="Deadline">

		</xp:viewColumnHeader>

	</xp:viewColumn>

	<xp:viewColumn columnName="Rubrik" id="viewColumn2">

		<xp:viewColumnHeader value="Rubrik"

			id="viewColumnHeader2">

		</xp:viewColumnHeader>

	</xp:viewColumn>

	<xp:viewColumn columnName="Kö" id="viewColumn3">

		<xp:viewColumnHeader value="Kö" id="viewColumnHeader3"></xp:viewColumnHeader>

	</xp:viewColumn>

	<xp:viewColumn id="viewColumn5" columnName="IssueNr">

		<xp:this.facets>

			<xp:viewColumnHeader xp:key="header"

				id="viewColumnHeader5" value="Ärende">

			</xp:viewColumnHeader>

		</xp:this.facets>

	</xp:viewColumn>

	<xp:viewColumn columnName="Tilldelad" id="viewColumn4">

		<xp:viewColumnHeader value="Tilldelad"

			id="viewColumnHeader4">

		</xp:viewColumnHeader>

	</xp:viewColumn>

</xp:viewPanel></xp:view>

hcl-bot · October 6, 2009, 9:14am

Subject: rowClasses

I don’t have time to check, but I read something earlier today about the rowClasses property of the viewPanel (this is under the All Properties area, along with a load of other goodies).

If you compute this to varBulbs.colorCode, does that work?

For info, here’s the link to Paul Hannan’s blog entry on alternate row colours http://www.bleedyellow.com/blogs/XPagesStuff/entry/styling_in_alternate_rows_on_a_xpages_data_table3?lang=en_gb. It works for data tables and view panels. If you’re using a repeat, Declan Sciolla-Lynch has an example: http://www.qtzar.com/blogs/qtzar.nsf/d6plinks/DSLH-7PMQD4

hcl-bot · October 7, 2009, 2:28am

Subject: Data not from current row

All examples as the 2 you are referring to is using data that is calculated on the fly to set the rowClass.

I need the current row-data to be used as class for that row.

This is what I tried now:

<xp:viewPanel rows=“15” id=“viewPanel1” showColumnHeader=“true”

	var="varBulbs" rowClasses="#{varBulbs.colorCode}">

And it will result in a rowClass from the colorCode column. But the same value is used for all rows.

Seems like the rowClass is taken from the first item and next row and never update itself from the row displaying.

So very close now…