SharePoint: View the XML used in SharePoint web parts

View the XML used in SharePoint web parts

I was customizing the XSLT for a Data View web part and wanted to see what the XML looked like as delivered to the web part from SharePoint. The following is one way to see this. (There are probably better ways.)

• Create a new view in your site. A simple standard view with the columns you need selected will do.
• Open SharePoint Designer and open your site.
• Expand Lists and find your list and then expand the list and find the new view.
• Double click the view and display in Design view.
• Note: the view is now being displayed using a ListViewWebPart and can only be customized from the browser ("Modify View")
• Right-click in the middle of the view and select Convert to XSLT Data View.
• Note: the view is now being displayed using a DataViewWebPart and can only be customized from SharePoint Designer or by editing the XSLT from the browser ("Modify View")
• Right-click the Data View web part and select Web Part Properties.
• Click the XSLT Builder Button (big name for the "…" button)
• Delete everything starting with "<xsl:decimal-format NaN="" />" down to, but not including "</xsl:stylesheet>".
• Just before the "</xsl:stylesheet>" tag enter:
  <xsl:template match="/">
  START
  <xsl:copy-of select="/" />
  END
  </xsl:template>
• Click Save, OK and then save your changes to the page.
• In the browser navigate to this view (which will look kind of empty), right-click and View Source.
• All of the text between START and END is the XML returned by SharePoint. This is what your XSLT needs to convert to HTML. Paste this into your favorite XML / XSLT editor and have fun!

    

SharePoint: How to hide the right web part column

Updated! (3/17/10) Yet another update! “Erik” pointed out that if you have a Content Editor Web Part on the page that has a table with the pattern “<td>&nbsp;</td>” then the code below also changed the table. (not good!)  “Erik” offered an interesting solution, but I got to thinking about it and there was a much better solution. So… there is new JavaScript below…   (Erik, I approved your post, but it looks like Blogger “ate it”, maybe because it had code.)

Updated! The following JavaScript only really worked if you placed it in the column to be hidden, which of course made it a bit hard to remove later on. One of the comments below got me to looking for the best way to launch JavaScript routines in a SharePoint page. This blog article by Mart Muller seems to show the best solution, and I have modified my example below to include this better solution. You can now place the JavaScript and the CEWP just about anywhere and it will work perfectly. (The changes are in BLUE.)

 

How to hide the right web part column.

The Team Site template creates a home page with two columns, one 70% wide and one 30% wide. Actually there are two more columns, one between the web part columns and one to the right. Here are two techniques to solve this problem:

Using SharePoint Designer

• Open the site
  
• Double-click on default.aspx
  
• In the Design view click in the right web part zone column and then select Delete Columns from the Table menu. Repeat for the spacer columns. Change the width of the left column to 100%.
  
• Save and then test the site in the browser.
  
• Tip: You can just as easily insert new rows and columns and then add new web part zones from the Insert, SharePoint Controls menu
  

Using a JavaScript "hack"

SharePoint Designer is not needed here, only the Content Editor Web Part.

• The trick is to identify the columns to hide. It turns out only two have widths of 30% and 70%.
  
• Add a Content Editor web part to either zone. Modify the web part and click Source Editor.
  
• Paste the following JavaScript code (changes column widths and hides the other columns):
  

The new version:

<script>

function HideWebPartZone()
{
  var x = document.getElementsByTagName("TD")
  var i=0;
  for (i=0;i<x.length;i++)
  {
    if (x[i].width=="70%")
    {
      // left column
      x[i].style.width="100%"; 

      // center (otherwise empty) column
      if (document.all) // is IE
        var x2=x[i].nextSibling;
      else
        var x2=x[i].nextSibling.nextSibling;

      x2.style.width="0";
      x2.style.display="none";
      x2.innerHTML=""; 

      // right column
      if (document.all) // is IE
        x2=x[i].nextSibling.nextSibling;
      else
        x2=x[i].nextSibling.nextSibling.nextSibling.nextSibling;

      x2.style.width="0";
      x2.style.display="none";
      x2.innerHTML=""; 

      // right margin column
      if (document.all) // is IE
        x2=x[i].nextSibling.nextSibling.nextSibling;
      else
        x2=x[i].nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling;

      x2.style.width="0";
      x2.style.display="none";
      x2.innerHTML="";

      //all done
      return;
    }
  }
}


_spBodyOnLoadFunctionNames.push("HideWebPartZone")
</script>

 

 

The old version:

<script>

function HideWebPartZone()

{
  var x = document.getElementsByTagName("TD")
  var i=0;
  for (i=0;i<x.length;i++)
    {
      if (x[i].width=="30%")
       {
         x[i].style.width="0";
          x[i].style.display="none";
       }
      if (x[i].width=="70%")
        {
          x[i].style.width="100%";
        }
      if (x[i].innerHTML=="&nbsp;")
        {
          x[i].style.width="0";
          x[i].style.display="none";
          x[i].innerHTML="";
        }
  }

}

_spBodyOnLoadFunctionNames.push("HideWebPartZone")
</script>

How about just setting the columns 50/50?

• Add a Content Editor web part to either zone. Modify the web part and click Source Editor.
  
• Paste the following JavaScript code:
  

<script>

function ReformatWebPartZone()

{

  var x = document.getElementsByTagName("TD")
  var i=0;
  for (i=0;i<x.length;i++)
    {
      if (x[i].width=="30%")
        {
          x[i].style.width="50%";
        }
      if (x[i].width=="70%")
        {
          x[i].style.width="50%";
        }
  }

}

_spBodyOnLoadFunctionNames.push("ReformatWebPartZone")

</script>

SharePoint: Color Coded Calendars!

Updated!
Note: If you got the Month view working and the Week and Day views did not then make sure that when you customized the view that you changed all three:

           Change the field used for the Month View Title AND Day View Title AND Week View Title to "CalendarText"

 

For the SharePoint 2010 version of this article click here!

To add “strike-out” for canceled events click here!

For color coding other SharePoint lists click here!

Can a calendar display in color?

I have been asked a few times if the SharePoint calendar can display items in color. It turns out this is not too hard to do. The basic steps are:

• Add a column to the calendar list to pick the color
  
• Add a calculated column to create the HTML to display the color. This can be done with HTML or CSS. This example uses "<FONT COLOR=".
  
• Add the new column to the view
  
• SharePoint will convert the "<" character into "&lt;" so we need to add a little JavaScript to convert it back. The easiest way to add the JavaScript is with a Content Editor Web Part
  

Sample:

1. Create or open a calendar
   
2. Add a new column named "Color" (Settings, List Settings) – most likely type will be "Choice" with choices like "Red, Green, Blue, Black", but this could be a lookup or a single line of text.
   (See here for an HTML color chart: http://www.w3schools.com/html/html_colornames.asp)
   
3. Add a new column named "CalendarText"
   
   1. Column Type is Calculated
      
   2. Equation is:
      ="<font color='" & Color & "'>" & Title & "</font>"
                  
   3. Data type returned = single line of text
      
4. Modify the existing view, or create a new view such as "Color Calendar"
   
   1. Change the field used for the Month View Title AND Day View Title AND Week View Title to "CalendarText"
                               
   2. Save and exit (The HTML for "<FONT" will now be displayed. Some JavaScript will be needed to fix the HTML tags)
      
5. Add a Content Editor web part
   
   1. Site Actions, Site Settings, Edit Page
      
   2. Add a Content Editor web part and move it below the calendar web part
      
   3. Click in the web part click Edit, Modify Shared Web Part
      
   4. Click Source Editor
      
6. Paste this JavaScript:
   
   

   <script type="text/javascript" language="javascript">
   var x = document.getElementsByTagName("TD")
   var i=0;
   for (i=0;i<x.length;i++)
   {
     if (x[i].className.substring(0,6)=="ms-cal")
     {
       x[i].innerHTML= x[i].innerHTML.replace(/&lt;/g,'<').replace(/&gt;/g,'>')
     }
   }
   </script> 
   
   

7. Click Save, OK, Exit Edit Mode
   
8. Add a new calendar item and select a color… Color calendars!
   

 

Some thoughts on changing the background color and not just the text color…

Just change the FONT tag to a SPAN tag and use a style. Example:

="<span style='background-color:"&Color&"'>"&Title&"</span>"

This works, but the background is for just the width of the text, not the entire table cell. The closest I’ve come is to hard code the width:

="<span style='width:120px;background-color:"&Color&"'>"&Title&"</span>"

This looks good in the Month view, but not so good in Week or Day views.

                             

You will probably want to use colors like lightblue, lightgreen, tomoto (light red would just be Pink!), etc.

.

SharePoint History

Here's a nice history of SharePoint and its related products: Joining Dots: Blog: SharePoint History

SharePoint: "Service Unavailable"

When you open a browser and navigate to a SharePoint site and get "Service Unavailable" this is usually due to a bad application pool account: wrong account, expired, bad password etc. I found a new cause... MOSS evaluation copy has expired! I got this error trying to run a quick demo on a VPC I had not used for a while. I then wasted a lot time exploring the accounts, changing passwords etc. Then it dawned on me that this VPC may have been built with an evaluation copy of SharePoint. Sure enough... set the date back on the PC and all works fine. Now off to use my correct VPC... For other causes just Goggle "SharePoint Service Unavailable".

SQL: Sample CLR function for a Regular Expression validation

 

Here is a quick example of a .net CLR function to validate any string value using a regular expression. (only works with SQL 2005 and later of course)

1) create a new project using the C# or VB "SQL Server Project" template

