Securing a SharePoint Site with SSL

Google has announced that they are starting to give more weight in search result for sites protected with SSL. If you are publishing your SharePoint sites over the internet, applying SSL should become a priority now. However, security (encryption over SSL) should be considered important whether SharePoint sites are on the internet or intranet.

Securing a SharePoint site with SSL is no different than securing other websites hosted on IIS. What we need is a valid server certificate. For development or testing environment, it is OK to use self-signed certificate, or certificates generated by local Active Directory Certificate Authority. Otherwise, we have to enroll for a certificate from external certificate authority (CA) such as Comodo SSL and Go Daddy SSL.

Signing Certificate Request with Private Key

When we create a certificate enrollment to external CA, don’t forget to sign it with a private key. We already wrote an article about this here: Signing Certificate Request with Private Key. If we forget to sign our certificate request with a private key, we won’t be able to use the server certificate in IIS for securing a website.

Install Certificate on IIS

When the certificate is ready, there should be two certificate files sent by CA to you. Each CA has different instruction on how to install those files. We enrolled the certificate from Go Daddy, so we followed their KB on how to install certificate to IIS 8 here: Installing an SSL Certificate in Microsoft IIS 8.

Create Alternate Access Mapping for Secured Site

When we are done with installation of server certificate on IIS, we should configure SharePoint to use it. Our SharePoint previously uses port 80, so to be able to use SSL (port 443), we have to create an alternate access mapping from SharePoint Central Administration:

Alternate Access Mapping

Note: don’t forget to add an entry in DNS if you use FQDN for the new alternate access mapping URL.

Redirect HTTP Access to HTTPS

If you plan to allow only HTTPS connection, then you have to redirect all HTTP access to HTTPS. You can do this from IIS Redirection feature:

IIS Redirection

Source: Securing a SharePoint Site with SSL


Adding Slider to a SharePoint Using Content by Query Web Part (CQWP)

Modern web site usually comes with slider. SharePoint doesn’t have slider feature by default, but SharePoint is a modern web site too. So, SharePoint should be able to display slider. Yes it can, and it’s easy. We don’t have to create slider from scratch in SharePoint. It is available as separate product that can be added to SharePoint. Also if you use SharePoint 2013, you can find a lot of slider apps.

Most slider is a JavaScript + CSS library. It works with any plain HTML pages in a web browser. So, it doesn’t care with server back-end technology underlying a web page. Whether we use ASP.NET, PHP, or SharePoint, or others; many sliders should work just fine. Slider apps in SharePoint 2013 add extra feature that makes us easier to work with slider on SharePoint. But, without apps, working with slider is not difficult. In this article, we want to show you an example.

There are so many slider library available on the internet. Let us mention some of them: Revolution Slider, LayerSlider, FlexSlider, Nivo Slider, and so on. We will use LayerSlider in this post. This choice is made because we have a license of it and we already used it in one of our projects. Unfortunately it is not free: LayerSlider Responsive jQuery Slider Plugin. If you want to try a free slider, you can download FlexSlider.

Now, it’s time to go down to details. We need to use SharePoint Designer for this purpose. We use 2010 version because it will be deployed to SharePoint 2010. But you can follow similar procedure for SharePoint 2013. Here is the step by step of adding Layer Slider to SharePoint:

Step 1 – Upload Layer Slider to SharePoint

After extracting (we use version 5.1.0) you should see several folders. Upload layerslider folder to a library in the SharePoint site where the slider will be added. We prefer to upload it to SiteAssets library. Note: you can use drag and drop folder between your local folder to your SharePoint davwwwroot folder. For example, our site is http://pena-dev:8003, we can access it from Windows Explorer by typing the following address: \\pena-dev@8003\davwwwroot\SiteAssets.

Copying layerslider Using Windows Explorer

Step 2 – Create and Configure a CQWP Web Part in a SharePoint Page

Our scenario is to use CQWP web part as the source HTML of our slider. The CQWP web part can display images from a Picture Library. This approach eliminates the need to create custom web part. We already wrote several articles about this here:

Note that we have to change the HTML structure of CQWP output. By default it uses <ul> and <li> tag. We have to change it to use <div> tag. We can use existing XSL templates on SliderItemStyle.xsl (this is our custom XSLT formatter which was copied from ItemStyle.xsl), but in order to give more freedom on changing tags, we copied existing ClickableImage template, paste it and rename it to SliderImages:

SliderImages Template

Don’t forget to choose this new SliderImages template in CQWP web part properties:

SliderImages in CQWP Properties

Our CQWP should construct the HTML output according to the requirement of LayerSlider. From its simple example demo page, the HTML structure of the slider should resemble as the following code snippet:

