[SalesForce] Passing recordId as a parameter to force:canvasApp component

I'm needing to create a simple lightning component to surface a canvas app on an account record detail page using the Lightning App Builder. Implementing force:hasRecordId, I want to use v.recordId as a parameter in <force:canvasApp developer="RBFS" parameters='{"accountId": "{!v.recordId}"}' />. I can't work out how to create an expression that will render the required JSON string for the parameters to be accepted. As per this discussion I also can only seem to pass the most simple object to the parameters attribute such as parameters='{"record": "smith"}' and have it surface in the environment.parameters field in the signed request.

I'm just starting out with salesforce and lightning components and so far I have tried:

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global" >
   <ui:outputText class="form-control" aura:id="recid" value="{!v.recordId}" />
   <force:canvasApp developerName="RBFS" parameters='{"accountId": "{!v.recordId}"}' />
</aura:component>

But this gives an aura compile error.

Cannot mix expression and literal string in attribute value, try rewriting like {!'foo' + v.bar}

I have tried crazy escaping and string concatenation parameters="{!'\'\{\"accountId\": \"" + v.recordId + "\"\}\'}" but this produces a parsing error in the Developer console.

Can someone point out how to fix this?

Side Note:

  • I have seen that you can get record context automatically in certain situations when surfacing a canvas app in the environment.record property of the signed request. This worked for me using the equivalent canvasApp in a VisualForcePage component in Lightning App Builder using <apex:canvasApp />. This does not seem to work with <force:canvasApp /> hence why I'm attempting to pass the recordId via this method.

Best Answer

I am answering here with a solution that worked for me in the end in case anyone might find it useful.

Trick was to use an init handler to set the value via the controller:

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <force:canvasApp developerName="RBFS" parameters="{!v.getRecordId}" /> 
</aura:component>

and then in the controller:

doInit : function(cmp) {

    var recordId = cmp.get("v.recordId");
    var output = '{"record": "' + recordId + '"}';
    cmp.set("v.getRecordId", output);

}

This resulted in the parameters being dynamically passed as a JSON string as required.

Related Topic