Hiding Form Controls By Content Type

Dec 22, 2009 at 7:25 PM

I was hoping to get some advice on how jQuery/jPoint could help me solve the following problem:

I have a list that contains 5 different Content Types and a common, global Content Type. I would like to create forms that filter/hide the list's controls based upon a lookup control within the list that maps to one of the 5 different Content Types.

Thanks in advance.

Coordinator
Dec 23, 2009 at 2:06 PM

Regardless of content types, you can use jPoint to conditionally hide fields based on a picklist value. 

For example, let's say you have a choice field named PicklistField and various fields Field1-Field6 on a form.  The following code will attach an onchange event to the PicklistField and based on user selection hide the various fields.

<script src="//sharejpoint.googlecode.com/files/jPointLoader.js"></script>
<script>
$(document).ready(function(){

  jP.Form.readForm(); //analyze form
  //Add onchange event to picklistfield
  jP.Form.PicklistField.inputs().change(function(){
    //show all fields
    $.each($(".jPointField"), function() {
      jP.Form.field(this).show();
    });
    //hide fields based on picklist value
    var choice = jP.Form.PicklistField.val();
    switch (choice) {
      case "Group1":
        jP.Form.Field1.hide();
        jP.Form.Field2.hide();
        break;
      case "Group2":
        jP.Form.Field3.hide();
        jP.Form.Field4.hide();
        break;
      case "Group3":
        jP.Form.Field5.hide();
        jP.Form.Field6.hide();
        break;
    }
  });
});
</script>

If I misunderstood your question, please elaborate your problem a little more.

Hope this helps.

-- Ken

Dec 23, 2009 at 4:31 PM

Thanks Ken. Should this script work if place after the:

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

Or does it need to be placed within Web Content Editor webpart?

I am successfully running the following code after the "PlaceHolderMain" tag:

<script type="text/javascript" src="../../_js/jPointLoader.js"></script>
<script language="javascript" type="text/javascript">
function spBodyOnLoad() {
$('tr:has(a[name=SPBookmark_PercentComplete])').not('tr:has(tr)').hide();
$('tr:has(a[name=SPBookmark_Division])').not('tr:has(tr)').hide();
}

_spBodyOnLoadFunctionNames.push("spBodyOnLoad");
</script>

But the 
$(document).ready(function(){

from the script you suggested doesn't seem to be firing and I'm not sure why.


Coordinator
Dec 23, 2009 at 7:39 PM
Edited Dec 23, 2009 at 7:58 PM

Yes, you can put it after the "PlaceHolderMain" tag or anywhere.  I would put it at the bottom of the page.

 

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

<script type="text/javascript" src="//sharejpoint.googlecode.com/files/jPointLoader.js"></script>
<script type="text/javascript">
function spBodyOnLoad() {
  $(document).ready(function(){

jP.Form.readForm(); //analyze form
//Add onchange event to picklistfield
jP.Form.PicklistField.inputs().change(function(){
//show all fields
$.each($(".jPointField"), function() {
jP.Form.field(this).show();
});
//hide fields based on picklist value
var choice = jP.Form.PicklistField.val();
switch (choice) {
case "Group1":
jP.Form.Field1.hide();
jP.Form.Field2.hide();
break;
case "Group2":
jP.Form.Field3.hide();
jP.Form.Field4.hide();
break;
case "Group3":
jP.Form.Field5.hide();
jP.Form.Field6.hide();
break;
}
});
});
}
_spBodyOnLoadFunctionNames.push("spBodyOnLoad");

</script>


However, I prefer adding code to CEWP or FormWebPart so that the page does not get unghosted.
If using a local version of jPointLoader.js, make sure to update it to point to your version of jPoint.js and jQuery.js
Also, if you are editing an aspx page not under the list path, make sure to past in siteUrl and listName to jP.readForm(siteUrl, listName)

 

Dec 24, 2009 at 11:57 AM

Cool. A Picklist is a Lookup, right? And, if so, would a PicklistField be the Lookup's column name and Field1, 2 etc are other columns in the list?

If my above assumptions are correct, this looks like a *much* simpler solution than I've learned using standard javascript for conditionally hiding form elements in SharePoint.

Sorry to be such a newbie about this!

 

Mark

Coordinator
Dec 28, 2009 at 3:32 PM

In the example above, PicklistField is a sharepoint choice column and Field1-6 are any other types of sharepoint columns.  However, PicklistField can be any column type.  The key is to link the onchance event to that column so that when its value is changed the switch statement will execute to hide/show other columns.

--Ken