You need to sign in to do that
Don't have an account?
Stefaan Somers 12
How to integrate Lightning component within Visualforce Page
Here is the source-code of my component :
Here is the code of my VFPage :
As soon as the line hereunder is included within the component, I get this error.
If I remove this line, the component shows correctly in the Visualforce page.
In my handler I don't have any real logic yet
When I open the visualforce page, I get the following error :
aura_proddebug.js:43717 Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
at AuraInstance.message (aura_proddebug.js:43717)
at AuraInstance.handleError (aura_proddebug.js:43632)
at AuraInstance.$reportError$ (aura_proddebug.js:43693)
at reportError (aura_proddebug.js:43429)
<!-- - Created by stefaans on 29/04/2019. --> <aura:component description="DocumillDocuments" implements="forceCommunity:availableForAllPageTypes" access="global" controller="DocumillHelper"> <aura:attribute name="objectType" type="String"/> <aura:attribute name="listDocuments" type="Documill_Template__mdt[]"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <!-- PAGE HEADER --> <lightning:layout class="slds-page-header slds-page-header--object-home"> <lightning:layoutItem> <lightning:icon iconName="standard:scan_card" alternativeText="My Expenses"/> </lightning:layoutItem> <lightning:layoutItem padding="horizontal-small"> <div class="page-section page-header"> <h1 class="slds-text-heading--label">Documill</h1> <h2 class="slds-text-heading--medium">Documents</h2> </div> </lightning:layoutItem> </lightning:layout> <!-- / PAGE HEADER --> <!-- LIST DOCUMILL DOCS --> <lightning:layout> <lightning:layoutItem padding="around-small" size="6"> <aura:iteration var="doc" items="{!v.listDocuments}" > <p>{!doc.name}</p> </aura:iteration> </lightning:layoutItem> </lightning:layout> <!-- / LIST DOCUMILL DOCS --> </aura:component>
Here is the code of my VFPage :
<!-- - Created by stefaans on 29/04/2019. --> <apex:page id="DocumillDocuments" sidebar="false" showHeader="false" standardStylesheets="false"> <apex:includeLightning /> <div id="DocumillDocumentsDiv"></div> <script> $Lightning.use("c:DocumillApp", function() { $Lightning.createComponent("c:DocumillDocuments", {}, "DocumillDocumentsDiv", function(cmp) { console.log('>>>>> App is hosted'); }); }); </script> </apex:page>
As soon as the line hereunder is included within the component, I get this error.
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
If I remove this line, the component shows correctly in the Visualforce page.
In my handler I don't have any real logic yet
/** * Created by stefaans on 30/04/2019. */ ({ doInit : function(component, event, helper) { // component, event, helper are parameter of doinit function console.log('Init event is being triggered') /* var action= component.get('c.getDocuments'); // Calling apex method action.setCallback(this,function(response) // getting response back from apex method { var state=response.getState(); // getting the state if(state==='SUCCESS') { component.set('v.listDocuments',response.getReturnValue()); // setting the value in attribute } }); $A.enqueueAction(action);*/ } })
When I open the visualforce page, I get the following error :
aura_proddebug.js:43717 Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
at AuraInstance.message (aura_proddebug.js:43717)
at AuraInstance.handleError (aura_proddebug.js:43632)
at AuraInstance.$reportError$ (aura_proddebug.js:43693)
at reportError (aura_proddebug.js:43429)
Is this basically how you're doing it?
https://www.jitendrazaa.com/blog/salesforce/use-lightning-component-in-visualforce-page/
Thx