I recently had to work with the following scenario:
Clinical Trial site for weight loss study, on the site as part of the functionality patients had to track their weight loss weekly. As part of their weight loss dashboard it was a nice touch to add a simple bar graph that would visually help them to see their progress.
End result:
End By clicking on the link on the bottom “Enter New weight measurement” they would get to the following screen (See image bellow):
Entering new weight is pretty obvious, it is Data View Web Part (DVWP) with insert new item functionality. The bar graph is DVWP as well but XSLT was modified so that every row in a “Weight Tracker” list is presented as a column instead of conventional row style.
How does it work?
I have a simple list “Weight Tracker”
Columns:
- Title (renamed to Weight) – is used to hold weight value in pounds
- Date – Contains the date when the measurement took place.
In SharePoint Designer (SPD) I opened dashboard page and inserted DVWP that uses Weight Tracker list as source.
Selected my title and date columns to show up and sort by date.
Next I have modified the XSL to create a column for each row. I’ve searched on the internet for examples like this one, where you need to create column (in DVWP) for each row in the list and create row (in DVWP) for each column that you display in the DVWP. Unfortunately nothing came up beyond all the stuff that had been copied from Fab. 40 templates.
Here is the code, hope it will help someone.
BTW, it took a bit over 30 minutes to configure that bar graph.
<WebPartPages:DataFormWebPart runat="server" ShowWithSampleData="False" AllowRemove="True" AllowHide="True" SuppressWebPartChrome="False" PartImageLarge="" ViewContentTypeId="" ExportMode="All" Dir="Default" MissingAssembly="Cannot import this Web Part." ID="g_7dec9695_2438_4cbe_94e7_cb233f1c5352" IsIncludedFilter="" DetailLink="" AllowEdit="True" UseSQLDataSourcePaging="True" HelpMode="Modeless" IsIncluded="True" Description="" NoDefaultStyle="TRUE" FrameState="Normal" AllowConnect="True" ViewFlag="0" AllowZoneChange="True" AllowMinimize="True" Title="Weekly Weight Tracker (past 3 months)" PartOrder="1" PageSize="-1" FrameType="Default" HelpLink="" PartImageSmall="" ConnectionID="00000000-0000-0000-0000-000000000000" ExportControlledProperties="True" IsVisible="True" __MarkupType="vsattributemarkup" __WebPartId="{7DEC9695-2438-4CBE-94E7-CB233F1C5352}" __AllowXSLTEditing="true" WebPart="true" Height="" Width=""><ParameterBindings>
<ParameterBinding Name="ListID" Location="None" DefaultValue="{D399E205-25E8-4A13-A076-CBDF2B1CB76D}"/>
<ParameterBinding Name="dvt_apos" Location="Postback;Connection"/>
<ParameterBinding Name="UserID" Location="CAMLVariable" DefaultValue="CurrentUserName"/>
<ParameterBinding Name="Today" Location="CAMLVariable" DefaultValue="CurrentDate"/>
</ParameterBindings>
<DataFields>@Title,Weight;@Date_x0020_Submitted,Date Submitted;@Date,Date;@Chart_x0020_Bar,Chart Bar;@ID,ID;@ContentType,Content Type;@Modified,Modified;@Created,Created;@Author,Created By;@Editor,Modified By;@_UIVersionString,Version;@Attachments,Attachments;@File_x0020_Type,File Type;@FileLeafRef,Name (for use in forms);@FileDirRef,Path;@FSObjType,Item Type;@_HasCopyDestinations,Has Copy Destinations;@_CopySource,Copy Source;@ContentTypeId,Content Type ID;@_ModerationStatus,Approval Status;@_UIVersion,UI Version;@Created_x0020_Date,Created;@FileRef,URL Path;</DataFields>
<DataSources>
<SharePoint:SPDataSource runat="server" DataSourceMode="List" SelectCommand="<View><Query><Where><Leq><FieldRef Name="Date"/><Value Type="DateTime"><Today/></Value></Leq></Where></Query></View>" UseInternalName="true" ID="dataformwebpart1"><SelectParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{D399E205-25E8-4A13-A076-CBDF2B1CB76D}"/></SelectParameters><UpdateParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{D399E205-25E8-4A13-A076-CBDF2B1CB76D}"/></UpdateParameters><InsertParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{D399E205-25E8-4A13-A076-CBDF2B1CB76D}"/></InsertParameters><DeleteParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{D399E205-25E8-4A13-A076-CBDF2B1CB76D}"/></DeleteParameters>
</SharePoint:SPDataSource>
</DataSources>
<Xsl>
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
<xsl:output method="html" indent="no"/>
<xsl:decimal-format NaN=""/>
<xsl:param name="dvt_apos">'</xsl:param>
<xsl:param name="Today">CurrentDate</xsl:param>
<xsl:variable name="dvt_1_automode">0</xsl:variable>
<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
<xsl:call-template name="dvt_1"/>
</xsl:template>
<xsl:template name="dvt_1">
<xsl:variable name="dvt_StyleName">2ColCma</xsl:variable>
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
<table align="center" border="0" class="ms-vb">
<xsl:call-template name="dvt_1.body">
<xsl:with-param name="Rows" select="$Rows" />
</xsl:call-template>
</table>
</xsl:template>
<xsl:template name="dvt_1.body">
<xsl:param name="Rows" />
<tr valign="bottom">
<xsl:for-each select="$Rows">
<xsl:call-template name="dvt_1.rowview" /> </xsl:for-each></tr>
<tr>
<xsl:for-each select="$Rows">
<xsl:call-template name="dvt_2.rowview" />
</xsl:for-each>
</tr>
</xsl:template>
<xsl:template name="dvt_1.rowview"> <!-- For Bar Graph row-->
<td valign="bottom" align="center">
<xsl:text disable-output-escaping="yes"><table height="100%" border="0" valign="bottom" width="20"><tr> <td></xsl:text> <xsl:value-of select="@Title" /><xsl:text disable-output-escaping="yes"></td></tr><tr><td valign="bottom"><div style="background:#FF9900;height:</xsl:text><xsl:value-of select="@Title" /><xsl:text disable-output-escaping="yes">px;width:20px;font-color:white;"></div></td></tr></table></xsl:text>
</td>
</xsl:template>
<xsl:template name="dvt_2.rowview"> <!-- For dates Row-->
<td valign="bottom" align="left" width="20" bgcolor="#CCCCCC" class="ms-vb">
<xsl:value-of select="ddwrt:FormatDate(string(@Date) ,1033 ,1)" />
</td>
</xsl:template>
</xsl:stylesheet></Xsl>
</WebPartPages:DataFormWebPart>
Enjoy :-)
No comments:
Post a Comment