3

We are developing a Canvas application configured to run from the Case Layout Page. The application is intended to allow the user to click on certain elements within its UI without opening a new browser tab. However, when running in Lightning Experience, clicking any part of the application results in the application being opened in a new browser tab, which is not desired behavior. The cause looks to be a CSS “mask” overlaying the Canvas application.

Ideally, we’d like to remove the mask client-side, however we don’t see a way to do this from the Canvas JavaScript API. From the Canvas Developer Guide, it seems like a custom Apex class implementing the Canvas.CanvasLifecycleHandler interface could potentially be an option. However, we don’t want to put a lot development effort into implementing, if this doesn’t provide the capability to modify the CSS “mask”.

Is there a client-side mechanism for removing the CSS mask, or is the custom Apex class a solution? Without modifying the intended behavior of our Canvas application or it’s location, are there other solutions that we should consider?

Note that our Canvas application works as intended when running in Salesforce Classic mode.

1
  • "From the Canvas Developer Guide, it seems like a custom Apex class implementing the Canvas.CanvasLifecycleHandler interface could potentially be an option". Could you point me to a link where I can find how to remove that mask using Apex class. I don't want to use visualforce page solution. Commented Jan 3, 2018 at 12:14

1 Answer 1

1

The page layout seems to be setting watermark="true" for your canvas app. I don't see an option to turn that off, but there could be a few other options.

  1. Include the Canvas app in a different location in the Lightning Record Page (outside of the Classic page layout) through the Lightning App Builder. This would let you include custom Lightning components too.
  2. Create a Visualforce page that includes the Canvas app, and add that to the page layout.

    <apex:page standardController="Case">
        <apex:canvasApp developerName="app_name_here" />
    </apex:page>
    
1
  • 2
    Thanks! We ended up landing on the same solution as your 2nd option of creating a Visualforce page that includes the Canvas app.
    – SS Dev
    Commented Jul 19, 2017 at 14:24

You must log in to answer this question.

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