Changing the label of a field and a section

I've previously written about changing the name of a field dynamically using client script. Well now a requirement has come up to not only change the label of an attribute, but also a section heading... easy right? No chance!

As it turns out, with an attribute we have a nice and easy element Id that we can always use to address that field in confidence that we are looking at the right thing. We don't have this with section labels. So my problem was two-fold:

1. Find a way to iterate through all the sections until I found the one that I wanted, and then change its name.
2. Then I had to come up with a way of storing that change, so that next time I needed to rename it I knew what to look for; once I've  renamed the section, the original name I used to find it obviously wont work anymore (Duh).

Blatant plagiarism note: Big thanks to Irfan Saeed who did all the heavy lifting with regards the JavaScript to actually rename the sections.

So now that I have a way to find and rename the section, all I need is a way to keep a handle on what the current name is... enter the global variable:

While generally speaking best practice says that you should always prefix your JavaScript variable declarations with the 'var' keyword, it is legal to omit said keyword. If you don't use the 'var' keyword, then the script interpreter will grant that variable global scope... meaning that we can access it and use it anywhere on our form. Sounds like a perfect way to keep a handle on the current name of our se3ction doesn't it?

So in order to do this, create a variable in the forms onLoad event, omitting the 'var' keyword as discussed:

currentSectionName = "";

Now in the onChange and onLoad events of our attribute and form respectively, paste the following code (obviously updating the field names to your own requirements:

//only do something if there is data in the attribute
if (crmForm.all.new_projectcategory.DataValue != null) {
    //get the attribute value
    var pCat = crmForm.all.new_projectcategory.DataValue;

    //define the default section name
    var defaultSectionName = "Delivery";

    //check if the current section name is different to the default name
    if (currentSectionName == "")
        currentSectionName = defaultSectionName;

    //work through the values
    switch (pCat) {
        case "1":
            crmForm.all.ownerid_c.innerText = "Project Manager";
            if (currentSectionName != "Delivery") { UpdateSectionName("tab0", currentSectionName, "Delivery"); }
            currentSectionName = "Delivery";
            break;
        case "2":
            crmForm.all.ownerid_c.innerText = "Project Administrator";
            if (currentSectionName != "Implementation") { UpdateSectionName("tab0", currentSectionName, "Implementation"); }
            currentSectionName = "Implementation";
            break;
    }
}

function UpdateSectionName(TabNumber, CurrentSectionName, NewSectionName) {
    var anchorNode = document.getElementById(TabNumber);
    var secBarCss = "ms-crm-Form-SectionBar";
    var addrSecElm = null;
    var results = getElementsByClassName(secBarCss, anchorNode);
    for (var i = 0; i < results.length; i++) {
        if (results[i].innerText == CurrentSectionName) {
            addrSecElm = results[i];
            break;
        }
    }
    if (addrSecElm != null) {
        addrSecElm.innerText = NewSectionName;
    }
}

function getElementsByClassName(className, anchorNode) {
    if (!anchorNode) anchorNode = document.body;
    var result = [];
    var regEx = new RegExp("\\b" + className + "\\b");
    var children = anchorNode.getElementsByTagName("*");
    for (var i = 0; i < children.length; i++) {
        if (regEx.test(children[i].className)) result.push(children[i]);
    }
    return result;
}

And there you have it; now when we change our field, we are dynamically updating both the attribute and section labels.

Before:

After:

Note: Please be aware, while this approach works, it is currently unsupported by Microsoft so it may stop working in a future release.