Disclaimer: I've worked these things out for myself, they may not be the best way of doing it but they work and hopefully they might give you a nudge in the right direction.

If you know of a better way of doing this then feel free to drop a comment with your thoughts.

Displaying content in an Umbraco web page with a user set timeout

I swear this shouldn't have been as hard as I found it!

While designing and building a website for a local mountain bike shop, one of the requests was a notification bar to throw up messages like "Sorry we're closing early today" or something along those lines. To make it easier on the client I thought it would be good to add a time out using Umbracos date with time picker. Basic logic being if the current time has passed the time and date set in the picker then don't display the message.

Umbraco content notification bar to timeout

The red notification bar in question.


This is how I managed it (after several hours of banging my head on my desk)

I set up the properties I required in my DocType:

Notification bar properties inside Umbraco back office

And I created a partial to hold the notification bar because I want this to display on every page in the website.

@Html.Partial("hdrNotificationBar")

Then inside my partial I have:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@if (CurrentPage.HasValue("notificationBarMessage", recursive: true))
{
var homeNode = Umbraco.Content(1057);
var currentTime = DateTime.Now;
var timeout = homeNode.GetPropertyValue<DateTime>("notificationBarTimeout");
if (timeout < currentTime)
{ }
else
{
<div id="alert">
<img src="/images/icons/alert-white.png" alt="Important shop information">
@Umbraco.Field("notificationBarMessage", recursive: true)
</div>
}
}

There's a couple of odd things going on in there that I'm not too happy about, but it works. If the message field is blank, the notification bar isn't displayed. If the current time is beyond the time and date set in the date picker, then nothing is displayed.

So my client can type in a message and set it to cancel at a time when it no longer applies.


 Notes on the odd bits;

  1. var homeNode = Umbraco.Content(1057); I really don't like doing this, hard coding a specific node. Normally I store all global content on the home node (these tend to be smaller sites so that's usually easier than creating a whole global data node). Usually, I'd plop in recusrive: true but I could not get that working with all the other bits I needed.
  2. var timeout = homeNode.GetPropertyValue<DateTime>("notificationBarTimeout"); holy freaking hell this was a pain in the ass! *firmly places designer hat on head* From how I have this figured, if you pull that content out in the normal way, to plop it onto a page, it's an HTML string, where as @DateTime.Now is actual time data. The first being a string means you can't directly compare it to the latter, which means no if statements. And the whole world comes crumbling down around me.
    I really struggled to find a way around this. Most likely down to my lack of understanding but I found that .GetPropertyValue<DateTime>(""); in a forum somewhere (I've been through hundreds to get it) and that's pretty much what solved it.
  3. It's all inside the else {} which... doesn't seem to be a problem(?) it just looks funky in the code, and I can kind of see how to fix it, but its working, I don't want to break it, and I need to get this site finished.

If you can fix any of the above, or fancy educating me over a pint, drop me a comment below or an email.