Month: February 2013

Julie & Julia

On 31st Dec 2012 I made a New Year resolution that I’ll be doing One new thing every Month that will be a new challenge in itself.

For first two months I’ve followed it religiously and with end of second month around the corner I was thinking about the task to pick up for next month. First task I chose was a test of my self-control, second one was aimed for improvement in interpersonal skills.

Now task I’ve chosen will target in improving technical knowledge and help me in understanding concepts of programming, hopefully make me better at what I suck at i.e. CODINGJ. It will stretch beyond the boundary of this month, it will test dedication and commitment. The motivation of this task came from the Movie Julie & Julia where Julie Powel started cooking each and every recipe that was available in Julia Child’s book. On same lines, I’ve thought of reading and trying each and every blog post published by Eric Lippert on his MSDN and personal blog.

I hope I’ll be able to fulfill this challenge and succeed in it better than I was for my previous tasks.

Creating a Simple FAQ page fetching from Sharepoint 2013 List

There was a question asked in stackoverflow regarding “Dynamically Showing/Hiding Panels using JQuery”

http://stackoverflow.com/questions/15076494/dynamic-show-hide-panels-using-jquery

Here the author had a scenario where he wanted to create a FAQ page fetching data from a Sharepoint List and toggle Response visibility by clicking on Question.

So here is the code for that (thanks to the author of question as I’ve just modified the code slightly to fix the issue he had)

In this scenario we have a custom list FAQs with two Columns “Question” and “Response”

[sourcecode language=”javascript”]
<script src="/sites/AppDemoSite/SiteAssets/jquery-1.9.1.js">
</script><script type="text/javascript">

$(document).ready(function()
{
var soapEnv =
"<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org/soap/envelope/’>
<soapenv:Body>
<GetListItems xmlns=’http://schemas.microsoft.com/sharepoint/soap/’>
<listName>FAQs</listName>
<viewFields>
<ViewFields>
<FieldRef Name=’Question’ />
<FieldRef Name=’Response’/>
<fieldRef Name=’ID’/>
</ViewFields>
</viewFields>
</GetListItems>
</soapenv:Body>
</soapenv:Envelope>";

$.ajax({
url: "/sites/AppDemoSite/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: processResult,
contentType: "text/xml; charset="utf-8""
});
});
function processResult(xData, status) {
$(xData.responseText).find("z\:row").each(function() {
var iDesc=$(this).attr("ows_Question");
var iResp=$(this).attr("ows_Response");
var iID=$(this).attr("ows_ID");
var liHtml = "<div class=’question’ id=’"+iID+"’>" + iDesc + "</div><div class=’answer’ id=’a"+iID+"’><a href=’/sites/AppDemoSite/Lists/FAQs/DispForm.aspx?ID=’"+iID+"’>"+ iResp +"</a></div>";
alert(liHtml);
$("#FAQ").append(liHtml);
});
$(".question").click(function(){
$("#a"+$(this).attr("id")).slideToggle("slow");});
}
</script>
<h1>A Big Fat FAQ</h1>
<div id="FAQ">
[/sourcecode]

Customizing SharePoint 2013 Search Display Template

In this post we’ll see how to configure SharePoint 2013 Search Display Template. Here we’ll add “Rating” column to the Search results.

As of now we have a document library “DocumentSearchLibrary” with some pptx files and rating.

When we use SharePoint search

We get out of box results in given format

To configure search results to display “Rating” column

Go to, Site settings -> Master Pages (or Master pages and page layouts) -> Display Templates -> Search.

Here we’ll be editing display template just for PowerPoint files, so Download a Copy of “Item_PowerPoint.html” and rename it to “Item_PowerPoint_Modified.html”.

Note: If you are not able to see HTML files and only .js files are visible, in that case you have to enable Publishing feature at site collection level. To enable that see the blogpost here.


Now open “Item_PowerPoint_Modified.html” in Visual Studio or Editor of your choice.

Change the Title from “PowerPoint Item” to “PowerPoint Item Modified”.

Find Property named “ManagedPropertyMapping” and ‘AverageRating’:’AverageRating’ at end of it. We are adding Average Rating because Rating column is Mapped with name AverageRating in Search Schema.



In end Add “ctx.CurrentItem.AverageRating“, this will show numeric value of rating.

Upload this file to Search Display Template folder.

Now go to Site Settings -> Result Types and Create a Copy of “Microsoft PowerPoint” and Rename it to “Microsoft PowerPoint Modified”.

