Why I say Data View Plus web part is the best we ever made #1

** UPDATE: try this updated version ** 

KWizCom Data View Plus web part is a simple web part that was built with the designer in mind.

It connects to various data sources, lists, list views, enterprise aggregation feature (more source coming), and does something rather simple.

Unlike the SharePoint data view web part that forces you to work with XSL to transform you data into HTML, the Data View Plus takes a different approach, one that I personally think is much more natural for developers and designers alike.

It works with a list of templates, each template has a simple header, footer and body HTML.

You can simply write the HTML you wish to have at the header and footer of the web part, and the body part will be rendered once for each item in the source.

So, how do you get the values from your data into the HTML? Using simple tokens.

{Item:Title:Value} will render the title field value of the item, you can use this token for any field on the current item.

The list of tokens is long, yet very simple to understand. You can find it in the admin guide of the web part on page 23: Download KWizCom Data View Plus administration guide

So, why do I say it is the best we ever made? Since using it, it took me an hour to make an upcoming birthday’s web part.

I build a new data view plus template called: “Upcoming birthdays”, connected it to my birthdays list and here is the result:

Have you ever asked yourself “how do I show upcoming birthdays in SharePoint?” – now you got the answer! Here is a step by step guide on how I did it:

Step 1: Create birthdays list

Create a custom list, use the title to type the person’s name.

Add a choice field called “Month” with options 01, 02…12

Add a choice field called “Day” with options 01, 02… 31

Fill in some birthdays in the list.

Step 2: Install Data View Plus web part

If you haven’t done so already, download and install KWizCom data view plus web part:

http://www.kwizcom.com/sharepoint-add-ons/data-view-plus/download/

Enable the site collection feature and it will create the default template list for you

Step 3: Build the birthdays list template

Visit the “KWizCom Data View Plus Display Layouts” list at your site collection (Not there? Go back to step 2.)

Create a new item in the list with the following data:

