December 21, 2012

Bringing Map functionality into SharePoint 2010: Rendering Map List View

Overview

SharePoint 2013 introduces functionality to integrate location information and maps in SharePoint lists and location-based web and mobile apps for SharePoint with the following capabilities:

new field type named Geolocation that enables you to annotate SharePoint lists with location information. The built-in Geolocation field can render only with Bing Maps. However, you can create a custom field by using the Geolocation field as a parent field type, for example see my blog post about using Google Maps as map service.
Map View that displays a map (with data obtained from the Bing Maps service), using longitude and latitude entries from the Geolocation field type

Client-side rendering for Map List View in SharePoint 2013

Regarding Map View, SharePoint 2013 utilizes client side rendering framework for List View that allows to define the rendering logic of SharePoint list views using HTML/JavaScript. There is already predefined rendering template in SharePoint 2013 for Binq Maps service that is used when Map View is created, for more details see Create a map view for the Geolocation field in SharePoint 2013.

Map List View in SharePoint 2010

But what about SharePoint 2010? Let’s discuss one approach related with customizing List View for XSLTListViewWebPart (XLV) . So, in proposed solution geographical locations are stored in Custom List and custom View is used to render data on Map using Google Maps service For example, list items

will be represented in Map View as shown below

Implementation of Map List View in SharePoint 2010

As was noted earlier for storing geographical location on a map and visualizing it in Map View we will define Custom List named GeoMap List.

GeoMap Content Type

For storing geographical locations we define the following Content Type

	<?xml version="1.0" encoding="utf-8"?>
	<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
	<!– Parent ContentType: Item (0x01) –>
	<ContentType ID="0x010087e1abb3659f42f6ad024894ec514f93"
	Name="GeoMap"
	Group="GeoMap"
	Description="GeoMap Content Type"
	Inherits="TRUE"
	Version="0">
	<FieldRefs>
	<FieldRef ID="{F3252F03-F69E-40fb-91F7-8BD364D0882B}" Name="MapAddress1"/>
	<FieldRef ID="{FBCDD54F-21AA-4eab-A376-4BC531FF264F}" Name="MapAddress2"/>
	<FieldRef ID="{638D5C28-6DFC-4642-AC7C-5377E478F5CC}" Name="MapCity"/>
	<FieldRef ID="{1966B506-0642-4b00-8B56-5B872C725B6A}" Name="MapState"/>
	<FieldRef ID="{594036C6-29C6-4c71-A271-6721C171E675}" Name="MapZip"/>
	<FieldRef ID="{6A85673B-2EE1-483d-AD5D-57161DFE8237}" Name="MapCountry"/>
	<FieldRef ID="{EBFA40F7-A21A-4f4c-B941-036F5A360E0C}" Name="MapLatitude"/>
	<FieldRef ID="{ADDBDAC0-123C-46d5-9BA0-0D7EA29E5711}" Name="MapLongitude"/>
	<FieldRef ID="{CDF90965-628A-4cf0-91E3-D6F3DBE233CC}" Name="MapAdditionalInfo"/>
	</FieldRefs>
	</ContentType>

	<Field Type="Text" DisplayName="Address1" Required="FALSE" ID="{F3252F03-F69E-40fb-91F7-8BD364D0882B}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapAddress1" Name="MapAddress1" Group="GeoMap" />
	<Field Type="Text" DisplayName="Address2" Required="FALSE" ID="{FBCDD54F-21AA-4eab-A376-4BC531FF264F}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapAddress2" Name="MapAddress2" Group="GeoMap" />
	<Field Type="Text" DisplayName="City" Required="FALSE" ID="{638D5C28-6DFC-4642-AC7C-5377E478F5CC}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapCity" Name="MapCity" Group="GeoMap" />
	<Field Type="Text" DisplayName="State" Required="FALSE" ID="{1966B506-0642-4b00-8B56-5B872C725B6A}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapState" Name="MapState" Group="GeoMap" />
	<Field Type="Text" DisplayName="Zip" Required="FALSE" ID="{594036C6-29C6-4c71-A271-6721C171E675}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapZip" Name="MapZip" Group="GeoMap" />
	<Field Type="Text" DisplayName="Country" Required="FALSE" ID="{6A85673B-2EE1-483d-AD5D-57161DFE8237}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapCountry" Name="MapCountry" Group="GeoMap" />
	<Field Type="Number" DisplayName="Latitude" Required="TRUE" ID="{EBFA40F7-A21A-4f4c-B941-036F5A360E0C}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapLatitude" Name="MapLatitude" Group="GeoMap" />
	<Field Type="Number" DisplayName="Longitude" Required="TRUE" ID="{ADDBDAC0-123C-46d5-9BA0-0D7EA29E5711}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapLongitude" Name="MapLongitude" Group="GeoMap" />
	<Field Type="Note" DisplayName="Additional Info" Required="FALSE" EnforceUniqueValues="FALSE" NumLines="6" RichText="FALSE" ID="{CDF90965-628A-4cf0-91E3-D6F3DBE233CC}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapAdditionalInfo" Name="MapAdditionalInfo" Group="GeoMap" />

	</Elements>

