Tuesday, September 11, 2012

jQuery web parts with SharePoint

Here is how to make jQuery effect a list's forms at SharePoint. An example:

  • Go to the List Settings for the List in SharePoint's web UI (at: List Tools > List > List Settings) and then pick "Advanced settings"
  • Set the "Launch forms in a dialog?" value to "No"
  • Open Microsoft SharePoint Designer 2010
  • Select Open New site and then simply paste in the url of your site in the dialog box that appears to open it. If you have appropriate permissions, you will be able to edit the site from within Microsoft SharePoint Designer 2010.
  • Click on "All Files" and then "SiteAssets"
  • Right-click in the "SiteAssets" pane to make an "Untitled_1.html" and then click upon it to bring it up in a tab. Here, you can rename "Untitled_1.html" to something better. Please use a .txt name. Make a text file.
  • Click on "Edit File" to edit the file. Strip out the HTML inside and add some Hello World JavaScript like so:
    <script type="text/javascript">
       alert('sup?');
    </script>
  • Save the file with the diskette icon at the upperleft.
  • Go to "Lists and Libraries" and then to your particular list.
  • To one side you will see, within the list's pane, links for:
    1. DispForm.aspx
    2. EditForm.aspx
    3. NewForm.aspx
  • Enter the item you wish to add a web part to.
  • Pick the "Design" tab for the pane that appears and pick the "Insert" tab at the ribbon up top.
  • At the ribbon click: Web Part > More Web Parts... > Content Editor
  • Your web part will appear in the Design
  • Right-click in it and pick "Web Part Properties..."
  • You will see:
    Content Link
    To link to a text file, type a URL.
  • Here, add a route to the .txt file you just made.
  • Save the file with the diskette icon at the upperleft.
  • Go to the root of your SharePoint site in the UI and then navigate to your form. You should be asked: sup?

No comments:

Post a Comment