The scenario is something like this.
I am trying to do some javascript validation in my Custom List Edit form. I have a List Form field of Choice type. I want to associate this field with some custom javascript function. This javascript function will toggle the visibility of another List Form field of Person or Group type and clear its value, based on the Choice field selection.
For example, there is a Decision field of Choice (Dropdown) type in an aspx page with Custom List Form web part. There is a Reviewer field of Person or Group type. Based on the selection of the Decision, the Reviewer field's visibility should be toggled and also the value in that field should be cleared.
This was achieved in the following way. Lets say the Decision values are Open, Approved and Rejected. The Reviewer field should be shown only if the Decision is Approved, else it should be invisible and should not have any value in it.
Call a javascript function in the <Body> tag's Onload event in the aspx, say Test().
The Test function would be something like this.
function Test()
{
getField('select','Your_Field_Name').onchange = function() {ShowHideReviewer()};
}
Now lets see the functions getField() and ShowHideReviewer().
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]
}
}
}
Note: Make sure you initially give an id attribute (say,trReviewer) to the <tr> containing the Reviewer field and set its style="display:none".
function ShowHideReviewer()
{
var ddlDecision = document.getElementById('ID of the rendered Decision field');
var trReviewer = document.getElementById('ID of the rendered trReviewer');
var reviewer = document.getElementById('ID of the rendered Person or Group field');
if(ddlDecision != null)
{
if(ddlDecision.value == "Open" || ddlDecision.value == "Rejected")
{
if(trReviewer != null)
{
trReviewer.style.display = 'none';
reviewer.innerText = "";
}
}
if(ddlDecision.value == "Approved")
{
if(trReviewer != null)
{
trReviewer.style.display = 'block';
}
}
}
Thanks to the following link for a hint.
http://webborg.blogspot.com/2008/04/add-functions-and-events-to-sharepoint.html
There were a few more requirements.
I had a Region field which was of lookup type. Also a few more MultiPicker look up fields were there for Countries, which should show up based on the selection of the region. Again, as already mentioned, all the country values are lookups. There were 4 possibilities. Americas, ASPAC, EMEA and Global. These are lookup values from a list.These have been shown using a RadioButtonList control on the Custom List Form web part (EditItem) of a Custom aspx page. As mentioned earlier, the Countries for these regions were to be shown based on the selection of Region. Now comes the actual scenario. The user would select a Region. Then the corresponding Countries dropdown will show up and the user would move(add) the desired countries from the Available List to the Selected List. Now the user changes his mind and selects some other Region, so the Countries pertaining to that Region start showing up. Now when he clicks OK, the countries selected in the previous case should get cleared and shouldn't get saved. But it gets saved. We need to get around this issue. This was achieved as follows.
First of all, hide the Regional lookup field, by setting its style="display:none", for the row(<tr>) containing that field. Then add a <asp:RadioButtonList> server control within the same row and manually add the regions as its list items. Once this is done, give an id attribute to all the rows containing the Country Fields. Once this is also done, use the two javascript functions given below to achieve the results.
Note: Call the ToggleRegions function in the OnClick event of the RadioButtonList control and the ClearCountries function in the OnSubmit event of the form.
function ToggleRegions()
{
var trAmericas = document.getElementById('trAmericasID0EAAA');
var trASPAC = document.getElementById('trASPACID0EAAA');
var trEMEA = document.getElementById('trEMEAID0EAAA');
var region = document.getElementById('g_3b8f6f28_7c1c_4ba3_b81c_7a4e9e816ed3_ff4_1_ctl00_Lookup');
var rBtnAm =document.getElementById('g_3b8f6f28_7c1c_4ba3_b81c_7a4e9e816ed3_RadioButtonList1ID0EAAA_0');
var rBtnASPAC =document.getElementById('g_3b8f6f28_7c1c_4ba3_b81c_7a4e9e816ed3_RadioButtonList1ID0EAAA_1');
var rBtnEMEA =document.getElementById('g_3b8f6f28_7c1c_4ba3_b81c_7a4e9e816ed3_RadioButtonList1ID0EAAA_2');
var rBtnGlobal =document.getElementById('g_3b8f6f28_7c1c_4ba3_b81c_7a4e9e816ed3_RadioButtonList1ID0EAAA_3');
if(rBtnAm.checked)
{
region[1].selected = true;
trAmericas.style.display = "block";
trASPAC.style.display = "none";
trEMEA.style.display = "none";
}
if(rBtnASPAC.checked)
{
region[2].selected = true;
trAmericas.style.display = "none";
trASPAC.style.display = "block";
trEMEA.style.display = "none";
}
if(rBtnEMEA.checked)
{
region[3].selected = true;
trAmericas.style.display = "none";
trASPAC.style.display = "none";
trEMEA.style.display = "block";
}
if(rBtnGlobal.checked)
{
region[4].selected = true;
trAmericas.style.display = "none";
trASPAC.style.display = "none";
trEMEA.style.display = "none";
}
}
function ClearCountries()
{
var rBtnAm =document.getElementById('g_3b8f6f28_7c1c_4ba3_b81c_7a4e9e816ed3_RadioButtonList1ID0EAAA_0');
var rBtnASPAC =document.getElementById('g_3b8f6f28_7c1c_4ba3_b81c_7a4e9e816ed3_RadioButtonList1ID0EAAA_1');
var rBtnEMEA =document.getElementById('g_3b8f6f28_7c1c_4ba3_b81c_7a4e9e816ed3_RadioButtonList1ID0EAAA_2');
var rBtnGlobal =document.getElementById('g_3b8f6f28_7c1c_4ba3_b81c_7a4e9e816ed3_RadioButtonList1ID0EAAA_3');
var Countries_AMC = document.getElementById('g_3b8f6f28_7c1c_4ba3_b81c_7a4e9e816ed3_ff5_1_ctl00_ctl00_MultiLookupPicker');
var Countries_ASPAC = document.getElementById('g_3b8f6f28_7c1c_4ba3_b81c_7a4e9e816ed3_ff6_1_ctl00_ctl00_MultiLookupPicker');
var Countries_EMEA = document.getElementById('g_3b8f6f28_7c1c_4ba3_b81c_7a4e9e816ed3_ff7_1_ctl00_ctl00_MultiLookupPicker');
if(rBtnAm.checked)
{
Countries_ASPAC.value = "";
Countries_EMEA.value = "";
}
if(rBtnASPAC.checked)
{
Countries_AMC.value = "";
Countries_EMEA.value = "";
}
if(rBtnEMEA.checked)
{
Countries_ASPAC.value = "";
Countries_AMC.value = "";
}
if(rBtnGlobal.checked)
{
Countries_AMC.value = "";
Countries_ASPAC.value = "";
Countries_EMEA.value = "";
}
}
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment