Help with custom query display

[Gabbitas]

Hi guys,

Wonder if anyone can help me with this....

Imagine having a custom display of a query. That query displays staff records and attributes of name, age, gender. I know how to create a custom template to display these records with the attributes displayed as I would like and I can also define a container that has a background colour by assigning a css class to the container inside the data template so everything looks pretty.....

But what if I want to give the background a different colour based on the staff members gender? I want boys to have a blue background and girls to have pink. How can I assign a different css class inside the template based on an attribute of the record being displayed?

Thanks in advance

[customaware]

it may not be the most elegant way to do it but this is how I have done it.

You have an Attribute in the BO called Gender which will be either Male or Female.

You have two css classes....

.genderMale{
background-color: blue; (add your desired color code)
}
.genderFemale{
background-color: pink; (add your desired color code)
}

In your custom query html

<div class="gender{Gender}"> blah blah... Where Gender is the Attribute name.

So, depending on the data of each record, it will translate to either...

<div class="genderFemale"> blah blah...
or
<div class="genderMale"> blah blah...

[pureist]

In fact, Mark's way might be the most elegant way as it results in less CQ Template script, with the only compromise being that you might (but most likely not) need to use Class Name's which might not be consistent with your Class naming convention.

Another way to achieve it is to use a Kendo UI Hash Template in the CQ Template, which exist for exactly this purpose, which provide If, Else If, Else output control as detailed in the below post:

https://www.awareim.com/forum/viewtopic ... 455#p42455

I'd say that a hybrid of Mark's way in conjunction with a Kendo Ui Hash Template will be best - use the Hash Template to resolve the appropriate Class Name based on the Value in the Gender field ..

if gender = male then class_name_if_male
else class_name_if_female

..this way your class names can be consistent with your class naming convention.

AND .. you can use the Hash Template to "cheat" and not create classes just for this minor output pattern, by using the Hash Template to specify the different background colors for male and female in the CQ Template directly.

[idpSteve]

I do something similar to this for a custom query that displays some time slots that can be booked. I have an attribute (color) which is set when the booking status is changed. This attribute is a color name (blue/pink). In my custom query I have added to the div style background:{color};

What I'd suggest is add to your staff member an attribute that is set when gender is changed and has the value of the color you want the background to be.

I'm having a different issue, so perhaps rather than making a new topic I can ask here since it's related:

I'd like a background color to be different if this time slot is booked by a logged in user. Can this be done?

I've tried <<IF LoggedInRegularUser IN TimeSlot.RegUser Then SHOW SECTION START>> some text here <<SECTION_END>> and this doesn't seem to be working at all. I figured if I could get it to work with some random text in the section I'd be able to put some background stuff there and it should work too. It doesn't matter what I make the parameters in the IF statement it doesn't work. (ie. IF TimeSlot.StartTime='10:00' doesn't work either.)

[Jaymer]

steve
1) i'd say you need to check the log and see if
..a) the expression is being checked
..b) what the result of the LIRU condition

at least know that the code being checked and see if one of the operands is not what you expect.

I spent HOURS on this issue here 6 months ago in v7:
https://www.awareim.com/forum/viewtopic.php?f=1&t=9429

jaymer...

[aware_support]

You can use Javascript in your custom query templates. Javascript code must be enclosed in hashtag symbols and you can reference data using the following expression data["AttributeName"].

So if your query displays attributes of the Staff object and one of the attributes is Gender and another is Name you can do this:

# if(data["Gender") == "M") { #
<div class="Male">{Name}</div>
# } else { #
<div class="Female">{Name}</div>
# } #

[BLOMASKY]

<div class="freshQuotesFlex" >
# if( data["daysOld"] > 14 ) { #
<span class="redBold">
# } #
# if ( data["daysOld"] > 6 && data["daysOld"] <= 14 ) { #
<span class="yellowBold">
# } #
# if ( data["daysOld"] <= 6 ) { #
<span class="greenBold">
# } #

<div class="freshQuotesAge">{age}</div>
</span>

[Gabbitas]

Thanks everyone for your help on this one. I'm going down the hash template route as this will allow me to do some cool things with my queries!

Cheers

[pureist]

but, if you want to structure it in the most efficient way, instead of 3 "if's" (2 of which in the previous post are evaluated unnecessarily, in addition to the middle one having a superfluous 2nd clause), you would use if, else if, else;

<div class="freshQuotesFlex" >

# if( data["daysOld"] > 14 ) { # <span class="redBold"> # }
else if ( data["daysOld"] > 6 ) { # <span class="yellowBold"> # }
else { # <span class="greenBold"> # }
#

<div class="freshQuotesAge">{age}</div>
</span>

..
..

</div>