Modifying the User List page

Community Server

Group for Content about my AlexCrome.CS addon package for Community Server 2008

Modifying the User List page

  • Comments 2

Another gripe I have with CS2008 is the new user list page.  The page is very unbalanced - there is a huge waste of space at the top of the page, next to the search form, and then the user list (the useful element of the page) is crammed into that small space at the bottom.  The new layout also loses detail from the CS2007 profile page. Whilst I'm happy in only displaying limited amounts of information, just Display name and avatar is taking it too far.  Another small annoyance is the Forums link to this page as "View all users", but the page doesn't show any contents by default.

My solution was to modify the user list to be a bit more like the User Online list, showing a thumbnail of the user avatar, and then some details about the user next to the avatar.  I also moved the search form into the sidebar so as to not lead to a huge waste of space at the top of the page

image 

 

These modifications are made in the userlist.aspx page, in ~/Themes/hawaii/User.  You may download the final userlist.aspx page produced in this article here.  Do note that I have specifically forced a dd/mm/yy style date for the Joined date so that the date fits on the same line as the Joined text.

Moving the Search Form to the Sidebar

First add a new asp content region, to add content to the rcr content region in the master page (if you want the search form in the left column, use lcr instead).

Next add the basic markup of a sidebar into the content region you created above

<div class="CommonSidebar">
    <div class="CommonContentBox">
        <div class="CommonContentBoxContent">
            <!-- Stuff Goes Here -->
        </div>
    </div>
</div>

Then simply move the <CSControl:UserSearchForm /> and accompanying <script> block into the sidebar.

You have now successfully moved the search form into the sidebar, but there is one small problem.  The search textbox extends outside the sidebar.  That is easily fixed by finding the searchText textbox in the UserSearchForm, and setting it's width to 99% (not 100% as that causes IE to slightly crop off the right end of the text box).

Redesign the User List

This simply requires modifying the ItemTemplate of the UserList control.  To achieve the business card like view, I just made use of the CommonSideListArea class.

I'm not going to provide detailed steps for how to modify the Item Template as this it's up to you what you want to display.  I will however provide the markup I used for my List (note, I know I've been naughty and not used Resource Controls for my text, but it's only a sample, and you can add in the resources yourself.

<div class="CommonSideListArea">
    <div class="CommonSideListImage">
        <CSControl:UserData runat="server" LinkTo="Profile">
            <ContentTemplate><CSControl:UserAvatar runat="server" Height="60" Width="60" ShowAnonymousAvatar="true" /></ContentTemplate>
        </CSControl:UserData> </div> <div class="CommonSideListContent"> <CSControl:UserData runat="server" Property="DisplayName" LinkTo="Profile" Tag="Strong" TruncateAt="12" />
        <br />
        <CSControl:UserData runat="server" Property="TotalPosts" LinkTo="PostsSearch" >
            <LeaderTemplate><strong>Posts:</strong> </LeaderTemplate>
        </CSControl:UserData>
        <br />
        <CSControl:UserData runat="server" Property="Points" >
            <LeaderTemplate><strong>Points:</strong> </LeaderTemplate>
        </CSControl:UserData>
        <br />
        <CSControl:UserData runat="server" Property="DateCreated" FormatString="dd/MM/yy">
            <LeaderTemplate><strong>Joined:</strong> </LeaderTemplate>
        </CSControl:UserData>
     </div>
     <div style="clear: both;"> </div>
</div>

One small tweak that needs to be is changing the PageSize of the UserList.  Since users are displayed in rows of three, to prevent the page looking odd the page size should be changed to a multiple of 3.  I went for 15, but again the choice is yours.

Setting the Default UserList Query

So that some users show up in the User List by default, we need to set the default SortBy method on the UserList control.  This cannot be done through QueryOverrides, otherwise it'll override the SortBy specified on the User Search Form.  Instead, we have to set the SortBy method through code.

To do so, simply add the folowing at the top of your page

<script type="text/C#" runat="server"> 
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);

        if (!Page.IsPostBack && CommunityServer.Components.CSContext.Current.QueryString["Search"] != "1")
            UsersList.QueryOverrides.SortBy = CommunityServer.Components.SortUsersBy.RecentPosts;
    }
</script>

This code simply checks if the page is not a postback, and if no custom search method has specified on the query string, and if so defaults the UserList SortBy to RecentPosts.

Your comment has been posted.   Close
Thank you, your comment requires moderation so it may take a while to appear.   Close
Leave a Comment
  • Post
  • we just need a contact form now and then we'll be in business.

  • Well done...much better than the default!

Page 1 of 1 (2 items)