[SalesForce] how to update the record in lightning components when calling from Visualforce page

I'm accessing a vf page via "action" on lead object, which contains a component.

Action -> Vf Page –> mylightningcomponent —>LeadSource.

the problem is when i click on button/action on record detail page or from Lightning UI on the record, I see " save " which is grayed out. what is causing this behavior ?

And force:inputField supposed to show the picklist values. It doesnt render at all.

my vf page`

 <apex:page standardStylesheets="false" controller="leadController" extends="ltng:outApp">
 <apex:includeLightning />
 <apex:includeScript value="/lightning/lightning.out.js" />
<apex:stylesheet value="{!URLFOR($Resource.SLDS1, 'assets/styles/salesforce-lightning-design-system.css')}" /> 
<div class="slds" style="margin-top:10px;margin-left:10px;"> 
</div>
<div id="lightning" />
<script>
 var leadid = "{!$CurrentPage.parameters.id}";
    console.log(leadid);
    $Lightning.use("c:leadApp", function() {
      $Lightning.createComponent("c:Lead_Comp",
            {"leadid": leadid},
              "lightning",
              function(cmp) {
                  //alert("{!$CurrentPage.parameters.id}");
                // do some stuff
           });
    });
</script>
</apex:page>`

EDIT:
Updated my leadcontroller as advised by @crmprogdev
My server-controller

public leadController(){

}
@AuraEnabled
public static Lead saveThisLead(id leadId){
    lead myLead = new lead();
    myLead = [select id, name from Lead where id =: leadid];
    upsert myLead;
    return myLead;
}

}

my Component

<aura:component controller="leadController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
 <ltng:require styles="/Resource/SLDS1/assets/styles/salesforce-lightning-design-system-ltng.css" />
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <aura:attribute name="lead"  type="Lead" default="{ sobjectType: 'Lead'}"/>
    <aura:attribute name="leadid"  type="String" />
    <aura:attribute name="Name" type="String" />
    <force:inputField value="{!v.lead.Street}" />
    <force:inputField value="{!v.lead.LeadSource}" />
</aura:component>

EDIT: adding my app

My App

<aura:application access="GLOBAL" extends="ltng:outApp">

    <aura:dependency resource="c:Lead_Comp"/>
    <c:Lead_Comp/>

</aura:application>

EDIT

my component controller

({
    init : function(component, event, helper) {
        var action = component.get("c.saveThisLead");
        console.log("init");
        var ldid = component.get("v.leadid");
        console.log(ldid);
        action.setParams({
           "leadid":ldid
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if(component.isValid() && state ==="SUCCESS"){
                component.set("v.lead", response.getReturnValue());
            } else if (state === "ERROR"){
                var errors = action.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        Component.set("v.message", errors[0].message);
                        console.log(errors[0].message);
                    }
                }
             }
            console.log(response.getReturnValue());
        });
        $A.enqueueAction(action);
    },    
})

Best Answer

Seems like you're most of the way there already.

I'd suggest switching from 

<force:inputField value="{!v.lead.Street}" />

to 

<ui:inputText value="{!v.lead.Street}" />

as the force components and events do not appear to be available when using Lightning Out.

The other suggestion I have is to write your own 'Save' functionality in the Lightning Component Controller.

Your Apex Controller could be as simple as:

@AuraEnabled
public static Lead saveLead(Lead myLead){
    try {
        upsert myLead;
    } catch (Exception e) {
        throw new AuraHandledException('Unable to save lead: ' + e.getMessage());
    }

    return myLead;
}

and your client-side controller could be as simple as:

saveLead: function (component, event, helper){
    var action = component.get("c.saveLead");
    var myLead = component.get("v.lead");
    action.setParams({ "myLead": myLead });

    action.setCallback(this, function(response) {
        var state = response.getState();
        // display a message to your user, prompting them to close
        // the action modal
        console.log(state);
    });

    $A.enqueueAction(action);
}

with a simple button

<ui:button label="Save" press="{!c.saveLead}"/>

Additionally, here's a blog that might help.

Related Topic