The Ark Blog: JQuery

Showing posts with label JQuery. Show all posts

Wednesday, November 25, 2015

Using SPServices to Query Subsites

SPServices is really a fantastic JQuery library that is specifically designed to embrace SharePoint. My initial brush with it was positive, but then quickly put me into a difficult place to find the answer to (what I thought was) a simple question:

Can SPServices query subsite lists?

Quick searches insisted the answer was "Yes!", but code suggestions did not prove successful. I found with some trial and error that I could query localized lists (Lists in the current site level) without any issue, but when adjusting the url for subsite lists, I would receive the xml response "Site does not exist".

To explain my scenario, I was attempting to use SPServices to reference a specific list and return a specific field from each submitted item. I narrowed my troubles to a single attribute called "webURL". Many forums (including the documentation I believe) shows the property as "webUrl", which does work and return localized list data. But only "webURL" (notice the case difference) returns data from subsite lists. After making this small, but significant discovery, my code took off!

Hope this helps someone!

//THIS WOUlD NEED TO BE WRAPPED IN EITHER A FUNCTION OR HANDLER

$().SPServices({

operation: "GetListItems",

async: false,

listName: "[List Name]",

webURL: "http://[site]/[subsite]",

CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",

completefunc: function(xData, Status) {

//THIS IS A HANDY WAY TO CHECK THE RESPONSE AND CLARIFY FIELDS

//alert(xData.responseText);

$(xData.responseXML).find("z\\:row").each(function() {

var liHtml = "<li>" + $(this).attr("ows_field15") + "</li>";

$("#taskItems").append(liHtml);

});

}

});

}

Thursday, November 6, 2014

JPlayer - Dynamically Loading Media From a SharePoint Document Library

A new challenge lately was working on a way to leverage SharePoint document libraries to host mp3's, pass them into JPlayer (JQuery audio \ video player - http://jplayer.org/), and allow for dynamic changes to the mp3's. To make things more interesting, this project included utilizing the upload GUI and eliminating the need for coded updates. After many tries, I found a working model!

The below code shows how to construct and sequence arrays into a looped array.

THE JAVASCRIPT:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

/*I used the approach of collecting all my variables from different web parts, to help isolate the needed details per mp3*/

/*Build an array of the song or sermon title for indexing*/
var collectSermonTitle = document.getElementById('allSermons').innerHTML;
var collectSermonTitle2 = collectSermonTitle.substring(0, collectSermonTitle.length-1);
var sermonTitleArray = collectSermonTitle2.split(',');
var sermonTitleLength = parseInt(sermonTitleArray.length);
/*Build an array of the song or sermon title for display, which may or may not be the same as the index value - I choose to elimate spaces from my index title*/
var collectMp3Title = document.getElementById('allMp3').innerHTML;
var collectMp3Title2 = collectMp3Title.substring(0, collectMp3Title.length-1);
var sermonMp3Array = collectMp3Title2.split(',');
var sermonMp3Length = parseInt(sermonMp3Array.length);
/*Build an array of the artist, presenter, or speaker*/
var collectPreacherTitle = document.getElementById('allPastor').innerHTML;
var collectPreacherTitle2 = collectPreacherTitle.substring(0, collectPreacherTitle.length-1);
var sermonPreacherArray = collectPreacherTitle2.split(',');
var sermonPreacherLength = parseInt(sermonPreacherArray.length);
/*Build an array of the album art, relative to the current song or sermon*/
var collectPosterTitle = document.getElementById('allPoster').innerHTML;
var collectPosterTitle2 = collectPosterTitle.substring(0, collectPosterTitle.length-1);
var sermonPosterArray = collectPosterTitle2.split(',');
var sermonPosterLength = parseInt(sermonPosterArray.length);
/*This is an array of my own custom variable built in, but can be extremely helpful - notes to accompany the song or sermon*/
var collectNotesTitle = document.getElementById('allNotes').innerHTML;
var collectNotesTitle2 = collectNotesTitle.substring(0, collectNotesTitle.length-1);
var sermonNotesArray = collectNotesTitle2.split(',');
var sermonNotesLength = parseInt(sermonNotesArray.length);
/*Call the JPlayer*/
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_N",
cssSelectorAncestor: "#jp_container_N"
}, [
]
, {
playlistOptions: {
enableRemoveControls: true
},
swfPath: "js",
supplied: "webmv, ogv, m4v, oga, mp3"
});

