1

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}"/>
    </apex:actionFunction>

Here is the javascript that is bound to it

function sendData()
{
    var chkVal = document.getElementById('chk');
    //alert(v.checked);
    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() {  

        system.debug(act.Location_is_approximate__c);
        checkForWorkday();     
        insert act;

    }

----------------WHAT I ENDED UP DOING USING THE SUGGESTIONS BELOW----------

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}"/> 
    </apex:actionFunction>

<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);
}

Controller

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;
}
3
  • In multiple field you need to get all fields using javascript and then pass them using apex:param Jun 29 '16 at 9:21
  • Is this passed in a single param statement or multiple?
    – tjcinnamon
    Jun 29 '16 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
    Jun 29 '16 at 14:14
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

$A.enqueueAction(action);

},

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

@AuraEnabled

public static List<account > getaccount()

Reference

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

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

or you can use remoting here as well.

12
  • shoot! I should have been more clear. This is the SLDS design system applied to a visualforce page not a lightning component
    – tjcinnamon
    Jun 28 '16 at 17:22
  • I updated the questions to make that more clear
    – tjcinnamon
    Jun 28 '16 at 17:22
  • @tjcinnamon check my updated answer. Jun 28 '16 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
    Jun 28 '16 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. Jun 28 '16 at 17:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.