Ashok Raja's Blog
Flip book WebPart for SharePoint 2013 and SharePoint 2010
by Ashok Raja T 14. February 2013 08:30

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>

Note: For this sample, I have set cover for the book, and also have set it as closed and displayed it at the centre of WebPart. Check out the project site referred in step 1 for more options and configuration settings available for jQuery Booklet extension. The divs which are before and after the literal control “ltContent” acts as cover for this Flip Book. This can be removed, if covers option is set to false.

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();
 }
Note: The above code binds the CSS file to the WebPart and also retrieves the content from Announcement Library and binds the list data nested with appropriate html elements to the literal control as string.

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

Final2

Final

Download SharePoint 2010 Source Code

Download SharePoint 2013 Source Code

blog comments powered by Disqus