while(sermonTitleLength+1 > 0)
{
if(sermonTitleArray[sermonTitleLength-1]!=null&&sermonNotesArray[sermonTitleLength-1]!='')
{
/*Add the song or sermon in a loop*/
myPlaylist.add({
title: sermonTitleArray[sermonTitleLength-1],
artist: sermonPreacherArray[sermonTitleLength-1],
free: true,
mp3: "http://host.com/"+sermonMp3Array[sermonTitleLength-1],
Notes: sermonNotesArray[sermonTitleLength-1],
poster: sermonPosterArray[sermonTitleLength-1]

});
}

if(sermonTitleArray[sermonTitleLength-1]!=null&&sermonNotesArray[sermonTitleLength-1]=='')
{
myPlaylist.add({
title: sermonTitleArray[sermonTitleLength-1],
artist: sermonPreacherArray[sermonTitleLength-1],
free: true,
mp3: "http://host.com"+sermonMp3Array[sermonTitleLength-1],
poster: sermonPosterArray[sermonTitleLength-1]

});
}

/*Decrement the loop*/
sermonTitleLength--;
}

});
//]]>
</script>

THE ASP (Webparts - DFWP) - There is probably a more elegant way to accomplish this - I used several DFWPs of the same data source to parse out the important details, which does accomplish the task but looks a little messy. In SharePoint, most of the webpart is system generated - the red text is the part I modified within each.

Hope it helps somebody!

<WebPartPages:DataFormWebPart runat="server" IsIncluded="True" AsyncRefresh="false" FrameType="None" NoDefaultStyle="TRUE" ViewFlag="8" Title="The Mission Church Official Podcast (4)" PageType="PAGE_NORMALVIEW" ListName="{XXXX}" Default="FALSE" DisplayName="The Mission Church Official Podcast" __markuptype="vsattributemarkup" __WebPartId="{XXXX}" id="XXXX" __AllowXSLTEditing="true" WebPart="true" Height="" Width="" autorefresh="false" manualrefresh="false">

<SharePoint:SPDataSource runat="server" DataSourceMode="List" UseInternalName="true" UseServerDataFormat="true" selectcommand="<View><Query><Where><Neq><FieldRef Name="Title"/><Value Type="Text">PodcastXML</Value></Neq></Where><OrderBy><FieldRef Name="Date_x0020_Posted" Ascending="TRUE"/></OrderBy></Query></View>" id="The_x0020_Mission_x0020_Church_x0020_Official_x0020_Podcast5"><SelectParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></SelectParameters><DeleteParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></DeleteParameters><UpdateParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></UpdateParameters><InsertParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></InsertParameters></SharePoint:SPDataSource>

</DataSources>

</ParameterBindings>

<datafields>@FileLeafRef,Name (for use in forms);@Title,Title;@PODCASTR,PODCAST_Refresh_Audio;@Preacher,Preacher;@Sermon_x0020_Series_x0020_Name,Sermon Series Name;@Link,Link;@Sermon_x0020_Title,Sermon Title;@Poster,Poster;@Date_x0020_Posted,Date Posted;@Notes0,Notes;@Sermon_x0020_Series,Sermon Series;@Create_x0020_Sermon_x0020_Series,Create Sermon Series;@Free,Free;@ID,ID;@ContentType,Content Type;@Created,Created;@Author,Created By;@Modified,Modified;@Editor,Modified By;@_CopySource,Copy Source;@CheckoutUser,Checked Out To;@_CheckinComment,Check In Comment;@CheckedOutTitle,Checked Out To;@CheckedOutUserId,ID of the User who has the item Checked Out;@FileDirRef,Path;@FSObjType,Item Type;@HTML_x0020_File_x0020_Type,HTML File Type;@File_x0020_Type,File Type;@IsCheckedoutToLocal,Is Checked out to local;@_SourceUrl,Source URL;@_HasCopyDestinations,Has Copy Destinations;@ContentTypeId,Content Type ID;@_ModerationStatus,Approval Status;@_UIVersion,UI Version;@Created_x0020_Date,Created;@FileRef,URL Path;@File_x0020_Size,File Size;@ItemChildCount,Item Child Count;@FolderChildCount,Folder Child Count;@_UIVersionString,Version;@ParentVersionString,Source Version (Converted Document);@ParentLeafName,Source Name (Converted Document);@TemplateUrl,Template Link;</datafields>

