Staying loyal to JavaScript and CEWP I’ve published a new part in the Power of Content Editor Webpart series.

This time we use calculated field and filtering list view via URL to create a simple alphabetical filter positioned above or below list view:

After that taking this one step further we expand this example to make a configurable script with some (configurable) styling and displaying the selected filter value:

And with configurable styling we could even simply manipulate the look and feel of the filter.

The same script can be used on multiple lists and views without rewriting the code. All because using the linked content file approach (tip 3 on this page). If you’re eager to use the script and not go through the entire article, there is full script almost at the end of the article.

Click here to read the article.

Yes, demo is still made for SharePoint 2007. This is in one way keeping the theme of the article series together and also in SharePoint 2010 it’s much easier to create this functionality because of XSLT views.

If you are in no mood to read through entire article, the complete code can be found at the end.

Click here to read the article.

With this part I’ve also improved the navigation between articles of series a bit:

and I’ve used my new gadget toy for adding my handwriting to screenshots. If you find my handwriting too unreadable, please let me know so I’ll stick to typed handwriting.

You’re welcome to read the article here, and comments or questions are available with this post.

Those scripts are just thrown there for now – all undocumented and some even borrowed from other pages. The library will be expanding as I create / come across new scripts.

Hope you find them useful.

Click here to see the JavaScript Library

Just as a side note, I began preparing this series as a presentation for SPSEMEA. You can find recordings from this fantastic online event here.

What is a Cascaded dropdown? It’s a combination of two dropdown lists. By selecting an option in the first dropdown (parent) you filter the options in a second dropdown (child).

Using this simple-to-deploy and configure solution you can create multiple cascaded relations in the same form. It works in MOSS 2007 / WSS 3.0 and in MOS 2010 / WSF 4.0

You can visit the project page here or download the JavaScript solution from CodePlex.

