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
Nuevo9763Nuevo9763 

<input type="text" class="slds-input"

Hi All,
I am required to migrate an existing VF page to Ligthning experience, NOT lightning component. I am using <apex:SLDS/> for this as 'lightningStyleSheet' attribute is still in bets version my company does not want to use that yet.
Beause I am using <Aoex:SLDS/> ta I have to modify the styleing of certain UI componn\nets like ChecBox, InputText etc.I am trying to find a workaround for following.
Old code was:
<apex:inputText id="searchText" value="{!searchTerm}" tabIndex="1" maxlength="255" onkeyup="enableSearchBtn()"/>
Which is changed to:
<div class="slds-form-element__control">
 <input type="text" class="slds-input" id="searchText" value="{!searchTerm}"  onkeyup="enableSearchBtn()" />
  </div>
After this change the JS function enableSearchBtn() will not work as expected. Now I am trying to figure out a way to achieve the same results with or without js function. Lightning migration trail head suggests to use Quick Action, but I am not sure how can I use Quick Action in my scenario, as there is no standard record creation happening here. The JS function is merely used to check the user has entered 3 chars minimum and then the Search btn is enabled. 
Can anyone suggest workaround for JS call here?
Alain CabonAlain Cabon
Hi,

It is not very smart to avoid the 'lightningStyleSheet' attribute currently even it is a beta version because you will "suffer" for all the dynamic components.

The best way is to try the 'lightningStyleSheet' attribute and verify the results (becoming a beta-tester).

If you want to see how Salesforce uses SLDS for its own open-source projects with VFP, there is CUMULUS.
 
<div class="slds-form-element__control">
            <c:UTIL_InputField field="{!field}" sObj="{!sObj}" sObjType="{!sObjType}" 
                onchange="{!onchange}" actSupAction="{!actSupAction}"
                actSupReRender="{!actSupReRender}" actSup="{!actSup}" 
                actSupStatus="{!actSupStatus}" actSupImmediate="{!actSupImmediate}"
                required="{!IF(required == true, true, NOT($ObjectType[sObjType].fields[field].nillable))}" 
                id="inputx"
            />
        </div>
 
