1

I have a lwc component that sits on a record page and I would like to have a Printable View button print the lwc - as far as I can tell the only way to do this is with a visualforce page. I've followed all the directions about using an aura lightning app to place the lwc on vf, but it's not working - when I load it the page shows up blank. I can't find what I'm doing wrong, can someone help me?

https://www.paul-force.com/2019/04/24/use-lightning-web-components-in-visualforce-pages/ https://developer.salesforce.com/docs/component-library/documentation/en/lwc/use_visualforce https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.lightning_out_dependencies

VF page:

<apex:page standardController="Job_Description__c" extensions="JobDescription">
    <apex:includeLightning/>
    <div id="container"></div>

    <apex:form >
        <div style="text-align: center">
            <apex:commandButton styleClass="cButtons" id="pr" value="Print" onclick="printMyPage();" />
        </div>
    </apex:form>

    <script>
        $Lightning.use("c:jobDescriptionContainerDependency", function () {
            $Lightning.createComponent(
                "c:jobDescriptionContainer",
                {
                    //The lwc I"m referencing has an @api to accept a recordId
                    recordId: "{!Job_Description__c.Id}"    
                },
                "container"
                function (cmp) {
                    console.log('component created');
                }
            );
        });

        function printMyPage() {

            window.print();
        }
    </script>

</apex:page>

Aura app - jobDescriptionContainerDependency.app ( the .app is the only file that I added any code to):

<!--The parent component c:jobDescriptionContainer contains c:responsibilitiesCollapsible as a child component 
(and c:metricsList as a child inside of that) - Not sure if the child component names need to be here or not -->

<aura:application access="GLOBAL" extends="ltng:outApp"> 
    <aura:dependency resource="c:jobDescriptionContainer"/>
    <aura:dependency resource="c:responsibilitiesCollapsible"/>
    <aura:dependency resource="c:metricsList"/>
</aura:application>
  • Do you see any error in your browser console upon inspect element ? – Mohith Shrivastava Apr 7 at 19:30
  • @mohithShrivastava There's a line that says "Uncaught SyntaxError: missing ) after argument list" but I don't see any problems with parentheses in my code? – nfoley Apr 7 at 20:24
2

You have a comma missing in the Javascript code after the container

Try the below code,

<apex:page standardController="Job_Description__c" extensions="JobDescription">
<apex:includeLightning/>
<div id="container"></div>

<apex:form >
    <div style="text-align: center">
        <apex:commandButton styleClass="cButtons" id="pr" value="Print" onclick="printMyPage();" />
    </div>
</apex:form>

<script>
    $Lightning.use("c:jobDescriptionContainerDependency", function () {
        $Lightning.createComponent(
            "c:jobDescriptionContainer",
            {
                //The lwc I"m referencing has an @api to accept a recordId
                recordId: "{!Job_Description__c.Id}"    
            },
            "container",
            function (cmp) {
                console.log('component created');
            }
        );
    });

    function printMyPage() {

        window.print();
    }
</script>

| improve this answer | |
  • I actually only added that in on this page when I posted it here, that comment isn't in my original code. I'll edit my post. – nfoley Apr 7 at 20:33
  • 1
    check the commas. I think you are missing a comma. – Mohith Shrivastava Apr 7 at 20:53
  • That was it! It works now, thank you! – nfoley Apr 7 at 21:00

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.