Tuesday, August 7, 2012

SharePoint 2013: Site Retention - Getting Closure with Your Sites


Introduction

Site retention in SharePoint is governed by site policies. In SharePoint 2013, site policies have been improved. There is a new concept within SharePoint 2013 regarding sites:  Site Closure. When a site is closed it is essentially ignored by SharePoint in regards to displaying its existence, however, the site may still be accessed via URL.

Executive Summary

·         Site policies are created at the site collection level but then are applied at the site level (including the site collection root site).

·         Closure of a sub-site does not prevent any usage of the site and essentially places it in a deletion countdown state. Closure of a site collection, however, makes the site collection read-only (this includes any sub-sites).

·         Deletion of a site (or site collection) automatically removes sub-sites.

·         Site owners may postpone deletion for a specified period of time (controlled by the policy)



Close and Delete Sites Automatically

Creating a Site Policy

Site policies are created at the site collection level but then may be applied to underlying sub-sites.  To create a new site policy, follow these steps:

1.       Navigate to the site collection where you would like to create the site policy.

2.       Select Site Settings from the Settings menu (gear icon):


3.       Under the Site Collection Administration section, click on Site Policies:




The Site Policies page appears.

4.       Click on the Create link at the top of the page. The New Site Policy page appears:




5.       Enter a name for the policy and select Close and delete sites automatically. Various options appear.




Close Event:  The close event is based on a specified period of time after site creation. It may be in Days, Months, or Years. For testing purposes I chose 1 day.



Deletion Event:  The deletion event is based on a specified period of time after site closure. It may be in Days, Months, or Years. For testing purposes I chose 1 day.



Deletion email notification: You may choose to send an email to the site owner within the specified time to warn about future deletion of the site.



Follow-up notifications: You may choose to send follow-up notifications warning of site deletion based on the specified recurrence.



Deletion Postponement:  You may elect to allow site owners to postpone deletion for the specified period of time.





6.       Optional: Site Collection Closure. You have the option of closing the entire site collection when the policy is applied. Site collection closure places the site collection in read-only mode.


7.       Click OK to create the new policy. The new policy is created and appears in the Site Policies listing:




Applying a Site Policy to a Site

Once the site policy is created at the site collection level, it may be applied to sub-sites that exist within that site collection.  To apply a site policy to a sub-site, follow these steps:

1.       Navigate to the sub-site where you would like to apply the site policy.

2.       Select Site Settings from the Settings menu (gear icon).
3.       Under Site Administration click on the Site Closure and Deletion link:




                The Site Closure and Deletion page appears:


4.       Select the site policy to apply from the Site Policy drop-down:


5.       Click OK. The policy is applied to the site.
6.       If you click on the Site Closure and Deletion link again, you will see the Site Closure and Site Deletion results from the policy:


I clicked the postpone button so the site would not be deleted right away.

Results of the Site Closure

When a subsite is closed, it can still be accessed by users and modifications may occur. If the deletion of the site is coming soon (I believe within 30 days), there will be a message at the top of the screen:



When a site collection is closed, it can still be accessed by users but NO modifications may occur. The site collection becomes read-only. A notification of the read-only state and the deletion appear on the top of a site collection page:

Run a Workflow Automatically to Manage Site Closure

Although the automatic closure and deletion looks great, we need more control and functionality. One of the other site policy Site Closure and Deletion options is to “Run a workflow automatically to manage site closure, then delete them automatically”. 

When this option is selected, a drop-down to select the workflow appears:



The workflow may run on a recurring schedule if the site is not closed.

For our purposes, we need the workflow to perform the following actions:

1.       Send email to the site owner asking whether they are still using the site

2.       Process the owner’s answer of yes or no*

3.       If yes - do nothing - let policy kick off workflow again next year

4.       If no:

a.       Remove all permissions from site (except System Account)

b.      Mark site as closed  - site policy will then manage automatic deletion


This will most likely require either a) custom workflow activities for SPD Workflows or b) Visual Studio workflow. I am currently having issues getting SP Designer 2013 running properly but will update this post once I move forward with additional site retention proof-of-concepts.

*currently not sure how the user will interact with the workflow




Wednesday, August 1, 2012

Creating Pop-Out Menus in SharePoint using jQuery/jQueryUI and CSS

Background
On our SharePoint based intranet home page, we have custom web parts along the right hand side of the screen. These web parts display various sets of links - creating a right hand navigation menu system. Two of these web parts displayed links from a SharePoint list behind the scenes. So the content was somewhat dynamic and could easily be maintained by adding or modifying list items; easy.
Problem
With so much functionality on the home page resulting in tons of web parts, we needed ways to slim down the processing. While we tweaked the list item access and various other things, these menu lists still needed to be lighter - like static HTML. In addition, since these links are used on an as-needed basis, they really don't need to be shown all of the time let alone cost any time to render.
 

Proposed Solution
The proposed solution was to combine the two sets of lists into one pop-out menu which would be lightweight.

Technical Solution
We wanted a section of the right hand navigation menus to show the heading but when hovered over (via the mouse), would pop-out and display two columns of lists. The HTML markup was easy but what about the hovering?

Enter CSS. We originally used various CSS classes and styles to control the size and display of the menu including the use of the :hover style. This worked great but there was no delay and as such, any mouse over would pop the menu up regardless if the user was intending to go to the new menu. So we needed a way to change the styles but use a delay.

Enter jQuery and jQueryUI. Through the use of jQuery as well as the jQuery UI Hover functionality, we were able to delay the pop-out as well as cancel the potential pop-out if the user happened to mouse over the menu to get somewhere else.


Result (sanitized versions)

Menu initial appearance:


Menu pop-out on hover:


Hint: See live demo in action at the bottom of this post!


Menu Markup
The menu HTML consists of one overall <div> (in our example named OnlineServices). Within that <div> is our main container (named OS-container) whose style changes based on the hovering. Within the container is a title div and a tip div. The title div is the initial state while the tip div is the pop-out menu markup.

Below is a shortened version of the markup:

<div id="OnlineServices">
 <div id="OS-container" class="OS-container-collapsed">
  <div class="OS-title">Online Services and Company Links</div>
  <div class="OS-tip">
   <div class="OS-tip-col">
    <strong class="OS-tip-col-title">Online Services</strong>
    <ul>
     <li>
     <a href="http://stevethemanmann.com" onfocus="OnLink(this)">
     Audio Conference Reservation</a></li>
    </ul>
   </div>
   <div class="OS-tip-col">
    <strong class="OS-tip-col-title">Company  Links</strong>
    <ul>
     <li>
     <a href="http://stevethemanmann.com" onfocus="OnLink(this)">
     Client Visit Feedback Form</a></li>
    </ul>
   </div>
  </div>
 </div>
</div>

CSS Styles
The main CSS styles are shown below. The important classes to note are the OS-container-collapsed and the OS-container-expanded. We also included a :hover for the collapsed to make the initial menu appear active (but this hover has nothing to do with the pop-out functionality).

#OnlineServices{position:relative; display:block; height:40px;margin:6px 0; z-index:100}
.OS-container-collapsed{height:38px; width:298px; overflow:hidden;  position: absolute; top:0; right:0; display: block; border: 1px #ccc solid;background-color:#eee; background-image:url(/_layouts/images/MNetImages/icon-expandmenu.png); background-position:255px 0px; background-repeat:no-repeat;}
.OS-container-collapsed:hover{background-color:#f8f8f8;}
.OS-container-expanded{ height:auto; width:620px; overflow:visible; position:absolute;  top:0; right:0; display: block; border: 1px #ccc solid;background-color:#eee; background-image:none; -moz-box-shadow: 0px 1px 2px #999;-webkit-box-shadow: 0px 1px 2px #999;box-shadow: 0px 1px 2px #999; float:right; }


jQuery
The key to the delayed popping out and not responding if the user just happened to graise the menu was in the jQuery:

 $(document).ready(function(){
     var timer;
        $('#OS-container').hover(
            function(){
             if(timer) {                        
               clearTimeout(timer);
               timer = null
               }
                timer = setTimeout(function(){
                    $('#OS-container').removeClass('OS-container-collapsed');
                    $('#OS-container').addClass('OS-container-expanded');
                }, 500);
            },
            function(){
             if(timer) {                        
               clearTimeout(timer);
               timer = null
               }
                $('#OS-container').removeClass('OS-container-expanded');
                $('#OS-container').addClass('OS-container-collapsed');
            });
    });

Essentially, on the hover, the CSS classes are swapped to perform an expand or collapse of the menu (creating the pop-out effect) but only if the mouse is hovering for more than 1/2 second (500ms).



LIVE DEMO: (hover over the Online Services and Company Links box)
















View the source of this post and check out the full jQuery code, styles, and markup! Look for "Online Services Menu".