Posts from the ‘Data view web part’ Category

Displaying SharePoint list from top level or subsite in SharePoint 2010 Data View web part


In SharePoint 2010 Data view web part, there is no direct way to connect to Data Source of a different site in the same site collection.

What do we do when we need to fetch data from a list residing in the top level site or sub site in SharePoint 2010?

The answer to above question that generally crops up is to use a SOAP Service connection data source and connect data view to this data source.

I feel that we should go to this approach if there is nothing possible directly. The overheads in having another data source is that we have to keep updating the data source in case any column in the list is added. Once we update data source, then we need to update the Data view web part accordingly.

If we use default list data source, things would be pretty easier and there is no overhead.

Hence, I digged down in to the code to find out an alternative for this.

The solution is the usage of parameter viz. WebURL.

Pre-requisite: Configure the Data view web part to use List Name instead of List ID

In Data view web part, there is a tag <ParameterBindings> within which we have several <ParameterBinding> tags.

Add one as given below:

<ParameterBinding Name=”WebURL” Location=”None” DefaultValue=”/sites/top-site-name/”/>

There is a tag viz. <SPDataSources> within which we have <Select> tag.

Modify contents within <Select> tag as given below:

<SelectParameters><WebPartPages:DataFormParameter Name=”WebURL” ParameterKey=”WebURL” PropertyName=”ParameterValues” DefaultValue=”/sites/top-site-name/”/>

The same can be applied to InsertParameters, UpdateParameters, DeleteParameters.

Kindly comment if you are unable to follow the updates or face any issues.

Client side validation of SharePoint Rich text field


Requirement: Mandatory field validation for SharePoint Rich text field in List form

Hurdles faced: Comparison of the value in the rich text field with an empty string in JavaScript returned FALSE even though there was no text in the rich text field

Approach:

  1. The RTE (Rich text editor) is rendered in the following way in browser
    As can be seen in the above snapshot, the DIV where the data is stored is the second child of the parent div. This is the scenario where no data is inserted in the field
  2. First thing that we tried is to fetch the inner text of this DIV element
    As can be seen, text() returns “” i.e. empty string
  3. Now, we try to compare this with empty string in JS 
  4. As the above returned false, we decide to check the inner HTML present in that DIV
    The inner HTML returned empty paragraph tag. If you observe, there is a space between ‘<’ and ‘/p’.We now try to compare this inner HTML with the empty paragraph tag:

    Even this did not return TRUE
  5. On double clicking the value returned in inner Text and HTML, a space was found to be inserted

  6. On digging deep, this space was found to be a Unicode character inserted by SharePoint viz. ZERO WIDTH SPACE
    “%E2%80%8B” is the value returned on encoding this space using JavaScript
  7. Thus, the conclusion is that we need to compare with this ZERO WIDTH SPACE
  8. One option is to compare the text() with “%E2%80%8B”; but, this will still return FALSE when the focus is on the Rich text field.
    In order cover both scenarios, Regex helps us to replace this Unicode character viz. ZERO WIDTH SPACE with normal empty string viz. “” 
    As can be seen, the Unicode character (\u200B) is used in the Regex for comparison and replaced with empty string
  9. We can compare the replaced value with an empty string to get TRUE as return value

    This is the required SOLUTION

Display random items using XSLT in Data view web part


This article describes how to display random items using XSLT in Data view web part in SharePoint 2010. I assume that the reader is aware of how to add a data view web part and read items from SharePoint list or library.

Requirement:

Generally on a web site, we would like to display the head shots of all people associated with the organization. In addition, we do not want the people icons displayed to be in the same order always. We would like visitors to see the order of people icons displayed to be refreshed every time the page is hit.

Pre-requisites:

Knowledge of using Data view web part connected to a list/ library in SharePoint 2010

Solution:

Create an asset library

1. Create an asset library
2. Upload the requisite images of same dimension in this library

Insert Data View web part using SharePoint Designer


1. Insert a Data View web part using SharePoint Designer
2. Connect this web part to the asset library created above
3. Set the data view to display all items from the library

How to randomize the order of the items

1. XSLT has a function viz. ddwrt:Random
2. The items are traversed using for-each in XSLT code as below:

<xsl:for-each select="$Rows">
    <xsl:call-template name="dvt_1.rowview" />
</xsl:for-each>

3. Add ‘xsl:sort’ for the items as shown below:

<xsl:for-each select="$Rows">
    <xsl:sort select="ddwrt:Random(1, $RowCount)" order="ascending"/>
    <xsl:call-template name="dvt_1.rowview" />
</xsl:for-each>

4. In the above code, ‘$RowCount’ refers to the total number of items present in the list
5.  Now, your order of display of items will change each time the page is refreshed
6. You can change the rendering to display images and modify the UI accordingly
7. This will resolve the issue of displaying items in random order using XSLT in Data View web part

“I hope that this post will allow you to resolve the issue of displaying random items from list/ library. Provide your feedback to help me improve my blog :)”