Date Format, Null or empty values

I want to display an empty box if no date is available, but I want to format it when the date is available.
If I use: if (isnull({value}), '', {value}) with no formatting, I get an empty box, but if I use this: if(isnull({value}), '', dateformat({value}, 'YYYY MM d')) then I get 1970 12 31.

I tried using empty quotes in the expression as well, same results. Not sure what to try next.


"Empty box" isn't a Perspective component. Do you mean blank "label" or some other component?

  1. Where is {value} coming from? Is it a timestamp?
  2. What does the Edit Binding dialog Preview (bottom left corner) show is the incoming value?

Well, by "empty box" I mean both a blank label and blank text field. {value} is coming from a date field in SQL Server.

This is the expression binding on the object to which it is bound:
try({view.custom.arr_Item_Req_Data}[0, 'createdAt'], '')

It looks like you have an empty string coming from the database - not a null. (See the incoming "Property" value at the bottom is blank rather than "null".) That suggests that either your database column's type is not what you think or the query is returning a string rather than a date.

You can debug by commenting out your expression (// in front of expression) and replace it with the typeOf function and see what the binding preview Expression reveals.

If you can't fix the database then try checking for an empty string,
if({value} = '', '', dateformat({value}, 'YYYY MM d'))

Aha! I like that typeOf function. I determined that the only time I am getting an empty string is when I want to add a new record to the DB, and not reading data from the DB...

So, with that in mind, the next step is to write an expression that can handle an empty string - which will leave the props.text empty, and a NULL value - which will also leave the props.text empty. Would a try...catch work or some sort of switch/case statement? Not sure if either of those are valid in the expression language. Well, I see that case can be used, BUT:

	NULL, '',
	'', '')

This doesn't work.

So, the solution becomes:

if(isnull({value}), '', 
	if({value} = '', '', dateformat({value}, 'YYYY MM d')))

Super easy, barely an inconvenience! Thank you, my electronic friend!

Follow up:
In a text box, where I want a user to enter a date, how can I format that as something like YYYY MMM d and still allow it to be bidirectional? As soon as I add any transform, I no longer have the bidirectional option.

Update: I added the expression transform above to the custom.prop to which the component is bound, and the date is displayed correctly...for now. Next step: test the user input.

Use a datepicker component. There are too many ways a user can mess it up otherwise. Bi-directional binding is then trivially simple.

1 Like