Apex Code Development You need to sign in to do that
Don't have an account?
Sascha Deinert Component does not work at visualforce page
Hello,
If I add the component to my visualfoce page the buttons doesn't work. If I run the component alone it works.
VISUALFORCE PAGE
COMPONENT APP
COMPONENT
COMPONENT CONTROLLER
Thanks,
Sascha
If I add the component to my visualfoce page the buttons doesn't work. If I run the component alone it works.
VISUALFORCE PAGE
<apex:page >
<apex:includeLightning />
<div id="Con" />
<script>
$Lightning.use("c:buttontest_app", function() {
$Lightning.createComponent(
"c:buttontest",
{},
"Con",
function(cmp) {
console.log("Component is created!");
console.log(cmp);
});
});
</script>
</apex:page>
COMPONENT APP
<aura:application access="GLOBAL" extends="ltng:outApp" >
<aura:dependency resource="c:buttontest"/>
</aura:application>
COMPONENT
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
<lightning:quickActionAPI aura:id="quickActionAPI" />
<aura:attribute name="buttonLabel1" type="String" default="new Event"/>
<aura:attribute name="objectName1" type="String" default="Contact"/>
<aura:attribute name="actionName1" type="String" default="new_Event"/>
<aura:attribute name="variantType1" type="String" default="brand" />
<aura:attribute name="isButton1" type="Boolean" default="true" />
<aura:attribute name="buttonLabel2" type="String" default="new Task" />
<aura:attribute name="objectName2" type="String" default="Contact"/>
<aura:attribute name="actionName2" type="String" default="new_Task" />
<aura:attribute name="variantType2" type="String" default="brand" />
<aura:attribute name="isButton2" type="Boolean" default="true" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:card>
<div class="{!'slds-size_' + v.containerSize + '-of-12 slds-form-element'}">
<div class="container">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="{!v.setSize}" padding="around-small">
<aura:if isTrue="{!v.isButton1}">
<lightning:button class="{!v.buttonClass}" variant="{!v.variantType1}" label="{!v.buttonLabel1}" onclick="{!c.selectAction1}" />
</aura:if>
</lightning:layoutItem>
<lightning:layoutItem size="{!v.setSize}" padding="around-small">
<aura:if isTrue="{!v.isButton2}">
<lightning:button class="{!v.buttonClass}" variant="{!v.variantType2}" label="{!v.buttonLabel2}" onclick="{!c.selectAction2}" />
</aura:if>
</lightning:layoutItem>
</lightning:layout>
</div>
</div>
</lightning:card>
</aura:component>
COMPONENT CONTROLLER
({
doInit: function (component, event, helper) {
console.log('Label 1: [' + component.get("v.buttonLabel1") + ']');
if (component.get("v.buttonLabel1"))
component.set("v.isButton1", true);
console.log('Label 2: [' + component.get("v.buttonLabel2") + ']');
if (component.get("v.buttonLabel2"))
component.set("v.isButton2", true);
var calcCount = 12 / parseInt(component.get("v.buttonCount"),10);
component.set("v.setSize", calcCount);
if (component.get("v.buttonSize").toLowerCase() == 'full')
component.set("v.buttonClass", 'slds-size_full');
},
selectAction1 : function( component, event, helper) {
var actionAPI = component.find("quickActionAPI");
var quickAction = component.get("v.objectName1")+"."+component.get("v.actionName1");
console.log(quickAction);
var args = {actionName: quickAction, entityName: component.get("v.objectName1")};
actionAPI.selectAction(args).then(function(result) {
var fields = result.targetableFields;
console.log(fields);
}).catch(function(e){
if(e.errors){
console.log(e);
}
});
},
selectAction2 : function( component, event, helper) {
var actionAPI = component.find("quickActionAPI");
var quickAction = component.get("v.objectName2")+"."+component.get("v.actionName2");
console.log(quickAction);
var args = {actionName: quickAction, entityName: component.get("v.objectName2")};
actionAPI.selectAction(args).then(function(result) {
var fields = result.targetableFields;
console.log(fields);
}).catch(function(e){
if(e.errors){
console.log(e);
}
});
},
})
Thanks,
Sascha
While I try to reproduce this in my org, can you let me know if you are seeing any error when the button doesn't work?
No errors.
The buttons are displayed, but nothing happens when I click on them. No log files are created when I click on it.
I made some changes in your JS and Vf page.
here is your JS.
({ doInit: function (component, event, helper) { console.log('Label 1: [' + component.get("v.buttonLabel1") + ']'); if (component.get("v.buttonLabel1")) component.set("v.isButton1", true); console.log('Label 2: [' + component.get("v.buttonLabel2") + ']'); if (component.get("v.buttonLabel2")) component.set("v.isButton2", true); var calcCount = 12 / parseInt(component.get("v.buttonCount"),10); component.set("v.setSize", calcCount); /* if (component.get("v.buttonSize").toLowerCase() == 'full') component.set("v.buttonClass", 'slds-size_full');*/ }, selectAction1 : function( component, event, helper) { var actionAPI = component.find("quickActionAPI"); var quickAction = component.get("v.objectName1")+"."+component.get("v.actionName1"); console.log("quickAction : selectAction1"); console.log(quickAction); var args = {actionName: quickAction, entityName: component.get("v.objectName1")}; actionAPI.selectAction(args).then(function(result) { var fields = result.targetableFields; console.log('selectAction1'); console.log(fields); }).catch(function(e){ if(e.errors){ console.log(e); } }); }, selectAction2 : function( component, event, helper) { var actionAPI = component.find("quickActionAPI"); var quickAction = component.get("v.objectName2")+"."+component.get("v.actionName2"); console.log("quickAction"); console.log(quickAction); var args = {actionName: quickAction, entityName: component.get("v.objectName2")}; actionAPI.selectAction(args).then(function(result) { var fields = result.targetableFields; console.log('selectAction2'); console.log(fields); }).catch(function(e){ if(e.errors){ console.log(e); } }); }, })Here is your VF
<apex:page > <apex:includeLightning /> <div id="Con" /> <script> //c:buttontestApp => this is my App Name please replace it with your app name. $Lightning.use("c:buttontestApp", function() { $Lightning.createComponent( "c:buttontest", {}, "Con", function(component) { console.log("Component is created!"); }); }); </script> </apex:page>I did comment some code in your JS file because when I run this cmp I was get some error that's why.don't forget to mark it as best answer.
Thank you
what is your recommendation to change?
Thanks,
Sascha
Please refer to the below link.
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_visualforce.htm#:~:text=Add%20the%20Lightning%20Components%20for,createComponent()%20.
you need to update below things.
#1, function(component) { console.log("Component is created!"); }); =>in this line, before was written cmp , although you was write component in your JS file so you need to written component in vf page
#2. In Js file I did comment below line because I didn't find any buttonSize attribute in your Html file, that's why it's getting error.
if (component.get("v.buttonSize").toLowerCase() == 'full') component.set("v.buttonClass", 'slds-size_full');
let me know if this info is helpfull to you and don't forget to mark it as best answer.
Thank you
Thanks for your reply,
#1: what do you mean exactly, what should I change in my code?
#2: I delete this lines from my code, thanks.
Regards,
Sascha