SharePoint2010 Reporting services error: Report Server has encountered a SharePoint error

Scenario: In Production SharePoint environment the "SQL Server Reporting Services" service was running on "App" servers only, and our client is not interested in enabling "SharePoint Foundation Webapplication" service on App servers. Because of this when deploying reports(*.rdl) to the site in Production we are greeted with below error message, that halts reports deployment:-

Report Server has encountered a SharePoint error. ---> Microsoft.ReportingServices.Diagnostics.Utilities.SharePointException: Report Server has encountered a SharePoint error. ---> System.ArgumentException: Feature '80faee05-c18e-45a9-9eac-09e12911c7dd' for list template '11100' is not installed in this farm.  The operation could not be completed.

Solution: The reason for this error is that as "reporting services" is running on App server when it tries to add reports to the "Reports" document library (custom document library created declaratively using XML markup and activated as part of feature), It somehow tries to access the "reports" library locally in 14 hive of App server, and it cant find its schema files and fails.

So creating the "Document Library" programmatically on "FetaureActivated" event resolved the issue. The other not so recommended approach is to save site as template and have a Powershell script to create site from template.

SharePoint2013: Develop Search Based Pages/Applications that pull data based on Query String

Scenario: Develop search based applications or pages that pull data based on query string

Solution: In SharePoint2013 and SPO search based applications\solutions are in rise. On a single web page with minimal coding we can pull variety of data from multiple sources including different SiteCollections.

Consider below Query String that we can append to page URL
#k=Language%3D%22English%22
When we URL decode, it looks like below:-
#k=Language="English"
OR ?k=Language="English" AND Language="Hindi"
OR ?k=Language:"English" OR Language:"Hindi"

On a single webpage we can add Script\Code, multiple CSWPs and other search related web parts and configure them to pull data related to above Query String parameter.

For example, I can add a CSWP on to a page and configure its query as below:-
{SearchBoxQuery} path:"https://sharepoint.com/teams/mydevsite" ContentClass:sts_web

The above query returns all the websites in a site collection specified in the "path" attribute. When user navigates to this page from a different page with above query string parameter, it only displays websites that are tagged with "Language = English"

On the same page we can also drag and drop Script Editor web part and using REST or JSOM we can pull data from a List Or Document library tagged with "Language = English".

In CSWP we can have below different type of query:-
path:"https://sharepoint.com/teams/mydevsite" (Language={QueryString.Language} OR RefinableString00={QueryString.RefinableString00} )

The above query shows all kinds of data including subsites, Documents etc. from Site Collection specified in the path. In the URL you can append query string like:-

?Language=English

It then show all types of content tagged with "English" Language.

SharePoint 2013 Decoding Search “Refinement” Webpart URL Querystring Using JSOM

Scenario: SharePoint2013 How to extract and decode the “filter category” and “filter term” from the URL that “refinement” webpart constructs using JSOM.

Solution: If we observe the URL when we filter page contents using refinement webpart, the URL will be similar to:-

https://mydevsite/Pages/mypage.aspx#Default=%7B%22k%22%3A%22%22%2C%22r%22%3A%5B%7B%22n%22%3A%22RefinableString00%22%2C%22t%22%3A%5B%22%5C%22%C7%82%C7%82636f6d6d756e69636174696f6e7320616e64206d6564696120736563746f72%5C%22%22%5D%2C%22o%22%3A%22and%22%2C%22k%22%3Afalse%2C%22m%22%3Anull%7D%5D%7D

In the above “RefinableString00” is the filter category and the refiner term is HEX encoded in “636f6d6d756e69636174696f6e7320616e64206d6564696120736563746f72”

The following JSOM code extracts and decodes them.

SharePoint2013 Slide Show of List Items using JSOM

Scenario: I have been tasked with showing SharePoint list items on a webpage with ability for users to slide 2 items at a time with right and left arrow as below

Solution: I have used jQuery plugin bxslider that can be found at:-
http://bxslider.com/
Download the plugin and place required contents (CSS, JS and image files) in StyleLibrary
and below code does the trick.

Also, modify the jquery.bxslider.css file as below:-
1.  Find ".bx-wrapper img" modify it to ".bx-wrapper div"
2. Find
.bx-wrapper .bx-prev {
 left: 10px;
 background: url(controls.png) no-repeat 0 -32px;
}
modify the relative path of  "url(controls.png)" as per your environment.

You can also use another Carousel plugin jCarousel:-
http://sorgalla.com/jcarousel/examples/
Also when Styling UI FontAwesome might be handy:-
http://fortawesome.github.io/Font-Awesome/
We can refer the font awesome CDN as below:-
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/CSS/font-awesome.min.css" type="text/css" />
Or we can place the fontawesome.min.css file and supporting fonts/images to style library.

SharePoint2013: Toggling Between Mobile and Desktop Views with Device Channels Using Cookies

Scenario: Toggling between mobile and desktop views using cookies

Solution: After creating the device channels, to toggle from desktop view to mobile view do the following in the Desktop master page.
<li><a href="javascript:Microsoft.SetMobileView()"><asp:Literal runat="server" Text="MobileView" /></a></li>

var MobileSiteAlias = "Mobile";

Microsoft.SetMobileView = function () {
    Microsoft.CreateChannelCookie(MobileSiteAlias);
    window.location.reload();
}
Below we are setting the "deviceChannel" cookie to expire in 30 days
Microsoft.CreateChannelCookie = function (value) {  
    SetCookie("deviceChannel", value, 30 * 24 * 60);
};

In code (in other pages like display templates) we can use the aliases as below
if(effectiveDeviceChannel == MobileSiteAlias)
{
   //Do something say, have HTML markup specific to particular device
}

SharePoint 2013 Display templates

Creating custom display templates in 2013 using visual Studio 2012

To create a custom display template using VS2012, add new item and select "Module" template
and in its "element.xml"  have below markup.

<Module Name="DisplayTemplates" Url="_catalogs/masterpage">
<File Path="DisplayTemplates\TemplateName.html" Url="Display Templates/Content Web Parts/TemplateName.html" Type="GhostableInLibrary" /> 
</Module>

Referencing custom CSS files in display templates in the body section as below
<script>
$includeCSS(this.url, "_layouts/15/1033/Styles/CustomCSSName.css");
</script>

Creating custom windows app style tiles using JQuery and CSS for SharePoint

Scenario: How to create windows app style tiles dynamically using JQuery and CSS

Solution: HTML and JS markup

The HTML markup from the above can be pasted to custom layouts page, we can add a reference to custom js file and paste the above JQuery script in to it. We can also reference a custom CSS file and paste below markup.

CSS markup

Screen Shot of the Tile