Have you ever been given a technical challenge that just seemed to interesting to pass up? This past weekend I was asked the question about extending the blog module to add an author biography to the footer of the blog post. The gist of the question was how could we do this without causing problems on upgrade. Since I always like a good challenge, I thought this would be a good opportunity to also show how a little creativity will allow you to solve many of the challenges that you face in DotNetNuke.
I have felt for a while that the DotNetNuke blog module was quite capable, but needed a few helper modules to give it a boost. This is a perfect showcase on how to extend a module without actually changing the module or any of it’s data. I also thought this would be a good opportunity to learn a few new techniques so I included the use of the new jQuery Templates which were added in jQuery 1.4.3, but which are also available as a separate download.
The first step in developing the module was to figure out how I was going to change the blog entry view. In looking at the HTML which was generated you can see the general structure of a blog entry. There is a couple of elements above the entry to display things like the title, date and author, and then a few elements below the entry to display the footer, sharebadge and comments.
<div class="BlogBody">
<div class="BlogHead"></div>
<acronym class="BlogPublished"></acronym>
<p class="BlogSubHead"></p>
<div class="HorizontalLine"></div>
<!-- Blog Entry -->
<div class="BlogFooter"></div>
<div id="ShareBadgePRO_Toolbar" class="ShareBadgePRO_Toolbar"></div>
<!-- Comments Section -->
</div>
In order to add my author biography block, I would need a method to inject some HTML into the page at a predefined position. Of course this is challenge that is easily solved with jQuery. If I have some HTML and I know where I want to place it on the page I can make a simple call like:
$('#HtmlTemplate').insertBefore('.BlogFooter');One of the goals I had in mind when developing the module is that I wanted to be able to allow the administrator to control the template that is used for laying out the biography block. This would allow the administrator to control which Profile elements are displayed and how to arrange them on the page. I had two options which immediately sprang to mind: 1) use the DotNetNuke Token engine, or 2) use the new jQuery templating engine.
While there are many nice aspects of the core token engine, one of its major shortcomings is that it does not allow for conditional logic (or any other kind of logic for that matter). If you look at the new Profile page for the default Host User in DotNetNuke this becomes readily apparent. Since the Host user does not have any profile data, you are left with a lonely “,” sitting in the middle of the display. The built in token solution does not allow me to control the display based on the presence or absence of data. When a profile address is completely filled out, the comma is a desired element, but when there is no profile data we really should hide the comma.
The jQuery templating plugin that was built by Microsoft addresses most of the templating problems I have encountered with the core DotNetNuke tokenization API. The jQuery templates support the use of tags like {{if}}, {{each}}, {{html}} and {{wrap}} to provide basic logic and formatting of the final output based on the data that is available. For me this is a critical need in any template solution, making the jQuery templates the clear winner for this module.
One other item that I needed to solve on the JavaScript side was dealing with the various browsers and jQuery versions. In order to use the jQuery templates, I would save the profile data to the page using the ClientAPI, which I outlined in my earlier post on passing server variables to client side JavaScript. I would need a way to parse this data which is stored as JSON so that I could bind it to my template. Most modern browsers already provide native JSON parsing, but for those that didn’t, I would need to load the JSON2.js file which is the API that modern browsers emulated when adding the native capability. I would likewise need to perform a similar check to determine whether or not to load the jQuery Templates plugin. The basic test looks something like this:
//Load JSON script for older browsers
if (!(typeof (JSON) === 'object' &&
typeof (JSON.stringify) === 'function')) {
$.getScript(serviceUrl + 'js/json2.js', function () {
bio = JSON.parse(bio);
});
}
else {
bio = JSON.parse(bio);
}With all of the major issues out of the way, I just need to pass the data to the template and inject the final HTML into the page at the right location, but nothing that is too difficult. With the client side code out of the way, I can move my attention to the server side code.
On the server side, I really just need to be able to gather the appropriate profile data and pass that data to the client code. There is no real magic here since it is just looking for the entryid from the querystring and using the blog entry to get the author’s user object. I selectively pull the desired user profile properties and convert them to a JSON object.
Dim author As String = (New With {.UserId = ui.UserID, _
.UserName = ui.Username, _
.DisplayName = ui.DisplayName, _
.ImageUrl = ui.Profile.AvatarURL, _
.Biography = If(bio.PropertyValue Is Nothing, _
Localization.GetString("EmptyBiography", LocalResourceFile), _
HttpUtility.HtmlDecode(bio.PropertyValue)), _
.Website = ui.Profile.Website, _
.Country = ui.Profile.Country}).ToJson()The end result of all of this is that we now have the ability to add a biography section to the blog, and all without touching the blog module. In the video below you can see the module in action.
You can download the source code and the working module on the BlogBio project page at CodePlex.
This article is cross-posted from my personal blog.