<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="ManualRefresh"></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:choose>

<xsl:when test="($ManualRefresh = 'True')">

<tr>

<xsl:call-template name="dvt_1"/>

</td>

</td>

</tr>

</table>

</xsl:when>

<xsl:otherwise>

<xsl:call-template name="dvt_1"/>

</xsl:otherwise>

</xsl:choose>

</xsl:template>

<xsl:template name="dvt_1">

<xsl:variable name="dvt_StyleName">RepForm3</xsl:variable>

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>

<xsl:variable name="dvt_RowCount" select="count($Rows)"/>

<xsl:variable name="IsEmpty" select="$dvt_RowCount = 0" />

<xsl:variable name="dvt_IsEmpty" select="$dvt_RowCount = 0"/>

<xsl:choose>

<xsl:when test="$dvt_IsEmpty">

<xsl:call-template name="dvt_1.empty"/>

</xsl:when>

<xsl:otherwise>

<xsl:call-template name="dvt_1.body">

<xsl:with-param name="Rows" select="$Rows"/>

</xsl:call-template>

</div>

</xsl:otherwise>

</xsl:choose>

</xsl:template>

<xsl:template name="dvt_1.body">

<xsl:param name="Rows"/>

<xsl:for-each select="$Rows">

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

</xsl:template>

<xsl:template name="dvt_1.rowview">

<xsl:value-of select="@Notes0" /><xsl:text disable-output-escaping="yes">,</xsl:text>

<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">

</xsl:if>

</xsl:template>

<xsl:template name="dvt_1.empty">

<xsl:variable name="dvt_ViewEmptyText">There are no items to show in this view.</xsl:variable>

<tr>

<xsl:value-of select="$dvt_ViewEmptyText"/>

</td>

</tr>

</table>

</xsl:template>

</xsl:stylesheet> </XSL>

</WebPartPages:DataFormWebPart>

<WebPartPages:DataFormWebPart runat="server" IsIncluded="True" AsyncRefresh="false" FrameType="None" NoDefaultStyle="TRUE" ViewFlag="8" Title="The Mission Church Official Podcast (3)" PageType="PAGE_NORMALVIEW" ListName="{XXXX}" Default="FALSE" DisplayName="The Mission Church Official Podcast" __markuptype="vsattributemarkup" __WebPartId="{XXXX}" id="XXXX" __AllowXSLTEditing="true" WebPart="true" Height="" Width="" autorefresh="false" manualrefresh="false">

<SharePoint:SPDataSource runat="server" DataSourceMode="List" UseInternalName="true" UseServerDataFormat="true" selectcommand="<View><Query><Where><Neq><FieldRef Name="Title"/><Value Type="Text">PodcastXML</Value></Neq></Where><OrderBy><FieldRef Name="Date_x0020_Posted" Ascending="TRUE"/></OrderBy></Query></View>" id="The_x0020_Mission_x0020_Church_x0020_Official_x0020_Podcast4"><SelectParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></SelectParameters><DeleteParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></DeleteParameters><UpdateParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></UpdateParameters><InsertParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></InsertParameters></SharePoint:SPDataSource>

</DataSources>

</ParameterBindings>

<XSL>

<xsl:output method="html" indent="no"/>

<xsl:decimal-format NaN=""/>

<xsl:param name="dvt_apos">'</xsl:param>

<xsl:param name="ManualRefresh"></xsl:param>

<xsl:variable name="dvt_1_automode">0</xsl:variable>

