Mastering Salesforce: Tips, Tricks, and Insights for Developers and Architects
Explore Salesforce's powerful tools and features: Apex for custom code development, Visualforce for creating custom user interfaces, and Apex Triggers and Jobs for automating processes. Manage and customize data with Custom and Standard Objects, and query databases efficiently with SOQL. Leverage Aura and LWC Components for dynamic web apps, Experience Cloud for community engagement, Managing Large Volume Data efficiently. Discover these and more to maximize your Salesforce capabilities.
Monday, 27 June 2016
Wednesday, 9 March 2016
Two duplicate error messages on VF page
Issue: When custom/standard input fields are used with custom label and are required on visualforce page, then pageMessages shows two error messages. Lets check below example with code:
When you need to change standard label with custom one on VF page then page message will show two error instead of one as stated above.
Solution: Explicitly change label on load client side using jquery. It requires:
Click here to see working demo, Happy Coding :) !!
<apex:page StandardController="Contact" sidebar="false" showHeader="false" >
<apex:form >
<apex:pageBlock title="Complete below form">
<apex:pageMessages />
<apex:pageBlockButtons location="bottom">
<apex:commandButton action="{!save}" value="Save" />
</apex:pageBlockButtons>
<apex:pageBlockSection title="Confirm Below Fields">
<apex:inputField label="Your Birth Date" value="{!contact.Birthdate}" required="true"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
When you need to change standard label with custom one on VF page then page message will show two error instead of one as stated above.
Solution: Explicitly change label on load client side using jquery. It requires:
- Custom Label -> to provide ease to user to set desired custom label.
- div element with static id -> to wrap <apex:pageMessages /> within so that it can be identified at client side.
- jQuery -> to browse through the html elements on client side(browser).
The VF page code:
<apex:page StandardController="Contact" sidebar="false" showHeader="false" >
<script src="https://code.jquery.com/jquery-2.2.0.min.js" />
<apex:form >
<apex:pageBlock title="Complete below form">
<div id="errorPanel">
<apex:pageMessages />
</div>
<apex:pageBlockButtons location="bottom">
<apex:commandButton action="{!save}" value="Save" />
</apex:pageBlockButtons>
<apex:pageBlockSection columns="1" title="Confirm Below Field">
<apex:pageblockSectionItem>
<apex:outputLabel value="{!$label.Contact_BirthDate}"></apex:outputLabel>
<apex:inputField value="{!contact.Birthdate}" required="true"/>
</apex:pageblockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
<script>
window.onload = changeErrorLabels();
function changeErrorLabels(){
var msgEle = $("#errorPanel").find(".messageText");
var replacedHtml = msgEle.html().replace('Birthdate','{!$label.Contact_BirthDate}');
msgEle.html(replacedHtml);
}
</script>
</apex:page>
The above solution once implemented provides flexibility to user to change/modify custom label with desired label text that have same error message labels on VF page.
Click here to see working demo, Happy Coding :) !!
Subscribe to:
Posts (Atom)