DNN Blog

Adding a website link to the Member Profile and Directory in DotNetNuke 6.2

by Chris Hammond on Tuesday, May 29, 2012 1:34 PM

See the original post with code at http://weblogs.asp.net/christoc/archive/2012/05/30/adding-a-website-link-to-the-member-directory-in-dotnetnuke-6-2.aspx

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.

Chris Hammond
social
cms
6.2
profile
Member Directory
socialcms
Author

Chris Hammond has been working with DotNetNuke since January of 2003. He has created hundreds of videos, blog posts, and tutorials for DotNetNuke. Be sure to chat with Chris at dnnCHAT.com

Attend A Webinar
Start  Professional Edition Trial
Have Someone Contact Me

Like Us on Facebook Join our Network on LinkedIn Follow DNN Corporate on Twitter Follow DNN on Twitter

Advertisers

Sponsors

DotNetNuke Corporation

DotNetNuke (DNN) provides a suite of solutions that make designing, building and managing feature-rich sites and communities fast, easy and cost-effective. The DotNetNuke Platform CMS is the foundation for more than one million websites worldwide. DNN Social, our newest solution, enables businesses to create immersive, interactive communities. Thousands of organizations like True Value Hardware, Bose, Cornell University, Glacier Water, Dannon, Delphi, USAA, NASCAR, Northern Health and the City of Denver have leveraged DNN to deploy highly engaging business- critical websites. Our rapid growth in product sales and deployments resulted in DotNetNuke Corp. being named one of the fastest growing private companies in America by Inc. Magazine in 2011 and 2012.