Wednesday, November 19, 2014

Embed a Data Form Web Part (DFWP) in a SharePoint Web Part Page

Introduction


SharePoint Data Form Web Parts allow the manipulation of XSLT to provide specifically styled and dynamically altered html markup that can greatly enhance the appearance of your data view web parts, and enhance functionality. 
This post covers the inserting a new data form web part into a web part page to allow access to the xlst markup for look and feel customization.
 

Source List

First, I created a SharePoint  list with the following fields and values:
 

 

Next, I created a new default view that filters by current user, so the current user will only see their own record:


In this scenario, there is only one user per record, so when I filter by the current user, I am assured of one record (one row) being returned.  I also populated the list with one record as shown above to allow testing and rendering of the resulting data.
 

Embed the Data Form Web Part


Within SharePoint Designer create a new web part page:

Place your cursor between the <ZoneTemplage></ZoneTemplate> tags as follows:
<WebPartPages:WebPartZone runat="server" Title="loc:LeftColumn" ID="LeftColumn" FrameType="TitleBarOnly"><ZoneTemplate>CURSOR HERE</ZoneTemplate></WebPartPages:WebPartZone> </td>
Click the “Insert” tab on the top menu, and choose “Data View”.  In my case, the only choice was “Empty Data View”, so I went ahead and selected that.  This resulted in the following markup being inserted:
<ZoneTemplate>
<WebPartPages:DataFormWebPart runat="server" IsIncluded="True" AsyncRefresh="True" FrameType="None" NoDefaultStyle="TRUE" ViewFlag="8" Title="DataView 1" PageType="PAGE_NORMALVIEW" __markuptype="vsattributemarkup" partorder="2" __WebPartId="{B420DA3A-F18D-4A10-88F5-5B3D7C38910B}" id="g_b420da3a_f18d_4a10_88f5_5b3d7c38910b">
<DataSources></DataSources><datafields/><XSL></XSL></WebPartPages:DataFormWebPart>

</ZoneTemplate>
Place your cursor within this markup and choose “Data Source” from the insert menu.  Choose your list:
If not already clicked, click “Data Source Details” and you should see your list fields on the right of the screen:

I want the three values “Opted In”, “Enrolled”, and “Record Count” to be displayed within my DFWP.  Ensure your cursor is within the blank Data Form Web Part you just created.  Select the three columns by clicking them in the current data source.  I then choose “Insert Selected Fields as” from the drop down at the top of the current data source window and choose “Single item view” as I know there will only be one row per user.  If you will have multiple rows in your solution, select multiple item view.  This will result in new markup in your DFWP that displays these fields and controls other actions.  The markup that is specific to the fields in this example looks like:
 <xsl:template name="dvt_1.rowview">
<tr>
 <td>
  <table border="0" cellspacing="0" width="100%">
   <tr>
    <td width="25%" class="ms-vb">
     <b>Enrolled:</b>
    </td>
    <td width="75%" class="ms-vb">
     <xsl:value-of select="@Enrolled"/>
    </td>
   </tr>
   <tr>
    <td width="25%" class="ms-vb">
     <b>Record Count:</b>
    </td>
    <td width="75%" class="ms-vb">
     <xsl:value-of select="@Record_x0020_Count"/>
    </td>
   </tr>
   <tr>
    <td width="25%" class="ms-vb">
     <b>Opted In:</b>
    </td>
    <td width="75%" class="ms-vb">
     <xsl:value-of select="@Opted_x0020_In"/>
    </td>
   </tr>
Save your page, and look at this web page within SharePoint and you will see:

That’s it!  You can now start modifying this xsl markup using a combination of html and xsl (<xsl:value-of select="@Record_x0020_Count"/>) value processing to modify the look and feel of the page, see functions outlined here:
 



Thursday, November 13, 2014

Javascipt Redirect Fails within SharePoint web part (window.location.href, document.location.href not working)

The Problem

When you create a web part within SharePoint, whether its a Content Editor Web Part or a Data Form Web Part, you may wish to include a button that has a redirect action.  This redirect action could be static or dynamic, they key is that you wish to use something like:

function goToLink()
{
    if (possible code that determines which link to use...)
    {
        window.location.href = '/SitePages/MyPage.aspx';
    }
}

<button  class="dashboard-button" onclick="goToLink();">Go To Link </button>

This very simple example looks like it should work every time, and if it is done outside of SharePoint on its own web page, it does.

If however you embed this code within a SharePoint web part, it will sometimes  work.  Some users will be able to click the button and have it redirect the first time.  Some users will have to click the button multiple times, each time resulting in a page refresh, before the button works.  This type of intermittent issue can also be very challenging to troubleshoot.

The Solution

Fortunately, this one is a really simple solution.  Simply add the button type to your button markup:

<button type="button" class="dashboard-button" onclick="goToLink();">Go To Link</button>

By default, SharePoint sets the button type as "submit", which has the action of submitting the entire page, rather than just your javascript.  If you look at the source code behind a web page in SharePoint, you will typically see a line like this:
 
<form method="post" action="HomePage.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm">

If your button is not defined as a button type, then it submits the entire form, including running the onsubmit event shown above. This may result in SharePoint javascript conflicts with the window.location object, where the window.location object is overwritten locally by SharePoint before your javascript redirect fires, effectively refreshing the page instead of redirecting.  By setting the type to button, just the javascript you created fires, without the unwanted conflicts with other page events accessing the same object.






Wednesday, November 12, 2014

Correctly displaying Currency within an External List (using BCS)

The Problem

If you are attempting to display a currency field in a SharePoint external list, one that is defined as 'money' datatype in sql server, you will loose the ability to display cents for those records that do not have cent values.  So, for example, this will display correctly:

124.55

This will not:

124.00

The first is displayed as:

$124.55

The second:

$124

The second value drops the two 0's that follow the dollar amount.  Our clients are used to seeing currency with the cents included, even when they are 0, so we have to handle this specifically within the markup that makes up the business list.

The Solution

Open the page that has the external list embedded in SharePoint designer, edit mode.

Locate the markup that defines the row view fields (not the header fields, they are similar).  This markup is identified by this tag:

<xsl:template name="dvt_1.rowview">
Locate the markup that displays your currency fields, something like:

<td class="ms-vb">
        $<xsl:value-of select="@Gross_Pay" />
</td>

Update the select field to include the following formatting information:

$<xsl:value-of select="format-number(@Gross_Pay, '#,###,###.00')" />

Save your changes.  Update other currency fields if you have multiples.  This will display the currency in the correct format, the cents will show up if they have a value, if they are blank, they will be replaced with two 00's.