(for easy copy, I’ve put this here: http://pastebin.com/ErgixJWv)

1. Title:

Upcoming Birthdays

2. Description:

This shows a simple grouped list with the next 10 weeks of birthdays coming up.
It splits them into groups: Today, tomorrow, this week, or upcoming.

3. EmptyView: (this is the html that will be rendered if no items were found in the source)

<div>There are no upcoming birthdays.</div>

4. Header: (We will use script to transform our data into a birthday list, so the script will go in the header)

   1: <script>
   1:  
   2: KWizCom.DVPWP.Instances['_WPQ_'].Load = function() 
   3: { 
   4:             var numOfWeeksToShow = 10; 
   5:             var monthNames = { 
   6:                 "01": "Jan", 
   7:                 "02": "Feb", 
   8:                 "03": "Mar", 
   9:                 "04": "Apr", 
  10:                 "05": "May", 
  11:                 "06": "Jun", 
  12:                 "07": "Jul", 
  13:                 "08": "Aug", 
  14:                 "09": "Sep", 
  15:                 "010": "Oct", 
  16:                 "011": "Nov", 
  17:                 "012": "Dec", 
  18:             } 
  19:             var groupNames = { 
  20:                 "today": "Today", 
  21:                 "tomorrow": "Tomorrow", 
  22:                 "thisweek": "This week", 
  23:                 "upcoming": "Upcoming" 
  24:             } 
  25:  
  26:             var make2DigitString = function (n) { 
  27:                 return n < 10 ? "0" + n : "" + n; 
  28:             } 
  29:              
  30:             var now = new Date(); 
  31:             var tomorrow = new Date(now.getTime() + 24 * 60 * 60 * 1000); 
  32:             var nextWeek = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000); 
  33:             var endDate = new Date(now.getTime() + numOfWeeksToShow * 7 * 24 * 60 * 60 * 1000); 
  34:             var $list = $kw("#_WPQ_Birthdays"); 
  35:             var $placeholder = $kw("#_WPQ_BirthdaysPlaceHolder"); 
  36:             var currentYear = now.getFullYear(); 
  37:             var nextYear = currentYear + 1; 
  38:             var currentMonth = now.getMonth() + 1;//it is zero based 
  39:             var currentDay = now.getDate(); 
  40:             var tomorrowMonth = tomorrow.getMonth() + 1; 
  41:             var tomorrowDay = tomorrow.getDate(); 
  42:             var tomorrowYear = tomorrow.getFullYear(); 
  43:             var nextWeekMonth = nextWeek.getMonth() + 1; 
  44:             var nextWeekDay = nextWeek.getDate(); 
  45:             var nextWeekYear = nextWeek.getFullYear(); 
  46:             var endMonth = endDate.getMonth() + 1; 
  47:             var endDay = endDate.getDate(); 
  48:             var endYear = endDate.getFullYear(); 
  49:  
  50:             var todayString = currentYear + "-" + make2DigitString(currentMonth) + "-" + make2DigitString(currentDay); 
  51:             var tomorrowString = tomorrowYear + "-" + make2DigitString(tomorrowMonth) + "-" + make2DigitString(tomorrowDay); 
  52:             var nextWeekString = nextWeekYear + "-" + make2DigitString(nextWeekMonth) + "-" + make2DigitString(nextWeekDay); 
  53:             var endDateString = endYear + "-" + make2DigitString(endMonth) + "-" + make2DigitString(endDay); 
  54:             var birthdaysList = new Array(); 
  55:  
  56:             $list.find("li").each(function () { 
  57:                 try{ 
  58:                     var title = $kw(this).attr("data-title"); 
  59:                     var month = parseInt($kw(this).attr("data-month"),10); 
  60:                     var day = parseInt($kw(this).attr("data-day"),10); 
  61:                     var sortableString = currentYear + "-" + make2DigitString(month) + "-" + make2DigitString(day); 
  62:                     if (sortableString < todayString)//this one passed. move it to next year 
  63:                         sortableString = nextYear + "-" + make2DigitString(month) + "-" + make2DigitString(day); 
  64:                     if( sortableString <= endDateString ) 
  65:                         birthdaysList[birthdaysList.length] = sortableString + ":" + title; 
  66:                 } catch (e) { 
  67:                 } 
  68:             }); 
  69:  
  70:             birthdaysList.sort();//now we got sorted birthdays 
  71:             var titleMode = null; 
  72:             var html = ""; 
  73:             for (var i = 0; i < birthdaysList.length; i++) { 
  74:                 var datePart = birthdaysList[i].split(":")[0]; 
  75:                 var titlePart = birthdaysList[i].split(":")[1]; 
  76:                 var dateArr = datePart.split("-"); 
  77:                 var dateString = monthNames[dateArr[1]] + " " + dateArr[2]; 
  78:  
  79:                 var newGroup = false; 
  80:                 if (todayString == datePart) { 
  81:                     if (titleMode != "today")//add title 
  82:                     { 
  83:                         newGroup = true; 
  84:                         titleMode = "today"; 
  85:                     } 
  86:                 } 
  87:                 else if (tomorrowString == datePart) { 
  88:                     if (titleMode != "tomorrow")//add title 
  89:                     { 
  90:                         newGroup = true; 
  91:                         titleMode = "tomorrow"; 
  92:                     } 
  93:                 } 
  94:                 else if (nextWeekString >= datePart) { 
  95:                     if (titleMode != "thisweek")//add title 
  96:                     { 
  97:                         newGroup = true; 
  98:                         titleMode = "thisweek"; 
  99:                     } 
 100:                 } 
 101:                 else { 
 102:                     if (titleMode != "upcoming")//add title 
 103:                     { 
 104:                         newGroup = true; 
 105:                         titleMode = "upcoming"; 
 106:                     } 
 107:                 } 
 108:  
 109:                 if (newGroup) 
 110:                 { 
 111:                     if (html != "") html += "</div>"; 
 112:                     html += "<h3>"+groupNames[titleMode]+"</h3><div>"; 
 113:                 } 
 114:  
 115:                 html += "<p>" + titlePart + "<span style='float:right'>" + dateString + "</span></p>"; 
 116:             } 
 117:             if (html != "") { 
 118:                 html += "</div>"; 
 119:                 $placeholder.append(html); 
 120:                 //$placeholder.accordion({ 
 121:                 //    heightStyle: "content" 
 122:                 //}); 
 123:             } 
 124:             else { 
 125:                 $kw("#_WPQ_NoBirthdaysPlaceHolder").show(); 
 126:             } 
 127: } 
 128: </script> 

 129: <div id="_WPQ_BirthdaysPlaceHolder"></div> 

 130: <div id="_WPQ_NoBirthdaysPlaceHolder" style="display:none">No upcoming birthdays.</div> 

 131: <ul id="_WPQ_Birthdays" style="display:none">

5. Body: (This will be rendered for each item)

   1: <li data-title="{item:Title:value}" data-month="{item:Month:value}" data-day="{item:Day:value}"> 

   2: {item:Title:value} - {item:Month:value} - {item:Day:value} 

   3: </li>

6. Footer: (This will be rendered at the end)

   1: </ul>

Notes:

In the header script, you can find at the beginning options to configure the template, like translating the text and how many weeks of birthdays to show.

Step 4: Add the web part to your page

Now, all you got to do is add the data view plus web part to your page, connect to the birthdays list and select the new template you just created, and you are done!

Now, you see how easy it is to modify my template and brand it to what ever your customers are asking for? You got complete control over the HTML, and no need to mess with XSL.

I would love to hear your comments or thoughts, I will try to build a few more templates and share them here. If you got ideas or requests let me know!

New / Edit form loads but not responding for 10 seconds

Ok, something we have been struggling with for months and drove many of us at KWizCom a bit crazy…

