Reporting Services 2012 Integrated Mode with SharePoint 2013 "Scale Out" in Staging Environment

We wanted to test out SQL Server Reporting Services within SharePoint 2013 but did not want to have everything running all on one server. We found some steps here but that essentially described a single server installation. Therefore we needed to figure out what we needed to do which wasn't too hard.

Our staging servers included the following:

Web Front End
Database Server
Reporting Server

The Reporting Server is essentially an Application Server that is joined to the SharePoint farm. It will run the SSRS Service Application. Running SSRS integrated mode now means that it is fully under SharePoint (thus reducing any double-hop issues).

Here is the high-level installation effort we implemented to make it work:

Web Front End

1. Install SP2013 Prereqs (aka SharePoint Preparation Tool)

2. Install SharePoint Server

3. SharePoint Products Configuration Wizard  - (Create new farm)

4. Create Root Web Application (Port 80)

5. Create Root Site Collection

6. Create all Service Applications manually (this was for other purposes - Reporting services was not one them yet)

 

Report Server

1. Install SP2013 Prereqs (aka SharePoint Preparation Tool)

2. Install SharePoint Server

3. SharePoint Products Configuration Wizard (to join to Farm)

4. Install SQL Server 2012 selecting both Reporting Services and the Reporting Services Add-In for SharePoint

5. Install SQL Server 2012 SP1  for SharePoint 2013 Support

You now need to register and start the SQL Server Reporting Services on the server using PowerShell commands within the SharePoint 2013 Management Shell (on the Report Server):

Install-SPRSService
Install-SPRSServiceProxy

get-spserviceinstance -all |where {$_.TypeName -like "SQL Server Reporting*"} | Start-SPServiceInstance

I originally did not have this documented and didn't realize I missed this part until I tried to add another Reporting Services server to the staging farm and the service did not appear in the Services for Server. Ahhh.

 

Back on the Web Front End:

1. Install SQL Server 2012 selecting ONLY the Reporting Services Add-In for SharePoint

2. Install SQL Server 2012 SP1 for SharePoint 2013 Support

 

Now in Central Admin, SQL Server Reporting Services appears as a new Service Application to create:

Create the new SSRS Service Application.

 

The Service Appears under Services on Server (only when looking at the Reporting Server):

 

To add another Report Server to the farm, follow only the steps under the Report Server section.

 

SharePoint 2013: Document Library and Search Results Document Preview with Office Web Apps Server

Check out the whole SharePoint 2013 Solution Series
New Titles Added Weekly!

I kept reading that if you have Office Web Apps Server up and running, you can connect it to your SharePoint farm and then, automagically, document previews will start appearing both in Search and in Document Libraries. I have not found any examples of what this document preview looks like so I had to take matters into my own hands.

I finally installed Office Web Apps Server on one of our staging servers and connected it to a SharePoint 2013 farm in stage. After some warming up, the document previews for Office documents started working like a charm. For the Search Results, I needed to run a full crawl again. This is because the javascript in the Display Templates uses alternate URLs (defined by crawled properties) which take the Office Web Apps server and the document preview into consideration.

I essentially followed the steps here: http://technet.microsoft.com/en-us/library/jj219455(v=office.15).aspx and used the standalone test environment section using Internal HTTP. I have some screenshots of the steps so I will probably post my installation journey as well. (UPDATE: The installation post is here.)

However, I was so excited that the Office document preview worked that I wanted to share the results. Below are some screenshots.

Search Results - Hovering over a Word document (click image to enlarge)

Document Library - Selecting the elipsis (...) on a Word document library item (click image to enlarge)

 

The previews under Office Web Apps server is only for Microsoft Office documents. Therefore PDF previews do not render. However, at least for the search results, I have a PDF Preview solution.



 



The document preview is the "cool" part about Office Web Apps server but not the business value part. The business value is the ability to edit and work with Office documents in the browser without the need for local Office applications.

What does this mean? This means that business users may interact with Office documents through SharePoint directly in the browser on any device. So whether it is a laptop, desktop, smart phone, or iPad - there are no constraints in making those last minute edits.

 

SharePoint 2013: PDF Preview in Search Results

Check out the whole SharePoint 2013 Solution Series
New Titles Added Weekly!

