Tag Archives: Content Editor Web Part

SharePoint 2010-Change Survey Option “Specify your own value:” to “Other:”

Recently I had a request from a business unit to change the Out of Box wording on a survey that employees were taking from the SharePoint standard of “Specify your own value:” to “Other:” which seemed fairly routine and something that could be done easily with a few lines of JavaScript, a quick Google search turned up some interesting an unique ways of doing this including:

  1. Changing the default.master page to include JavaScript and adding a function call in the body tag
    1. This of course would add a bit of overhead for every single page that uses the master page!
  2. Editing the ows.js file and editing the string
    1. Which works fine until the next update or patch and the ows.js file is overwritten, also never ever modify out of box .js!
  3. Using JQuery to find the exact field attribute (by name) and changing the text
    1. Really?  I need JQuery to do something simple like this?

I saw a couple other methods of achieving these results, all of them very bad, most of which made me cringe because it either went against my core belief that you never modify out of box code, you never add global functionality for specific items, or it goes against the lazy bone that believes everything should just be a simple cut and paste function without customization, if I can’t drop the functionality in as a web part then damn it I should be able to!  So I looked for a better way, surprisingly nobody seemed to hit upon this method, which utilizes our handy and ever trusty Content Editor Web Part…

  1. Open the site in SharePoint Designer 2010
  2. Go to the Lists and Libraries, and select the Survey you want to edit from the content window:
    image
  3. Click on the “NewForm.aspx” file in your main content window:
    image
  4. Now add a Content Editor Web Part right below the standard ListFormWebPart, like so…
    image

Now, as for the content, it gets a bit tricky, you’ll want to go down to where the <Content> tag is for your Content Editor Web Part and add the following code between the brackets in the CDATA[]

<script type="text/javascript">
     var labels = document.getElementsByTagName("label");
     for(var i = 0; i <; labels.length; i++)
     {
            if(labels[i].innerText == "Specify your own value:")
                 labels[i].innerText = "Other:";
     }
</script>

EDIT: As you may see from the comments, I forgot about FireFox, so for those of you who like cut and paste, use the script below instead in order to work with FireFox as well by replacing the “innerText” with “innerHTML”

<script type="text/javascript">
     var labels = document.getElementsByTagName("label");
     for(var i = 0; i <; labels.length; i++)
     {
            if(labels[i].innerHTML == "Specify your own value:")
                 labels[i].innerHTML = "Other:";
     }
</script>

 

It should look like the following on your screen:

image

  1. Ok, save the NewForm.aspx page and you’re done.  Now when a user goes to take the survey, the ugly “Specify your own value:” is replaced with a nice friendly “Other:”

    image

  2. Even better, because we used SharePoint web parts to achieve this, we only experience overhead on this specific page, we didn’t have to edit out of box code, and because we stayed within the normal confines of editing the NewForm.aspx it means our file doesn’t get UnGhosted!  Winner! 

    image

SharePoint | Add Alternating Row Background Colors to SharePoint Document Libraries with CEWP and JavaScript

SharePoint out of the box has some great tools for displaying documents located in a document library, probably because that’s what a lot of companies use it for.  Out of the box it looks pretty nice, however I had a request that besides having the view display the documents in the document library we also add conditional formatting to allow better visibility to separate the rows with background colors similar to how when we insert a table into a SharePoint page we can apply the a Style like “Table Style 2 – light banded” under Table Tools->Design->Styles to give a banded affect to the Document library, similar to the following:

image

This would allow some of our older colleagues to very clearly follow the rows associated with each item.  Seemed pretty simple and I spent some time trying to find the property that would turn on this feature for the document library.  Turns out there wasn’t one, however with a little creative JavaScript and some quick peeks under the covers at the page source it’s actually very easy to accomplish!

First, open the page you want to apply this style to, and view the source.  Now search for a table element with class="ms-listviewtable" and grab the id value, it should looks something like “onetidDoclibViewTbl0”, but if you’re using certain customized views might look more like “{GUID}-{GUID}”, for the most part though, you won’t need to change this value.

Once you have the ID of the table, you’re going to want to edit the page and insert a Content Editor Web Part.  

image

Now click on it so it brings up the Editing Tools->Format Text tab

image

and under Markup select HTML->Edit HTML Source so it brings up the dialog box.

image

Ok, now we can go ahead and insert our special JavaScript for alternating the row colors of the table, remember to substitute the parameter passed in the getElementByID ( “onetidDoclibViewTbl0”) with the value from your page if different.

<script type="text/javascript">

// Push this to the onload in order to have it run every time page loads
_spBodyOnLoadFunctionNames.push("AlternateRowColorStyle()");

function AlternateRowColorStyle() 
{
    // Set up our variable to identify the table we want alternating colors on.
    // This will usually be one of the tables on the page with class="ms-listviewtable"
    // Replace "onetidDoclibViewTbl0" with the value from your page
    var table = document.getElementById("onetidDoclibViewTbl0"); 

    // We also need to get a collection of rows to apply our styles to
    var RowCollection = table.getElementsByTagName("tr"); 

    //Now we walk through our collection of rows applying our style
    for(RowNumber = 0; RowNumber < RowCollection.length; RowNumber++)
    { 
        if(RowNumber % 2 == 0)
        {
            RowCollection[RowNumber].className = "EvenRow";
        }
        else
        {
            RowCollection[RowNumber].className = "OddRow";
        } 
    }
}
// Once the Rows have been tagged with a class, apply CSS formating
</script>


<style type="text/css">
.OddRow
    {
    BACKGROUND-COLOR: #bee5ff;
    }
.EvenRow
    {
    BACKGROUND-COLOR: white;
    }
</style>

Once you save the page and it reloads, that should trigger the AlternateRowColorStyle() and apply the appropriate classes and CSS to give you a nicely formatted document library view like this:

image

 

And just like that with the CEWP and a little JavaScript we save the day and have a very nicely formatted document library.