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

Configuring ACS as trust broker in SharePoint 2013 farm

Scenario: How to configure ACS as trust broker in SharePoint 2013 farm, to run Provider hosted apps with Azure Access Control (ACS) trust

Solution:
You can get the detailed manual steps to configure ACS from below link. This will give you an overall idea
http://www.google.com/url?sa=t&rct=j&q=&esrc=s&frm=1&source=web&cd=3&ved=0CDwQFjAC&url=http%3A%2F%2Fdownload.microsoft.com%2Fdownload%2F6%2F4%2F4%2F644BA525-96CB-4739-B08F-18949A9BDADC%2Fsps-2013-config-one-way-hybrid-environment.pdf&ei=Y3HgUfPyMIr1iQL6u4GACA&usg=AFQjCNGkhEKjXXtQNbR5f-nNj3FrylV5ww&sig2=c1oCRjsJMPaCtYpi6Gv2qw

OR if you have problem opening above link. you can search in Google with below title:-
Configure a one-way hybrid environment with SharePoint Server 2013 and Office 365

Below PowerShell Script automates the ACS configuration as explained in the above link:-

 

In the above PowerShell script, modify the below script variables as per your environment:-

 

$CertificatePathPfx="C:\Certificates\mycert.com.pfx"
$CertificatePathCer = "C:\Certificates\mycert.com.cer"
$CertificatePassword="Password"
$FarmFQDN = "*.con.com"
$SharePointTenantUri =  "https://con.sharepoint.com/"
$SharePointAzureTenantName ="con.microsoft.com"
$SPAppPrincipalId ="00000003-0000-0ff1-ce00-000000000000"

Note: After ACS configuration, if your SharePoint 2013 farm has a WAC server it may be disconnected. So office documents may not be saved to the farm. If you see this behavior, disconnect the WAC server from 2013 farm and re-join the server.