Advanced Search

How to create a sharepoint data form web part that uses only client side JavaScript

/ Published in: XSLT
Save to your folder(s)
With jQuery and SPServices, we have very powerful tools for accessing and manipulating Sharepoint data and precisiely contolling the presentation, entirely from the client side. But such solutions generally need to be either hard-coded into pages or require cumbersome content editor pastes or includes. The advantage of packaging a solution as a web part is that it is a breeze to drop it anywhere on the site. Using the technique below you can package up a purely HTML/JavaScript solution as a web part, combining the benefits of both.

1. Create the HTML/JS content that you would like to turn into a web part in the manner you are most comfortable with
2. Create a dummy page in the site to initially hold our xslt
3. Open site in Sharepoint Designer
4. Find the page created in step 2, detach it from the page layout (by right clicking it), and open it for editing.
5. Place your cursor before the closing < /ContentTemplate > or closing < /asp:Content > tag
6. Paste the code in the source block below.
7. Find
Title="DataView 1"
in the code you pasted and replace it with
Title="MoreUsefulWebPartName"
8. Replace the contents between the opening and closing ![CDATA tags with the HTML and/or JavaScript you created in step 1
9. Select all of the new code, starting with and including the opening WebPartPages:DataFormWebPart tag and ending with and including the closing /WebPartPages:DataFormWebPart tag
10. Switch from code view to designer view. You may ignore any warning you see about missing data sources.
11. Click the web part tab
12. In the "Save Web part" section, select the manner in which you would like to save the new web part.
13. Give the web part a useful name
14. Once you make the new web part available in the web part gallery, users may now add your javascript solution to any page as they would any other web part.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <WebPartPages:DataFormWebPart runat="server" IsIncluded="True" AsyncRefresh="True" FrameType="None" NoDefaultStyle="TRUE" ViewFlag="8" Title="DataView 1" PageType="PAGE_NORMALVIEW" __markuptype="vsattributemarkup" __WebPartId="{231F0ACE-32B2-4179-AE6B-07242197C9EE}" id="g_231f0ace_32b2_4179_ae6b_07242197c9ee">
  2.   <DataSources></DataSources>
  3.   <datafields/>
  4.   <XSL>
  5.     <xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:cmswrt="http://schemas.microsoft.com/WebPart/v3/Publishing/runtime" exclude-result-prefixes="xsl cmswrt x" >
  6.       <xsl:import href="/Style Library/XSL Style Sheets/Header.xsl" />
  7.       <xsl:import href="/Style Library/XSL Style Sheets/ItemStyle.xsl" />
  8.       <xsl:import href="/Style Library/XSL Style Sheets/ContentQueryMain.xsl" />
  9.       <xsl:template match="/">
  10.         <xsl:text disable-output-escaping="yes">
  11.           <![CDATA[      
  12. <script type="text/javascript"> 
  13. alert("you can use javascript");
  14. </script>
  15.           <strong>HTML Content</strong>
  16. ]]>
  17.         </xsl:text>
  18.       </xsl:template>
  19.     </xsl:stylesheet>
  20.   </XSL>
  21. </WebPartPages:DataFormWebPart>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.