Conditionally hide or show metadata fields in your document library EditForm.aspx

Working for years with web based applications taught me a valuable lesson, put as much as you can on the client side to minimize the number of calls to the server. Javascript comes to the rescue. Never underestimate the power of client side javascript.

Lots of developers and just “SharePoint people” :-) came up with this question: How do I hide or display document library metadata fields depending on metadata values chosen by an end user, such as radio button selection.

Yes, you can open Visual Studio and start developing, I’m all about taking an easy path, it’s not the only one, but in this case it turned out to be the best.

Here is a small requirement that one of our clients had. Depending on a radio button which an end user selects in the document properties, hide certain metadata fields.
First of all you open EditForm.aspx in the browser and view the source code. Locate the radio buttons or your other controls that are serving as the condition for the “Hide/Show” functionality, copy these control’s ID values. In my case it looks like this:

<span class="ms-RadioText" title="New Submission"><input id="ctl00_m_g_6d20c8e6_473d_47f4_bb05_462a9b383491_ctl00_ctl02_ctl00_ctl01_ctl00_ctl00_ctl00_ctl00_ctl00_ctl04_ctl00_ctl01" type="radio" name="ctl00$m$g_6d20c8e6_473d_47f4_bb05_462a9b383491$ctl00$ctl02$ctl00$ctl01$ctl00$ctl00$ctl00$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl01" checked="checked" /><label for="ctl00_m_g_6d20c8e6_473d_47f4_bb05_462a9b383491_ctl00_ctl02_ctl00_ctl01_ctl00_ctl00_ctl00_ctl00_ctl00_ctl04_ctl00_ctl00">New Document</label></span>


I have three radio buttons with the following IDs:


1. New Document=“ctl00_m_g_6d20c8e6_473d_47f4_bb05_462a9b383491_ctl00_ctl02_ctl00_ctl01_ctl00_ctl00_ctl00_ctl00_ctl00_ctl04_ctl00_ctl01”
2. Resubmission=“ctl00_m_g_6d20c8e6_473d_47f4_bb05_462a9b383491_ctl00_ctl02_ctl00_ctl01_ctl00_ctl00_ctl00_ctl00_ctl00_ctl04_ctl00_ctl02”
3. Expired Material=“ctl00_m_g_6d20c8e6_473d_47f4_bb05_462a9b383491_ctl00_ctl02_ctl00_ctl01_ctl00_ctl00_ctl00_ctl00_ctl00_ctl04_ctl00_ctl03”


The same way I’m locating the ID of the field I have to hide. If “New Document” radio button is selected, hide “Related Document” document library field so the user cannot add a value to it.

For the next step, open your EditForm.aspx in SharePoint Designer. Within one of your <asp:Content> add the following :


<script type="text/javascript" language="javascript">
// Initiate InitLoad () function on the load event of your editForm.aspx
window.attachEvent("onload",InitLoad);
//in this function, assign event handlers to your controls
function InitLoad() {
//declaring the first radio button and attaching “onclick” event handler to it
var NewDoc = document.getElementById("ctl00_m_g_6d20c8e6_473d_47f4_bb05_462a9b383491_ctl00_ctl02_ctl00_ctl01_ctl00_ctl00_ctl00_ctl00_ctl00_ctl04_ctl00_ctl01");
NewDoc.attachEvent("onclick",HideFields);
//declaring the second radio button and attaching “onclick” event handler to it
var ReSub = document.getElementById("ctl00_m_g_6d20c8e6_473d_47f4_bb05_462a9b383491_ctl00_ctl02_ctl00_ctl01_ctl00_ctl00_ctl00_ctl00_ctl00_ctl04_ctl00_ctl02");
ReSub.attachEvent("onclick",HideFields);
//declaring the third radio button and attaching “onclick” event handler to it
var Expire = document.getElementById("ctl00_m_g_6d20c8e6_473d_47f4_bb05_462a9b383491_ctl00_ctl02_ctl00_ctl01_ctl00_ctl00_ctl00_ctl00_ctl00_ctl04_ctl00_ctl03");
Expire.attachEvent("onclick",HideFields);
}
function HideFields(){
var DocType = document.getElementById("ctl00_m_g_6d20c8e6_473d_47f4_bb05_462a9b383491_ctl00_ctl02_ctl00_ctl01_ctl00_ctl00_ctl00_ctl00_ctl00_ctl04_ctl00_ctl00");
if (DocType.checked==true){
// declare my metadata field “Related Documents” to be hidden using the ID from “View Source”
var RelatedDocs = document.getElementById("ctl00$m$g_6d20c8e6_473d_47f4_bb05_462a9b383491$ctl00$ctl02$ctl00$ctl01$ctl00$ctl00$ctl18$ctl00$ctl00$ctl04$ctl00$ctl00$TextField");
RelatedDocs.style.display = "none";
}
}
</javascript>


I’ll continue posting on the use of javascript within Sharepoint, stay tuned :-).