How can I bind data to controls built in the lightning design system within visualforce. It seems that it's more HTML/CSS based vs apex:control based.

Changing my question to refine and make more relevant

I need to send multiple parameters to a controller from Javascript

here is my actionFunction binding the controller call to the javascript and the params I'd like to send.

<apex:actionFunction action="{!save}" name="sendValue">
        <apex:param value="" name="chk" assignTo="{!activity__c.Location_is_approximate__c}"/>
        <apex:param value="" name="lat" assignTo="{!activity__c.GeoCode__Latitude__s}"/>
        <apex:param value="" name="long" assignTo="{!activity__c.GeoCode__Longitude__s}"/>

Here is the javascript that is bound to it

function sendData()
    var chkVal = document.getElementById('chk');
    sendValue(v.checked, position.coords.latitude, position.coords.longitude);
    return false;

Here is the controller that is receiving it

public Activity__C act {get; set;}
    public User owner {get; set;}
    public boolean hasLocation; 

    public QuickCreateActivityController(){
       act = new Activity__c();
       owner = new user();
       hasLocation = false;


    public void save() {  

        insert act;



action function and button

<apex:actionFunction action="{!save}" name="sendValue" reRender="">
        <apex:param value="" name="param1" assignTo="{!hasLocation}"/>
        <apex:param value="" name="param2" assignTo="{!geoLat}"/>
        <apex:param value="" name="param3" assignTo="{!geoLong}"/> 

<button id="btnSave" class="slds-button--neutral slds-text-heading--medium slds-m-vertical--medium" style="width:100%;" onclick="buttonClick(); return false;">Log my location</button>

Javascript method

function buttonClick(){
   sendValue(chkVal.checked, position.coords.latitude, position.coords.longitude);


public boolean hasLocation {get; set;} 
public double geoLat {get; set;}
public double geoLong {get; set;}

public QuickCreateActivityController(){
   act = new Activity__c();
   owner = new user();   
   hasLocation = false;
   geoLat = 0.0;
   geoLong = 0.0;
  • In multiple field you need to get all fields using javascript and then pass them using apex:param Commented Jun 29, 2016 at 9:21
  • Is this passed in a single param statement or multiple?
    – tjcinnamon
    Commented Jun 29, 2016 at 13:55
  • I changed things up to make things more clear. I took your advice about using params, now I just need to send multiple and have the controller accept it
    – tjcinnamon
    Commented Jun 29, 2016 at 14:14

1 Answer 1


to directly bind the field you can use lightning tags

<ui:inputText aura:id="expname" label=" Account  Name" value="{!v. account.Name}" required="true"/>

here account will be passes as an attribute.

to bind a controller method first you need to call javascript method

<ui:button label=”Create Account” press=”{!c.clickCreateRecord}”/>

and in javascript controller

// Load expenses from Salesforce

clickCreateRecord: function(component, event, helper) {

// Create the action

var action = component.get("c.getaccount");

// Add callback behavior for when response is received

action.setCallback(this, function(response) {

var state = response.getState();

if (component.isValid() && state === "SUCCESS") {

component.set("v.account", response.getReturnValue());


else {

console.log("Failed with state: " + state);



// Send action off to be executed



using these method you can call apex controller. and use @Auraenabled in controller method and they should be static


public static List<account > getaccount()


Update As this a Visualforce page so things are easy here. To display and take user input you can use html tag as you are already using.

And to pass data to controller just get all these value in controller and pass them using actionfunction param attribute

    function sendData()
       var v  = document.getElementById('text-input-01');
<apex:actionfunction action="{!method}" name="actfun" rerender="frm">
      <apex:param value="" name="param" assignTo="contvariable" />

or you can use remoting here as well.

  • shoot! I should have been more clear. This is the SLDS design system applied to a visualforce page not a lightning component
    – tjcinnamon
    Commented Jun 28, 2016 at 17:22
  • I updated the questions to make that more clear
    – tjcinnamon
    Commented Jun 28, 2016 at 17:22
  • @tjcinnamon check my updated answer. Commented Jun 28, 2016 at 17:30
  • I'm having problems understanding how this works? So starting with simple binding the data: how is 'text-input-01' related to {!account.name}? If a user was to use this as an edit and create page, presumably data would need to be populated to text-input-01 on open
    – tjcinnamon
    Commented Jun 28, 2016 at 17:46
  • 1
    @tjcinnamon to display existing data. you can do something like <input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" value="{!acc.name}/> and then you can get the data in javascript and send it to controller to updated data. Commented Jun 28, 2016 at 17:48

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .