If this happens to you, don’t despair! Here’s the fix. First make a copy of the file in SPD so you have a backup. Then in SPD right click on the file and select Open
With/ SharePoint Designer (Open as Text). The file will open and you will see many, many blank lines that are adding unnecessary bulk (in my case I had over 195,000 blank lines interspersed along with my code). At this point you can now delete all the blank lines, save your file and all will be good. Alternately, you can copy all the code and place it in a local file on your computer. Then you can edit out the blank lines in the local file and copy the updated code back into the file in SPD. This alternate approach is a little faster.

As references, I used the starkwell’s post halfway down the page as my starting point. Because his post was for 2003, I found some differences and had to make some significant modifications to make this work. I also grabbed some code from MS SharePoint blog “Using Javascript to Manipulate a List Form Field“.

Here are the steps:

1. In a browser, create a list (ClassJavascriptLookup in my example) that uses a lookup column. In my case the lookup column is InstructorLookup. The column displayed is InstructorName and the filtering will be done such that only the Instructors that have a Status of Active will be shown.

   

2. Using SharePoint Designer, expand the files under the list you are using. Make a backup of the form (EditForm.aspx or NewForm.aspx) you will be editing just in case. Check out the file and then double click on the it to open.

   

3. Place your cursor right after the existing form. You can do this by selecting the existing form by clicking on it (as below) and then hitting your right arrow key.

   

4. From the top menu select Data View/ Insert Data View.

   

5. Click the link “Click a data source in the…”

   

6. In the Data Source Library tab on the right side, select the list you want for the filtered lookup. Then click on Show Data.

   

7. Select the field you want to show in the dropdown.

   

8. Insert Selected Fields as… Multiple Item View

   

9. Click on the arrow in the upper right of the inserted data view to display the Common Data View Tasks menu.

   

    

   

10. Set the filter to pull only the items you want to show in the dropdown.

    

11. Set the sort order.

    

12. Click on Change Layout task. Under the Layout tab, choose the style for “The dropdown menu of titles style…”

    

     

    Click Yes on the popup that displays.

    

13. Make sure you have Split mode showing for SharePoint Designer.

    

14. Click on the dropdown that is now showing in the Design Window. The associated code will be highlighted in the Code pane.

    

15. In the highlighted code displayed for the newly created dropdown, find the line:

    <select name=”ID” size=”1″>
    

            <option selected=”true” value=”0″>Choose One…</option>
    

     

    Change the line to the following by commenting out the 2^nd line and changing from name to id:

    <select id=”FilteredLookupList” size=”1″>
    

            <!–<option selected=”true” value=”0″>Choose One…</option>–>
    

     

16. Find the line below for the new dropdown:

        <xsl:template name=”dvt_1.rowview”>
    

     

    Change it from this (note you will probably have something other than InstructorName):

        <xsl:template name=”dvt_1.rowview”>
    

            <option>
    

                <xsl:value-of select=”@InstructorName” />
    

            </option>
    

        </xsl:template>
    

    To this:

        <xsl:template name=”dvt_1.rowview”>
    

            <xsl:variable name=”SelectValue” select=”@ID”/>
    

            <option value=”{$SelectValue}”>
    

                <xsl:value-of select=”@InstructorName” />
    

            </option>
    

        </xsl:template>

17. Paste in the following code directly after the PlaceHolderMain tag (you will need to change Instructor to the name of your Lookup column):

     

    <script language=”javascript” type=”text/javascript”>
    

     

    _spBodyOnLoadFunctionNames.push(“callFillLookupValues”);
    

     

    function callFillLookupValues() {
    

        fillLookupValues(“FilteredLookupList”, “Instructor”);    
    

    }
    

     

    </script>
    

18. Next you will need to add the method for filLookupValues() and a supporting method. You can add these to your master page or a separate JavaScript file as desired especially when considering reuse. However, for simplicity here, let’s just add these to our existing page for now. Directly after the function callFillLookupValues() and before the closing script tag you added in the previous step, add the following code:

     

    function fillLookupValues(filterDataView, lookupToFilter) {
    

                var data = document.getElementById(filterDataView);
    

                var lookup = getTagFromIdentifierAndTitle(“select”, “Lookup”, lookupToFilter);
    

                var selectedText = “”;
    

                
    

                // if theSelect is null, it means that the target list has more than
    

                // 20 items, and the Lookup is being rendered with an input element
    

                if (lookup == null) {
    

                 var theInput = getTagFromIdentifierAndTitle(“input”,”",lookupToFilter);
    

                 selectedText = theInput.value;
    

                 theInput.choices = “”;
    

                 var filteredChoices = “”;
    

                 for (i=0;i<data.options.length;i++)
    

                    {
    

                        var optionText = data.options[i].text;
    

                        var optionValue = data.options[i].value;
    

                        if (i>0)
    

                        {
    

                            filteredChoices = filteredChoices + “|”;
    

                        }
    

                         filteredChoices = filteredChoices + optionText + “|” + optionValue ;
    

                    }
    

                    theInput.choices = filteredChoices ;
    

             }
    

                else
    

                {
    

                    selectedText = lookup.options[lookup.selectedIndex].text;
    

                    //alert(data.innerHTML);
    

                    lookup.innerHTML = “”;
    

                    for (i=0;i<data.options.length;i++)
    

                    {
    

                        var optionText = data.options[i].text;
    

                        var optionValue = data.options[i].value;
    

                        lookup.options[i]=new Option(optionText, optionValue, false, (optionText == selectedText));
    

                    }
    

                }    
    

            }
    

            
    

            function getTagFromIdentifierAndTitle(tagName, identifier, title) {
    

                 var len = identifier.length;
    

                 var tags = document.getElementsByTagName(tagName);
    

                 for (var i=0; i < tags.length; i++) {
    

                     var tempString = tags[i].id;
    

            
     

                     if (tags[i].title == title && (identifier == “” || tempString.indexOf(identifier) == tempString.length – len)) {
    

                     return tags[i];
    

                     }
    

                 }
    

                 return null;
    

            }
    

19. Hide the dropdown you added from being displayed on the page by adding style=”display:none;” to the line you previously changed in Step 15 above. Save your changed form.

     

    <select id=”FilteredLookupList” size=”1″ style=”display:none;”>
    

     

20. Go back to your list in the browser. Open the form you changed (New or Edit). Now you will see your lookup with the filtered values. In my case only Active Instructors are shown.

    

21. A couple of quick notes:
    1. This should also be compatible in Firefox thanks to a colleague of mine, Jim Wilt, who made a couple small tweaks (.innerText to .text and name to id).
    2. The time it takes for your filter to be applied may be affected by where you place your JavaScript (which file).

<style type=”text/css”>

#ctl00_PlaceHolderTitleBreadcrumb_ContentMap {display=none;}

</style>

If you want to hide the breadcrumbs on all pages, you can add the code to the master page or an alternate css.    

To edit the page, first right click on the file and click Check Out. Then double click on the file to open it. Make sure to view the file in the Split mode (located at the bottom of the screen)

At this point you have two options: 1) hide the View All Site Content link for everyone or 2) hide the View All Site Content link for everyone who does not have Full Control to the site. I prefer the second option because it gives administrators the ability to still have access to the link.

Option 1 – Hide View All Site Content for everyone:

• Click on the View All Site Content link in the Design view. This will select the Sharepoint:SPSecurityTrimmedControl.
  
• In the Tag Properties pane (typically located in the lower left), change the Visible Property to False
  

  
  

Option 2 – Hide View All Site Content for anyone who does not have Full Control:

• Click on the View All Site Content link in the Design view. This will select the Sharepoint:SPSecurityTrimmedControl.
  
• In the Tag Properties pane (typically located in the lower left), change the PermissionsString Property to ManageWeb
  

  
  

Save the page and remember to Check In the file.

The problem occurred when clicking on a link on the Dataview page. Rather than going to the second custom edit form, the link brought up the default edit form. Somewhere, a redirect was taking place.

After a lot experimenting, I found that not only do you need hide the original List Form Web Part but you also need to set the ControlMode to Display. Here are the 2 lines of code that need to be modified in the original List Form Web Part:

Change:

<ControlMode xmlns=”http://schemas.microsoft.com/WebPart/v2/ListForm”>Edit</ControlMode>

To:

<ControlMode xmlns=”http://schemas.microsoft.com/WebPart/v2/ListForm”>Display</ControlMode>

Change:

<IsVisible>true</IsVisible>

To:

<IsVisible>false</IsVisible>

For Firefox you won’t be able to live without Firebug. Besides viewing page HTML and CSS through your browser, you can also test out inline edits without affecting the original source. To use you simply right click any item in the browser and select “Inspect Element”.

For Internet Explorer you will find DebugBar a necessity. Basically you drag a target icon onto any element within the browser to view its attributes and values.

Well, last week one of my partners introduced me to a wonderful Firefox browser add-on that addresses these issues by producing cross-browser compatible html. The add-on is called WriteArea and can be downloaded from here. Besides being very simple to use, there is no server deployment because it is a browser (client) add-on.

You will be amazed by the number of sites that don’t look like “out of the box” SharePoint including a site we helped develop called InnovationWorks. The InnovationWorks site is listed under the Government section on WSS Demo.