10.16.2011

Web Part to Display Data from SPList (Birthday list)

In the previous post, I discussed how to insert data into a SharePoint list. In this web part we will display the data from that SharePoint list.

Open your BirthDaySystem project. Add new class and name it “DisplayBirthdays”

Replace the existing code from DisplayBirthdays with the following:

 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.SharePoint;
using System.Web.UI.WebControls.WebParts;
using System.ComponentModel;
using System.Web.UI.HtmlControls;

namespace BirthDaySystem
{
    public class DisplayBirthdays : System.Web.UI.WebControls.WebParts.WebPart
    {
        // global vars
        // Private variables


        public struct EmployeeRecord
        {
            public string FirstName;
            public string LastName;
            public string DOB_MM;
            public string DOB_DD;
        }


        protected override void CreateChildControls()
        {
            HtmlGenericControl MessageDiv = new HtmlGenericControl("div");
            MessageDiv.ID = "Messagediv";
            MessageDiv.Attributes["style"] = "";


            //check if list name is set
            if (this.BdayListName != "setup")
            {



            }
            else
            {
                MessageDiv.InnerHtml = "Please specify List name in Web Part Properties";
            }


            this.Controls.Add(MessageDiv);
        }

    }
}


Web Part Properties

Since the list name can change in future; I will declare the list name as a web part property instead of hard-coding it inside the program.

1. Add the birthday list variable to the private var section. And declare SPList variable.

 
// global vars
        // Private variables
        private String _BdayListName;
        SPList Mylist;    
    

2. Write the initialization code

 
public DisplayBirthdays()
        {
            _BdayListName= "setup";
        }

3. Add the property block

 #region Birthday list Property
[Personalizable(PersonalizationScope.Shared)]
        [WebBrowsable(true)]
        [Category("Setup")]
        [WebDisplayName("Bday List Info")]
        [Description("Bday List Name")]
        [DefaultValue("setup")]
        public string BdayListName
        {
            get
            {
                return _BdayListName;
            }
            set
            {
                _BdayListName = value;
            }
        }

#endregion