&amp;lt;div class=&amp;quot;layerslider&amp;quot;&amp;gt;
  &amp;lt;!-- slide 1 --&amp;gt;
  &amp;lt;div class=&amp;quot;ls-slide&amp;quot;&amp;gt;
    &amp;lt;!-- background image --&amp;gt;
    &amp;lt;img class=&amp;quot;ls-l&amp;quot; src=&amp;quot;&amp;quot; /&amp;gt;

  &amp;lt;!-- slide 2 --&amp;gt;
  &amp;lt;div class=&amp;quot;ls-slide&amp;quot;&amp;gt;
    &amp;lt;!-- background image --&amp;gt;
    &amp;lt;img class=&amp;quot;ls-l&amp;quot; src=&amp;quot;&amp;quot; /&amp;gt;

Using techniques we already described in Changing CQWP HTML Output Structure, it should be easy to change the output of our CQWP to meet the requirement of LayerSlider.

Step 3 – Hook the Slider

Now it’s time to hook the slider into the page. We have to add references to all JavaScript and CSS files of the slider. We can do it from a single page where we want to put the slider. Or, we can put it in master page if it is required to be accessible from any pages within the site. In this article, we use the single page approach. So, in our home.aspx, we add the following code snippet:

&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;
	width: 720px !important;
	height: 364px !important;

&amp;lt;!-- LayerSlider stylesheet --&amp;gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;../SiteAssets/layerslider/css/layerslider.css&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;

&amp;lt;!-- External libraries: jQuery &amp;amp; GreenSock --&amp;gt;
&amp;lt;script src=&amp;quot;../SiteAssets/layerslider/js/jquery.js&amp;quot; type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script src=&amp;quot;../SiteAssets/layerslider/js/greensock.js&amp;quot; type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;

&amp;lt;!-- LayerSlider script files --&amp;gt;
&amp;lt;script src=&amp;quot;../SiteAssets/layerslider/js/layerslider.transitions.js&amp;quot; type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script src=&amp;quot;../SiteAssets/layerslider/js/layerslider.kreaturamedia.jquery.js&amp;quot; type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;
			pauseOnHover: false,
			skinsPath: '../SiteAssets/layerslider/skins/'

We use fixed-width and fixed-height for our slider, so we put inline CSS attributes for this purpose. Then we add references to all CSS and JavaScript files required by LayerSlider that we already stored in SiteAssets library.

Then, JavaScript code is called on document ready event to convert our .layerslider div into slider. Now, we should be able to see our slider inside a SharePoint CQWP:

LayerSlider on SharePoint

LayerSlider has many features and options that can enrich your SharePoint pages. What we’ve shown so far is the basic or simplest LayerSlider on a page. Our emphasize is on how to use LayerSlider with SharePoint. You can experience with those bells and whistles of LayerSlider to make your SharePoint pages more interactive and interesting.

Source: Adding Slider to a SharePoint Using Content by Query Web Part (CQWP)

Changing CQWP HTML Output Structure

This post is still about CQWP, continuing our previous posts: Playing Around with Content by Query Web Part (CQWP) and Using Your Own XSLT in Content by Query Web Part (CQWP). Based on the knowledge we obtained from those previous posts, now we should be ready to make some changes in the output structure of CQWP: changing HTML tag UL and LI to DIV and DIV respectively.

By default, CQWP constructs HTML output as UL and LI tags. If we view the source or use Developers Tool to examine HTML tags from CQWP, the we can see the following construct:

&amp;lt;ul class=&amp;quot;dfwp-column dfwp-list&amp;quot;&amp;gt;
  &amp;lt;li class=&amp;quot;dfwp-item&amp;quot;&amp;gt; .. &amp;lt;/li&amp;gt;
  &amp;lt;li class=&amp;quot;dfwp-item&amp;quot;&amp;gt; .. &amp;lt;/li&amp;gt;
  &amp;lt;li class=&amp;quot;dfwp-item&amp;quot;&amp;gt; .. &amp;lt;/li&amp;gt;

Our objective is to change it to the following HTML construct:

&amp;lt;div class=&amp;quot;container&amp;quot;&amp;gt;
  &amp;lt;div class=&amp;quot;item&amp;quot;&amp;gt; .. &amp;lt;/div&amp;gt;
  &amp;lt;div class=&amp;quot;item&amp;quot;&amp;gt; .. &amp;lt;/div&amp;gt;
  &amp;lt;div class=&amp;quot;item&amp;quot;&amp;gt; .. &amp;lt;/div&amp;gt;

And why would we do that? Well, the answer may vary, but in our case, we are preparing our CQWP to be used by a slider JavaScript library. And the slider requires using DIV instead of UL and LI.

