Monday, April 2, 2012

The making of - Part 1, Defining the content types.

This is going to be a series of blog posts, that will review the process of making the latest version of DevReach.Com. For the this version we are going to use Sitefinity latest version and exploit all of its features as much as we can. We are currently working together with Sitefinity Team and producing a lot of feedback for them, part of the features that we need will probably be part of the next release of the product.

DevReach is the premier developer conference for Microsoft technologies in Central and Eastern Europe. This is year is its sixth edition and Telerik as one of the organizers decided to remake the website from scratch using the latest products that the company offers.

In order to define the custom types we need, we are going to use the dynamic module builder introduced in Sitefinity 4.4. One of the most important modules that we are going to define is the "Speakers" module, which will manage the people that will take part in all the sessions. There is nothing too complicated here, most of the fields in this module are simple short text fields.

The one thing that worth mentioning is the conferenceissues field. This is a custom flat taxonomy that will created and it represents all the editions of DevReach. Once we have added a speaker to our database, if he is participating again next year, we only have to assign the respective conference issue taxon and the speaker will be shown on all the places where it's needed. This will also help us to easily show the speakers that attended previously and tease the audience about the next edition.

The next very important module that we had to create is the "Lectures" module. This one is a bit more complicated than the previous one. We have some additional custom taxonomies created:

  • Tracks - this shows which track the particular session is part of and help us to organize all the session in a more convenient schedule 
  • Halls - this one should be clear enough
  • Session Levels - defines the technical level assigned for this session according to the standard rating system. Users will be able to filter by this field in the public pages.
  • Technologies - stands for the topics that are going to be discussed in the session in question
  • Conference Issue - again, we assign in which conference edition this session took place or is going to take place. This way we will built a nice archive of all the lectures that have been part of the conference.
Some other fields that we need are of course: Start Time, End Time, Title and Description. We also need to boolean properties to mark the break sessions ( like coffee breaks, lunch breaks, etc.) and another to show the common session for all tracks ( like the keynotes and the closing session).

The trickiest part here is to make a relation between these to modules that we just created. We need to know, which speakers in which session are going to take part. To achieve this, we are going to use the new field type introduced in Sitefinity 5 - Array of GUIDs. Since, some session can be performed by more than one speakers we are using the Array of GUIDs, otherwise we would choose the GUID only. This field will keep the Speakers identifiers for every session, what we need to do manually though is to make a nice user experience for editing this field. So far, we did all of this only with working with the administration and without writing a single line of code, which is pretty awesome. We used the following blog post (Creating one to many relationships in dynamic modules) as a starting point for our field control for speakers and did some minor changes. In order to show the first and the last name of the speaker and search by them, we changed the RelatedItemsField.ascx file in the following manner:

<div id="selectorTag" style="display: none;" class="sfDesignerSelector sfFlatDialogSelector">
   <designers:ContentSelector ID="selector"  runat="server" 
          TitleText="Choose items" 
          SearchBoxTitleText="<%$Resources:Labels, NarrowByTypingTitleOrAuthorOrDate %>" 
          ListModeClientTemplate="<strong class='sfItemTitle'>{{FirstName}} {{LastName}}</strong>">

<ul id="selectedItemsList" data-bind="foreach: items">
         <span data-bind="text: FirstName"> </span> <span data-bind="text: LastName"> </span>
         <a href="#" class="remove">Remove</a>

Gotcha1: It seems that the data service used for retrieving the speakers (or what ever module you are using) returns the master records instead of the live one. Because of this, the wrong guids are saved in the database, this is already communicated to the product team and probably be fixed in one of the next versions.
Gotcha2: After adding this field control, you will no longer be able to edit the backend screens through the built-in interface (because of a "Specified method is not supported" exception). This will also be fixed, but until then, you'd better tweak your backend screens, before adding this Field Control.

In one of the next posts, we will try to reuse these field controls definitions, in some other modules. So far, we were dealing only with the backend and things are pretty simple and straightforward. All this sets the ground for a further customization and development. In the next post, I will show you how we customized the front end widgets that Sitefinity has generated for us in order to suit our needs.