It is hard to explain, so I’ll try my best:

In our internal portal, we are using SharePoint 2010.

In our current bug tracking list, we use a SharePoint list similar to the issue tracking, every time to click on a new item or edit item – the page loads quickly enough, but it is stuck and not responding for up to 10 seconds sometimes.

After 10 seconds, the page completes loading, rich texts load their toolbar, and the ribbon starts working.

We have over 4000 items in that list, and the problem just becomes more and more of an issue as the list grows.

After a lot of trial and error, I finally managed to pin point the code that makes the browser stuck:

It is a javascript file called “groupeditempicker.js”, and more specifically, a function called “GipInitializeGroup”.

After a little research, I realized this code is a part of the SharePoint out of the box multi-lookup column picker (the left-right-boxes like we call it), which was looking up items from the current list as related issues.

Once I converted this lookup into our Cascading Lookup with “edit on demand” flag, which was designed to work on large list lookups – the problem was solved immediately.

Not sure how many people out there will encounter this issue, and from them how many will find this post – bug if you did, leave me a comment! I am curious to know if it was just us.

Happy SharePointing,

Shai.

Edit: A link to KWizCom cascading lookup product. This product can show multi - lookup as a grid control with paging and checkboxes, and supports a mode we call "edit by request" which means if you edit the item - this field will display the view mode of the current value. If you want to modify it, you have to click on the edit button to change it into edit mode. This feature is very useful for huge lookup lists that you do not modify every time. Cascading lookup page

IE10 error on SharePoint 2013 sites “The system cannot find the path specified.”

After upgrading the IE browser to IE10, all SharePoint 2013 sites stopped working.

The /_layouts/15/start.aspx page was stuck on “working on it” forever, with a javascript error:

Almost every page in SharePoint threw this error. In Chrome and FireFox by the way – it worked perfectly.

A bit of JavaScript debugging revealed that SharePoint is trying to use window.localStorage object, which was the root cause for this error.

While I couldn’t figure out why or how to fix it – I found a simple workaround: disable the IE10 local storage feature (which I believe is a part of the HTML5).

Simply go to internet options –> advanced, scroll down to “Enable DOM Storage” and uncheck it’s checkbox:

And all done – SharePoint works again, even MDS (or partial page rendering which is how I call it) works!

Using jQuery in SharePoint 2010? Here is something you didnt expect!

If you are planning or using jQuery JS library in SharePoint 2010, there is one thing you didn't plan - for sure.
The $ sign from jQuery library is conflicted with the $ sign used in SharePoint JS - only in picture library "thumbnails" view.
Meaning, your code will not work if it has a picture library thumbnail view web part.
A wrong solution would be to append your JS to the end of the page - do this and your code will work, but the thumbnail view will stop working!
The solution for this is rather simple and annoying,
All you have to do is rename the $ sign into something else, like myJQ.
To do this - add this simple line of code at the end of your jQuery JS file:
var $jq = jQuery.noConflict();
and use $jq instead of $.
Note: you should use your own unique key instead of $jq.

Encode in JS Decode in C# problem

Just a quick one guys,

Recently we had a customer who complained about French tags that are not working with our tagging feature (field type, tag cloud for SP 2007 - pretty cool actually).

Well, apperantly we were doing some encoding of text in javascript using "escape()" and trying to decode it in C# on the server side using UrlDecode with no luck.

the text: "de l'entité" was not decoding correctly.

After trying to figure our whats wrong on the server side decoding function (I tried several alternatives) I almost gave up with no success whatsoever :(

So, I turned to look for alternatives in the Javascript encoding and found this new method called "encodeURI()". Apperantly this method can safely replace our "escape/unescape" in Javascript only it supports proper encoding and decoding with C# with no problems.

Works like a charm - from now on, use "encodeURI/decodeURI"!

Cheers, Shai.

Radio Button Custom Field Choice – Going from Vertical to Horizontal with Java Script

By Roi Kolbinger - SharePoint Consultant
KWizCom Professional Services – http://www.kwizcom.com/

Have you noticed that field choice only gives a vertical view?
But what if I want a horizontal view?
When you want to customize your view but don't know how it can be very frustrating but there is always a way, you just have to know how…

For example:
I want to use the field "Gender" with two choice options – male and female.
This is how such a field would normally look in MOSS:




But I don't want to waste so much screen space. It would be much better to have something like this:



With a little Java script it's not so hard to go from vertical to horizontal. Here's how you do it:
Simply add this code to the form (add it in the SPD to NewForm.aspx and EditForm.aspx for the list that includes the view you want to change):




That all – now we have our Male/Female options in the desired view layout!

+++++++++++++++++++++++++++++++++++++++

For more helpful tips and guidelines please visit: http://kwizcom.blogspot.com/
NEW – You can now follow KWizCom on Twitter: https://twitter.com/KWizCom