Force Page Edit Mode

On some SharePoint pages there is no simple way to get to the edit web page view to add/modify/remove web parts. However, SharePoint accepts a QueryString for opening a page in edit mode:

HTTP:\\MYSHAREPOINT?ToolPaneView=2&pagemode=edit

By adding this to the end of any URL where you have rights to edit the page you can then go ahead and edit the page to your hearts content. This is particularly useful when doing modifications to NewForm/EditForm without dissociating the page, or making your own form page.

Data View Web Part Tricks

One of the most handy out of the box customization components in my opinion is the Data View Web Part, but mucking around in XSLT can be a pain at times so here’s some reference points for making things easier, these work with SharePoint 2007/2010 and anything else that can use XSLT. 

The first snippet is for pulling unique values down from your data source initially. The second is the much more fun way to make it so the DVWP filter drop downs are unique per column. The filter drop down unique value code snippet is put in to the template and is field type independent. Next we have an XSLT template for changing a string to be all uppercase to make a query comparison case-insensitive effectively, it can also be used for always showing a field as uppercase.

I also pasted some of my older XSLT tidbits related to truncated strings for Read More links and proper string extraction for rendering url and image fields.

Unique Values in initial query
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row[not (@Title=preceding-sibling::Row/@Title)]" />  
Unique values in filter drop downs
<xsl:when test="starts-with($fieldname, '@')"
<xsl:variable name="dvt_Rows">
Changed select from $Rows
lt;xsl:for-each select="/dsQueryResponse/Rows/Row[not(@*[name()=$dvt_FieldNameNoAtSign]=preceding-sibling::Row/@*[name()=$dvt_FieldNameNoAtSign])]">
<xsl:sort select="@*[name()=$fieldname]" order="ascending" data-type="{$sorttype}" />
<xsl:copy-of select="." />
<xsl:variable>
Case Insensitive Comparison (or change case)
<xsl:template name="ToUpper">
    <xsl:param name="StringValue"/>
    <xsl:value-of select="translate($StringValue, 'abcdefghijklmnopqrstuvwxyz', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ')"/>
<xsl:template>
Field Length Truncate (Read More link and fitting in long content)
<a href="@FileRef”>
 <xsl:variable name="truncate-length” select="40”/>
 <xsl:value-of select="substring(@Title,1, $truncate-length)”/>
 <xsl:if test="string-length(@Title) > $truncate-length”>
  <xsl:text>...
 xsl:if>
</a>
Properly format a URL or image field
Link:
<a href="{substring-before(@URL, ', ')}">
 <xsl:value-of select="substring-after(@URL, ', ')"/>
</a>
Image:
<img src="{substring-before(@Field, ', ')}" alt="{substring-after(@Field, ', ')}"/>

Accordion Data View Web Part

Even more ‘fun’! Making nifty things with jQuery with the data view web part.

Finished Product

First component is a jQuery powered faked accordion script  with highlight of mouse over (a real accordion will not work in DVWP due to how the markup is output). Requires jQuery WebUI plugin:

$(document).ready(function()
{
$(“.accordion”).toggle(
function()
{
$(this).css(“font-size”, “17pt”);
$(“.cssClass”).css(“display”, “none”);
$(this).next().toggle(‘fast’);
},
function()
{
$(this).css(“font-size”, “16px”);
$(this).next().toggle(‘fast’);
});
$(“.accordion”).mouseover(
function()
{
$(this).css(“background”, “black”);
$(this).css(“color”, “white”);
}).mouseout(function()
{
$(this).css(“background”, “white”);
$(this).css(“color”, “black”);
});
});

Next, in your DVWP markup itself change all tr’s to div’s and all table tags to div as well. If you have a grouping within the view you can use this line for building the div which should be right above the xsl:choose:

displaystyle}; cursor:hand”>

The end div goes right above the end of the xsl:template.

Next, we need to make the wrapper div’s (which do not work as you’d expect preventing a real accordion). Look for “dvt_1.groupheader0″ and locate where the template is called: <xsl:call-template name=”dvt_1.groupheader1”>… On either side of this put .

