Documentation

Tutorial - Creating a portlet to display user birthdays

Tutorial - Creating a portlet to display user birthdays

In this example, we are going to write a ThoughtFarmer custom portlet that will display users' birthdays for the current month. The portlet will display on the homepage 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 portlet:

Navigate to the portlet authoring screen

First, navigate to the Administration panelCustom portlets section > Create or edit portlets page. On that page click the Create portlet 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 portlet 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.
 

<div class="portlet simple-portlet">
    <div class="portlet-content clearfix">
        <h4 style="background: url(http://p.yusukekamiyamane.com/icons/search/fugue/icons/present.png) no-repeat 0 50%;" class="padding-left-21">@DateTime.Now.ToString("MMMM") Birthdays</h4>
        <ul> 
        @if (result.ToList().Count > 0)
        { 
          foreach (var user in result)
          {
              <li class="margin-bottom-5">
                  <a href="/content/@user.ContentId" class="font-12 block">@user.FirstName @user.LastName</a>
                  @BirthdayDayOfTheWeek(user.Birthday.Day, user.Birthday.Month) @AppendDaySuffix(user.Birthday.Day)
              </li> 
          } 
        } 
        else
        { 
          <li>There are no birthdays for this month. If you would like your birthday to appear here please update the birthday field on your profile.</li>
        }
        </ul>
    </div>
</div>

Putting it all together, we have the full birthday custom portlet.
@using OpenRoad.ThoughtFarmer.Core.Extensions
@using OpenRoad.ThoughtFarmer.Core.Content

@functions {

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

} 

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

} 

} @{ var result = this.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"); }

<div class="portlet simple-portlet"> <div class="portlet-content clearfix"> <h4 style="background: url(http://p.yusukekamiyamane.com/icons/search/fugue/icons/present.png) no-repeat 0 50%;padding-left: 21px;">@DateTime.Now.ToString("MMMM") Birthdays</h4> <ul> @if(result.ToList().Count > 0) { foreach(var user in result) { <li class="margin-bottom-5"><a href="/content/@user.ContentId" class="font-12 block">@user.FirstName @user.LastName</a> @BirthdayDayOfTheWeek(user.Birthday.Day, user.Birthday.Month) @AppendDaySuffix(user.Birthday.Day) </li> } } else { <li>There are no birthdays for this month. If you would like your birthday to appear here please update the birthday field on your profile.</li> } </ul> </div> </div>

Save and add your portlet

Once you have added the necessary code in the editor, click the Save button. Now that the portlet is saved into your list of portlet templates, you can add it to your intranet. Go to the Administration panelCustom portlets section > Manage portlets on the intranet page. Once this page loads, click the Add portlet button. This will bring up the Add portlet dialog.


The settings in this dialog allow you to control where and to whom the dialog appears. Changing the Page type field to Home page and the Page location field to Left column will make this portlet appear on the home page in the left hand column. The default setting for adding portlets is that they are visible to all users who can view the page they appear on, but that can be changed to hide the portlet or just show it to administrators. Once you have the correct settings on the page, click OK and the portlet will now be added to the home page.