Learn how Scrivito CMS can help you deliver amazing digital experiences
See Scrivito CMS in action

Flagging New Pages in Navigations

Flagging New Pages in Navigations

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 important 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 child navigation widget we built a while ago to shine a light on the general principle of creating hierarchy-based navigations.

So, to follow along, we recommend to first go through Building a Child Navigation Widget, 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 section, this one is based on the Scrivito Example App, too.

How to render navigations

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:

<Scrivito.ChildListTag />

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. All this can be seen in the above-mentioned article.

Before extending the rendering method, let’s spend a moment on the approach we are going to take.

When is a page new?

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

But how do we determine the creation date of a page in order to compute its age? All we need to do is to query the _createdAt attribute every CMS object is equipped with using the createdAt instance method. We can then use the value of this attribute in the ChildListTag’s rendering method we’ll refine here.

Rendering the “new” flag

Now that we’re able to determine the date at which a page was created, we can render something based on this date. For this, we’ll delegate the rendering of the child objects, which is usually done by the Scrivito.ChildListTag component, to a function, renderChild. We’ve added to the return value of renderChild a call to a new function for rendering the flag, newFlag, which we’ve provided below:

<Scrivito.ChildListTag tag='ul' className='page-list' parent={ parentPage } renderChild={ renderChild } /> // … function renderChild(child) { let className = ''; if (child.id() === Scrivito.currentPage().id()) { className = 'strong'; } return ( <li className={ `fa fa-caret-right ${className}` } > <Scrivito.LinkTag to={ child }> { child.get('title') } </Scrivito.LinkTag> { newFlag(child) } </li> ); } const currentDate = Date.now(); const fortnight = 1000 * 60 * 60 * 24 * 14; function newFlag(child) { const createdAt = child.createdAt(); if (createdAt && currentDate - createdAt < fortnight) { return ( <i className="fa fa-star fa-1x small initialism"> new</i> ); } }

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.

Note that 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!

Want more?

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.