You’ll need to this in two places as the first row check and all other rows both need the div wrapper.

Next, you need to remove the call-template for dvt_1.rowview altogether as we move it to be a child of the template of the group container.

<div>
<xsl:call-template name=”dvt_1.groupheader1″>
<xsl:with-param name=”fieldtitle”>Field
<xsl:with-param name=”fieldname”>Field
<xsl:with-param name=”fieldvalue” select=”$groupheader1″ />
<xsl:with-param name=”fieldtype” select=”‘int'” />
<xsl:with-param name=”nodeset” select=”msxsl:node-set($dvt_Rows)/root//Row[((@Field)=$groupheader1 or ((not(@Field) or @Field=”) and $groupheader1=’ ‘))]” />
<xsl:with-param name=”groupid” select=”‘1′” />
<xsl:with-param name=”displaystyle” select=”‘auto'” />
<xsl:with-param name=”imagesrc” select=”‘/_layouts/images/plus.gif'” />
<xsl:with-param name=”alttext” select=”‘expand'” />
<xsl:with-param name=”altname” select=”‘collapse'” />
<xsl:with-param name=”hidedetail” select=”false()” />
<xsl:with-param name=”showheader” select=”true()” />
<xsl:with-param name=”showheadercolumn” select=”false()” />
xsl:call-template>
<xsl:variable name=”dvt_KeepItemsTogether” select=”false()” />
<xsl:variable name=”dvt_HideGroupDetail” select=”false()” />
<xsl:if test=”(position() >= $FirstRow and position() <= $LastRow) or $dvt_KeepItemsTogether”>
<xsl:if test=”not($dvt_HideGroupDetail)” ddwrt:cf_ignore=”1″>
<xsl:call-template name=”dvt_1.rowview” />
xsl:if>
xsl:if>
</div>

This will give you a basic AJAX enabled/ready DVWP. I normally ignore the tables for the filter and footer areas altogether as there is no real benefit to ajax there unless you want to reinvent the wheel 🙂

Multiple Entry Single Field

This is a method I came up with to use jQuery to fake an n+1 relationship for one or more columns within a single list item. You can see in the image below that the user is initially presented with the designated fields empty; they have a button for adding the new ‘rows’ in to the fields specified. This is a simple method for basic scenarios where you need a relational style input within a single form.

The code works by adding an event handle to each new text box inserted that is triggered on KeyUp to concatenate the values into a CSV list that is stored in the hidden original field. So if you have added three ‘rows’ you would get something like this saved: “Value1,Value2,Value3,”