<xsl:choose>

<xsl:when test="($ManualRefresh = 'True')">

<tr>

<xsl:call-template name="dvt_1"/>

</td>

</td>

</tr>

</table>

</xsl:when>

<xsl:otherwise>

<xsl:call-template name="dvt_1"/>

</xsl:otherwise>

</xsl:choose>

</xsl:template>

<xsl:template name="dvt_1">

<xsl:variable name="dvt_StyleName">RepForm3</xsl:variable>

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>

<xsl:variable name="dvt_RowCount" select="count($Rows)"/>

<xsl:variable name="IsEmpty" select="$dvt_RowCount = 0" />

<xsl:variable name="dvt_IsEmpty" select="$dvt_RowCount = 0"/>

<xsl:choose>

<xsl:when test="$dvt_IsEmpty">

<xsl:call-template name="dvt_1.empty"/>

</xsl:when>

<xsl:otherwise>

<xsl:call-template name="dvt_1.body">

<xsl:with-param name="Rows" select="$Rows"/>

</xsl:call-template>

</div>

</xsl:otherwise>

</xsl:choose>

</xsl:template>

<xsl:template name="dvt_1.body">

<xsl:param name="Rows"/>

<xsl:for-each select="$Rows">

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

</xsl:template>

<xsl:template name="dvt_1.rowview">

<xsl:value-of select="@Poster" /><xsl:text disable-output-escaping="yes">,</xsl:text>

<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">

</xsl:if>

</xsl:template>

<xsl:template name="dvt_1.empty">

<xsl:variable name="dvt_ViewEmptyText">There are no items to show in this view.</xsl:variable>

<tr>

<xsl:value-of select="$dvt_ViewEmptyText"/>

</td>

</tr>

</table>

</xsl:template>

</xsl:stylesheet> </XSL>

</WebPartPages:DataFormWebPart>

<WebPartPages:DataFormWebPart runat="server" IsIncluded="True" AsyncRefresh="false" FrameType="None" NoDefaultStyle="TRUE" ViewFlag="8" Title="The Mission Church Official Podcast (2)" PageType="PAGE_NORMALVIEW" ListName="{XXXX}" Default="FALSE" DisplayName="The Mission Church Official Podcast" __markuptype="vsattributemarkup" __WebPartId="{XXXX}" id="XXXX" __AllowXSLTEditing="true" WebPart="true" Height="" Width="" autorefresh="false" manualrefresh="false">

<SharePoint:SPDataSource runat="server" DataSourceMode="List" UseInternalName="true" UseServerDataFormat="true" selectcommand="<View><Query><Where><Neq><FieldRef Name="Title"/><Value Type="Text">PodcastXML</Value></Neq></Where><OrderBy><FieldRef Name="Date_x0020_Posted" Ascending="TRUE"/></OrderBy></Query></View>" id="The_x0020_Mission_x0020_Church_x0020_Official_x0020_Podcast3"><SelectParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></SelectParameters><DeleteParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></DeleteParameters><UpdateParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></UpdateParameters><InsertParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></InsertParameters></SharePoint:SPDataSource>

</DataSources>

</ParameterBindings>

<XSL>

<xsl:output method="html" indent="no"/>

<xsl:decimal-format NaN=""/>

<xsl:param name="dvt_apos">'</xsl:param>

<xsl:param name="ManualRefresh"></xsl:param>

<xsl:variable name="dvt_1_automode">0</xsl:variable>

<xsl:choose>

<xsl:when test="($ManualRefresh = 'True')">

<tr>

<xsl:call-template name="dvt_1"/>

</td>

</td>

</tr>

</table>

</xsl:when>

<xsl:otherwise>

<xsl:call-template name="dvt_1"/>

</xsl:otherwise>

</xsl:choose>

</xsl:template>

<xsl:template name="dvt_1">

<xsl:variable name="dvt_StyleName">RepForm3</xsl:variable>

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>

<xsl:variable name="dvt_RowCount" select="count($Rows)"/>

<xsl:variable name="IsEmpty" select="$dvt_RowCount = 0" />

