Adding a website link to the Member Directory in DotNetNuke 6.2

In case you missed it, DotNetNuke 6.2 was released today, check out Will Morgenweck’s blog post for more details on the release.

With some of the new features DotNetNuke 6.2 makes it easier to start to customize the listing of members on your site, and also the Profile display for users on the website. I started implementing DotNetNuke 6.2 on one of my racing websites last night (yeah, so I upgraded before the release happened, a benefit of working for the corp ).

In doing so I configured the profile pages on the website to use some of the new 6.2 functionality, before I show you the code, here’s a link to my profile over there, so you can see what all I implemented. This is far from complete, plenty of more work to be done, but it provides far more information than the profiles did two days ago.

http://www.sccaforums.com/user-profile/userid/37959

Now for the code itself. This code gets included in the ViewProfile module as the profile template, this was what I put in last night.

<div class="pBio">
    <h3 data-bind="text: AboutMeText"></h3>
    <p data-bind="html: Biography"></p>
</div>
<div class="pAddress">
    <h3 data-bind="text: LocationText"></h3>
    <p>    <span data-bind="text: Location()"></span><span 
data-bind="visible: Location().length > 0"><br/></span>
    <span data-bind="text: Country()"></span><span data-bind="visible: Country().length > 0"><br/></span>
    </p>
</div>
<div class="pContact">
    <h3 data-bind="text: GetInTouchText"></h3>
    <ul>
        <li data-bind="visible: Website().length > 0"><strong><span 
data-bind="text: WebsiteText">:</strong> <span data-bind="text: Website()"></li>
    </ul>
</div>
<div class="dnnClear"></div>                  
                  

That will show some basic information for a user’s profile. One thing I wanted to do was to make the Website option an actual hyperlink, as you can see in that display it isn’t right now. To do so is fairly straight forward, in place of that line, we would use the following code

<li data-bind="visible: Website().length > 0"><strong><span 
data-bind="text: WebsiteText">:</strong> <a href="" title="" class="profWebsite"
 data-bind="attr: { title: Website(), href: Website() }" rel="nofollow" target="_blank">
<span data-bind="text: Website()"></span></a></li>

Basically we’re using Knockout.js to bind the Website information from the User’s Profile, to
the hyperlink, for both the href and title value, then spitting out the Website attribute as the text of the hyperlink as well. For SEO purposes I put a rel=”nofollow” in there to prevent search engines from giving the profile links any weight, you could always change that if you wish.

In addition to that information, I always wanted to enable a “send me an email” link, that pointed to the new Messaging Center in DNN 6.2. That wasn’t quite as easy as adding the Hyperlink to the Profile page, but it was pretty straightforward (to be honest I just ripped off the code from the Default “template” in DotNetNuke 6.2, but that is the beauty of open source. To add the Message link, as well as a “Friend” and “Follow” link I used the following code

<div data-bind="visible: !IsUser() && IsAuthenticated">
    <ul>
        <li><a href="" title="" class="ComposeMessage"><span data-bind="text: SendMessageText">
        </span></a></li>
        <li><span><a href="" data-bind="click: addFriend, visible: FriendStatus() == 0"><span
            data-bind="text: AddFriendText"></span></a><span
 data-bind="click: addFriend, visible: IsPending()">
                <span data-bind="text: FriendPendingText"></span></span><a href="" 
data-bind="click: acceptFriend, visible: HasPendingRequest()">
                    <span data-bind="text: AcceptFriendText"></span></a><a href=""
 data-bind="click: removeFriend, visible: IsFriend()">
                        <span data-bind="text: RemoveFriendText"></span></a></span></li>
        <li><span><a href="" data-bind="click: follow, visible: !IsFollowing()"><span
 data-bind="text: FollowText">
        </span></a><a href="" data-bind="click: unFollow, visible: IsFollowing()"><span
 data-bind="text: UnFollowText">
        </span></a></span></li>
    </ul>
</div>

But I didn’t add it to the ViewProfile module. Instead you need to place the Member Directory module on a page, set the above code as the Item and Alternate Item template.

You can see the Member Directory module in action in this “Using the Member Directory in DotNetNuke 6.2” video.