PANVEGA’s Blog

DotNet Development, SharePoint Customizing, Silverlight, MS Infrastructure and other tips and tricks

Adding more funtionaltity to SharePoint with JS funtions

Posted by PANVEGA on October 14, 2008

Do you sometimes wish to make some special form validation or other javascript actions on SharePoint form fields (like for example onchange, onfocus, onblur, etc?). You can add special functions on events to the SharePoint form fields using JavaScript.

This example demonstrates how to synchronise different fields from another SharePoint lits and apply the SP Designer custom workflows.

Referencing SharePoint fileds with JavaScript:

first Example

document.getElementsByName(urn:schemas-microsoft-com:office:office#Field_Name)[0]

where Field_Name is the SharePoint name of the field (you can find it at the end of URL when viewing properties of the field under “Modify Settings and columns”. For example if I’d need to change the value of a form field Title, I’d use the following code:

document.getElementsByName(‘urn:schemas-microsoft-com:office:office#Title’)[0].value = ‘Boris’

Thus changing the value to Boris.

The story gets a bit more complicated with SharePoint 3.0. The names of fields now also contain ID of the form, which is constantly changing. The previous case in one of our forms would be

document.getElementsByName(‘ctl00$m$g_740df035_0c04_4906_89d7_cb38429413df$ctl00$ctl04$ctl00$ctl00$ctl00$ctl04$ctl00$ctl00$TextField’)[0].value = ‘Boris’

The problem occurs with changing ID of the form so you can’t (at least that I know of) refference the form field value by name alone.

The solution here is using form titles. I’ve prepared a small javascript to get the form field by its type and title.

function getField(fieldType,fieldTitle) {
var docTags = document.getElementsByTagName(fieldType);
for (var i=0; i < docTags.length; i++) {
if (docTags[i].title == fieldTitle) {
return docTags[i]
}
}
}

Using this script now you can change the value of a title field with

getField(‘input’,’Title’).value = ‘Boris’

My approach:

I have a list with some regular customers accounts and an other list with additional User information customer list. I also have a username lookup to the in regular customer list.

After changing the RegularCustomer name in the dropdown the JS functions should synchronize the RegularCustomer with the appropriate RegularCustomer_id dropdownlist ID.

In the next step the regular customer properties like zip code, street, phone, email etc. should automatically retreive with a custom workflow from the regular customer list into my addition customer list preparted columns by using the RegularCustomer_id. It is like a Call Center fill out formular. These two fields need to select the same item from the list.

You need the SP Designer to set the appropriate fields in your custom workflow into the additional user list. Set your custom WF Conditions and Actions. The workflow event fires after you save the item in the list. This shoud save time and automate some processes while filling out the formular with some user information. In addition i need the regular customer ID instead of the name, because the name is not be unique in the list.

You will find in the internet heaps of how to create a custom workflow with the SP Designer.

Now we’ll prepare a one-way synchronization. We’ll want those two fields synchronized when selecting the item from the “Menu” dropdown. So we’ll add an “onchange” event to the “Menu” select field.

Recently I wanted to add some text descriptions to the “NewForm.aspx” and “EditForm.aspx”.  It works for SharePoint 2.0 and SharePoint 3.0.

Let me demonstrate in an example below. I have a SharePoint List with a field “RegularCustomer_name” that is a lookup field to Title list “RegularCustomer”. I’ve created another field “RegularCustomer_id” that is a lookup to the same list, but instead of Title it should select the ID. These two fields need to select the same item from the list Menu.

1. Add a Content Editor Web part to the page using and make it unvisible

2. In the URL, you’ll notice “DispForm.aspx?ID=1&…”  Remove everything after the ampersand and add “PageView=Shared&ToolPaneView=2” to the URL.

?PageView=Shared&ToolPaneView=2

http://servername/Lists/Tasks/NewForm.aspx?PageView=Shared&ToolPaneView=2

Now you are in Edit mode and you can add web parts to the page.  After you add a web part, any time you revisit this page, you will see the Edit Page option in Site Actions.

This opens the Task pane for adding webparts. So now you can add any webpart to the page. Some practical uses are to add Content Editor Webparts to the page or related lists,…

3. You should not hide the RegularCustomer_id field in the Content type the JS function does this for you function hideTR() –>

node.style.display = 'none';

If you hide the field in the SharePoint List Settings you gonna receive an JS exception because the hidden field is not available in the DOM structure.

4. Edit the Source of the content editor web part add the script code, insert the JS functions the full code below.

The JavaScript functions were added to the page when selecting eg. newForm.aspx or editForm.aspx you see the JS code in the Soucecode withthe hidden property.

<script type="text/javascript">
function addEvent( obj, type, fn )
{
    if (obj.addEventListener) {
       obj.addEventListener( type, fn, false );
    } else if (obj.attachEvent) {
       obj["e"+type+fn] = fn;
       obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
       obj.attachEvent( "on"+type, obj[type+fn] );
    }
}

function hideTR() {
var whats=document.getElementById('part1').getElementsByTagName('h3');
for(i=0;i<whats.length;i++) {
    var x=whats[i].getElementsByTagName('nobr')[0];
    if (x.firstChild.nodeValue == 'RegularCustomer_id')
    {
        var node = x.parentNode.parentNode.parentNode;
        node.style.display = 'none';
    }
}

}
function getField(fieldType,fieldTitle) {
    var docTags = document.getElementsByTagName(fieldType);
    for (var i=0; i < docTags.length; i++) {
        if (docTags[i].title == fieldTitle) {
            return docTags[i]
        }
    }
}
function syncDropDownsWithName() {
selectedId = getField('select','RegularCustomer_name').options[getField('select','RegularCustomer_name').selectedIndex].value;
for (i=0; i<getField('select','RegularCustomer_id').options.length; i++) {
  if(getField('select','RegularCustomer_id').options[i].value == selectedId) getField('select','RegularCustomer_id').options[i].selected='selected';
}
}
function syncDropDownsWithID() {
selectedId = getField('select','RegularCustomer_id').options[getField('select','RegularCustomer_id').selectedIndex].value;
for (i=0; i<getField('select','RegularCustomer_name').options.length; i++) {
  if(getField('select','RegularCustomer_name').options[i].value == selectedId) getField('select','RegularCustomer_name').options[i].selected='selected';
}
}
getField('select','RegularCustomer_name').onchange = function() {syncDropDownsWithName()};
getField('select','RegularCustomer_id').onchange = function() {syncDropDownsWithID()};
addEvent(window, 'load', hideTR);
</script>

5. open the SP Designer and create a custom workflow which retrieves the columns from the regular customer list with the new synchronized ID. Set your custom WF Conditions and Actions in order to add the fields from regular customers to the additional list.

this is an example was made with CQWP and in the SharePoint. The same works also in the Data View Webpart.

You can synchronise any fields you wish. This very nice functionality gives you more flexibility and interaction when filling out any List Items. And you do not have to change the code in the list.

Note:

Because it it a synchron way with the custom workflow the updated fields are not shown emmidently. To solve this issue you can call asynchron ajax way.

More Information:

http://blogs.msdn.com/danielmcpherson/archive/2004/10/11/240863.aspx

Advertisements

3 Responses to “Adding more funtionaltity to SharePoint with JS funtions”

  1. erugalatha said

    Hi,

    Is it possible to detect specific content types using Javascript?

    Thanks for any help.

  2. PANVEGA said

    YOu can parse your page with document.getElementsByTagName(“ContentTypeID”)and get the ID.
    E.g. 0x0101 for Document Library.

    See more about the IDs
    http://msdn.microsoft.com/en-us/library/aa543822.aspx

  3. Vijay said

    This is great – thank you Panvega.

    I’d like to take this clever use of Javascript through CEWP one step further… Combine the event with the hidden field within a new form.

    Can anyone paste the code required as I am a complete novice? I’d like a basic example so if option 1 is chosen from a dropdown menu, 2 hidden fields from the same list show up and if option 2 is chosen, 1 completely different hidden field shows up from the same list.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: