Monday, October 02, 2017

Label on InputField and OutputField is not working

Actually I faced this issue quite few times and  because I didn't take note on it  I keep forgetting and asking the same question again.

Today, I got chance to do some testing to understand the behavior of apex:Inputfield and apex:outputField tag.

Note that apex:inputField / apex:outputField is tied to the field's object which mean we cannot use it without sObject.I like it's Calendar widget for date field but because it does not have capability to support class property, I need to tie it with Standard/Custom object's date field.

Here the example of usage

public class TestClass {

Date myDate {get;set;} //this will not work with  <apex:inputfield value="{!myDate}"  ...
Opportunity opp {get;set;} //this will work on <apex:inputfield value="{!opp.CloseDate}" ...

}

Other thing that we need to take note is the label will work in apex:pageBlock and only if the apex:pageBlock in the proper structure.

Checkout this code.


<apex:page standardController="Opportunity" showHeader="false" sidebar="false" >
    <apex:form>
        <apex:pageBlock title="Proper Page Block" mode="edit">
            <apex:pageBlockButtons>
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="My Content Section" columns="2">
                <apex:inputField value="{!opportunity.name}"/>
                 <apex:inputField value="{!opportunity.type}" label="Custom Type"/>
                   <apex:outputField value="{!opportunity.accountId}" />
                 </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
    <apex:form>
        <apex:pageBlock title="Not Proper Page Block" mode="edit">
                 <apex:inputField value="{!opportunity.name}" label="Custom Name"/>
                 <apex:inputField value="{!opportunity.type}"/>
                   <apex:outputField value="{!opportunity.accountId}" label="Account"/>
                </apex:pageBlock>
        Experiment outside page block : <apex:inputField value="{!opportunity.name}" label="Custom Name 1"/>
          <apex:outputField value="{!opportunity.accountId}" label="Account"/>
    </apex:form>
</apex:page>

This is the output.Notice that apex:inputField and apex:outputField will not work without apex:pageBlock or improper structure apex:pageBlock.


Conclusion, in order to utilize apex:inputField and apex:outputField we need to use it with sObject and use it apex:pageBlock.

More info :

No comments:

Post a Comment