some tricks in a custom query template (in a grid) or in a HTML cell on a form

To reformat a date field. Can be used in a custom layout for a combo box, per How can I format a Date in a HTML custom layout template?

# var d = kendo.parseDate (data["NameOfYourDateOrTimestampAttribute"], "MM/dd/yyyy HH:mm"); #
# var s = kendo.toString (d, "MMM dd yyyy"); #
<span>
#= s #
</span>

To suppress UNDEFINED in a custom layout (this simply omits the field), per WORKAROUND! Query custom display settings {attribute} value

# if (data["theAwareField"]){ #
<span class="text-primary">{theAwareField}</span>
# } #

Or use an else statement to print something else

# if (data["theAwareField"]){ #
<span class="text-primary">{theAwareField}</span>
# } else { #
<span class="text-primary">No Value</span>
# } #

Conditional Colors in Custom Query, per Help with custom query display (comment)
example 1 - color a person's name blue or pink based on gender

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

example 2 - conditionally color the invoice AGE field based on daysOld field

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

Perhaps there are multiple phone fields. Print a phone if it exists:
Phones:

# if( Phone1.data != 'null') { # 
{Phone1}
#} # 
# if( Phone2.data != 'null') { # 
{Phone2}
#} # 

another example (SEE NOTE FOR V9)

# if(data["Email"] != undefined) { # <div class='licinfo-email'>Email: {Email}</div> #} # 
# if(data["Email"] == undefined) { # <div class='licinfo-email-missing'>No Email on File</div> #} #

NOTE: It was reported by Joben in April 2024 that the above syntax stopped working after upgrade to v9.
Code was changed to this:

# if(data["Email"] != "") { #	<div>{Email}</div> # } #
# if(data["Email"] == "") { #	<div>No Email on File</div>  # } #

--> jaymerTip

2 years later

An example of a mobile form with jquery to

  1. conditionally change the css on a section (to change color) the pd-ticket class is the base color. IF it has NOT been acknowledged yet, then it adds the 2nd class "need-ack" to change color
  2. reformat the date to ONLY a time Extra steps, but its the only way to do this. By default it uses the format of the attribute and I only want the time, because all pickups are for TODAY.
  3. Show Checkmark for completed Pickup

Screen Shot 2021-01-26 at 8.32.58 PM.png

# if(data["DateAck"] != undefined)  { # 
<div class="pd-ticket">
# } else { #
<div class="pd-ticket need-ack">
# } #
<div class="pd-ticket-wrapper">
 <div class="pd-ticket-details">
  <div class="pd-time">  #= kendo.toString(kendo.parseDate(data["StartTime"], "MM/dd/yyyy HH:mm"), "HH:mm") # &nbsp
 # if(data["ClosedYN"] == "Yes") { # <span <i class="fa fa-check w3-green"></i>  </span> #} # </div>
  <div class="pd-custname">{sc_Cust}</div>
  <div class="pd-descr">{Description}, </div>
 </div>
</div>
</div>

Screen shot:
Screen Shot 2021-01-28 at 6.02.26 PM.png

thx guys, realized I hadn't posted the screenshot. Thats helps a bit!

a year later

Jaymer, that looks nice.

I want to do something similar, by having a button/link show up or not based on the value of an attribute.

My current custom template is pretty basic...

<div class="k-card" style="width: 550px;"><div class="k-card-header"><h5 class="k-card-title">{NotificationTitle}</h5></div> 
 
<div class="k-card-body"> 
 
<table>
<tbody>
<tr><td>Source::</td><td>{Source}</td></tr>
<tr><td>ID:</td><td>{SourceRecordID}</td></tr>
<tr><td>Date:</td><td>{Date}</td></tr>
<tr><td>Employee:</td><td>{scNotificationForEmployee}</td></tr>
<tr><td>Created By:</td><td>{scNotificationCreatedBy}</td>
</tr><tr><td>Status:</td><td>{Status}</td></tr>
</tbody>
</table>

</div> 
 
<div class="k-card-actions k-card-actions-start">

<span class="aw-card-action" oper-operand="Main" oper-output="Default" oper-type="5">
<span class="k-button k-primary k-flat">Edit Notification</span></span>

<span class="aw-card-action" oper-operand="ClearNotification" oper-output="Default" oper-type="0">
<span class="k-button k-primary k-flat">Clear Notification</span></span>

</div>

</div>

<span class="aw-card-action" oper-operand="ClearNotification" oper-output="Default" oper-type="0">
<span class="k-button k-primary k-flat">Clear Notification</span></span>
is where I want to put a condition that says something to the effect of...

# if(data["Status"] = "New")  { # 
<span class="aw-card-action" oper-operand="ClearNotification" oper-output="Default" oper-type="0">
<span class="k-button k-primary k-flat">Clear Notification</span></span>
# } #

I tried putting it in that way but it doesn't work.

Any idea where I am off? Or is what I want to do even possible?

Never mind.

I just needed to change the condition to '=='.

It works now.

Jim

3 years later