1. Go to list’s settings and edit the properties of the field (on a sample below we’ll get to know the internal name of a "Business phone" column in a standard Contacts list:
   
2. In the URL of the "Change Column" page, look for "Field=…" at the end:
     
3. In the example above, the internal name is WorkPhone. But if your column name contains strange characters, like e.g. Hello%5FWorld%5Fx0020%5FColumn (which we would get if we created a "Hellp_World Column" column, type the following in the URL bar of your Web Browser:
   javascript:unescape(‘[your-field-name]‘)
   and press enter. You’ll get the internal name of the field:
   

Why is internal column name good for? XSLT views code in SharePoint Designer, Querying SharePoint Web Services, custom scripts, when programming backend against a SharePoint list or list item,…

1. Change the looks of SharePoint pages
2. Add features and functionalities to SharePoint Pages and list forms
3. Read from and write data to SharePoint Lists using SharePoint’s Web Services.
4. Some other stuff we’ll come along on the way

If you wish to know what all we’ll be getting to know there are already all examples explained in my previous post.

Starting off easy we learn how to insert the CEWP also in pages where the "Edit Page" command in "Site Actions" is not available.

You can find the series article here: The Power of Content Editor WebPart.

As soon as new content is added, I’ll be letting you know.

You can download the .stp from CodePlex

After you’ve uploaded the file to the Site template gallery you can create a subsite (English language) and from Custom you can select the uploaded template.

Below’s a brief overview where you can find tricks. How it’s done – check for Content Editor WebParts in that page (using a “PageView=Shared&ToolPaneView=2” parameters in url (more info here)). All the files containing code are in a document library Sys.

Let’s see the samples:

1. HTML in List Description BugFix

Team Discussion list default view

The code is IN the content editor webpart. You can find if you click the “Edit Source” button.

2. Toggle QuickLaunch

Calendar list default view

Full code in showHideQuickLaunch.html

3. List View Quick Search

Customers list default view

Full code in ListQuickFilterWebPart.html

4. Expose Weekends in List View

Duty Roster list default view

Full code in HighLightWeekendsInLV.html

5. Alphabet List quick navigation

Customers list default view

Full code in alphabetFilter.html
Note that you can configure the filter values in an array filterValues.

6. Attaching Events to Form Fields

Tasks list in New form

Full code in updateTaskPercentages.html
If you change the task status to “Completed” it will automatically populate the “% Complete” field to value 100.
If you change the task status to “Not started” it will clear the value in “% Complete” field.
If you have entered value in “% Complete” field before, then change status to Completed (which sets it to 100%) and then back to any other, it will remember your input and return the value.

This webpart should also be added to EditForm, but in the demo it’s just in newform for demo purposes.

7. List Form Live Validation

Tasks list in New form

Full code in validateCompletedTask.html

If you set the Status field to “Completed”, leave the “Hours used” field empty, and try submitting the form (click OK), it will display a validation message below the “Hours used” – withoud submitting the form.

This webpart should also be added in EditForm to be working there also.

8. ERTE – Embed Flash in SharePoint Content

This example is already explained in http://www.sharepointboris.net/erte. There is no example in the stp site. But you can quickly create a blog subsite and add webparts there.

Note that you can add the ERTE without modifying the Master page. It’s prepared to be used in a webpart also.

You need to make this on every page that needs the script:

1. New form for adding posts
2. Edit form for editing posts
3. HomePage where posts are displayed
4. Disp form for displaying particular post
5. Any other page that will be displaying blog posts with embeddable content.

Please keep track of latest version on http://erte.codeplex.com

9. Ajax AutoSuggest using SharePoint’s Web Services

Duty roster list in New form

Full code in EmployeeAutoSuggest.html

Note if autosuggest won’t trigger what might help is to edit the page and exit edit mode. If it still doesn’t work, place the Employee field in second place in the form.

10. Update List Items – comments to Announcements

Announcements list in Display form

Full code in AjaxComments.html

This webpart reads and writes to Comments list.

X. To sum it all up

THe above post was not intended to show an in-depth code and how the examples are made. It is just to showcase what demos are included. You can view all the sources and adapt them to your needs.

Just a reminder – all the sources are included in the stp (in the Document Library sys) or they can be downloaded from my CodePlex site here.

I’m planning to record or maybe even have live for each of the examples (and an intro) explaining each of the demo more in-depth. Would you be interested to participate online in a 1-2 hour session? Please let me know in comments to this post.

Even though new SharePoint is about to go public beta I’ll still show how to handle this in SharePoint 3.0 or 2007

How does it work?

Before explaining how to attach a functon or event handler to a SharePoint lookup field let’s take a look on how SharePoint lookup field is rendered in HTML and which is its behavior – considering client-side.

Lookup to a list with less than 20 items:

If your lookup field is reading from a list that has 19 or less items, the lookup field is rendered like a normal HTML dropdown field (HTML <SELECT> tag). The options in the select tag present possible choices. The text of the option is the lookup value, the value of the option is the lookup ID which SharePoint uses to properly link to the item.

The select has a title that equals the field display name, so you can easily use the getField function that is published here. So you can also easily bind an “onchange” event to it.

Lookup to a list with 20 or more items

When a list that the lookup field is reading from a list with 20 and more items, the story becomes more complicated. But only in IE. In FireFox and other browsers the lookup field with 20+ items still gets rendered as a SELECT element. In IE the story starts:

When a Lookup field has 20+ items in IE it gets rendered as a simulation of a combo box (SELECT). It is rendered as an INPUT text box with an image beside. The reason for this is to enable “auto suggest”/filtering feature as you type values in the INPUT textbox.

The image next to input element is pretty straightfoward. It has an “onclick” event that triggers the select.

The input field on the other hand has a lot of event handlers bound to it (keypress, keydown, keyup, etc. shown in the screenshot from IE Developer Tools below) that enable the combo box simulation. The input field also has a “Title” attribute that has a value of the field display name.

One of the attributes of the input field is also choices which contains all the ids and values of the lookup separated with the “|” character.

The first time you press a key or click the image next to the input field, a special function creates a SELECT element and positions it under the INPUT element. Each additional keypress when typing into the input field (typing in the lookup value) functions already attached to the input re-create the input with filtered values. The generated SELECT’s ID is determined with an attribute “opt” on the Input field.

The problem on DOM

This DOM presents an issue to attach an “onchange” event to it since the input field already has so many onkeyup, onkeydown, onkeypress,… events. And since the Select element is generated on the fly it doesn’t exist when the page is rendered and there is only one SELECT element for all the lookup fields with 20+ items in the page. So we can’t attach an event handler to it. At least not easily.

How to attach an event handler to a lookup field?

The good news is that the re IS a way to add a function to trigger when the lookup field value has changed. The input field has another attribute – “optHid” which reveals the ID of a hidden input field that contains the selected lookup ID. That on the other hand is free of any event handlers and we can abuse it.

Since we won’t be typing into a hidden field we can’t add an “onkeyup” or “onkeypress” event to it. But we can add an “onpropertychange” event to it. I’ve read somewhere that this is working only in IE, but that’s ok since we are modifying the behavior for IE. Because the hidden field doesn’t have the title attribute we need to refference it indirectly through the input:

document.getElementById(getField('input','[field_display_name']').optHid)

Enough theory – let’s make a practical example

Let’s make a simple example. When you change a lookup field its ID and text should be coppied to another text field.

Because the SharePoint field can be rendered in two different ways we need to predict both. What we will need first is slightly modified function getField.

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];          }     }      return false;  } 

