When Field Dependency In Visualforce Doesn’t Work!!!


Recently we have come across a strange issue.

Requirement: Add two pick list fields, one is controlling field, another is dependent field.
Solution: Simple, add two fields within <apex:inputfield> tag, we are done for.

No, that doesn't work on a page with 2000 lines of code in between <apex:page> tags and lots of javascript. But, that works on simple page with the following structure.

<apex:page id="page" >

  <apex:form id="form01">
          <apex:pageBlock id="block01" >           
               <apex:pageMessages />
<apex:pageBlockSection id="sec01">
            
           <apex:inputField ……. />  // controlling field
                           <apex:inputField …...../>

</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>

</apex:page>


But the problem is that it wouldn't work. The dependent picklist shows None and only None. 

As we dug down deep into the issue, we found some interesting things about visualforce pages, and how they render/ rerender.

So these are the things we found: Force.com renders the visualforce page with its engine generated ids and preloaded values, we can check that with IE or any html debugging tool.
For depending picklist to appear on the page it sends the entire list to the browser and then controls it with a javascript. All thanks to IE and firebug. 

So try not to override function bodyOnLoad() in javascript. If you want to do anything onload, do it with apex tags, or with jQuery ready() method.

Hope this helps.





Comments

Post a Comment

Popular posts from this blog

Lightning spinner inside Button

I just came across this idea when I looked at some of the standard components by salesforce, for some reason they look way cooler. I thought of sharing this with you... We many a times try to use the spinner different ways, like, on the entire component, by blurring the whole area out, when I compare salesforce's components, they don't ALWAYS do that, they just show the spinner somewhere at the bottom/ top or just next to the button or disabling / replacing the button etc... Well, when I cracked it, it looked amazing. here is a simple component: <aura:component > <aura:attribute name="boooo" type="boolean" default="false"/> <lightning:buttonGroup> <lightning:buttonIcon iconName="utility:email" variant="brand" disabled="{!v.boooo}" onclick="{! c.handleClick }" alternativeText="Click to send Email" /> <lightning:button variant="brand" title...
Read more

Passing URL parameters to controller in Lightning components/ AURA

Image
The following example helps you understand how to pass parameters from URL to components. In AURA/ Salesforce1 platform, it is made easy to pass the parameters to the controllers. We know that we can create attributes in the components as variables and they are meant for the scope of the components. So we create application attributes for the entire scope of application. So when we need to get the values from the URL, it is easy to pass them to application attributes, in other words, application attributes can take the values from URL directly. Here is a simple example: 1. Create an application - 'URLApp' 2. Create an attribute in the application XML. <aura:application> <aura:attribute name="fromURL" type="String" default="this is default value"/> Value in Attribute: {!v.fromURL}! </aura:application> Save the XML and run it, your output should be: Now, If you just pass a value to the url the...
Read more

Nested AURA:IFs in Lightning Components Salesforce

Image
You can use use the nested IFs on the framework. Go to Developer Console>>New>>Lightning Application Give it a name, Submit Here is a sample code: <aura:application >  <aura:iteration items="1,2,3,4,5" var="item">  Iteration {!item} -  <aura:if isTrue="{!item=='1'}"> <b>In The First IF </b> <br/> <aura:set attribute="else"> <aura:if isTrue="{!item=='2'}"> <b>In The Second IF </b> <br/> <aura:set attribute="else"> <aura:if isTrue="{!item=='3'}"> <b>In The Third IF </b> <br/> <aura:set attribute="else"> <aura:if isTrue="{!item=='4'}"...
Read more