view raw
GeoMapContentType.xml
hosted with ❤ by GitHub

GeoMap List

GeoMap List is based on Generic List with GeoMap Content Type and with custom View

XSLT stylesheet for Map List View

	<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 x d asp __designer SharePoint ddwrt2"
	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:import href="/_layouts/xsl/main.xsl"/>
	<xsl:output method="html" indent="no"/>
	<xsl:template match="View[@BaseViewID='80']" mode="full" ddwrt:ghost="always">
	<tr class="ms-viewheadertr"></tr>
	<tr>
	<td>
	<div id="map_canvas" style="width:100%; height:480px"></div>
	</td>
	</tr>
	<xsl:apply-templates mode="footer" select="." />
	</xsl:template>
	<xsl:template name="GeoMapViewOverride" mode="RootTemplate" match="View[List/@TemplateType=10488]" ddwrt:dvt_mode="root">
	<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script src="/_layouts/spgeomap.js"></script>
	<script type="text/javascript">
	ExecuteOrDelayUntilScriptLoaded(initSPGeoMap, "sp.js");
	</script>
	<xsl:call-template name="View_Default_RootTemplate"/>
	</xsl:template>
	</xsl:stylesheet>

view raw
GeoMap.xsl
hosted with ❤ by GitHub

GeoMap rendering control

SP.GeoMapControl=function()

{

   var _listId;

   this.Init=function(listId)

   {

	    _listId = listId; 

	    loadMapData(function(entries){

	        if (entries==null)

					{

						 alert('No Map data was found');

					}

					else

					{

						initMapControl(entries);

					}

	    });

	 }

	 function initMapControl(mapEntries, params) {

	    var mapOptions = {

        center: new google.maps.LatLng(–34.397, 150.644),

        zoom: 8,

        mapTypeId: google.maps.MapTypeId.ROADMAP

      };

      var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

      var infowindow = new google.maps.InfoWindow();

      var bounds = new google.maps.LatLngBounds;

      var i,marker;

      for (i = 0; i < mapEntries.length; i++) { 

            var mapEntry = mapEntries[i];

            var pos = new google.maps.LatLng(mapEntry.lat,mapEntry.lng);

            marker = new google.maps.Marker({

                map:       map,

                position:  pos

            });

             google.maps.event.addListener(marker, 'click', (function(marker, i) {

                return function() {

                   infowindow.setContent(mapEntries[i].content);

                   infowindow.open(map, marker);

                }

             })(marker, i));

            bounds.extend(pos);

      }

      map.fitBounds(bounds); 

	 }

	 function loadMapData(fnCallback) {

      var context = new SP.ClientContext.get_current();

      var web = context.get_web();

      var listMap = web.get_lists().getById(_listId);

      var viewXml = '<View><RowLimit>1200</RowLimit></View>';

      var query = new SP.CamlQuery();

      query.set_viewXml(viewXml);

      var mapItems = listMap.getItems(query);

      context.load(mapItems);

      context.add_requestSucceeded(onMapLoaded);

		  context.add_requestFailed(onMapFailure);

		  context.executeQueryAsync();

		  function onMapLoaded() {

		     var mapsEntries=[];

		    var count=mapItems.get_count();

			  for (i=0 ; i < count; i++)

			  {

				    var mapItem=mapItems.itemAt(i);

            var dataValues=mapItem.get_fieldValues();

            var mapContent = '';

            if(dataValues['MapAdditionalInfo'] != null)

               mapContent = dataValues['MapAdditionalInfo'];

            mapsEntries.push({ mapId: dataValues['ID'], title: dataValues['Title'], lat: dataValues['MapLatitude'], lng: dataValues['MapLongitude'],content: mapContent});

        }

        fnCallback(mapsEntries);

      }

      function onMapFailure() {

         fnCallback(null);

      }

   }

};