Introduction
One of the enhancements in SharePoint 2013 Enterprise Search results is the ability to preview documents using Office Web Apps Server. I am in the process of seeing what that looks like and will post an Office Web Apps server entry soon. UPDATE: Here is the post.

Anyway, the issue is that if you have Office Web Apps configured, the only documents that show previews are Microsoft Office documents (e.g. Word, Excel, etc.). The preview of PDF documents is not implemented or supported using Office Web Apps.

Therefore, I created my own PDF preview for Enterprise Search results by customizing the new search Display Templates. This works for local site search results too which I explain at the bottom of this post.

To understand overall PDF functionality and behaviors, read the whole story here.

Prerequisites
Here are some things you need in place before implementing this solution:

• Enterprise Search Application configured and running
• Crawled content that includes PDF documents
• Enterprise Search Center site collection
• SharePoint Designer 2013

Modifying the PDF Search Result Template
This is the main effort and is fairly easy. I found it better to modify the templates using SharePoint Designer 2013 although they are accessible through the SharePoint master page UI.

Step 1: Fire up SharePoint Designer 2013 and Open the Search Center Site

 

 

Step 2: Click on All Files from the left-hand navigation
If you attempt to get the files from the Master Pages, you will not see any items once you get to the Display Templates folders.

You will see the list of all files in the main window.

Step 3: Double-click on the _catalogs folder in the main window
This action displays the _catalogs structure under the left-hand navigation.

Expand the _catalogs folder, then the masterpage folder, and then the Display Templates folder.

Step 4: Click on the Search folder under Display Templates

 

The list of Search display templates is shown in the main window area.

Step 5: Right-click on Item_PDF_HoverPanel.html and select Edit File in Advanced Mode

 

 

Step 6: Paste the following code within the most inner <div>


    <object data="_#= ctx.CurrentItem.Path =#_" type="application/pdf" width="500px" height="630px" >
       <p>It appears you don't have a PDF plugin for this browser/device.
      You can <a href="_#= ctx.CurrentItem.Path =#_">click here to
       download the PDF file.</a></p>
    </object>

Note: You may find it better to use the following for width and height: width="100%" height="500px"

I actually replaced the Render Header and Render Body divs with the object code.

Step 7: Save the file
When saving the file, you may get a warning about breaking from the site definition. Click OK.
What happens behind the scenes is that the HTML changes are incorporated into the javascript version of the template (Item_PDF_HoverPanel.js).

Step 8: Test results
Perform a search from your search center that produces PDF document results. Hover over the PDF document to see the preview:

Currently the object tag uses hard-coded widths and heights. It is not using any responsive design styles. Me and my designer will be working on producing a more consistent respresentation for the PDF preview.

Local Search Implementation
There is still local site search results using the OSSSearchResults.aspx. You may implement the PDF Preview for these results as well but the modification is slightly different.

You open the site in SharePoint Designer 2013 and navigate to the Display Templates in the same fashion. However, for local (non Enterprise Search sites) there are no HTML templates - only the javascript files. You may simply copy the javascript that was created in your Enterprise Search Center site collection (when you modified the HTML) or paste the following code:

,'    <object data="', ctx.CurrentItem.Path ,'" type="application/pdf" width="280px" height="430px">'
,'       <p>It appears you don\'t have a PDF plugin for this browser/device.'
,'       No biggie... you can <a href="', ctx.CurrentItem.Path ,'">click here to'
,'       download the PDF file.</a></p>'
,'    </object>'

Save the file and preview the results by performing a local search in the SharePoint site.

It appears that the hover container in this case is being constrained in regards to its size. Therefore  I needed to use 280px for width and 430px for height. I will be working on making this more flexible.

To see what Office Web Apps server does for previewing of documents, see this post.
For Installation steps, see this post.

 

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

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)

Online Services and Company Links

Online Services

• Audio Conference Reservation
• Cost Allocation
• Financial Reports
• Invoice & Expense Processing
• Secure File Transfer
• Video Conference Reservation
• Mail Notification
• Wall Street Journal

Company Links

• Client Visit Feedback Form
• Evaluation Databases
• Diversity
• Rules of Professional Conduct
• Staff Positions
• Recruiting

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