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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .