Flip book WebPart for SharePoint 2013 and SharePoint 2010

In this post we can see how to transform the content of a SharePoint 2013 / 2010 Announcement library to a flip book with jQuery booklet extension.

This article makes use of jQuery booklet extension developed and shared by Grauvogel, which has the capability to convert each div into a page. This extension also has an option to set front and cover page for out flip book and numerous other options.

Now we can see how to build a Flip Book web part from scratch in SharePoint. Although the below steps and screen shots are related to SharePoint 2013, I have provided downloadable source code for both SharePoint 2013 and SharePoint 2010.

Steps involved in creating Flip Book WebPart

1. Download the jQuery Booklet extension from http://builtbywill.com/code/booklet/ (Included as a part of solution)

2. Open Visual Studio 2013 and create a new Empty SharePoint 2013 Project

3. Add a new Visual Web Part Named as “Flip”

4. Add a new Module in Visual Studio named as “Assets” and add the files related to jQuery Booklet extensions to the Module. If jQuery is already included in your project, exclude that file from the Module. The Assets are mapped to be deployed into Style Library

5. The Module and Visual WebPart would have automatically added two Features to the project. Delete the Site level feature and include the Module to Site Collection feature along with Visual WebPart. This step is not mandatory, this is just to have a single feature for both Visual WebPart and Module. Else you have to activate both the site feature and site collection feature independently. If this step looks confusing leave both the feature as it is.

6. Add the below source code to “Flip.ascx” file

UI Design

 <sharepoint:scriptlink ID="Scriptlink1" runat="server" name="~Site/Style Library/Js/jquery-1.7.2.min.js" > </sharepoint:scriptlink>
 <sharepoint:scriptlink ID="Scriptlink2" runat="server" name="~Site/Style Library/Js/jquery-ui-1.8.21.custom.min.js" > </sharepoint:scriptlink>
 <sharepoint:scriptlink ID="Scriptlink3" runat="server" name="~Site/Style Library/Js/jquery.easing.1.3.js" > </sharepoint:scriptlink>
 <sharepoint:scriptlink ID="Scriptlink4" runat="server" name="~Site/Style Library/Js/jquery.booklet.1.4.0.min.js" > </sharepoint:scriptlink>
 
 
 <script type="text/javascript">
     $(function () {
         $('#flipBook').booklet({
             covers: true,
             closed: true,
             autoCenter: true
         });
     });
 </script>
 
 <div id="flipBook">
     <div>
         <h1>SharePoint Flip Book WebPart</h1>
     </div>
     <asp:Literal ID="ltContent" runat="server"></asp:Literal>
     <div>
         <h1>The End</h1>
     </div>
 </div>

7. Double click the “Flip.ascx.cs” file and paste the below code

The Code

 protected void Page_Load(object sender, EventArgs e)
 {
     if (!this.Page.IsPostBack)
     {
         BindData();
     }
 }
 
 protected override void Render(System.Web.UI.HtmlTextWriter writer)
 {
     writer.Write(BindStyle("/Style Library/Css/jquery.booklet.1.4.0.css", false));
     base.Render(writer);
 }
 
 private string BindStyle(string StyleUrl, bool PickFromSiteCollection)
 {
     if (PickFromSiteCollection)
         StyleUrl = Microsoft.SharePoint.Utilities.SPUrlUtility.CombineUrl(SPContext.Current.Site.RootWeb.Url, StyleUrl);
     else
         StyleUrl = Microsoft.SharePoint.Utilities.SPUrlUtility.CombineUrl(SPContext.Current.Web.Url, StyleUrl);
 
     return string.Format(@"<link rel=""stylesheet"" href=""{0}"" type=""text/css"" />", StyleUrl);
 }
 
 private void BindData()
 {
     SPList list = SPContext.Current.Web.Lists["Announcements"];
 
     string Content = @"<div><h2><b>{0}</b></h2></br>{1}</div>";
     StringBuilder sb = new StringBuilder();
     foreach (SPListItem item in list.Items)
     {
         sb.AppendFormat(Content, item.Title, item["Body"].ToString());
     }
     ltContent.Text = sb.ToString();
 }

8. Open the target site specified in the site URL of the visual studio solution and create a new list based on “Announcement” template with the name “Announcement”. (Change the list name in cs file if the Announcement list is created in a different name). If you are in a Publishing site, activate “Team Collaboration Lists” feature to view Announcement library template.

9. Build and deploy the project

10. Add some records to the Announcement library that you have created in the step 8. Each and every item created in this list represents a page in the Flip Book.

11. Edit and Existing Page or create a new page and Add the deployed WebPart.

12. Save and Close the page. Now you could see the content of Announcement library rendered as a Flip Book

Download SharePoint 2010 Source Code

Download SharePoint 2013 Source Code