And now in CreateChildControl() we will write a query to display all the employees whose birthday fall in the current month.

    
 HtmlGenericControl MessageDiv = new HtmlGenericControl("div");
            MessageDiv.ID = "Messagediv";
            MessageDiv.Attributes["style"] = "text-align:left; padding:12px;";


            //check if list name is set
            if (this.BdayListName != "setup")
            {
                Mylist = SPContext.Current.Web.Lists[this.BdayListName];
                HtmlGenericControl BirthdayRowDiv = new HtmlGenericControl("div");

                IEnumerable BirthDayRecords = null;
                BirthDayRecords = (
from l in Mylist.Items.OfType() where l["Birth-MM"] != null && l["Birth-MM"].ToString() == DateTime.Now.Month.ToString() && l["First-Name"] != null && l["Last-Name"] != null && l["Birth-DD"] != null 
select new EmployeeRecord 
{ 
DOB_DD = l["Birth-DD"].ToString(), 
DOB_MM = l["Birth-MM"].ToString(), 
FirstName = l["First-Name"].ToString(), 
LastName = l["Last-Name"].ToString() 
}
);

                foreach (EmployeeRecord birthdayitem in BirthDayRecords)
                {
                    BirthdayRowDiv.InnerHtml += birthdayitem.FirstName + " " + birthdayitem.LastName +  " - " + birthdayitem.DOB_DD + "/" + birthdayitem.DOB_MM + "br/";
                }
                this.Controls.Add(BirthdayRowDiv);
for some reason the syntaxhighliter is adding extra line in the above code "</splistitem></employeerecord>". please remove these when you copy.

and that is pretty much it. Your complete file should look like:

 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.SharePoint;
using System.Web.UI.WebControls.WebParts;
using System.ComponentModel;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace BirthDaySystem
{
    public class DisplayBirthdays : System.Web.UI.WebControls.WebParts.WebPart
    {
        // global vars
        // Private variables
        private String _BdayListName;
        SPList Mylist;


        public DisplayBirthdays()
        {
            _BdayListName = "setup";
        }

        #region Birthday list Property

        [Personalizable(PersonalizationScope.Shared)]
        [WebBrowsable(true)]
        [Category("Setup")]
        [WebDisplayName("Bday List Info")]
        [Description("Bday List Name")]
        [DefaultValue("setup")]
        public string BdayListName
        {
            get
            {
                return _BdayListName;
            }
            set
            {
                _BdayListName = value;
            }
        }

        #endregion


        public struct EmployeeRecord
        {
            public string FirstName;
            public string LastName;
            public string DOB_MM;
            public string DOB_DD;
        }



        protected override void CreateChildControls()
        {
            HtmlGenericControl MessageDiv = new HtmlGenericControl("div");
            MessageDiv.ID = "Messagediv";
            MessageDiv.Attributes["style"] = "text-align:left; padding:12px;";


            //check if list name is set
            if (this.BdayListName != "setup")
            {
                Mylist = SPContext.Current.Web.Lists[this.BdayListName];
                HtmlGenericControl BirthdayRowDiv = new HtmlGenericControl("div");

                IEnumerable BirthDayRecords = null;
                BirthDayRecords = (from l in Mylist.Items.OfType()
                                   where l["Birth-MM"] != null && l["Birth-MM"].ToString() == DateTime.Now.Month.ToString() && l["First-Name"] != null && l["Last-Name"] != null && l["Birth-DD"] != null
                select new EmployeeRecord { DOB_DD = l["Birth-DD"].ToString(), DOB_MM = l["Birth-MM"].ToString(), FirstName = l["First-Name"].ToString(), LastName = l["Last-Name"].ToString() });



                foreach (EmployeeRecord birthdayitem in BirthDayRecords)
                {
                    BirthdayRowDiv.InnerHtml += birthdayitem.FirstName + " " + birthdayitem.LastName + "<br/>" +
                        birthdayitem.DOB_DD + "/" + birthdayitem.DOB_MM + "<br/>";

                }

                this.Controls.Add(BirthdayRowDiv);

                      }
            else
            {
                MessageDiv.InnerHtml = "Please specify List name in Web Part Properties";
            }


            this.Controls.Add(MessageDiv);
        }

    }
}
for some reason the syntaxhighliter is adding extra line in the above code "</splistitem></employeerecord>". please remove these when you copy.

1. Build the solution

2. If no error returned by the compiler, copy the same DLL as previous from your Birthday project bin > Debug directory to the bin directory of your WSS site
(C:\Inetpub\wwwroot\wss\VirtualDirectories\80\bin).(Owerwrite)



Now we can walk through, How to insert this we part in our SharePoint Page?

1. Go to your root SharePoint site and from there Site Actions -> Site Settings -> Modify All Site Settings.

2. Under “Galleries" tab click "Web Parts" link.

3. To add a new web part, Click New menu in web part gallery Page. The existing entry that you see in the image below is from our previous post.


4. Select the newly added web part in the "New Parts Page" and click on "populate gallery"

5. If the import is successful, you will see the web part in Web part gallery list.

Now we see How to insert into a SharePoint Page?

1. Go to site under which you previously created the Birthday List. Go to on Site Actions > Create Page

2. Create a blank web part page and name it BirthDayDisplayPage

3. Once the page is created, click on "Add a Web Part"

4. From the web part list, locate the one we just created and add.

Running the web part

If all went well in previous steps, you will see a message “Please specify List name in Web Part Properties”. This is because the list name has not been set yet.

Click on web part title bar dropdown and select “Modify Web Part”

From the web part edit properties, expand the “Setup” menu.

Enter “BirthdayList” in Bday List Info Hit Apply and the web part should be ready to use.

The style in which this web part displays the list items is very simple. You can use css and divisions to make it more appealing. My goal was to give you ideas on how you can plug-in a SPList to a webpart to display data.

0 comments:

Post a Comment