function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
PE Dev3.5PE Dev3.5 

How to create VisualForce page with Lightning Design System

Hi, I have created a visualforce page with Lightning Design System. I have added various fields like input, picklist, radio buttons etc. I got the look and feel of LDS in both classic and Lightning mode using below code. 
<div class="slds-form-element">
    <label class="slds-form-element__label" for="text-input-01">Input Label</label>
    <div class="slds-form-element__control">
      <input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
    </div>
  </div>

Now I am trying to code such that it works fine in classic and Lightning mode. I need to bind the LDS fields with some object fields as we do in classic mode. 
<apex:inputField value="{!obj.fieldApiName__c}">

I am not seeing any document/help from salesforce to proceed on this. Any help on this will be highly appreciable.
Thanks,
Best Answer chosen by PE Dev3.5
PE Dev3.5PE Dev3.5
Hi Richard/Anil,

Thanks to put your solution.

I found the work around for my above post. Also discuss with salesforce regarding my work around.

<div class="slds-form-element">
    <label class="slds-form-element__label" for="text-input-01">Input Label</label>
    <div class="slds-form-element__control">
      <!-- input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" /> -->// Comment this line
      <apex:inputField styleClass="slds-input" value="{!obj.fieldApiName__c}"> // We can use this apex attribute and use styleClass="slds-input" to get the look and feel of LDS input field.
    </div>
  </div>

All Answers

Anil kumar GorantalaAnil kumar Gorantala
use similar to this
<aura:attribute name="account" type="Account" default="{ sobjectType: 'Account' }"/>
<force:inputField value="{!v.account.Name}" />
PE Dev3.5PE Dev3.5
Hi Anil, As per my understanding these tag you can not use in visualforce page. I already tried this. <aura> is a salesforce Lightning App tag and we can not use in visualforce page.It shows error Like: 
Error: Unknown component aura:attribute
Anil kumar GorantalaAnil kumar Gorantala
have you tried trail head lightning design system module. go here https://developer.salesforce.com/trailhead/en/lightning_design_system/lightning-design-system4
Anil kumar GorantalaAnil kumar Gorantala
<!-- CREATE NEW ACCOUNT FORM --> <form class="slds-form--stacked"> <div class="slds-form-element"> <label class="slds-form-element__label" for="accountName">Name</label> <div class="slds-form-element__control"> <input id="accountName" class="slds-input" type="text" placeholder="New account"/> </div> </div> <button class="slds-button slds-button--brand slds-m-top--medium" type="button" onClick="createAccount()">Create Account</button> </form> <!-- CREATE NEW ACCOUNT FORM -->
PE Dev3.5PE Dev3.5
HI ANil, Thanks for reply. But my main concern is when i am using Lookup type or date type field in my visual force page.The property of lookup field is not working properly. Please find the below code for Lookup field which i am using.
        
<div class="slds-lookup" data-select="multi" data-scope="single" data-typeahead="true">
                <div class="slds-form-element">
                  <label class="slds-form-element__label" for="lookup">Accounts</label>
                  <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
                    <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
                    </svg>
                    <input id="lookup" class="slds-input" type="text" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-activedescendant="" />
                  </div>
                </div>   
              </div>

I am just creating Contact form where i am using Account field as a lookup. but not able to find the Account value in this field.
Anil kumar GorantalaAnil kumar Gorantala
here you go good sourse is here: https://www.lightningdesignsystem.com/components/lookups/
ChicloudChicloud
Unfortunately, the short answer to this is.. within classic,  you can't use. force:inputField  and there is no ui:inputField so you can't do it without alot of labor intensive coding to roll your own. ... so if you want to say... figure out values for a picklist field and show them in the screen it's no longer apex:inputField but rather you have to call an apex class.. use the metadata api to get the picklist field values.. put those values in a list.. and use that list for ui:inputSelect.. for dependent picklists.. it's alot more effort.. probably a couple of hundred of lines of code.  There seems to be a lack of love for SFDC classic which causes me to run into a few brick walls like this.

 
PE Dev3.5PE Dev3.5
Hi Richard/Anil,

Thanks to put your solution.

I found the work around for my above post. Also discuss with salesforce regarding my work around.

<div class="slds-form-element">
    <label class="slds-form-element__label" for="text-input-01">Input Label</label>
    <div class="slds-form-element__control">
      <!-- input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" /> -->// Comment this line
      <apex:inputField styleClass="slds-input" value="{!obj.fieldApiName__c}"> // We can use this apex attribute and use styleClass="slds-input" to get the look and feel of LDS input field.
    </div>
  </div>
This was selected as the best answer
ChicloudChicloud
So.. basically your solution was to not use lightning components at all but stick with Visualforce and viewstate and just use the slds style sheets for your vf page?  +++++ votes for a native ui:inputField component that works in sfdc classic. Seems a shame that simple stuff like that isn't supported requiring alot more custom coding that is not solving a business problem in order to be able to use lightening components.