Select “PowerPoint Item Modified” in “What Should these results look like?”

Note: Indexing Rating Column in SharePoint online can take a long time

Notice here that the Value is in text format but the desired result needs to have stars in the rating.

For displaying stars we’ll need to write custom code.

Star.js

$.fn.stars = function () {

return $(this).each(function () {


// Get the value


var val = parseFloat($(this).html());


// Make sure that the value is in 0 – 5 range, multiply to get width


var size = Math.max(0, (Math.min(5, val))) * 16;


// Create stars holder


var $span = $().width(size);


// Replace the numerical value with stars

$(this).html($span);

});

}

$(function () {

$(‘span.stars’).stars();

$(‘span.stars’).toggle();

});

Star.css

span.stars, span.stars
span {

display: block;


background: url(stars.png)
0
-16px
repeat-x;


width: 80px;


height: 16px;

}

span.stars
span {


background-position: 0
0;

}

Stars.png

Upload these files in desired folder and modify the code accordingly. (For sake of demo I just uploaded in Search folder under display template.

Now add this script tag just below body of “Item_Powerpoint_Modified.htm”

<script>
$includeScript(this.url, “https://*****/teams/*****/_catalogs/masterpage/display templates/search/Star.css”);

$includeScript(this.url, “https://******/teams/*****/_catalogs/masterpage/display templates/search/Star.js”);


</script>

Add following code at end of Item_Powerpoint_Modified.htm


<div>_#= $htmlEncode(ctx.CurrentItem.Author) =#_ <span
class=”stars”
style=”display:none;“>_#= $htmlEncode(ctx.CurrentItem.AverageRating) =#_</span></div>

<div>_#= $htmlEncode(ctx.CurrentItem.AverageRating) =#_</div>


Save the file, Upload it to Master Pages – > Display Template ->Search

Now go and check the search page J.


PS: For more info on Rating Control refer to http://stackoverflow.com/questions/1987524/turn-a-number-into-star-rating-display-using-jquery-and-css .

Thanks to Tatu Ulmanen without whose help this post would have been incomplete.

More PS : 1. Make Sure Crawl Property of AverageRating is set. For that go to Site Settings -> Search Schema -> Search for AverageRating.

Open AverageRating Managed Property and Add Mapped crawl propert as ows_AverageRating if its not there.


It may take some time before Sharepoint crawls it and it is indexed for search.

Customizing SharePoint 2013 Search Display Template

In this post we’ll see how to configure SharePoint 2013 Search Display Template. Here we’ll add “Rating” column to the Search results.

As of now we have a document library “DocumentSearchLibrary” with some pptx files and rating.

When we use SharePoint search

We get out of box results in given format

To configure search results to display “Rating” column

Go to, Site settings -> Master Pages (or Master pages and page layouts) -> Display Templates -> Search.

Here we’ll be editing display template just for PowerPoint files, so Download a Copy of “Item_PowerPoint.html” and rename it to “Item_PowerPoint_Modified.html”.

Note: If you are not able to see HTML files and only .js files are visible, in that case you have to enable Publishing feature at site collection level. To enable that see the blogpost here.


Now open “Item_PowerPoint_Modified.html” in Visual Studio or Editor of your choice.

Change the Title from “PowerPoint Item” to “PowerPoint Item Modified”.

Find Property named “ManagedPropertyMapping” and ‘AverageRating’:’AverageRating’ at end of it. We are adding Average Rating because Rating column is Mapped with name AverageRating in Search Schema.



In end Add “ctx.CurrentItem.AverageRating“, this will show numeric value of rating.

Upload this file to Search Display Template folder.

Now go to Site Settings -> Result Types and Create a Copy of “Microsoft PowerPoint” and Rename it to “Microsoft PowerPoint Modified”.

Select “PowerPoint Item Modified” in “What Should these results look like?”

Note: Indexing Rating Column in SharePoint online can take a long time

Notice here that the Value is in text format but the desired result needs to have stars in the rating.

For displaying stars we’ll need to write custom code.

Star.js

$.fn.stars = function () {

return $(this).each(function () {


// Get the value


var val = parseFloat($(this).html());


// Make sure that the value is in 0 – 5 range, multiply to get width


var size = Math.max(0, (Math.min(5, val))) * 16;


// Create stars holder


var $span = $().width(size);


// Replace the numerical value with stars

$(this).html($span);

});

}

$(function () {

$(‘span.stars’).stars();

$(‘span.stars’).toggle();

});

Star.css

span.stars, span.stars
span {

display: block;


background: url(stars.png)
0
-16px
repeat-x;


width: 80px;


height: 16px;

}

span.stars
span {


background-position: 0
0;

}

Stars.png

Upload these files in desired folder and modify the code accordingly. (For sake of demo I just uploaded in Search folder under display template.

Now add this script tag just below body of “Item_Powerpoint_Modified.htm”

<script>
$includeScript(this.url, “https://*****/teams/*****/_catalogs/masterpage/display templates/search/Star.css”);

$includeScript(this.url, “https://******/teams/*****/_catalogs/masterpage/display templates/search/Star.js”);


</script>

Add following code at end of Item_Powerpoint_Modified.htm


<div>_#= $htmlEncode(ctx.CurrentItem.Author) =#_ <span
class=”stars”
style=”display:none;“>_#= $htmlEncode(ctx.CurrentItem.AverageRating) =#_</span></div>

<div>_#= $htmlEncode(ctx.CurrentItem.AverageRating) =#_</div>


Save the file, Upload it to Master Pages – > Display Template ->Search

Now go and check the search page J.


PS: For more info on Rating Control refer to http://stackoverflow.com/questions/1987524/turn-a-number-into-star-rating-display-using-jquery-and-css .

Thanks to Tatu Ulmanen without whose help this post would have been incomplete.

More PS : 1. Make Sure Crawl Property of AverageRating is set. For that go to Site Settings -> Search Schema -> Search for AverageRating.

Open AverageRating Managed Property and Add Mapped crawl propert as ows_AverageRating if its not there.


It may take some time before Sharepoint crawls it and it is indexed for search.

Display Template and Page Layouts not available

Symptom:

While trying to modify Display template in SharePoint site you go to

Site Settings -> Master Page – > Display Template , And open a folder to edit .html file to edit existing display template and all you see is lots of Javascript files but no HTML file.

Reason:

Publishing features of your site/ site collection is not running.

Solutions:

Go to Site Settings -> Site Collection Features -> SharePoint Server Publishing Infrastructure, And Activate it.


Now Go to, Site Settings -> Manage Site Features -> SharePoint Server Publishing, And Activate it.


Now if you’ll go to display template you’ll be able to see .html files along with .js files. J

New In Visual Studio 2012

Other than the new Look and feel of Visual Studio 2012 which some may like and some may not there have been various other changes.

Many changes like search bars, quick launch etc… are readily visible to the end user others for the performance improvement standpoint are not on UI level but still observable.

Look at given examples, you will find there many features which made their way into the Visual Studio from “Visual Studio Power Tools” and we are glad they made through.

  1. Collapse all is available out of the box.

    The most frustrating part in Visual Studio for large projects was that while if you had various projects in your solution window then opening and closing all those was a pain.

    Now you have a simple collapse all button available which can make the life a lot easier.


  2. Want to Find something that’s there in Project name, Type name, Data member. Just Search in solution explorer.

  3. Scope to this: Sometimes lots of projects in Solution Explorer make life difficult and confusing while working on a project. Now you can keep just one project in scope and focus on it.

            

    In above scenario you only have one project in focus, like wise you can do for folders as well. To go back to previous state just click little back or home button on top. If you are like me and like shortcuts. Use Ctrl + Left Arrow.

  4. Quick Launch: Speaking on Shortcuts: How would you add a new Project to your solution.

This way? Going to file then add new project

Or this Way? Right clicking on solution and add new project

These are old ways of Life. Try something New.

    Press Ctrl + Q and it will take you to Quick Launch bar on Top left, then start typing what you want to do . Good thing is that it even remembers what you did recently J

  1. As shown above Object Browser can be easily opened using Quick Launch

    And can be used to Navigate through Objects on your projects.

But now forget that as most of the functionality it supports can be done in solution explorer itself and that too in better segregated manner as you can see which object is in which file


  1. Handling many files in Visual Studio has always been challenging, but not anymore.

    You can pin various files together and they will always be first to be displayed In Top bar and you can always go through them quickly.

    Now I’ve opened another web.config but that comes after the pinned files

    The best part is that you can close the solution and reopen it, Pinned files will remember their state.

  2. Navigating through Error in code made easier by filters and search. J

    If you have error while building the solution and you want to filter on a particular document, project etc… life is easier now with little filter on the left.

            

    In above, Filtering it shows error only on current page I am working on.

    There are many more changes in Visual Studio. May be we’ll discuss those in another post.