Wouldn’t it be nice if you could draw your website visitor’s attention to articles your team has recently published, let’s say your latest case study or recently updated investor news?

With Scrivito you can! In this brief tutorial, we are going to show you how pages in a navigation can be flagged as new, based on the date they were created. For this, we will extend the subpage navigation widget we built a while ago to further explore the general principle of creating hierarchy-based navigations.

So, to follow along, we recommend to first go through Building a Widget for Subpage Navigations, and then come back here to learn how new items can be flagged. However, if you’re just interested in the details, read on.

Like all articles in this documentation section, this one is based on the Scrivito Example App, too.

For rendering navigations based on the page hierarchy, the Scrivito.ChildListTag helper component is available. By default, it renders a <ul> made up of <li> elements linking to the pages that can be found directly underneath the current page:

However, this component is highly flexible. It lets you pass in the object to use as the parent page as well as specify a method to be called for rendering the individual child pages, renderChild. All this can be seen in the above-mentioned article.

We are going to extend the rendering method, but let’s first spend a moment on the approach we are following here.

That’s a matter of definition, of course. In the code below, we’ll regard a page as new if it’s less than two weeks old.

But how can we determine the creation date of a page in order to compute its age? All we need to do is query the _createdAt attribute using the createdAt instance method every CMS object is equipped with. The value of this attribute allows us to compute the age of a page as an offset from the current date.

Now that we’re able to determine the date at which a page was created, we can extend the renderChild function. After rendering the link to a subpage, the newFlag function is now additionally called to have its return value rendered. It is this function that decides whether a page is new and flagged accordingly.

The purpose of newFlag is to return the markup for the flag if the child page passed to it is new, i.e. less than 14 days old in our case. To achieve this, the createdAt value of the passed-in child (if present) is subtracted from the currentDate, resulting in the child’s age, which must be less than 1000 * 60 * 60 * 24 * 14 milliseconds, the equivalent of a fortnight. If this is true, an <i> element representing our flag is returned.

As you can see, in the above code, we used a constant on the module level to store the current date. Had we used Date.now inside of the component, it wouldn’t be pure anymore.

We’re done!

Of course, you can style your flags the way you want it. You could style them even differently, depending on the parent page, for example. You could also make the icon and the flag’s text configurable.

How about changing the flag’s text to “updated” if the page isn’t new and the most recent change to it is less than a week ago? For things like this, CMS objects feature the lastChanged method you could use in the comparison.