Categories
Bloggers
Blogs RSS feed

Change the date portion of the Date/Owner column in Sitefintiy backend list of Pages to LastModified

by Boyan Barnev

Hi everyone,

Today's blog post was inspired by our active and creative community, and is a nice way to demonstrate how you can easily adapt the Sitefinity backend to suit your requirements with a couple of clicks.

 In the Sitefinity backend all list view (e.g. list of Pages, News, Dynamic Module items, etc.) are bound client-side using AJAX. We make a service call to retrieve the list of items and then populate the list views. The default columns you see the returned data are configured using definitions. This means that each column has its own logic and client template that allows it to bind to and display the value of a particular property form the objects returned by the service. In a nutshell this means that you can easily change the template or the logic that binds the column and make it behave as per your requirements.

A lot of our clients have expressed the desire to change the default behavior of the Date/Owner column in the list of Pages in the backend. A common requirement seems to be "I want the column to display the LastModified date instead of the DateCreated, since I'm more interested in this information". Sure, let's go ahead and show you how it can be done in a couple of steps.

As mentioned earlier, what you need to keep in mind, is that the list views are bound using AJAX, so they make a service call, and can display the returned data. In other words, if you are to stick with minimum modifications, i.e. simply changing the configuration values in Sitefinity backend you can display only the properties that are returned by the service's ViewModel. You can easily check which are these properties and their values by using web browser developer tools, for example FireBug, and inspect the response from the particular service call. Here's an example with the output from PagesService:

PagesServiceResponse

On the other hand extension scripts offer much broader scope for modifications, but require more development skills and JavaScript MS AJAX knowledge, so these are a topic for another discussion. If you are interested in the concept you can review some of the available resources we've published for extension scripts in the backend (blog post 1, blog post 2, blog post 3, blog post 4)

Now back on the current topic. As we mentioned earlier our goal is to change the value displayed in the Date/Owner column with minimum development effort. By default Sitefinity binds the data value in the Date/Owner column using the DateCreated property of the page. In the ViewModel returned from the PagesService you can find two additional dates available as child properties under the PageLifecycleStatus property - LastModified, and PublicationDate.

PagesViewModelProps

Step 1 - tell the column to use different property value

Let's take PageLifecycleStatus.LastModified for example.
You can go to Sitefinity Backend -> Administration->Settings->Advanced->ContentView->Controls->FrontendPages->Views->FrontendPagesListView -> ViewModes ->TreeTable -> Columns -> DateOwner

In the list of of properties on the right-hand side of the screen change the ClientTemplate property value from:

<span>{{ (DateCreated) ? DateCreated.sitefinityLocaleFormat('dd MMM, yyyy hh:mm') : '-' }}</span>                                   <span class='sfLine'>{{Owner ? Owner : ''}}</span>

to:

<span>{{ (PageLifecycleStatus && PageLifecycleStatus.LastModified) ? PageLifecycleStatus.LastModified.sitefinityLocaleFormat('dd MMM, yyyy hh:mm') : '-' }}</span>                                   <span class='sfLine'>{{Owner ? Owner : ''}}</span>

DateOwnerColumnClientTemplate 

Click on Save Changes and you're done - the Date/Owner column for Pages list view will now display the LastModified date of your page data instead of the DateCreated value.

Step 2 (optional) - Change the column label text

If you want to change the label of the column, this is also easily achievable - it's actually a localized resource which you can manage from the Sitefinity Backend -> Administration -> Labels&Messages. Use the Search to find a match for the DateOwner resource. Since it's used in multiple places around the system, please edit the one that says Used in: Labels. Once you change its value to the desired label text, please keep in mind that Sitefinity caches the localized resources on system start up for performance optimization. You might need to restart your website in order for the changed label to take effect.

Step 3 (optional) - apply CSS to adjust the label letter spacing

Last but not least, if the label text you've come up with is a bit longer that the default "Date/Owner" you might get a bit of overlap witht he neighboring Analytics label. You can easily fix that with some CSS that you can put on the Pages backend page. Just go to Sitefinity Backend ->Administration->Backend Pages, and edit the pages backend page. Put a CSS widget on the page (Scripts adn Styles ->CSS from he widgets toolbox on the right) and writhe the following CSS to change the letter spacing from the default 1px to 0px:

ul.sfTreeTableHeader .sfHeaderColumn
{
  letter-spacing:0;
}

Save the widget, publish the page and you're done.

I hope you found the above information useful. Please keep in touch by following our Developer Network resources for more insight about the Sitefinity features and how they can make your life easier.

2 comments

Leave a comment
  1. Sean Molam Aug 19, 2014

    Great article Boyan!

    However there is a slight bug in your sample to use LastModified, it doesn't take into consideration Redirect pages that don't have a PageLifecycleStatus property so your sample will fail with a blank grid, so can I suggest and improvement to check if PageLifecycleStatus is not null (I would paste a sample but my paste is being blocked in this comments box).

  2. matt Sep 16, 2014
    Is it possible to also get LastModifiedBy there?

    Leave a comment