function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sfdc AdminSfdc Admin 

Can I use one visualforce component for all the fields in Apex page.?

Hello Everyone,
I got a requirement to crete new visualforce page in Lightning for one custom object, I have used HTML (div and slds) to build the page. Now my next requirement is to add HelpText for all 25 fields, Initially I was in a assumption that I can create one Visualforce component and use that for all the fields in Apex page. Please find my Component below
<apex:component selfClosing="true">
    <apex:attribute name="helpText" description="Help Text." type="String" required="true"/>
        var div = document.createElement('div');
        div.innerHTML = '<div class="body">{!helpText}</div>';
        setTimeout(function() {
            var searchInvoiceHelperText = document.getElementById('searchInvoiceHelperText').appendChild(div);
        }, 1000);
    <div class="mouseOverInfoOuter" id="searchInvoiceHelper" onfocus="addMouseOver(this)" onmouseover="addMouseOver(this)" tabindex="0">
        <img src="/s.gif" alt="" class="infoIcon" title="" />
        <div class="mouseOverInfo" id="searchInvoiceHelperText" style="display: none; opacity: -0.19999999999999996; left: 16px;">
But when I used this component for one field it's working fine, and when I use this for two fields only one field is showing helptext with description and other field is having icon with no description.
                        class="slds-form-element__row ma-ltss-font_style slds-p-top_xxx-small slds-p-left_small">
                        <div class="slds-size_1-of-5">
                        <label class="evv-slds-form-element__label">User Story Status <c:helpicon helpText="Used to identify the stage of this story within the SprintUser Story."/></label>
User-added image

If I use the same icon for next field then:
User-added image

Ajay K DubediAjay K Dubedi

you can not directly use slds in vf page. you want to use slds then follow this code and link:

Lightning component=:

Create lightning component.


<aura:application access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess" >
    <aura:dependency resource="c:'your lightning component name'"/>

VF page==:

    <apex:includeLightning />
    <div id="lightning" />
        $Lightning.use("c:call lightning component", function() {
              { label : "Press Me!" },
              function(cmp) {

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Ajay Dubedi