function initSPGeoMap() {

    var mapCtl = new SP.GeoMapControl();

    mapCtl.Init(ctx.listName);

}

view raw
SPGeoMap.js
hosted with ❤ by GitHub

References

Google Maps JavaScript API v3
How to: Customize the Rendering of a Field on a List View in SharePoint 2010 on MSDN
How to: Customize a list view in apps for SharePoint using client-side rendering on MSDN

Posted in Google Maps, JavaScript, SharePoint 2010, XSLT
Tagged Bing Maps, CAML, Content Type, Geolocation Field, google maps, List View, XsltListViewWebPart
6 Comments

December 9, 2012

Customize the rendering of a List View in Sharepoint 2010: Displaying List Items in Accordion

Overview

The creation of non standard presentations for Lists/Libraries is a fairly common scenario and using the XSLT List View Web Part (XLV) possibilities that can be achieved pretty easily.
Let’s take a look how to render list of question and answers using Accordion Menu in SharePoint. Actually the idea for this post appeared after posting of corresponding question on StackOverflow.
So, let’s discuss how it could be accomplished using XLV. For Accordion we will utilize jQuery UI library.

Implementation

FAQ Custom List

First of all, let us define where the questions and answers (FAQ) we’ll be stored. For this we will use Custom List with Content Type.

  <ContentType ID="0x0100fb1027dc96a44bf280f6cb823a8da5ae"

               Name="FAQ"

               Group="SE"

               Description="FAQ Content Type"

               Inherits="TRUE"

               Version="0">

    <FieldRefs>

      <FieldRef Name="LinkTitle" ID="{82642ec8-ef9b-478f-acf9-31f7d45fbc31}" DisplayName="Question" Sealed="TRUE"/>

      <FieldRef Name="LinkTitleNoMenu" ID="{bc91a437-52e7-49e1-8c4e-4698904b2b6d}" DisplayName="Question" Sealed="TRUE"/>

      <FieldRef Name="Title" ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" DisplayName="Question" Sealed="TRUE"/>

      <FieldRef ID="{b0747420-54bc-41b2-a1b3-8432f2dbdc70}" Name="Answer"/>

    </FieldRefs>

  </ContentType>

view raw
FAQContentType.xml
hosted with ❤ by GitHub

Custom View for arranging items using jQuery UI Accordion

After creating Custom List we add new View for displaying Accordion for FAQ items

<View BaseViewID="10" Type="HTML" WebPartZoneID="Main" DisplayName="Accordion" DefaultView="FALSE" SetupPath="pages\viewpage.aspx" ImageUrl="/_layouts/images/generic.png" Url="Accordion.aspx">

        <Toolbar Type="Standard" />

        <XslLink Default="TRUE">FAQ.xsl</XslLink>

        <RowLimit Paged="TRUE">30</RowLimit>

        <ViewFields>

          <FieldRef Name="Title" ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" DisplayName="Question"  Sealed="TRUE"/>

          <FieldRef Name="Answer" ID="{b0747420-54bc-41b2-a1b3-8432f2dbdc70}"></FieldRef>

        </ViewFields>

        <Query>

          <OrderBy>

            <FieldRef Name="ID"></FieldRef>

          </OrderBy>

        </Query>

        <ParameterBindings/>

      </View>

view raw
FAQAccordionView.xml
hosted with ❤ by GitHub

XSLT style sheet for rendering Accordion View

XSLT style sheet for FAQ List is intended for the following purposes:

loading jQuery Core and UI Libraries
rendering list items using layout as specified for Accordion menu
initializing and rendering Accordion for List items

	<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 x d asp __designer SharePoint ddwrt2"
	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:import href="/_layouts/xsl/main.xsl"/>
	<xsl:output method="html" indent="no"/>
	<xsl:template match="View[@BaseViewID='10']" mode="full" ddwrt:ghost="always">
	<tr class="ms-viewheadertr"></tr>
	<tr>
	<td>
	<div id="accordionFAQ">
	<xsl:apply-templates select="." mode="RenderView" />
	</div>
	</td>
	</tr>
	<xsl:apply-templates mode="footer" select="." />
	</xsl:template>
	<xsl:template mode="Item" match="Row[../../@BaseViewID='10']" ddwrt:ghost="always">
	<xsl:param name="Fields" select="."/>
	<xsl:param name="Collapse" select="."/>
	<xsl:param name="Position" select="1"/>
	<xsl:param name="Last" select="1"/>
	<xsl:variable name="thisNode" select="."/>
	<h3>
	<xsl:value-of select="$thisNode/@Title" />
	</h3>
	<div>
	<xsl:value-of select="$thisNode/@Answer" disable-output-escaping="yes" />
	</div>
	</xsl:template>
	<xsl:template name="FAQViewOverride" mode="RootTemplate" match="View[List/@TemplateType=11999]" ddwrt:dvt_mode="root">
	<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
	<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
	<script>
	$(function() {
	$( "#accordionFAQ" ).accordion();
	});
	</script>
	<xsl:call-template name="View_Default_RootTemplate"/>
	</xsl:template>
	</xsl:stylesheet>

view raw
FAQ.xsl
hosted with ❤ by GitHub

Using jQuery UI Accordion

jQuery Core and UI libraries are injected during XSLT style sheet processing. After JavaScript files which hosted on Microsoft CDN are loaded, jQuery UI Accordion is initialized for items.

	<xsl:template name="FAQViewOverride" mode="RootTemplate" match="View[List/@TemplateType=11999]" ddwrt:dvt_mode="root">
	<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
	<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
	<script>
	$(function() {
	$( "#accordionFAQ" ).accordion();
	});
	</script>
	<xsl:call-template name="View_Default_RootTemplate"/>
	</xsl:template>

view raw
FAQViewOverride.xsl
hosted with ❤ by GitHub

Results

FAQ List Accordion View rendered in XLV is shown below on picture

References

Source code for project on GitHub
XsltListViewWebPart and Custom List Views on MSDN
How to: Customize the Rendering of a Field on a List View on MSDN
Accordion Menu in User Interface Design Patterns
jQuery UI Library

Posted in JQuery, SharePoint 2010, XSLT
Tagged Accordion, CAML, Content Type, JQuery UI, List Definition, List View, XLV
14 Comments

November 23, 2012

Embedding and Sharing Video in SharePoint. Part Two: Posting embedded code, support for different Video Providers, Preview view

Introduction

In previous post we have discussed approach on how to embed video into SharePoint from YouTube. Custom List Video Links were used for storing embedded video properties and Computed Field for rendering Video player.
This time we will extend our solution with the following capabilities:

Support for different video providers listed in oEmbed
Preview view for displaying video arranged in list
Alternative mode for posting the embed code for video into SharePoint

Support for different video providers

In addition to embed code using iframe, another options also available now. Some providers listed in oEmbed specification use object element for embedding code.

Table 1. Support for Video Providers listed in oEmbed specification

Provider Name	Embedded Mode
YouTube	IFrame, Object(YouTube)
Viddler	–
Qik	Object(Qik)
Revision3	IFrame
Hulu	IFrame
Vimeo	IFrame
CollegeHumor	Object(CollegeHumor)
Jest	Object(Jest)
CircuitLab	–

Alternative mode for posting embedded code

Additionally to existing mode for embedding video code, the approach described below allows to paste the embed code as it was generated by Provider. Let’s take a look at the common usage scenario:

Generate and copy the embed code on the Provider website
Select Embed Code from New Item for Video Links List

In New Form for Video Links List paste the embed code and fill in comments if needed as shown below

For displaying video player the same (see previous post for details) Computed Field EmbeddedVideoOnForm field is used

Preview view for displaying video