To use, insert a content editor web part and edit the [title=”Column” selector to be the display value of the field to treat in this manner.

1. <script type=“text/javascript”>
2. $(document).ready(function()
3. {
4. $(‘[title=”Sub-Project name”]’).css(“display”, “none”);
5. $(‘[title=”Sub-Project Description”]’).css(“display”, “none”);
6. $(‘[title=”Sub-Project name”]’).parent().parent().prev().append(“Add SubProject“);
7. $(‘[title=”Sub-Project name”]’).parent().append(“<ul id=’subProjectList’>”);
8. $(‘[title=”Sub-Project Description”]’).parent().append(“”);
9. });
10. function AddProject()
11. {
12. var count = $(‘.subProject’).length;
13. if(count < 5)
14. {
15. $(‘#subProjectList’).append(“<li><input class=’subProject’ type=’text’/></li>”);
16. $(‘.subProject’).bind(‘keyup’, function()
17. {
18. var text = ”;
19. $(‘.subProject’).each(function(i)
20. {
21. var value = $(this).val();
22. text += value;
23. text += ‘,’;
24. });
25. $(‘[title=”Sub-Project name”]’).val(text);
26. });

27. $(‘#subProjectDescriptions’).append(”

28. <textarea cols=’40’ rows=’3′ class=’subProjectDescription’/>

“);

$(‘.subProjectDescription’).bind(‘keyup’, function()

{

var text = ”;

$(‘.subProjectDescription’).each(function(i)

{

var value = $(this).val();

text += value;

text += ‘,’;

});

$(‘[title=”Sub-Project Description”]’).val(text);

});

}

}

</script>

SharePoint Search with Pagination

This is an example class for showing how to search SharePoint with paging support in the API. This function accepts a string containing the standard SharePoint SQL style search query:

ie: SELECT TOP 50 AccountName, Size, Rank, Path, Title, Description, Write FROM portal..scope() WHERE “scope” = ‘People’ AND CONTAINS (“LastName”,'”Doe”‘)   ORDER BY “AccountName” DESC

To page you can use the optional int rowCount and page overloads. Whenever page is specified it judges the start row as rowCount*page. So page 10 begins at row 500 if rowCount is 50.

Paged Search Example

1. /// <summary>
2. /// search sharepoint using a predefined search query
3. /// </summary>
4. /// SQL like sharepoint search query
5. /// SPSite to run against
6. /// rowCount”>Optional: row limit
7. /// <param name=”page”>Optional: page index</param>
8. /// <returns></returns>
9. public DataSet DefinedQuery(string query, SPSite site, int rowCount = 50, int page = 0)
10. {
11. DataSet dt = new DataSet();
13. ServerContext srvContext = ServerContext.GetContext(site);
14. int startRow = 0;
16. if (page > 0)
17. {
18. startRow = page*rowCount;
19. rowCount = rowCount * page;
20. }
21. //run query and pass values to allow for pagination
22. using (FullTextSqlQuery runQry = new FullTextSqlQuery(srvContext)
23. {
24. ResultTypes = ResultType.RelevantResults,
25. QueryText = query,
26. RowLimit = rowCount,
27. StartRow = startRow
28. })
29. {
30. try
31. {
32. ResultTableCollection results = runQry.Execute();
33. ResultTable resultTbl = results[ResultType.RelevantResults];
34. //verify we have at least one result to work with
35. if (resultTbl.RowCount >= 1)
36. {
37. //pull results in to our datatable and dataset
38. DataTable tbl = dt.Tables.Add();
39. tbl.Load(resultTbl);
40. }
41. resultTbl.Dispose();
42. }
43. catch (Exception ex)
44. {
45. string msg = ex.Message;
46. }
47. }
48. return dt;
49. }

Extending the size of the Rich Text Editor

So an issue I’ve heard many times from end users is that the rich text editor is way too small to do verbose content. Below you’ll find some CSS which increases the size of the Rich Text Editor and the list form in general to be both wider and in the case of the RTE, taller as well. In practice with the below changes about one-third of a page will be editable on-screen at any one time.  This is for SharePoint 2007, and can be added as a new .css to your master page. Or inline to an individual page via the content editor web part.

<style type=”text/css”>
/* widens the RTE field control in forms*/
#onetIDListForm, #onetIDListForm .ms-formbody,#onetIDListForm iframe[title=”Rich Text Editor”]{
width:100% !important;
}
/*makes RTE control taller*/
#onetIDListForm iframe[title=”Rich Text Editor”]
{
height:300px !important;
}
/* makes RTE toolbar width match control width */
.ms-long
{
width:100% !important
}
/*removes display of field label above field control and border around field control*/
DIV.ms-formfieldlabelcontainer SPAN.ms-formfieldlabel
{
display:none;
}
.ms-formfieldvaluecontainer
{
border:none !important;
}
/*widens form table altogether with scaling for different resolutions*/
.ms-formtable
{
min-width:900px;
max-width:100%;
}
</style>

Note: for IE7 to show the new width properly you’ll need to set a hard width (if you do min/max-width properties it will only do min-width). So this segment:

#onetIDListForm, #onetIDListForm .ms-formbody,#onetIDListForm iframe[title=”Rich Text Editor”]{
width:100% !important;
}

Would need to change width to: width:900px !important; instead of 100% due to issues with IE7 and CSS.

– Maarten