How I simplified the Users and Group UI – Listing Users

Listing users in my page was actually the easiest bit of the whole solution. In the ASP of my page, I added:

<SharePoint:ListView id="UserListView" ListID="UserInfo" runat="server"/>

And my page showed:

ListView

This is a SharePoint ListView, and the id and ListID appear to be ‘magic’ values. If set as above, the web part will display the users in the group specified by the MembershipGroupId GET parameter for the page. Try it – go to the normal users and groups pages, to to view the members of a group, and try replacing the integer ID of the group. (Not all are used)

So, that bit of magic shows me the list of users. In my page’s OnLoad event I also read the MembershipGroupId parameter and used that to read the name of the group we’re editting, which I then used in the PageTitle area. We’ll see this later.

Title and View Controls

(My Site is called ‘Blank’ and we’re editing the ‘Blank Members’ group)

That’s all I needed really, but as a bonus I’m also going to describe how I added the View Control.

The toolbar above my web part is actually an HTML table that I built by hand. The Add Users and Remove Users buttons are link buttons that I’ll describe in a later post. For now, let’s concentrate on the ‘View Selector’ on the right.

To add this, I dug through the ordinary People and Groups pages and dug out the following code:

<TD noWrap >
<SharePoint:MenuTemplate runat="server" id="MenuTemplateView"/>
<table border=0 cellpadding=0 cellspacing=0 style='margin-right: 4px'>
<tr>
<td nowrap id="topPagingCell">
<td>
<td nowrap>&nbsp;</td>
<td nowrap><SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,view_selector_view%>" EncodeMethod='HtmlEncode'/>&nbsp;</td>
<td nowrap onmouseover="this.className='ms-viewselectorhover'" onmouseout="this.className='ms-viewselector'" id="onetPeopleViewSelector">
<SharePoint:Menu id="MenuViewSelector" runat="server"
TemplateId = "MenuTemplateView"
Text="<%$Resources:wss,multipages_new_menu_text%>"
MenuFormat="ArrowAlwaysVisible"
MenuAlignment="Right"
AlignmentElementOverrideClientId="onetPeopleViewSelector"
HoverCellActiveCssClass = "ms-viewselectorhover"
HoverCellInActiveCssClass = "ms-viewselector"
ArrowImageUrl = "/_layouts/images/blank.gif"
AccessKey = "<%$Resources:wss,tb_ViewSelector_AK%>" />
</td>
</tr>
</table>
</TD>

A lot of this code is actually HTML for the tables for format the control. The main two controls are the SharePoint Menu control and MenuTemplate controls. How they work here, I don’t know (a lot of this page was figured out using Reflector) – but it does give you a dropdown with the different views (Details and List) of the group in it.

If I was using different views, I needed to set my ListView to use the correct one. I did this in the Page’s OnLoad event, so my code became

protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
UserListView.ViewId = this.CurrentViewId.ToString("B");
this.UpdateViewSelector();
string groupId = Request.QueryString["MembershipGroupId"];
int iGroup = 0;
if ((groupId != null) && (int.TryParse(groupId, out iGroup)))
{
ViewState[GROUP] = iGroup;
SPWeb web = SPContext.Current.Web;
foreach (SPGroup group in web.AssociatedGroups)
{
if (group.ID == iGroup)
{
PageTitle.Text = group.Name;
PageDisplayTitle.Text = group.Name;
break;
}
}
}
else
{
ViewState[GROUP] = null;
}
}

Here you can see I set the ListView’s current view, based on the GUID for that view, and then get the group’s name for the page’s title. Now, in there there is a call to UpdateViewSelector – this reads as:

private void UpdateViewSelector()
{
this.MenuTemplateView.Controls.Clear();
MenuItemTemplate template;
foreach (SPView current in UserListView.List.Views)
{
if (!current.Hidden)
{
template = new MenuItemTemplate();
template.Text = current.Title;
template.ClientOnClickScript = "NavigateToView('"
+ SPHttpUtility.EcmaScriptStringLiteralEncode(current.ID.ToString("B").ToUpperInvariant()) + "')";
this.MenuTemplateView.Controls.Add(template);
}
}
LiteralCurrentViewId.Text = CurrentViewId.ToString("B").ToUpperInvariant();
SPView view2 = UserListView.List.Views[this.CurrentViewId];
this.MenuViewSelector.Text = view2.Title;
}

This is setting up the View Selector’s MenuTemplate. It clears any existing menu items, and then adds one for each view in the ListView.

The final bit of code related to the View Selector is the page’s CurrentViewId property. This property returns the id of the view that’s currently being used, and it reads as:

private Guid _currentViewId = Guid.Empty;
protected Guid CurrentViewId
{
get {
if (_currentViewId == Guid.Empty)
{
string g = base.Request.QueryString["View"];
Guid empty = Guid.Empty;
if (g != null)
{
empty = new Guid(g);
}
SPView view = null;
foreach(SPView current in UserListView.List.Views ) {
if (!current.Hidden && (((empty == Guid.Empty) && current.DefaultView) || (empty == current.ID)))
{
view = current ;
}
}
if (((view == null) && (empty == Guid.Empty)) && (UserListView.List.Views.Count > 0))
{
view = UserListView.List.Views[0];
}
if (view == null)
{
throw new SPException(SPResource.GetString("ViewGone", new object[0]));
}
_currentViewId = view.ID;
}
return _currentViewId;
}
}

This returns the GUID of the view being currently used.

  • Introduction
  • How to Display a list of users
  • How to Find the MembershipGroupId
  • How to Add Users
  • How to Remove Users
  • Conclusion
  • Advertisements
    How I simplified the Users and Group UI – Listing Users

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s