The Ark Blog: 2014

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>

Thursday, June 19, 2014

Javascript - Dynamically Updating a Handler

One of the coolest, yet lesser promoted objects in the JavaScript world is the ability to dynamically update the handler of a given function. To break it down, a user essentially "re-programs" on the client side an interactive Html element (<a>, <div>, <span>, etc.) to change which function is called, when an option is selected (By whatever input method is used). This can save a ton of coding and can allow functions to change based on user entered parameters. It's feasible that the chosen value could be bound to a cookie, but otherwise the function will always load with the starting option selected by the developer. This may seem basic, but it's also incredibly powerful and useful in many scenarios. I used it to create mapping assistance, in which the destination (Which has to be concatenated with differing circumstances, based on user input) would be new per visitor and the destination may be different as well, based on where the visitor is travelling to. It creates an elegant, scale-able solution that can be easily updated with minimal code.

THE SCRIPT (Within the Html header):

<script type="text/javascript">
function startHere(userChoice)
{
if(userChoice=="iChooseThis")
{
document.getElementById(userChoice).onclick=nowDoThisFunction;
}
else
{
document.getElementById(userChoice).onclick=nowDoThisFunction2;
}

function nowDoThisFunction()
{
//Do this code;
}

function nowDoThisFunction2()
{
//Do this code instead;
}
</script>

HTML (Using the very crude example of acting based on the element clicked - you could change the function parameter to grab a text box value, drop-down menu, etc.):

<a id="iChooseThis" href="javascript:" onclick="javascript: startHere(this.id);" />

Sunday, June 8, 2014

Loading a YouTube Channel as a Feed

For a few projects now, it has become necessary to cross-integrate as many items as possible. One example, would be showing a YouTube channel in feed style within a given web site. The usefulness is that videos can be posted to the targeted channel via a smartphone and or other computer on the fly and be available on both the YouTube channel and the targeted website (The feed coming off Google generaly takes about fifteen minutes).Additionally, this can allow for easy uploading from multiple persons, while offloading the security aspects onto Google.

The "html.push" can be tweaked to the desired layout, which will be injected into the "youtube" div tag, following the script.
With the ajax section, the "url" attribute needs to be adjusted to match the desired YouTube channel.The only variable within the url is the YouTube user id, which can be verified using Google's instructions here.

Here's the full code to make it all happen!

function show_my_videos(data){

html = ['<ul id="youtube-videos" style="list-style-type:none">'];

$(data.feed.entry).each(function(entry){

url = this.link[0].href;

url_thumbnail = this.media$group.media$thumbnail[3].url;

var description;

try

{

description = this.media$group.media$description.$t;

}

catch(err)

{

description = '';

}

html.push('<li><table style="width:250px;"><tr><td colspan=2></td></tr><tr><td style="vertical-align:top"><a href="'+url+'" target="_blank">');

html.push('<img src="'+url_thumbnail+'" alt="'+description+'" style="border:1px white solid">');

html.push('</a></td><td style="font-size:8pt">'+description+'</td></tr><tr><td colspan=2 style="border-bottom:1px white solid"> </td></tr></table></li>');

});

html.push('</ul>');

$("#youtube").html(html.join(''));

}

$.ajax({

type: "GET",

url: "http://gdata.youtube.com/feeds/api/users/[YouTube User ID]/uploads?alt=json-in-script&format=5",

cache: false,

dataType:'jsonp',

success: function(data){

show_my_videos(data);

}

});

</script>

Example, as rendered in page:

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

Thursday, June 19, 2014

Javascript - Dynamically Updating a Handler

Sunday, June 8, 2014

Loading a YouTube Channel as a Feed

Contact Nate