<xsl:variable name="dvt_IsEmpty" select="$dvt_RowCount = 0"/>

<xsl:choose>

<xsl:when test="$dvt_IsEmpty">

<xsl:call-template name="dvt_1.empty"/>

</xsl:when>

<xsl:otherwise>

<xsl:call-template name="dvt_1.body">

<xsl:with-param name="Rows" select="$Rows"/>

</xsl:call-template>

</div>

</xsl:otherwise>

</xsl:choose>

</xsl:template>

<xsl:template name="dvt_1.body">

<xsl:param name="Rows"/>

<xsl:for-each select="$Rows">

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

</xsl:template>

<xsl:template name="dvt_1.rowview">

<xsl:value-of select="@Preacher" /><xsl:text disable-output-escaping="yes">,</xsl:text>

<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">

</xsl:if>

</xsl:template>

<xsl:template name="dvt_1.empty">

<xsl:variable name="dvt_ViewEmptyText">There are no items to show in this view.</xsl:variable>

<tr>

<xsl:value-of select="$dvt_ViewEmptyText"/>

</td>

</tr>

</table>

</xsl:template>

</xsl:stylesheet> </XSL>

</WebPartPages:DataFormWebPart>

<WebPartPages:DataFormWebPart runat="server" IsIncluded="True" AsyncRefresh="false" FrameType="None" NoDefaultStyle="TRUE" ViewFlag="8" Title="The Mission Church Official Podcast (1)" PageType="PAGE_NORMALVIEW" ListName="{XXXX}" Default="FALSE" DisplayName="The Mission Church Official Podcast" __markuptype="vsattributemarkup" __WebPartId="{XXXX}" id="XXXX" __AllowXSLTEditing="true" WebPart="true" Height="" Width="" autorefresh="false" manualrefresh="false">

<SharePoint:SPDataSource runat="server" DataSourceMode="List" UseInternalName="true" UseServerDataFormat="true" selectcommand="<View><Query><Where><Neq><FieldRef Name="FileLeafRef"/><Value Type="File">PodcastXML</Value></Neq></Where><OrderBy><FieldRef Name="Date_x0020_Posted" Ascending="TRUE"/></OrderBy></Query></View>" id="The_x0020_Mission_x0020_Church_x0020_Official_x0020_Podcast2"><SelectParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></SelectParameters><DeleteParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></DeleteParameters><UpdateParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></UpdateParameters><InsertParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></InsertParameters></SharePoint:SPDataSource>

</DataSources>

</ParameterBindings>

<XSL>

<xsl:output method="html" indent="no"/>

<xsl:decimal-format NaN=""/>

<xsl:param name="dvt_apos">'</xsl:param>

<xsl:param name="ManualRefresh"></xsl:param>

<xsl:variable name="dvt_1_automode">0</xsl:variable>

<xsl:choose>

<xsl:when test="($ManualRefresh = 'True')">

<tr>

<xsl:call-template name="dvt_1"/>

</td>

</td>

</tr>

</table>

</xsl:when>

<xsl:otherwise>

<xsl:call-template name="dvt_1"/>

</xsl:otherwise>

</xsl:choose>

</xsl:template>

<xsl:template name="dvt_1">

<xsl:variable name="dvt_StyleName">RepForm3</xsl:variable>

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>

<xsl:variable name="dvt_RowCount" select="count($Rows)"/>

<xsl:variable name="IsEmpty" select="$dvt_RowCount = 0" />

<xsl:variable name="dvt_IsEmpty" select="$dvt_RowCount = 0"/>

<xsl:choose>

<xsl:when test="$dvt_IsEmpty">

<xsl:call-template name="dvt_1.empty"/>

</xsl:when>

<xsl:otherwise>

<xsl:call-template name="dvt_1.body">

<xsl:with-param name="Rows" select="$Rows"/>

</xsl:call-template>

</div>

</xsl:otherwise>

</xsl:choose>

</xsl:template>

<xsl:template name="dvt_1.body">

<xsl:param name="Rows"/>

<xsl:for-each select="$Rows">

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

</xsl:template>