<apex:inputField id="inputX" required="{!required}" value="{!sObj[field]}" label=""
        styleClass="{!CASE(ftype,
                                'textarea', 'slds-textarea',
                                'picklist', 'slds-select',
                                'multipicklist', 'slds-select multipicklistSLDSFixup',
                                'reference', IF(field=='RecordTypeId', 'slds-select', 'lookupInputSLDS ' + field),
                                'slds-input')}">
        <apex:actionSupport event="onchange" action="{!actSupAction}" reRender="{!actSupReRender}" rendered="{!actSup}" status="{!actSupStatus}" immediate="{!actSupImmediate}"/>
    </apex:inputField>
    <!-- Javascript will add the onchange event when needed and swap out the icon for lookup fields -->
    <script type="text/javascript">
        (function() {
            var oc = '{!onchange}';
            var ftype = '{!ftype}';
            var field = '{!field}';
            var input = document.getElementById("{!$Component.inputX}");

            // Add onchange event only when needed
            if (oc) input.setAttribute("onchange", oc);

            // Swap out the search icon
            if (ftype === 'reference' && field !== 'RecordTypeId') {
                input.style.visibility = "";
                var lkSpan = input.parentElement;
                var lkLink = lkSpan.querySelector("a");
                lkLink.style.visibility = "";
                lkLink.className = "";
                lkLink.innerHTML = "<svg aria-hidden=\"true\" class=\"slds-icon slds-input__icon slds-icon_x-small slds-icon-text-default\" viewBox=\"0 0 24 24\"><path  d=\"M22.9 20.9l-6.2-6.1c1.3-1.8 1.9-4 1.6-6.4-.6-3.9-3.8-7.1-7.8-7.4C5 .4.4 5 1 10.5c.3 4 3.5 7.3 7.4 7.8 2.4.3 4.6-.3 6.4-1.5l6.1 6.1c.3.3.7.3 1 0l.9-1c.3-.3.3-.7.1-1zM3.7 9.6c0-3.2 2.7-5.9 5.9-5.9s6 2.7 6 5.9-2.7 6-6 6-5.9-2.6-5.9-6z\"></path></svg>";
            }
            // Swap out the date icon
            if (ftype === 'date' || ftype === 'datetime') {
                input.style.visibility = "";
                var lkSpan = input.parentElement;
                var lkLink = lkSpan.querySelector("a");
                lkLink.style.visibility = "";
                lkLink.className = "";
                lkLink.innerHTML = "<svg aria-hidden=\"true\" class=\"slds-icon slds-input__icon slds-icon_x-small slds-icon-text-default\" width=\"52\" height=\"52\" viewBox=\"0 0 52 52\"><path  d=\"m46.5 20h-41c-0.8 0-1.5 0.7-1.5 1.5v24.5c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4v-24.5c0-0.8-0.7-1.5-1.5-1.5z m-27.5 22c0 0.6-0.4 1-1 1h-4c-0.6 0-1-0.4-1-1v-4c0-0.6 0.4-1 1-1h4c0.6 0 1 0.4 1 1v4z m0-10c0 0.6-0.4 1-1 1h-4c-0.6 0-1-0.4-1-1v-4c0-0.6 0.4-1 1-1h4c0.6 0 1 0.4 1 1v4z m10 10c0 0.6-0.4 1-1 1h-4c-0.6 0-1-0.4-1-1v-4c0-0.6 0.4-1 1-1h4c0.6 0 1 0.4 1 1v4z m0-10c0 0.6-0.4 1-1 1h-4c-0.6 0-1-0.4-1-1v-4c0-0.6 0.4-1 1-1h4c0.6 0 1 0.4 1 1v4z m10 10c0 0.6-0.4 1-1 1h-4c-0.6 0-1-0.4-1-1v-4c0-0.6 0.4-1 1-1h4c0.6 0 1 0.4 1 1v4z m0-10c0 0.6-0.4 1-1 1h-4c-0.6 0-1-0.4-1-1v-4c0-0.6 0.4-1 1-1h4c0.6 0 1 0.4 1 1v4z m5-25h-5v-2c0-1.6-1.3-3-3-3-1.6 0-3 1.3-3 3v2h-14v-2c0-1.6-1.3-3-3-3-1.6 0-3 1.3-3 3v2h-5c-2.2 0-4 1.8-4 4v2.5c0 0.8 0.7 1.5 1.5 1.5h41c0.8 0 1.5-0.7 1.5-1.5v-2.5c0-2.2-1.8-4-4-4z\"></path></svg>";
            }
        })();

    </script>

https://github.com/SalesforceFoundation/Cumulus/blob/master/src/components/UTIL_InputField.component

https://github.com/SalesforceFoundation/Cumulus/blob/master/src/components/UTIL_FormField.component
 
<div class="slds-form-element">
                    <apex:outputLabel value="{!$ObjectType.Error_Settings__c.Fields.Store_Errors_On__c.Label}" for="cbxSEO" styleClass="slds-form-element__label" />
                    <div class="slds-form-element__control">
                        <apex:inputCheckbox value="{!stgService.stgErr.Store_Errors_On__c}" rendered="{!isEditMode}" id="cbxSEO" html-aria-describedby="{!$Component.cbxSEOHelp}" styleClass="slds-checkbox"/>
                        <apex:inputCheckbox value="{!stgService.stgErr.Store_Errors_On__c}" rendered="{!isReadOnlyMode}" disabled="true" id="cbxSEOO" html-aria-describedby="{!$Component.cbxSEOHelp}" styleClass="slds-checkbox"/>
                        <apex:outputPanel id="cbxSEOHelp" layout="block">
                            <apex:outputText styleClass="slds-form-element__help" value="{!$Label.stgHelpStoreErrorsOn}" />
                        </apex:outputPanel>
                    </div>
                </div>

https://github.com/SalesforceFoundation/Cumulus/blob/master/src/pages/STG_PanelERR.page


https://github.com/SalesforceFoundation/Cumulus/tree/master/src/components

You need to "hack" if you want to translate all the components.

I managed to get good results with many "hacks" if my company would need the same translations of VFP for LEX as you are doing now but it is a much more dangerous way than the standard official tested option of Salesforce with lightningStyleSheet = true that we prefer now.
Nuevo9763Nuevo9763
Thank you Alain for a detailed explaination. I aure do not want to go the 'hacking' route, lt me see what direction I get from the architects. 
A quick question though , pardon me if it's too dumb, I am new to Ligthning.
Is it possible to develop the inputField itself as alightning component and use it in VFP?
Thanks,