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>
2
  • Do you see any error in your browser console upon inspect element ? Apr 7, 2020 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, 2020 at 20:24

1 Answer 1

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>

3
  • 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, 2020 at 20:33
  • 1
    check the commas. I think you are missing a comma. Apr 7, 2020 at 20:53
  • That was it! It works now, thank you!
    – nfoley
    Apr 7, 2020 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.