Blog posts by Nicole Drath2024-09-25T14:34:05.0000000Zhttps://world.optimizely.com/blogs/nicole-drath/Optimizely WorldHow to write a bespoke notification management system<p>Websites can be the perfect vehicle for notifying customers of important information quickly, whether it’s the latest offer, an operational message, or an informative alert.</p>
<p>Customers are used to seeing these messages at the top of web pages and companies find it an invaluable way to communicate with website visitors.</p>
<p><img src="/link/6981845f0df04148a7d3a95622af5d47.aspx" width="1104" alt="Header" height="323" /></p>
<p>At Animal Friends Insurance, the company I work for, we already had rudimentary notification capability on our site. We wanted to take it a step further by classifying these messages red, amber or green and managing them in the CMS by building a bespoke notification management page. Here editors could manage the editing and expiring of notifications, and additionally see their publication status.</p>
<p>When deciding how to tackle this requirement, I made the decision early on that the most efficient way would be to create a notification block that used the inbuilt scheduling, publishing, and expiring of blocks and pages already provided by the CMS.</p>
<p>These blocks can be viewed, in their correct state, on the management page to give editors a simple overview.</p>
<p>First, I created a notification block, with all the attributes needed. Simple enough!</p>
<p><img src="/link/7429dd7b7d5545eba2ed658bc84913ca.aspx" width="556" alt="Notification Block" height="809" /></p>
<p>Next, I created a custom page that would be accessible from the Settings tab in the CMS backend. This page was divided into the following sections:</p>
<ul>
<li>Published</li>
<li>Not Published Yet</li>
<li>Scheduled</li>
<li>Expired</li>
</ul>
<p><img src="/link/9a6ba25e70e74b0a872e89c77c812626.aspx" width="1104" alt="Notification Management Page" height="570" /></p>
<p>I made use of Optimizely’s publishing flow to display the notifications in the correct place on the page.</p>
<h2>Published</h2>
<p>Once my test notification was created and published, I used IVersionable to get the published date, which also helped to decide where this notification should sit within the sections on the notification management page. </p>
<pre class="language-csharp"><code>public DateTime? GetStartPublishDateTime(ContentReference content)
{
var notificationBlock = _contentRepository.Get<NotificationBlock>(content);
var startPublishDate = (notificationBlock as IVersionable).StartPublish;
return startPublishDate;
}</code></pre>
<p><img src="/link/991de5607b1543e5a93c6f38ede846fe.aspx" width="1104" alt="Notification Management Page" height="496" /></p>
<p>As it appears at the top of the website.</p>
<p><img src="/link/06a59f8f73784f42b7382a9f17a12a78.aspx" width="1104" alt="" height="64" /></p>
<h2>Not Published Yet</h2>
<p>Whilst there is no specific attribute to be able to determine if content is scheduled to be published, it can be deduced by what it is not. My logic went something like this…</p>
<p>If the notification is not:</p>
<ul>
<li>Deleted</li>
<li>Published</li>
<li>Previously Published</li>
<li>Scheduled to be published</li>
</ul>
<p>then it must be unpublished.</p>
<p>With the exception of the ‘deleted’ state, I used the version status to find this information. So, for example, for ‘previously published’ the code looked like this:</p>
<pre class="language-csharp"><code>public static bool HasBeenPreviouslyPublished(ContentReference content)
{
if (content != null)
{
var contentVersion = ContentVersionRep.Load(content);
if (contentVersion != null)
{
if (contentVersion.Status == VersionStatus.PreviouslyPublished)
{
return true;
}
};
}
return false;
}</code></pre>
<p><img src="/link/102e192f561c4b658693b68c02e26c1d.aspx" width="1104" alt="Notification Management Page" height="419" /></p>
<h2>Scheduled</h2>
<p>To find out if a notification is scheduled to be published, I used the DelayPublishUntil attribute.</p>
<pre class="language-csharp"><code>public static DateTime? GetDelayPublishUntil(ContentReference content)
{
DateTime? delayPublishUntil = null;
if (content != null)
{
var contentVersion = ContentVersionRep.Load(content);
if (contentVersion != null)
{
delayPublishUntil = contentVersion.DelayPublishUntil;
}
}
return delayPublishUntil;
}
</code></pre>
<p><img src="/link/7fdf303a11a54e61aac472886f51ad52.aspx" width="1104" alt="Notification Management Page" height="547" /></p>
<h2>Expired/Removed</h2>
<p>To expire a notification, I first had to create a clone of the notification and then used the IVersionable class stopPublish function to expire the clone.</p>
<p>It’s important to note, you cannot expire the original block from the content repository, you must create a clone and then save and publish the cloned version with the new expired state.</p>
<pre class="language-csharp"><code>public void ExpireNotification(string contentRef)
{
var notificationBlock = _contentRepository.Get<NotificationBlock>(ContentReference.Parse(contentRef));
var notificationToExpire = notificationBlock.CreateWritableClone() as NotificationBlock;
(notificationToExpire as IVersionable).StopPublish = DateTime.Now;
_contentRepository.Save(notificationToExpire as IContent, SaveAction.Publish, AccessLevel.NoAccess);
} </code></pre>
<p><img src="/link/a8509d88e443486885ef598e7395708e.aspx" width="1104" alt="Notification Management Page" height="704" /></p>
<p>The final task was to add the notification management page to the CMS menu structure. This was done by extending the menu section using the [MenuProvider] decorator. Details of how to do this can be found here - <a href="https://docs.developers.optimizely.com/content-management-system/docs/adding-and-configuring-menu-items">Add and configure menu items (optimizely.com)</a> and would look something like the code below.</p>
<pre class="language-csharp"><code>public IEnumerable<MenuItem> GetMenuItems()
{
var notificationManagement = new UrlMenuItem(
"Notification Management",
MenuPaths.Global + "/cms/admin/notificationmanagementplugin",
$"/{ConfigurationConstants.BaseAdminUrl}/{ConfigurationConstants.CmsPath}/notificationmanagementplugin/index")
{
IsAvailable = _ => true,
SortIndex = 80,
AuthorizationPolicy = CmsPolicyNames.CmsAdmin
};
return new List<MenuItem>(1)
{
notificationManagement
};
}</code></pre>
<h2></h2>
<h2>Any Gotchas?</h2>
<p>Daylight savings! This work was completed before the clocks went forward in spring consequently, timestamps on the ‘published’ and ‘expired’ fields were showing the correct time. One of our eagle-eyed CMS admins noticed, however, in the summer that the timestamps on new notifications were out by an hour because the servers that host the website use UTC.</p>
<p>Of course, on my local version of the CMS the notification page showed the correct time because I run on Windows which uses ‘GMT Standard Time’, a Microsoft invention that works with daylight savings. However, since upgrading the CMS to version 12, the DXP servers are running on Linux which have no awareness of ‘GMT Standard Time’. So, to show the correct time, I added the following check: </p>
<pre class="language-csharp"><code>var timeZone = TimeZoneInfo.FindSystemTimeZoneById("Europe/London");
DateTime dt = dateTime.Value;
var isDaylightSaving = timeZone.IsDaylightSavingTime(dt);
if (isDaylightSaving)
{
dateTime = dt.AddHours(1);
}</code></pre>
<p>And there you have it, a fully working notification management system powered by the CMS. </p>2024-09-25T14:34:05.0000000ZBlog post