Create a custom Team web part using SharePoint server object model and bootstrap

In this blog, we will discuss how to create a team web part in SharePoint using the SharePoint Server object model. The motto of this web part is, it will show you all team sites and subsite to which you have the member permission.

Create a custom Team web part using SharePoint server object model and bootstrap

Let’s there is a site name called EnjoySharePoint and it has five subsites (A, B, C, D, and E). Suppose you are part of EnjoySharePoint with B and E subsites. So when you logged in to the site, You can able to see only three sites to which you have access.

Here you can create a visual web part and use the below code.

The below is my HTML code to populate the sites inside a Repeater control and we have use bootstrap here.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="/_layouts/15/Common/jquery.simplyscroll.js"></script>
<link href="/_layouts/15/Common/jquery.simplyscroll.css" rel="stylesheet" />

<script type="text/javascript">
    (function ($) {
        $(function () {
            $(".timeline").simplyScroll({
                customClass: 'vert',
                orientation: 'vertical',
                auto: false,
                speed: 10
            });
        });
    })(jQuery);
</script>

<div class="col-xs-6">
    <div class="my-team">
        <div class="box box-solid">
            <div class="box-header with-border">
                <h3 class="box-title">My Team</h3>
            </div>
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab_Active" data-toggle="tab" aria-expanded="true">List</a></li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="tab_Active">
                        <ul class="timeline">
                            <asp:Repeater ID="getTeamMember" runat="server">
                                <ItemTemplate>
                                    <li>

                                        <asp:HyperLink ID="HyperLink2" Text='<%# Bind("SiteName")%>' NavigateUrl='<%# Bind("SiteURL")%>' runat="server" />
                                    </li>

                                </ItemTemplate>
                            </asp:Repeater>
                        </ul>

                    </div>
                </div>
                <!-- /.tab-content -->
            </div>
        </div>
    </div>
</div>

The below code will retrieve the site name which you have access.

using Microsoft.SharePoint;
using System;
using System.ComponentModel;
using System.Data;
using System.Linq;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

namespace MyWebpart.Intranet.WebParts.MyTeams
{
    public partial class MyTeamsUserControl : UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("SiteName", typeof(string));
                dt.Columns.Add("SiteURL", typeof(string));
                SPSite siteName = new SPSite(SPContext.Current.Web.Url);
                foreach (SPWeb web in siteName.AllWebs)
                {

                    if (web.DoesUserHavePermissions(web.CurrentUser.LoginName, SPBasePermissions.ManageWeb))
                    {
                        DataRow dr = dt.NewRow();
                        if (dt.Rows.Count < 10)
                        {
                            if (!string.IsNullOrEmpty(web.Title.ToString()) && web.Title.ToString()!=null)
                            {
                                dr[0] = web.Title;
                                dr[1] = web.Url;
                                dt.Rows.Add(dr);
                                dt.AcceptChanges();
                            }

                        }

                    }
                    getTeamMember.DataSource = dt;
                    getTeamMember.DataBind();
                }
            }
            catch (Exception)
            {

                throw;
            }
        }

       
    }
}

The below is the output of the code which I have access.

Congratulations!! 🎉👏

We have reached the end of our journey. I hope you enjoyed learning with me and now feel confident to continue on to your next adventure.

You may like following SharePoint server object model tutorials:

• Create a web part page using visual studio 2013 in SharePoint 2013
• Retrieve all site templates using the server object model in SharePoint 2016/2013
• Delete All Attachments from SharePoint 2013 list item by using Server object model code
• How to get logged in user count in SharePoint

But it doesn’t have to end here. My next article will focus on helping you get started with the very exciting custom Web Parts in SharePoint 2013/2016/2019 and SharePoint online.

It was a pleasure to be on this journey with you. We saw how to create a custom Team web part using SharePoint server object model and bootstrap.