2) add a New Item - a function

3) add this code!

using System;
using System.Data;
using System.Data.SqlClient;
using System.Data.SqlTypes;
using Microsoft.SqlServer.Server;
using System.Text.RegularExpressions;

public partial class UserDefinedFunctions
{
    [Microsoft.SqlServer.Server.SqlFunction]
    public static SqlBoolean RegExpression(string strToTest, string regExpression)
    {
        return Regex.IsMatch(strToTest,regExpression);
    }
};

4) Deploy and test!

 

Samples of how to call:

Test a phone number:

print dbo.RegExpression('223-123-1234','^[2-9]\d{2}-\d{3}-\d{4}$')

Test an email address:

print dbo.RegExpression('abc@maxtrain.com', '^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$')

 

Test a column of phone numbers:

use AdventureWorks
select phone, dbo.RegExpression(phone,'^[2-9]\d{2}-\d{3}-\d{4}$') as validphone  from person.contact

SharePoint: All about Features - Editing Tips

This article is one of a series. See All about Features! for more.

 

Tips for editing Features

Features are defined using XML. You can use any editor, but likely candidates include Notepad, Visual Studio, SharePoint Designer and any other XML editor. To edit XML with some form of Intellisense requires an XML schema. SharePoint supplies one named WSS.XSD and it can be found in:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\XML\wss.xsd

The wss.xsd schema defines: Feature, Elements, List, Project and Solution.

In many XML editors you register the schema in the editor and then list the schema in the XML tag:
<Feature  xmlns="http://schemas.microsoft.com/sharepoint/">
</Feature>

In Visual Studio you can enter the path to the schema file in the Schemas property of the document. Once the editor knows the schema you should get syntax help from your XML editor.

 

Back to All about Features! for more.

SharePoint: All about Features

 

All about Features!

All? Not really... Features are one of SharePoint's Swiss Army Knives, something for everybody...

So where to start? Here's a list of topics... the ones that are links are finished and the others will be done one of these days!

• Tips for editing Features
• The feature.xml file
• The elements.xml file
• How to deploy a Feature
• Features to add menu items to SharePoint
• Features to remove items from SharePoint
• Features to add custom controls (using SharePoint Delagate controls)
• Features to run custom .Net code
• Features to deploy files

SharePoint: Calculated Column Notes

A few misc. notes on SharePoint calculated columns. Calculated columns cannot reference Lookup columns. Samples of Calculated Field Formulas http://msdn.microsoft.com/en-us/library/bb862071.aspx Bottom line? Look for Excel style functions, not VB Script functions. For example, use FIND, not INSTR to find the position of one string inside of another.

SharePoint: Create a What's New web part for a library or list (with no programming!)

Using Sort, Limit and Expand Folders is a great way create a "what's new" web part.

1. Add a web part to the page for the list or library
2. From the web part's dropdown menu select "Modify Shared Web Part" and from the properties panel click the "Edit the current view" (just below the "Selected View" dropdown)
3. In the Sort section select "Modified" and "descending"
4. Expand Folders and select "Show all items without folders" to show all of the documents in the library in a single list
5. Expand "Item Limit" and enter the number of items to display
6. Optionally select what to do if there are more than that number of items:
• select "Display items in batches" so the users can click next / previous links to page through the data, or
• select "Limit" to display just xx number of items and then display a More link to take the user to the library's page
7. Click OK to save the view and click OK to update the web part.