PushPin to show or hide DIV and maintain state across pages and Users using JQuery

JQuery has very cool features, providing the wide range of plugins to play around with your webpage. Here in this post I m going to discuss regarding a requirement I had to make use of JQuery to maintain the state of a DIV across pages, as well as across Users logged into the application.

Requirement:

This requirement is to provide interface for searching certain content in the SharePoint List based upon the keywords. This search window/pane should have the capability of toggle, as well as the capability of fixing/pin down (stopping toggle i.e showing the DIV) which should be maintained across the pages in the application untill the user either closes the pane or unfix. Also, this provision should be available as per the User choice, logged in to the application.

Example:
For better understanding we shall consider two user's named User1 & User2. When User1 loggs in to the application and prefers to pin down the DIV after showing DIV by toggle, that DIV should be in open state, in all the pages being traversed, untill preferred to pin up. But this preference should not reflect to User2, as this user might not prefer to search or looking into the DIV.

Challenges:

1. Maintaining the Open/Close state across all pages based upon the preference to show/hide respectively.
2. Maintain the Open/Close state based upon the logged in User preference to show/hide respectively.

Solution:

1. Add Script References for
   JQuery Plugin:
   
   Download: http://jquery.com/
   
   Sessions Plugin:
   
   Download: http://plugins.jquery.com/node/8213/release
   
   JSON Plugin:
   
   Download: http://www.json.org/json2.js
2. Create a DIV tag holding all your content as below:
   

   
               
    
        Keep Open 
        
    
              close 
         
   Your Content / Controls

   Note:Styles & images are from JQuery UI Smoothness theme.
3. Add the below script in the head tag
   

   $(document).ready(function() {
   
    $.namesession.set("LoggedInUser",$().SPServices.SPGetCurrentUser({fieldName: "UserName", debug: false}));
   
    var SearchWindowStatus= ($.namesession.get('SearchWindowStatus_'+$.namesession.get('LoggedInUser',''), '')!= '')?$.namesession.get('SearchWindowStatus_'+$.namesession.get('LoggedInUser',''), '') :$.namesession.set('SearchWindowStatus_'+$.namesession.get('LoggedInUser',''),false);
   
    if(SearchWindowStatus){
     $('#SearchFund-dialog').show();
     $("a[id$=anchorPinPoint]").children().removeClass('ui-icon-pin-w').addClass('ui-icon-pin-s').attr('title','Keep Search Closed');  
   
    }else{
     $('#SearchFund-dialog').hide();
    }
   
   
   
    $(this).click(function() {
   
      $('#SearchFund-dialog').toggle(); 
    }):
   
   
    $("a[id$=anchorPinPoint]").bind({
   
          mouseover:function() {
         $(this).addClass('ui-state-hover');
        },
        mouseout:function() {
         $(this).removeClass('ui-state-hover');
        },
       
       focus:function() {
        $(this).addClass('ui-state-focus');
        },
       blur:function() {
        $(this).removeClass('ui-state-focus');
        },
       click:function() { 
       
         TogglePinPoint(this)
   
        
        return false;
   
        }
     });
       
    function TogglePinPoint(ctrl)
    {
     if($(ctrl).children().hasClass('ui-icon-pin-w'))
      {
       $(ctrl).children().removeClass('ui-icon-pin-w').addClass('ui-icon-pin-s').attr('title','Keep Search Closed');  
       $.namesession.set('SearchWindowStatus_'+$.namesession.get('LoggedInUser',''),true);
      }else if($(ctrl).children().hasClass('ui-icon-pin-s'))
      {
       $(ctrl).children().removeClass('ui-icon-pin-s').addClass('ui-icon-pin-w').attr('title','Keep Search Open');  
       $.namesession.set('SearchWindowStatus_'+$.namesession.get('LoggedInUser',''),false);
   
     } 
    }
   });
   

Note: Ensure your web.config file is configured for AJAX & JSON
Enable SessionState is set to true in the config file

