SharePoint XSL web part with custom xsl for contacts list

In my previous post
I explained how you can create a new interface for a specific list by using the XLV webpart.

This post demonstrates how you can extend the the list view webpart of a list based on the out-of-the-boc contact list template.

Copy paste the following code in an xsl file and upload it in the style library.Tthe final step is to link the listview webpart with the xsl in the style in the style library and your done!

Download the xsl file here:
contacts.xsl



  
  
    
      
        .employee{
          display:block;
          height:60px;
          padding-left: 30px;
          background:  transparent url('http://cdn2.iconfinder.com/data/icons/sem_labs_icon_pack/icons/user_male_olive_blue_black.png') no-repeat 0 0;
        }

        .employee ul{
          list-style-type: none;
        }

        .employeebg:hover{
          border:1px solid silver;
          cursor:pointer;
          color: #fff;
          /* fallback (Opera) */
          background: #008800;
          /* Mozilla: */
          background: -moz-linear-gradient(top, #A2C5DE, #387BAB);
          /* Chrome, Safari:*/
          background: -webkit-gradient(linear,
                      left top, left bottom, from(#A2C5DE), to(#387BAB));
          /* MSIE */
          filter: progid:DXImageTransform.Microsoft.Gradient(
                      StartColorStr='#A2C5DE', EndColorStr='#387BAB', GradientType=0);
        }
      
      ]]>
    
    

Hope it helps,
Tom

VN:F [1.9.22_1171]
Rating: 5.0/10 (7 votes cast)
VN:F [1.9.22_1171]
Rating: +1 (from 3 votes)

SharePoint XSL web part with custom xsl

The new XSLT List View Web Part (XLV Web Part) in SharePoint 2010 allows a new level of SharePoint customization and allows us to create custom webparts in an easier way. I hope this post guides you if you would like to create a custom xsl definition for a specific list.

1) Add the following xsl file in the TEMPLATE/LAYOUTS/XSL folder and name it xml.xsl.
This will make the xsl available on each sharepoint site by using /_layouts/xsl/xml.xsl

Download the xsl file here:
xml.xsl


  
  
    
      <xsl:copy-of select="*"/>
    
  

2) Add a new list view webpart and open the webpart properties screen. Under the category miscellaneous there is a textbox where you can provide a new xsl file reference. Provide the link to /_layouts/xsl/xml/xsl

3) The transformation will (html) encode the source xml and display the result in the browser, copy the xml and store it in your solution as listdata.xml. We will use this xml file to debug our custom xsl definition.

4) Add a new xsl file into the visual studio solution. Copy Paste the following example in the xsl file, it will visualize a collection of divs where each div contains the title value of each row.

 

5) Open the XML menu in visual studio and click on Start XSLT Debugging/b> of use ALT+F5.

6) Visual studio will ask you where it can find the source xml, this is the raison why we created the listdata.xml in our current solution and create a new xml file where the result will be stored in. This result file will contain the html code that will be displayed in the list view webpart.

Hope it helps,
Tom

VN:F [1.9.22_1171]
Rating: 7.3/10 (21 votes cast)
VN:F [1.9.22_1171]
Rating: -1 (from 7 votes)

Integrating knockout.js and SharePoint 2010

Recently I watched the following MIX conference session about konckout.js by Steve Sanderson
http://channel9.msdn.com/Events/MIX/MIX11/FRM08
Even if you never have heard of knockout.js I defenitly recommend you to take a look at it, they placed a lot of effort in the documentation that is available here.

knockout is a library that can be used side by side with jQuery and other libraries but it makes your live as a web developer much easier, interested? :)
The documentation on the website states:
Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.

Basically it allows you to data-bind values to html elements, when the javascript object value changes… the value in the html element changes automatically with it. This can be done without knockout, but it would cost you a lot of event binding and maintenance.

The example I prepared is a sandboxed solution that adds the required javascript files and a demo page to the site assets library. It uses the buitlin SharePoint REST service to retrieve the values and when you select a specific file, display the details of the file.

Step 1: Provision the javascript references as custom actions in the head of each page.



  
  
  
  
  
  
  

Step 2: The demo page content
This demo page is not the perfect startup example, because it combines jQuery, Rest, knockout viewmodel and knockout templates in 1 page.
In my opinion it is the combination of these 4 elements that makes it for us as SharePoint developers very interesting.

Page Actions:
1) We use jQuery to call the REST service and when the results are returned we bind them to a helper class.
2) A viewModel is created and the helper class objects are added as an observableArray.
3) The data-bind attribute is set to a select html element, this will set the values of the observableArray as elements in the combobox.
4) The applyBindings method is called on the knockout object, this will make sure that all the values are set to the correct bindings.

The content of the sharepoint page should look like this:

The example solution can be downloaded here:
  download tomvangaever.knockoutjs

Hope this helps,
Tom

VN:F [1.9.22_1171]
Rating: 9.1/10 (7 votes cast)
VN:F [1.9.22_1171]
Rating: +4 (from 4 votes)

SharePoint 2010 – wss.resx – Builtin Resources and Localization

Multilanguage is ofter very important for you custom SharePoint solutions. But I always catch myself searching the builtin resx files if I can reuse a label…

I listed all the resource labels from C:\inetpub\wwwroot\wss\VirtualDirectories\8080\App_GlobalResources\wss.resx in a list
that contains all the resources labels and their keys sorted for your reference. Whenever creating custom solutions, it might come in hand to reuse the existing labels.

this list contains all the keys and values from the following directory and can be used in the ASPX pages and ASCX user controls by using the following syntax

 

This is the first post in a collection, dedicated to reusing builtin information.

Hope it helps!

alt : wss.resx.pdf

VN:F [1.9.22_1171]
Rating: 10.0/10 (1 vote cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

SharePoint 2010 autocomplete textbox containing listitems

Request:

A simple textbox where users type in a certain value. based on the this value,a suggestion appears by searching the values of a specific field in a specified list.
The solution has to be easy to maintain, performance is very important (more than 100 000 items) and it has to support all the browsers that SharePoint 2010 supports.
finally, it has to be a sandbox solution.

Solution:

Used technologies:

  • out-of-the-box SharePoint 2010 REST Services
  • JQuery & JQuery UI

Code:


<script language="ecmascript" type="text/ecmascript">

// Settings
var url = "http://vwds242/_vti_bin/listdata.svc/Large()";
var field = "Title";

// Onload
$(document).ready(function () {
	$("#tags").autocomplete({
		source: function (req, add) {
			var suggestions = search(req.term, url, field);
			add(suggestions);
		}
	});
});

// Search all the listitems by using the REST Service
// Value is the text that needs to be used in the query
// listurl is the listdata.svc url withouth the filter params
// field is the name of the field where the value in exists
function search(value, listurl, field) {
	var coll = new Array();
	var url =
		listurl + "?$filter=startswith(" + field + ",'" + value + "')";

	$.ajax({
		cache: true,
		type: "GET",
		async: false,
		dataType: "json",
		url: url,
		success: function (data) {
			var results = data.d.results;
			for (att in results) {
				var object = results[att];
				for (attt in object) {
					if (attt == field) {
						coll.push(object[attt]);
					}
				}
			}
		}
	});
	return coll
}
</script>
	
VN:F [1.9.22_1171]
Rating: 8.2/10 (43 votes cast)
VN:F [1.9.22_1171]
Rating: +4 (from 14 votes)