In addition to default view (video player items with details), Preview view is intended to display items arranged by columns as shown below

Implementation

To paste the embed code we define Embed Code Content Type

	<?xml version="1.0" encoding="utf-8"?>
	<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
	<!– Parent ContentType: Link (0x0105) –>
	<ContentType ID="0x010503"
	Name="Embed Code"
	Group="$Resources:List_Content_Types"
	Description="Embed Code Content Type"
	Inherits="FALSE"
	Version="0">
	<FieldRefs>
	<FieldRef ID="{c29e077d-f466-4d8e-8bbe-72b66c5f205c}" Name="URL" Required="FALSE" Hidden="TRUE"/>
	<FieldRef ID="{9F79BBE2-19A3-4341-96F6-BFDC024DEAB3}" Name="EmbedCode" Required="TRUE" />
	</FieldRefs>
	</ContentType>
	</Elements>

view raw
Embed Code Content Type.xml
hosted with ❤ by GitHub

where field EmbedCode for storing the embed code is used

	<Field ID="{9F79BBE2-19A3-4341-96F6-BFDC024DEAB3}"
	Name="EmbedCode"
	SourceID="http://schemas.microsoft.com/sharepoint/v3"
	StaticName="EmbedCode"
	Group="Media Columns"
	Type="Note"
	DisplayName="Embed Code"
	Hidden="FALSE"
	Sortable="FALSE">
	</Field>

view raw
EmbedCode Field.xml
hosted with ❤ by GitHub

As was noted earlier, for displaying video player the same (see previous post for details) Computed Field EmbeddedVideoOnForm field is used, below is presented complete XSLT style sheet for rendering of a field on a List View

	<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:template name ="RenderEmbeddedPlayer" match ="FieldRef[@Name='EmbeddedVideoOnForm']" mode="Computed_body" >
	<xsl:param name="thisNode" select="."/>
	<xsl:variable name="width">
	<xsl:call-template name="ensureVideoPlayerSize">
	<xsl:with-param name="videoSize" select="$thisNode/@VideoWidth"/>
	<xsl:with-param name="defaultSize" select="560"/>
	</xsl:call-template>
	</xsl:variable>
	<xsl:variable name="height">
	<xsl:call-template name="ensureVideoPlayerSize">
	<xsl:with-param name="videoSize" select="$thisNode/@VideoHeight"/>
	<xsl:with-param name="defaultSize" select="315"/>
	</xsl:call-template>
	</xsl:variable>
	<xsl:variable name="frameborder">
	<xsl:value-of select="$thisNode/@FrameBorder"/>
	</xsl:variable>
	<xsl:variable name="src">
	<xsl:value-of select="$thisNode/@URL"/>
	</xsl:variable>
	<xsl:choose>
	<xsl:when test="$thisNode/@EmbeddingMode ='IFrame'">
	<iframe width="{$width}" height="{$height}" src="{$src}" frameborder="{$frameborder}" allowfullscreen=""></iframe>
	</xsl:when>
	<xsl:when test="$thisNode/@EmbeddingMode ='Object(YouTube)'">
	<object width="{$width}" height="{$height}">
	<param name="movie" value="{$src}"></param>
	<param name="allowFullScreen" value="true"></param>
	<param name="allowscriptaccess" value="always"></param>
	<embed src="{$src}" type="application/x-shockwave-flash" width="{$width}" height="{$height}" allowscriptaccess="always" allowfullscreen="true"></embed>
	</object>
	</xsl:when>
	<xsl:when test="$thisNode/@EmbeddingMode ='Object(Qik)'">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0" width="{$width}" height="{$height}" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="true" />
	<param name="movie" value="{$src}" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="#000000" />
	<param name="FlashVars" value="streamID=9d0242b2912a444e84a31c2ca3249268&autoplay=false" />
	<embed src="{$src}" quality="high" bgcolor="#000000" width="{$width}" height="{$height}" name="qikPlayer" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" FlashVars="streamID=9d0242b2912a444e84a31c2ca3249268&autoplay=false"></embed>
	</object>
	</xsl:when>
	<xsl:when test="$thisNode/@EmbeddingMode ='Object(CollegeHumor)'">
	<object type="application/x-shockwave-flash" data="{$src}" width="{$width}" height="{$height}">
	<param name="allowfullscreen" value="true"/>
	<param name="wmode" value="transparent"/>
	<param name="allowScriptAccess" value="always"/>
	<param name="movie" quality="best" value="{$src}"/>
	<embed src="{$src}" type="application/x-shockwave-flash" wmode="transparent" width="{$width}" height="{$height}" allowScriptAccess="always"></embed>
	</object>
	</xsl:when>
	<xsl:when test="$thisNode/@EmbeddingMode ='Object(Jest)'">
	<object type="application/x-shockwave-flash" data="{$src}" width="{$width}" height="{$height}">
	<param name="allowfullscreen" value="true"/>
	<param name="wmode" value="transparent"/>
	<param name="allowScriptAccess" value="always"/>
	<param name="movie" quality="best" value="{$src}"/>
	<embed src="{$src}" type="application/x-shockwave-flash" wmode="transparent" width="{$width}" height="{$height}" allowScriptAccess="always"></embed>
	</object>
	</xsl:when>
	<xsl:otherwise>
	<xsl:call-template name="renderEmbeddedCodeAsHtml">
	<xsl:with-param name="embedId" select="$thisNode/@ID" />
	<xsl:with-param name="embeddedCode" select="$thisNode/@EmbedCode" />
	</xsl:call-template>
	</xsl:otherwise>
	</xsl:choose>
	</xsl:template>
	<xsl:template match ="FieldRef[@Name='EmbedCode']" ddwrt:dvt_mode="body" mode="Note_body">
	<xsl:param name="thisNode" select="."/>
	<div class="videolink-embedcode">
	<xsl:value-of select="$thisNode/@EmbedCode" disable-output-escaping="yes" />
	</div>
	</xsl:template>
	<xsl:template name="ensureVideoPlayerSize">
	<xsl:param name="videoSize"/>
	<xsl:param name="defaultSize"/>
	<xsl:choose>
	<xsl:when test="$videoSize > 0">
	<xsl:value-of select="$videoSize"/>
	</xsl:when>
	<xsl:otherwise>
	<xsl:value-of select="$defaultSize"/>
	</xsl:otherwise>
	</xsl:choose>
	</xsl:template>
	<xsl:template name="renderEmbeddedCodeAsHtml">
	<xsl:param name="embedId"/>
	<xsl:param name="embeddedCode"/>
	<xsl:variable name="embeddedCodeUrl">
	<xsl:value-of select="substring-before(substring-after($embeddedCode,'>'),'</a>')"/>
	</xsl:variable>
	<xsl:variable name="embeddedCodeFixed">
	<xsl:value-of select="substring-before($embeddedCode,'<a')"/>
	<xsl:value-of select="$embeddedCodeUrl" />
	<xsl:value-of select="substring-after($embeddedCode,'</a>')"/>
	</xsl:variable>
	<xsl:variable name="embeddedCodeHtml">
	<xsl:value-of select="$embeddedCodeFixed" disable-output-escaping="yes" />
	</xsl:variable>
	<div id="embeddedPlayerContainer{$embedId}">
	</div>
	<!–<xsl:value-of select="$embeddedCodeHtml" />–>
	<script type="text/javascript">
	var playerHost = 'embeddedPlayerContainer<xsl:value-of select="$embedId" />';
	var player = '<xsl:value-of select="$embeddedCodeFixed" />';
	<![CDATA[
	player = player.replace(/"/g, "'").replace(/</g, "<").replace(/>/g, ">");
	document.getElementById(playerHost).innerHTML = player;
	]]>
	</script>
	</xsl:template>
	</xsl:stylesheet>

view raw
fldtypes_VideoLinksForDifferentProvidersAndEmbedCode.xsl
hosted with ❤ by GitHub

References

Video Links project on GitHub
oEmbed format specification

Posted in SharePoint 2010, XSLT
Tagged CAML, Computed Field, Content Type, List View
7 Comments

YASP Blog

All about Office 365, SharePoint, ASP.NET and web development in general

Tag Archives: CAML

	SP.GeoMapControl=function()
	{
	var _listId;
	this.Init=function(listId)
	{
	_listId = listId;
	loadMapData(function(entries){
	if (entries==null)
	{
	alert('No Map data was found');
	}
	else
	{
	initMapControl(entries);
	}
	});
	}
	function initMapControl(mapEntries, params) {
	var mapOptions = {
	center: new google.maps.LatLng(–34.397, 150.644),
	zoom: 8,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
	var infowindow = new google.maps.InfoWindow();



	var bounds = new google.maps.LatLngBounds;
	var i,marker;
	for (i = 0; i < mapEntries.length; i++) {
	var mapEntry = mapEntries[i];
	var pos = new google.maps.LatLng(mapEntry.lat,mapEntry.lng);
	marker = new google.maps.Marker({
	map: map,
	position: pos
	});



	google.maps.event.addListener(marker, 'click', (function(marker, i) {
	return function() {
	infowindow.setContent(mapEntries[i].content);
	infowindow.open(map, marker);
	}
	})(marker, i));

	bounds.extend(pos);
	}
	map.fitBounds(bounds);

	}
	function loadMapData(fnCallback) {
	var context = new SP.ClientContext.get_current();
	var web = context.get_web();
	var listMap = web.get_lists().getById(_listId);
	var viewXml = '<View><RowLimit>1200</RowLimit></View>';
	var query = new SP.CamlQuery();
	query.set_viewXml(viewXml);
	var mapItems = listMap.getItems(query);
	context.load(mapItems);
	context.add_requestSucceeded(onMapLoaded);
	context.add_requestFailed(onMapFailure);
	context.executeQueryAsync();
	function onMapLoaded() {
	var mapsEntries=[];


	var count=mapItems.get_count();
	for (i=0 ; i < count; i++)
	{
	var mapItem=mapItems.itemAt(i);
	var dataValues=mapItem.get_fieldValues();
	var mapContent = '';
	if(dataValues['MapAdditionalInfo'] != null)
	mapContent = dataValues['MapAdditionalInfo'];
	mapsEntries.push({ mapId: dataValues['ID'], title: dataValues['Title'], lat: dataValues['MapLatitude'], lng: dataValues['MapLongitude'],content: mapContent});
	}
	fnCallback(mapsEntries);
	}
	function onMapFailure() {
	fnCallback(null);
	}
	}
	};

	function initSPGeoMap() {
	var mapCtl = new SP.GeoMapControl();
	mapCtl.Init(ctx.listName);
	}

	<ContentType ID="0x0100fb1027dc96a44bf280f6cb823a8da5ae"
	Name="FAQ"
	Group="SE"
	Description="FAQ Content Type"
	Inherits="TRUE"
	Version="0">
	<FieldRefs>
	<FieldRef Name="LinkTitle" ID="{82642ec8-ef9b-478f-acf9-31f7d45fbc31}" DisplayName="Question" Sealed="TRUE"/>
	<FieldRef Name="LinkTitleNoMenu" ID="{bc91a437-52e7-49e1-8c4e-4698904b2b6d}" DisplayName="Question" Sealed="TRUE"/>
	<FieldRef Name="Title" ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" DisplayName="Question" Sealed="TRUE"/>
	<FieldRef ID="{b0747420-54bc-41b2-a1b3-8432f2dbdc70}" Name="Answer"/>
	</FieldRefs>
	</ContentType>

	<View BaseViewID="10" Type="HTML" WebPartZoneID="Main" DisplayName="Accordion" DefaultView="FALSE" SetupPath="pages\viewpage.aspx" ImageUrl="/_layouts/images/generic.png" Url="Accordion.aspx">
	<Toolbar Type="Standard" />
	<XslLink Default="TRUE">FAQ.xsl</XslLink>
	<RowLimit Paged="TRUE">30</RowLimit>
	<ViewFields>
	<FieldRef Name="Title" ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" DisplayName="Question" Sealed="TRUE"/>
	<FieldRef Name="Answer" ID="{b0747420-54bc-41b2-a1b3-8432f2dbdc70}"></FieldRef>
	</ViewFields>
	<Query>
	<OrderBy>
	<FieldRef Name="ID"></FieldRef>
	</OrderBy>
	</Query>
	<ParameterBindings/>
	</View>