How to display related information in a Sharepoint form based on a column / field choice
By peter.stilgoe
Looking to to automatically complete various columns in your Sharepoint forms based on the selection in a previous column ? If so take a look at SpServices Jquery library.
Here you have a function called: $().SPServices.SPDisplayRelatedInfo that will do just that.
Functionality
SPDisplayRelatedInfo is a function in the jQuery Library for SharePoint Web Services that lets you display information which is related to the selection in a dropdown. This can really bring your forms to life for users: rather than just selecting bland text values, you can show them images and links that are related to their choices.
How Does It Work?
The SPDisplayRelatedInfo function works like this:
When the function is first called, it attaches an event handler to the dropdown control. The logic here varies a bit depending on what type of dropdown it is.
When the selected option in the dropdown changes, SPDisplayRelatedInfo calls two Lists Web Service operations:
- GetList on the relatedList to get information about its columns (fields)
- GetListItems to get the items where the specified column’s value matches the current selection. Note that there can be multiple items returned; generally displayFormat: “table” makes more sense if you’ll want to display multiple items.
- For each column it’s asked to display, SPDisplayRelatedInfo calls a private function (showColumn) to render the column value based on its type. Most of the normal column types are covered, though locale conversions can’t be done from the client side (yet!). The related information is shown in a DIV which is inserted into the form. The DIV is named “SPDisplayRelatedInfo_” + columnStaticName in case you need to do any post-processing.
Tip: If you don’t want to see the column headers, pass in ms-hidden for headerCSSClass. (This is a CSS class in core.css which sets display: none.)
Prerequisites
You’ll need to have a list (relatedList) which contains the values in the dropdown in one column and the related values you’d like to display in additional columns. If you’re already using SPCascadeDropdowns, then you’ll already have a list (or lists) in place which you can use here.
Sample usage:
<script type="text/javascript">
$(document).ready(function() {
$().SPServices.SPDisplayRelatedInfo({
columnName: "Consultant Lookup",
relatedList: "Consultants",
relatedListColumn: "Consultant_x0020_Name",
relatedColumns: ["Sector"],
displayFormat: "list",
debug: true
});
});
</script>
You will need to reference your Jquery & SpServices either in each page or specify it within your master page so its available throughout the whole site eg.
<script language="javascript" type="text/javascript" src="/jQuery%20Libraries/jquery-1.4.2.min.js"></script> <script language="javascript" type="text/javascript" src="/jQuery%20Libraries/jquery.SPServices-0.5.6.min.js"></script>
How to add sections to standard Sharepoint forms
By peter.stilgoe
jQuery to the Rescue: Labeled Sections on Default Forms
Have you ever wanted to break up the columns on a list item into sections without having to unghost or customize the page in SPD?
Adding sections to Sharepoint forms
One of the better ways of implementing Jquery in your Sharepoint environment
By peter.stilgoe
1. Open up SharePoint Portal and click on Site Actions -> Site Settings -> All Site Settings option
2. Under “Site Administration“group option, Click on “Content and Structure” link
3. From top menu Click “New” List option to create a list of type “Document Library”.
4. Let’s Configure document library further…. Let’s name it as “JavaLib”
[ Note: The name of the document library could be any name you like, I like the name JavaLib as we will use this library to organize all JavaScript’s related resources]
5. (Best Practices) Now, We can configure the JavaLib with additional columns, Versioning and Security so that it can return us a favors like versioning and auto advancing to new versions (if needed).
5.1. Add a column “Script Version” as Single Line of Text to JavaLib
Having “Script version” column becomes very informative when one has lots of developers.
5.2. Configure versioning with 10 Major & 10 Minor Versions
Versioning will allow you to rollback to previous version if there is a bug/known defects without having all other pages needing a modification.
5.3. Set Library security as Read Only to Everyone and Contribute to DevGroup
Limiting who can upload new items (scripts) will help establish controlled processes and release changes using major versions.
6. Let’s download most current JQuery version 1.3.2 from http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js to the desktop
7. Now, Let’s upload jquery.1.3.2.min.js file from our desktop to our JavaLib library.
Note: After uploading the file, Please make sure you change the Name from Jquery-1.3.2.min.js to Jquery and Title as Jquery-1.3.2.min.js and Script version as 1.3.2. This will help us in future if other revisions are available then you do not have to update all webparts with new framework urls.
8. Now we have JQuery available in our environment, with correct control security & versioning in place.
Thanks to Hemendra Patel over @ http://hemsoft.blogspot.com/2009/06/first-look-at-jquery-sharepoint.html
Sharepoint and JQuery
By peter.stilgoe
If youre not already using JQuery in your Sharepoint environment Im sure you will be in someway in the future, to get you started heres some useful links:



February 2nd, 2011