The modification is in bold. What this change does is that the function returns false if it can’t find the specified element. Like that we can use it to specify if the field is INPUT (with 20+ items) or SELECT (with 19- items).

function copyLookupIdAndTxt() {
    if(getField('select','20+ Lookup'))
    {
        //if lookup has 19 or less items - SELECT
        lookupField = getField('select','20+ Lookup');
        lookupSelectedItem = lookupField.options[lookupField.selectedIndex];
        getField('input','Title').value = lookupSelectedItem.value + "-" + lookupSelectedItem.text;
    }
    else
    {
        //if it has 20 or more items - INPUT
        lookupFieldText = getField('input','20+ Lookup');
        lookupFieldId = document.getElementById(lookupFieldText.optHid);
        getField('input','Title').value = lookupFieldId.value + "-"+lookupFieldText.value;
    }
}

 
Next we create a function that will attach the created function to the lookup field (select or hidden input)

function addHandler() {
    if(getField('select','20+ Lookup'))
    {
        getField('select','20+ Lookup').onchange = function() { copyLookupIdAndTxt() }     }     else      {          document.getElementById(getField('input','20+ Lookup').optHid).onpropertychange = function() { copyLookupIdAndTxt() }      }  }

 
and finally to make sure the handler gets added let’s add this to the spbodyonloadfunctionnames array

_spBodyOnLoadFunctionNames.push('addHandler');

and the function is adapted to SharePoint’s lookup field.

To recap: the entire code is as follows:

<script type="text/javascript">
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];
          }
      }
      return false;
} 

function copyLookupIdAndTxt() {
    if(getField('select','20+ Lookup'))
    {
        //if lookup has 19 or less items - SELECT
        lookupField = getField('select','20+ Lookup');
        lookupSelectedItem = lookupField.options[lookupField.selectedIndex];
        getField('input','Title').value = lookupSelectedItem.value + "-" + lookupSelectedItem.text;
    }
    else
    {
        //if it has 20 or more items - INPUT
        lookupFieldText = getField('input','20+ Lookup');
        lookupFieldId = document.getElementById(lookupFieldText.optHid);
        getField('input','Title').value = lookupFieldId.value + "-"+lookupFieldText.value;
    }
}

function addHandler() {
    if(getField('select','20+ Lookup'))
    {
        getField('select','20+ Lookup').onchange = function() { copyLookupIdAndTxt() }
    }
    else
    {
        document.getElementById(getField('input','20+ Lookup').optHid).onpropertychange = function() { copyLookupIdAndTxt() }
    }
}

_spBodyOnLoadFunctionNames.push('addHandler');
</script>