Concepts or coding lessons of Salesforce that you can implement easily

Display Helptext In Visualforce Page In Less Time, Check this out

Whenever we override our Salesforce standard page with custom page i.e. by visual force page, there is always be clients/Users many time demand for same Standard page layout inline Help Text bubbles.

The help text that is displayed next to this field as a hover-based tool tip, similar to the text that is displayed next to standard Salesforce fields if custom help is defined for the field in Setup.


Syntax to display Help Text:

{!$ObjectType.objectName__c.Fields.fieldName__c.inlineHelpText}

Create Visual force page: Copy and paste below sample code and click on Save button

<apex:page standardController="Account">
  <apex:pageBlock >
    <apex:form >
        <apex:pageBlockSection >
            <apex:pageBlockSectionItem helpText="{!$ObjectType.Account.Fields.LightingNitish__Account_Address__c.InlineHelpText}">
                <apex:outputLabel value="{!$ObjectType.Account.Fields.LightingNitish__Account_Address__c.Label}" />
                <apex:inputField value="{!Account.LightingNitish__Account_Address__c}" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:form>
  </apex:pageBlock>
</apex:page>



Click on Preview button of visualforce page
Or 
You can Go to the URL and type (Change the yoursalesforceinstance with your salesforce org URL) and add any account valid record id.


https://yoursalesforceinstance.com/apex/VisualForcePageName.

Output:




Note: If you use “showHeader=false” in <apex:Page> then helpText is not displayed.

Here in above code you might confuse about field LightingNitish__Account_Address__c. 
LightingNitish__Account_Address__c is a combination of namespace and API name.
LightingNitish is my org namespace and then Account_Address__c custom field API name.

Other way to help text in Visual force page:



1. <apex:inputField> and <apex:outputField> shows help Text bubble when nested within a <apex:pageBlockSection> component automatically.
but in order to do this, you need to include a <apex:PageBlockSection> nested in a <apex:PageBlock> tag as well.

However, there are two scenarios where helpText Bubble is not displayed in the VisualForce page.

  1. If we use "Label" attribute of <apex:outputField> , then helpText bubble is not displayed in visualforce page.
  2. If we set "showHeader=false"  of <apex:Page>, in that case also helpText bubbles is not displayed in visualforce page.
Here I came up with my own idea to display help text at VF page with above two scenarios:


<div id="mainAccountContent">

    Sample help Text Example

    <span class="CustomHelpTextExample">

<img src="/HelpTextExample.gif" alt="Help" class="helpIcon" title="$ObjectType.Account.Fields.LightingNitish__Account_Address__c.InlineHelpText"/>

    </span>
</div>

By Providing "$ObjectType.Account.Fields.LightingNitish__Account_Address__c.InlineHelpText" in TITLE attribute of <img> tag.
The helpText will be displayed as ToolTip Text.

You do not need to use <apex:PageBlockSection> tag.

Also in above code I used field LightingNitish__Account_Address__c. 
LightingNitish__Account_Address__c is a combination of namespace and API name. LightingNitish is my org namespace and then Account_Address__c custom field API name.

2. Use the <apex:pageBlockSectionItem> tag with attribute helpText filled. 
You can then "override" it or better say use you own custom help text independent of another one from the custom field:

<apex:pageBlock>
    <apex:pageBlockSection>
        <apex:pageBlockSectionItem helpText="Your custom help text.">
            <apex:outputLabel value="Account Name"/>
            <apex:inputText value="{!Account.Name}" />
        </apex:pageBlockSectionItem>
    </apex:pageBlockSection>
</apex:pageBlock>

It looks like this then:



3. Display help text entered in the custom field under "Help Text". This text visible if you use a pageBlock together with an outputField:

<apex:pageBlock>
    <apex:pageBlockSection>
        <apex:outputField value="{!Account.Account_Address__c }" />
    </apex:pageBlockSection>
</apex:pageBlock>

Enjoy! If you have any questions, comments etc. please feel free to let me know. As always, please feel free to get in touch me as I would be more than happy to assist you with any of your Salesforce development needs.


Next post: Secret Trick To Retrive Fields For Sobject Using Apex
loading...

No comments:

Post a Comment