<xsl:template name="dvt_1.rowview">

<xsl:value-of select="@FileLeafRef" /><xsl:text disable-output-escaping="yes">,</xsl:text>

<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">

</xsl:if>

</xsl:template>

<xsl:template name="dvt_1.empty">

<xsl:variable name="dvt_ViewEmptyText">There are no items to show in this view.</xsl:variable>

<tr>

<xsl:value-of select="$dvt_ViewEmptyText"/>

</td>

</tr>

</table>

</xsl:template></xsl:stylesheet> </XSL>

</WebPartPages:DataFormWebPart>

<WebPartPages:DataFormWebPart runat="server" IsIncluded="True" AsyncRefresh="false" FrameType="None" NoDefaultStyle="TRUE" ViewFlag="8" Title="The Mission Church Official Podcast" PageType="PAGE_NORMALVIEW" ListName="{XXXX}" Default="FALSE" DisplayName="The Mission Church Official Podcast" __markuptype="vsattributemarkup" __WebPartId="{XXXX}" id="XXXX" __AllowXSLTEditing="true" WebPart="true" Height="" Width="" autorefresh="false" manualrefresh="false">

<SharePoint:SPDataSource runat="server" DataSourceMode="List" UseInternalName="true" UseServerDataFormat="true" selectcommand="<View><Query><Where><And><Neq><FieldRef Name="Title"/><Value Type="Text">PodcastXML</Value></Neq><IsNotNull><FieldRef Name="Title"/></IsNotNull></And></Where><OrderBy><FieldRef Name="Date_x0020_Posted" Ascending="TRUE"/></OrderBy></Query></View>" id="The_x0020_Mission_x0020_Church_x0020_Official_x0020_Podcast1"><SelectParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></SelectParameters><DeleteParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></DeleteParameters><UpdateParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></UpdateParameters><InsertParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{XXXX}"/></InsertParameters></SharePoint:SPDataSource>

</DataSources>

</ParameterBindings>

<XSL>

<xsl:output method="html" indent="no"/>

<xsl:decimal-format NaN=""/>

<xsl:param name="dvt_apos">'</xsl:param>

<xsl:param name="ManualRefresh"></xsl:param>

<xsl:variable name="dvt_1_automode">0</xsl:variable>

<xsl:choose>

<xsl:when test="($ManualRefresh = 'True')">

<tr>

<xsl:call-template name="dvt_1"/>

</td>

</td>

</tr>

</table>

</xsl:when>

<xsl:otherwise>

<xsl:call-template name="dvt_1"/>

</xsl:otherwise>

</xsl:choose>

</xsl:template>

<xsl:template name="dvt_1">

<xsl:variable name="dvt_StyleName">RepForm3</xsl:variable>

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>

<xsl:variable name="dvt_RowCount" select="count($Rows)"/>

<xsl:variable name="IsEmpty" select="$dvt_RowCount = 0" />

<xsl:variable name="dvt_IsEmpty" select="$dvt_RowCount = 0"/>

<xsl:choose>

<xsl:when test="$dvt_IsEmpty">

<xsl:call-template name="dvt_1.empty"/>

</xsl:when>

<xsl:otherwise>

<xsl:call-template name="dvt_1.body">

<xsl:with-param name="Rows" select="$Rows"/>

</xsl:call-template>

</div>

</xsl:otherwise>

</xsl:choose>

</xsl:template>

<xsl:template name="dvt_1.body">

<xsl:param name="Rows"/>

<xsl:for-each select="$Rows">

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

</xsl:template>

<xsl:template name="dvt_1.rowview">

<xsl:value-of select="@Date_x0020_Posted" /><xsl:text disable-output-escaping="yes"> - </xsl:text><xsl:value-of select="@Sermon_x0020_Title" /><xsl:text disable-output-escaping="yes">,</xsl:text>

<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">

</xsl:if>

</xsl:template>

<xsl:template name="dvt_1.empty">

<xsl:variable name="dvt_ViewEmptyText">There are no items to show in this view.</xsl:variable>

<tr>

<xsl:value-of select="$dvt_ViewEmptyText"/>

