Documentation

Tutorial - Creating a card to display user birthdays

Tutorial - Creating a card to display user birthdays

In this example, we are going to write a ThoughtFarmer custom card that will display users' birthdays for the current month. Please keep in mind that there is already a default Birthday card available. This tutorial is based on that card to show you the principles of the code involved to create and potentially extend it.

The card will be able to display in any side column of the site, and will be styled using the default simple portlet style based on your Theme configuration. It will display the month, followed by a list of users' names and birthdays. The user's name, when clicked, will take you to their profile.

The image below shows the finished product of our custom card:

birthdays.png
 

Navigate to the portlet authoring screen

First, navigate to the Administration panel > User interface section > Manage cards page. On that page click the Create page template card button

Add code to the portlet editor

The first thing to do is to give the portlet a name, to do that type "Birthdays" into the Name field.

Now, under the Server (C#) tab, we are going to add some code. To begin, we need to add some supporting functions to assist us in rendering our users' birthdays. Based on coding conventions, we are going to add a @functions section at the top of our editor.
 

@functions {
    string AppendDaySuffix(int day) 
    {
        string daySuffix = "";
        if (day == 1 || day == 21 || day == 31)
            daySuffix = "st";
        else if (day == 2 || day == 22)
            daySuffix = "nd";
        else if (day == 3 || day == 23)
            daySuffix = "rd";
        else daySuffix = "th";
        return (day + daySuffix);
    }

    string BirthdayDayOfTheWeek(int day, int month) { var year = DateTime.Now.Year; var dateThisYear = new DateTime(year, month, day); return dateThisYear.ToString("dddd, MMMM ");

} 

}

Next, we need to add some code to retrieve our users.

@{
    var result = Query.Run<dynamic>("select u.ContentId, FirstName, LastName, Birthday from [user] u inner join content c on u.contentid = c.contentid where c.deleted = 0 and u.isactive = 1 and u.BirthdayDisplay <> 3 and month(birthday) = month(getutcdate()) order by day(birthday) asc"); 
}


This code will query the database using the Query helper. The result is a dynamic object that contains the fields specified in the select statement, specifically ContentId, FirstName, LastName, and Birthday.

We then need to add some HTML to make our card render out the result of our query in a way that matches our intranet's interface. To do this, we will use some of the built-in CSS classes used by ThoughtFarmer. Please note that all cards when added to a page will be wrapped by a div with the class tf-portlet.
 

<h1 class="tf-portlet-heading">
  <span>@DateTime.Now.ToString("MMMM") Birthdays</span>
  <i class="tf-portlet-icon fa fa-birthday-cake"></i>
</h1>

@if (result.ToList().Count > 0) {

foreach (var user in result)
{
  &lt;span class=&quot;<span style="color:#FF0000;">tf-birthday-link</span>&quot;&gt;
    &lt;a href=&quot;/content/@user.ContentId&quot;&gt;@user.FirstName @user.LastName&lt;/a&gt;&lt;br&gt;
    @BirthdayDayOfTheWeek(user.Birthday.Day, user.Birthday.Month) @AppendDaySuffix(user.Birthday.Day)
  &lt;/span&gt; 
} 

} else { <div>There are no birthdays for this month. If you would like your birthday to appear here please update the birthday field on your profile.</div> }


Along with ThoughtFarmer default classes we added the class tf-birthday-link. This allows us to add custom CSS on the Styling (CSS) tab that will be rendered along with our custom portlet. Go to that tab and add the following:

.tf-birthday-link {
  display: inline-block;
  font-size: 1em;
  margin-bottom: 5px;
}

Save and activate your card

Once you have added the necessary code in the editor, click the Save button. Now that the card is saved into your list of page template cards, you can activate the card and modify who is able to add it to page templates on the Manage cards page.