In our previous post, we already explained how to use our own XSL formatter to output custom HTML. So, to achieve our objective changing UL and LI to DIV, we have to find where the occurrence of those tags in our XSLT file and change it there.

Open SliderContentQueryMain.xsl (this is our custom XSLT formatter which was copied from ContentQueryMain.xsl) in a text editor (note that you should check-out the file first before you can edit it), and go to line 84. You should see the following line of codes:

  &amp;lt;xsl:variable name=&amp;quot;BeginColumn1&amp;quot; select=&amp;quot;string('&amp;amp;lt;ul class=&amp;amp;quot;dfwp-column dfwp-list&amp;amp;quot; style=&amp;amp;quot;width:')&amp;quot; /&amp;gt;
  &amp;lt;xsl:variable name=&amp;quot;BeginColumn2&amp;quot; select=&amp;quot;string('%&amp;amp;quot; &amp;amp;gt;')&amp;quot; /&amp;gt;
  &amp;lt;xsl:variable name=&amp;quot;BeginColumn&amp;quot; select=&amp;quot;concat($BeginColumn1, $cbq_columnwidth, $BeginColumn2)&amp;quot; /&amp;gt;
  &amp;lt;xsl:variable name=&amp;quot;EndColumn&amp;quot; select=&amp;quot;string('&amp;amp;lt;/ul&amp;amp;gt;')&amp;quot; /&amp;gt;

Change it to the following construct:

  &amp;lt;xsl:variable name=&amp;quot;BeginColumn1&amp;quot; select=&amp;quot;string('&amp;amp;lt;div class=&amp;amp;quot;container&amp;amp;quot; style=&amp;amp;quot;width:')&amp;quot; /&amp;gt;
  &amp;lt;xsl:variable name=&amp;quot;BeginColumn2&amp;quot; select=&amp;quot;string('%&amp;amp;quot; &amp;amp;gt;')&amp;quot; /&amp;gt;
  &amp;lt;xsl:variable name=&amp;quot;BeginColumn&amp;quot; select=&amp;quot;concat($BeginColumn1, $cbq_columnwidth, $BeginColumn2)&amp;quot; /&amp;gt;
  &amp;lt;xsl:variable name=&amp;quot;EndColumn&amp;quot; select=&amp;quot;string('&amp;amp;lt;/div&amp;amp;gt;')&amp;quot; /&amp;gt;

Go to line 35, you should see the following line of codes:

  &amp;lt;xsl:variable name=&amp;quot;BeginListItem&amp;quot; select=&amp;quot;string('&amp;amp;lt;li class=&amp;amp;quot;dfwp-item&amp;amp;quot;&amp;amp;gt;')&amp;quot; /&amp;gt;
  &amp;lt;xsl:variable name=&amp;quot;EndListItem&amp;quot; select=&amp;quot;string('&amp;amp;lt;/li&amp;amp;gt;')&amp;quot; /&amp;gt;

Change it to the following construct:

  &amp;lt;xsl:variable name=&amp;quot;BeginListItem&amp;quot; select=&amp;quot;string('&amp;amp;lt;div class=&amp;amp;quot;item&amp;amp;quot;&amp;amp;gt;')&amp;quot; /&amp;gt;
  &amp;lt;xsl:variable name=&amp;quot;EndListItem&amp;quot; select=&amp;quot;string('&amp;amp;lt;/div&amp;amp;gt;')&amp;quot; /&amp;gt;

Check-in the file, and refresh our web part. Now, if we see the source of our CQWP web part, UL and LI tags have been replaced by DIV tags.

CQWP Source

Source: Changing CQWP HTML Output Structure

Using Your Own XSLT in Content by Query Web Part (CQWP)

To change the HTML output of a CQWP web part, we have to edit out of the box XSLT template provided by SharePoint. We already wrote an article on how to do this here: Playing Around with Content by Query Web Part (CQWP). But, OOTB XSLT formatter is shared to all CQWP web parts in the same site. If you are sure that you will only have one CQWP in your SharePoint site, it’s OK to go with this direct edit approach. Otherwise, let’s try a better solution: use custom XSLT formatter for each CQWP web part.

This solution doesn’t require custom coding with Visual Studio. We need only SharePoint Designer, or it’s also doable with any text editor. We’ll break down this solution on a step-by-step below:

Step 1 – Duplicate OOTB XSLT Files

If we open OOTB XSLT formatter files in a text editor, we should come to conclusion immediately that they are all complex ones. So, don’t try to understand them entirely. Just, use them as the starting point. For our purpose in this article, we copied two of them: ContentQueryMain.xsl and ItemStyle.xsl. We paste them in the same directory and, then rename them to SliderContentQueryMain.xsl and SliderItemStyle.xsl respectively.