</td>

</tr>

</table>

</xsl:template></xsl:stylesheet> </XSL>

</WebPartPages:DataFormWebPart>

Thursday, July 24, 2014

JQuery Slide Animation using a SharePoint Document Library

I've been exploring the concept of leveraging SharePoint's UI to easily upload and manage libraries of photos along with rendering out the stored images to an animated presentation. I used a DFWP (Data Form Web Part) and stripped out all the html table elements (<table>,<tr>,<td>, etc.) to ensure that an unbroken rendering of the library would be displayed. Next, I used filtering to restrict images based on metadata-embedded expiration dates (This would allow images to be automatically removed at a predetermined date, if needed). A little JQuery here, a little Javascript there, filled in with just a little XSLT, and a controlled slide animation was birthed!

Below is the code (This assumes that a JQuery library of at least 1.7.2 is referenced). This is really easy to work with, partially because the kind of animation at work isn't very complicated, but also because it doesn't require a special JQuery libary, apart from the core library to work. As a quick side note, I did experiment in using the same approach while employing other JQuery libraries for more sophisticated effects. This will work as well, provided that the necessary parsing code (Usually <div> tags with a special class or id) are added to the XSLT around the image declaration. Hope it helps someone!

JAVASCRIPT \ JQUERY (I needed my slide show sized dynamically, per the visitor's screen setup, hence the dimensions calculations (Call this function via the onload handler). The sizing is multiplied by 200, as my images were "200px" wide. At the end, two subsequent functions hand the animation off to each other, back and forth, in an infinite loop. There's probably a more elegant way to do this, but it works and doesn't seem to drain resources to any great length.

function finishStartUp()
{
/*Locate all the slides (IMG) within the DFWP and return as an array*/
var allSlides = $('#slides img').map(function(){
return this.src;
}).get();
/*Calculate the sizing of the container, based on the array length, that is needed to show all the images in a continuous line without over compensating on either side*/
var thisWide = allSlides.length*200-document.getElementById('slides').offsetWidth;
//Pass the sizing off to the first animation function
beginSlideShow(thisWide);

}

function beginSlideShow(wide)

{

/*Animate a complete run then, pass off the sizing to the return animation*/

$('#slides').animate({

marginLeft: -wide+'px',

},20000,function(){bounceSlideShow(wide)});

}

function bounceSlideShow(wide)

{

/*Continue the animation backward, then pass the sizing again back to the first function*/

$('#slides').animate({

marginLeft: '0px',

},20000,function(){beginSlideShow(wide)});

}

HTML \ XSLT (Good stuff marked in red - I removed my GUIDs, as they wouldn't work anyway if copied from below. The GUIDs are system generated when webparts are supplied via SharePoint's tools, and should be included when you insert a DFWP on your page)

<div id="slideDiv" style="overflow:hidden;">
<div id="slides" style="white-space:nowrap;">
<WebPartPages:DataFormWebPart runat="server" IsIncluded="True" AsyncRefresh="True" FrameType="None" NoDefaultStyle="TRUE" ViewFlag="8" Title="Slideshow" PageType="PAGE_NORMALVIEW" ListName="{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}" Default="FALSE" DisplayName="Slideshow" __markuptype="vsattributemarkup" __WebPartId="{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}" id="g_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" __AllowXSLTEditing="true" WebPart="true" Height="" Width="">
<DataSources>
<SharePoint:SPDataSource runat="server" DataSourceMode="List" UseInternalName="true" UseServerDataFormat="true" selectcommand="<View><Query><Where><Or><IsNull><FieldRef Name="expires"/></IsNull><Gt><FieldRef Name="expires"/><Value Type="DateTime"><Today/></Value></Gt></Or></Where></Query></View>" id="Slideshow1"><SelectParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"/></SelectParameters><DeleteParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"/></DeleteParameters><UpdateParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"/></UpdateParameters><InsertParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"/></InsertParameters></SharePoint:SPDataSource>
</DataSources>
<ParameterBindings>
<ParameterBinding Name="ListID" Location="None" DefaultValue="{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"/>
<ParameterBinding Name="dvt_apos" Location="Postback;Connection"/>
<ParameterBinding Name="ManualRefresh" Location="WPProperty[ManualRefresh]"/>
<ParameterBinding Name="UserID" Location="CAMLVariable" DefaultValue="CurrentUserName"/>
<ParameterBinding Name="Today" Location="CAMLVariable" DefaultValue="CurrentDate"/>
</ParameterBindings>
<datafields>@FileLeafRef,Name (for use in forms);@Title,Title;@expires,expires;@ID,ID;@ContentType,Content Type;@Created,Created;@Author,Created By;@Modified,Modified;@Editor,Modified By;@_CopySource,Copy Source;@CheckoutUser,Checked Out To;@_CheckinComment,Check In Comment;@CheckedOutTitle,Checked Out To;@CheckedOutUserId,ID of the User who has the item Checked Out;@FileDirRef,Path;@FSObjType,Item Type;@HTML_x0020_File_x0020_Type,HTML File Type;@File_x0020_Type,File Type;@IsCheckedoutToLocal,Is Checked out to local;@_SourceUrl,Source URL;@_HasCopyDestinations,Has Copy Destinations;@ContentTypeId,Content Type ID;@_ModerationStatus,Approval Status;@_UIVersion,UI Version;@Created_x0020_Date,Created;@FileRef,URL Path;@File_x0020_Size,File Size;@ItemChildCount,Item Child Count;@FolderChildCount,Folder Child Count;@_UIVersionString,Version;@ParentVersionString,Source Version (Converted Document);@ParentLeafName,Source Name (Converted Document);@TemplateUrl,Template Link;</datafields>
<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="ManualRefresh"></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:choose>
<xsl:when test="($ManualRefresh = 'True')">
<xsl:call-template name="dvt_1"/>
<img src="/_layouts/images/staticrefresh.gif" id="ManualRefresh" border="0" onclick="javascript: {ddwrt:GenFireServerEvent('__cancel')}" alt="Click here to refresh the dataview."/>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="dvt_1"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>

<xsl:template name="dvt_1">
<xsl:variable name="dvt_StyleName">RepForm3</xsl:variable>
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
<xsl:variable name="dvt_RowCount" select="count($Rows)"/>
<xsl:variable name="IsEmpty" select="$dvt_RowCount = 0" />
<xsl:variable name="dvt_IsEmpty" select="$dvt_RowCount = 0"/>

<xsl:choose>
<xsl:when test="$dvt_IsEmpty">
<xsl:call-template name="dvt_1.empty"/>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="dvt_1.body">
<xsl:with-param name="Rows" select="$Rows"/>
</xsl:call-template>
</xsl:otherwise>
</xsl:choose></xsl:template>
<xsl:template name="dvt_1.body">
<xsl:param name="Rows"/>
<xsl:for-each select="$Rows">
<xsl:call-template name="dvt_1.rowview" />
</xsl:for-each>
</xsl:template>
<xsl:template name="dvt_1.rowview">
<xsl:param name="urlSlide" select="@FileLeafRef" />
<img src="http://website.com/Slideshow/{$urlSlide}" style="height:150px;" />
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
<span ddwrt:amkeyfield="ID" ddwrt:amkeyvalue="ddwrt:EscapeDelims(string(@ID))" ddwrt:ammode="view"></span>
</xsl:if>
</xsl:template>
<xsl:template name="dvt_1.empty">
<xsl:variable name="dvt_ViewEmptyText">There are no items to show in this view.</xsl:variable>
<table border="0" width="100%">
<tr>
<td class="ms-vb">
<xsl:value-of select="$dvt_ViewEmptyText"/>
</td>
</tr>
</table>
</xsl:template></xsl:stylesheet> </XSL>
</WebPartPages:DataFormWebPart>

</div>

</div>

Wednesday, November 25, 2015

Using SPServices to Query Subsites

Thursday, November 6, 2014

JPlayer - Dynamically Loading Media From a SharePoint Document Library

Thursday, July 24, 2014

JQuery Slide Animation using a SharePoint Document Library

Contact Nate