Folders in SharePoint Pages Library for Publishing Site

SharePoint Publishing site template has Pages Document Library, which is a repository for pages with a flexibility of creating pages based upon Page Layouts. Pages created in this library by default are configured with three content types Pages, Article Page & Welcome Page each having their own fields based upon necessity.

Pages Library is flexible in creating pages with different layouts, based upon the design & requirement, but does not have a provision to create pages in folders & access them as per the sitemap/ breadcrumbs, as we create in a basic document library. We can go to advanced settings of the library & configure for showing "New Folder" under the New Menu, even though when we create a page under the folders, it is saved under root folder of the library which does not meet our purpose.

         So here in this post, I would like to share one of the solution I implemented in our project, which sufficed very well using  Pages Library for creating pages in the folders.

Troubleshooting:
           The process of troubleshooting started from creating a  new page. In the publishing site when we try to create a new page either from menu option under "Site Actions" or from the "New Menu" in library, we are redirected to "CreatePage.aspx" available under layouts virtual directory. So this is the page where we can customize as per our requirement.

Steps to recreate:

Building Custom page for creating a page:

1. Copy the "CreatePage.aspx" available in the layouts folder of SharePoint 12 hive & place it in the same directory or else in your custom directory and rename with a custom name as "CreatePage_Custom.aspx".
2. Open the CreatePage_Custom.aspx in designer or visual studio and search for the tag  
   Set the property "Visible=false" as this is the control which holds name of the Pages library.
   Note: Do not delete this tag, there is a reference in the code behind.
3. Add the below directive to have publishing assembly reference
   

   <%@ Import Namespace="Microsoft.SharePoint.Publishing" %>

4. Microsoft.SharePoint.Publishing.Internal.CodeBehind.CreatePage is the class in the code behind, but the respective methods are not exposed. So the next option is inline coding in the page, where we use custom event of the submit button to have our functilnality to add the page in the Pages library.
   

   protected void OnCustomSubmit(Object sender, EventArgs e)
   
   {
     string newPageUrl = "";
   
    SPWeb web = SPContext.Current.Web;
   
    PublishingWeb publishingWeb = PublishingWeb.GetPublishingWeb(web);
   
    PageLayout[] layouts = publishingWeb.GetAvailablePageLayouts();
   
    int layoutItemId = Convert.ToInt32(pageTemplatePicker.SelectedValue);
   
    PageLayout layout = FindLayoutById(layoutItemId,publishingWeb);
   
    string pageName = urlNameTextBox.Text + ".aspx";
   
    PublishingPage newPage = publishingWeb.GetPublishingPages().Add(Request.QueryString["RootFolder"].ToString() + "/" + pageName, layout);
   
    newPageUrl = web.Url + "/" + newPage.Url; // Here you can append the Querystring if you want to show the created page in the Edit Mode.
   
    newPage.Title = titleTextBox.Text;
   
    newPage.Description = descriptionTextBox.Text;
   
    newPage.Update();
   
    Response.Redirect(newPageUrl);
   }
   
   protected PageLayout FindLayoutById(int layoutItemId,PublishingWeb localPublishingweb)
   {
    SPListItem itemById = localPublishingweb.Web.Site.RootWeb.GetCatalog(SPListTemplateType.MasterPageCatalog).Items.GetItemById(layoutItemId);
   
    if (itemById == null)
   
    {
   
     return null;
   
    }
   
    return new PageLayout(itemById);
   }

5. 
   Refer the server click event to the custom event cretaed above.
   

6. Creating a custom content type:

7. Deploy content type to the web application Add this new custom content type to the Pages library from the library settings.
   
8. Allow library to display New Folder option in New Menu, for creating sub folders.
   
9. Create a page using the new content type available under New Menu.
   

Reference:
If there is a requirement to create a page from the menu item under Site Actions, please refer to this post.
http://blogs.msdn.com/b/syedi/archive/2008/07/18/why-should-one-save-publishing-pages-in-pages-list-always-in-moss-bend-it.aspx