Duplicate CQWP XSLT Files

Step 2 – Export CQWP Web Part to a File

We can find Export menu item from the same menu where Edit Web Part menu item is located. Use this menu item to export our CQWP web part to a file. We named the file SliderCQWP.webpart.

Export CQWP Web Part

Step 3 – Edit SliderCQWP.webpart

Use any text editor to edit SliderCQWP.webpart, and change the following two lines:

The first one is to change ItemXslLink property, point it to the SliderItemStyle.xsl location:

&amp;lt;property name=&amp;quot;ItemXslLink&amp;quot; type=&amp;quot;string&amp;quot;&amp;gt;/Style Library/XSL Style Sheets/SliderItemStyle.xsl&amp;lt;/property&amp;gt;

And the second one is to change the MainXslLink property, point it to the SliderContentQueryMain.xsl location:

&amp;lt;property name=&amp;quot;MainXslLink&amp;quot; type=&amp;quot;string&amp;quot;&amp;gt;/Style Library/XSL Style Sheets/SliderContentQueryMain.xsl&amp;lt;/property&amp;gt;

Step 4 – Upload SliderCQWP.webpart to Web Part Gallery

Open Web Part Gallery from http://<server-name>/_catalogs/wp/Forms/AllItems.aspx. Upload SliderCQWP.webpart, and rename its title to Slider Content Query.

Web Part Gallery

Step 5 – Add “Slider Content Query” to Home Page

Now we should be able to use Slider Content Query web part to the home page. When adding a web part, choose Miscellaneous category, our Slider Content Query web part should be listed there.

Adding Web Part


To test it, just edit the SliderItemStyle.xsl by adding some visual text that will be rendered in the web part. We can put any words here since its purpose is only for testing. For example, we added SLIDER IMG words after <img> tag:

Test Web Part

Refresh the page, we should see the words SLIDER IMG rendered after each image in “Slider Content Query” web part. This is a sign that the web part is indeed using SliderItemStyle.xsl.

CQWP Custom XSLT Output
Source: Using Your Own XSLT in Content by Query Web Part (CQWP)

Playing Around with Content by Query Web Part (CQWP)

One of our favorite features in SharePoint is Content by Query Web Part, or CQWP. It is available in publishing sites or any site that activates publishing feature. In this post we will play around with CQWP to understand a little bit about how to use it, and modify its appearance.

We can use CQWP as is, add it to any SharePoint page and configure its properties. For example, we use CQWP to display images that we’ve already uploaded into Picture Library before.

CQWP of Pictures

Using out of the box CQWP web part, we just need to specify the source library (in this case Pictures):

Source Library of CQWP

Then, we need to adjust its presentation. We use Default for Group style, and Image on Left for Item style. We also use default fields to display on the CQWP:

Styles and Fields

If we view the source of CQWP web part using Firebug in Mozilla Firefox, we can see that it consists of HTML tag <ul> and <li>.

Source of CQWP

From HTML source, we can identify the CSS class of each HTML elements rendering the CQWP web part. If we want to change the appearance of CQWP content, we can add several CSS definition inside the page containing the CQWP web part. For example, to achieve the following appearance:

CSS Effect on CQWP Web Part

We add the following CSS definition on Home.aspx (the containing page):

&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;
	margin: 0;
	padding: 0;	
	display: inline;
  li.dfwp-item div.item 
	display: inline-block;
	width: 200px;
  li.dfwp-item div.item 
	display: inline-block;
	width: 160px;
	text-align: center;

It’s easy, isn’t? But how can we entirely change the HTML structure of CQWP content? for example if we want to change the <div> tag with <span> tag. It’s also easy. The template that renders CQWP web part is located inside the site containing the web part. What we need is SharePoint Designer and a little knowledge about XSLT.

Open the site using SharePoint Designer, then on Navigation Pane, expand All Files node. Navigate to Style Library > XSL Style Sheets. We should see several XSLT files there. Open ItemSyle.xsl in editor window. Here we can see several XSL templates to render various Style that we can choose when configuring CQWP web part. We use Image on left style that corresponds to Default XSL template. Find the Default template, and we should see various elements constructing the HTML result of CQWP web part.

In the following image, we change HTML tag that corresponds to an item from <div> to <span>:

Editing XSLT File of CQWP Web Part Using SharePoint Designer

As a result of changing the <div> tag to <span> tag, the HTML output of CQWP web part is also changed:

Change HTML Tags of CQWP Web Part

So, we already saw that we can do pretty much anything with CQWP in terms of appearance. We can edit its appearance by overriding or adding its CSS, or we can change its HTML structure entirely by editing its XSL templates.
Source: Playing Around with Content by Query Web Part (CQWP)