in SharePoint, SharePoint 2007

SharePoint WCM – Breaking the Ice – Content Driven User Controls

In our previous post, we saw how to build user controls and reference the same from our Home Page layout. In this post lets see how we can retrieve the Latest News from a SharePoint List rather than static HTML code.

Latest News

Jet30 publishes their latest news daily and wishes to show them in the Home Page. The Latest News section in our home page reflected this daily news section.

Latest News

Jet30 wants their content authors to manage the daily news and hence they choose to create a new Announcements List called LatestNews where they can manage (add/edit/delete) the daily news. The Latest News section should only display the news of that day.

LatestNews List

As you can see in the above screenshot, we have 2 items which expires today (October 6th) and the other which has expired (October 5th).

Injecting the SharePoint Logic into our user control

We now know our exact job – Query the LatestNews list for the items which expires today

The LatestNews user control now changes to:

 

Latest News User Control

We will use a Label to update today’s date and a Repeater to display today’s latest news.

Below is the updated .ascx code:

<div id="news">

    <h2>Latest News</h2>    

    <h3><asp:Label ID="lblDate" runat="server" /></h3>

    <asp:Repeater ID="rptrNews" runat="server">

        <ItemTemplate>

            <p>

                <span><%# DataBinder.Eval(Container.DataItem,"Title")%></span>

                <%# DataBinder.Eval(Container.DataItem,"Title")%>

            </p>

        </ItemTemplate>

    </asp:Repeater>

    <br class="spacer" />

</div>

And below is the code behind:

/// <summary>

/// Handles the Load event of the Page control.

/// </summary>

/// <param name="sender">The source of the event.</param>

/// <param name="e">The <see cref="System.EventArgs"/> 

/// instance containing the event data.</param>

protected void Page_Load(object sender, EventArgs e)

{

   AddTodaysDate();

 

   AddTodaysNews();

}

 

/// <summary>

/// Adds the todays date.

/// </summary>

private void AddTodaysDate()

{

    lblDate.Text = String

                   .Format("On {0}",

                         DateTime.Today.ToString("ddd d MMM yyy"));

}

 

/// <summary>

/// Adds the todays news.

/// </summary>

private void AddTodaysNews()

{

    List<LatestNews> latestNewsCollection = new List<LatestNews>();

 

    SPSite site = SPContext.GetContext(HttpContext.Current).Site;

 

    using (SPWeb curWeb = site.OpenWeb())

    {

        SPList lstLatestNews = curWeb.Lists["LatestNews"];

 

        SPQuery camlQuery = new SPQuery();

        camlQuery.ViewFields = "<FieldRef Name='Title' /><FieldRef Name='Body' />";

        camlQuery.Query = 

          "<Where><Geq><FieldRef Name='Expires' /><Value Type='DateTime'><Today/></Value></Geq></Where>";

 

        SPListItemCollection lstLatestNewsCollection = lstLatestNews.GetItems(camlQuery);

 

        foreach (SPListItem latestNews in lstLatestNewsCollection)

        {

            LatestNews news = new LatestNews

                                  {

                                      Title = latestNews["Title"].ToString(),

                                      Body = latestNews["Body"].ToString()

                                  };

 

            latestNewsCollection.Add(news);

        }

 

        rptrNews.DataSource = latestNewsCollection;

        rptrNews.DataBind();

    }

}

Pretty basic ASP.NET and SharePoint code 🙂

The AddTodaysDate updates the label with today’s date and AddTodaysNews queries the SharePoint list LatestNews items which expires today.

Build the code and deploy to the site.

You should still see the same home page, the only difference this time being that Latest News section is now content driven 🙂

Latest News Control

What about Web Parts?

You might be wondering why I haven’t used Web Parts and chosen to build User Controls. I think this discussion would take us away from our current trending topic, but do hold on, I will come up with a separate post explaining why I choose to build User Controls and not Web Parts in the WCM world.

What next?

In our next post, we will see the necessity of building custom field controls and build one!

For now, you can download the source code from here.

If you don’t have SPVisualDev, build a WSP package and deploy it to test.

Remember that, until we have our own site definition, we are not done yet and things will be little messy 🙂

Write a Comment

Comment

Time limit is exhausted. Please reload the CAPTCHA.

  1. It helps a lot…..I tried to do the same thing but I am getting error in
    List<LatestNews> latestNewsCollection = new List<LatestNews>();

    can you guide me?

  2. and also where you are writing all this code. Actually I am writing all this in user control .ascx and its telling me that I am missing a using directive or an assembly reference. I am using .ascx user control and I have attached that to webpart.But my ascx doesn’t has code behind I am writing all this in <script> tag . Could you tell me where I m getting wrong.

    Thanks,
    PS

  3. @PS,

    Please check with the source code which is available for download. You can find the link at the end of this post. With the source code you can find out where things are being initialized and used.

    Thanks.

  4. Great job on what has been written, I am wondering if there will be more posts on the creation of the other elements on the page?