Approval process within a VF page in lightning experience does not work

Question

I have a VisualForce page working fine in SF Classic that contains the approval process related list with this code:

<apex:relatedList list="ProcessSteps" pageSize="3" />

When I switch to lightning experience, the history still displays I have several issues:

1. When clicking "Recall Approval Request" I get a dialog with title "Edit Approval request", I cannot edit anything on that dialog and when I hit "Save & New" I get the following error:

2. I get exactly the same as in 1. when hitting the button "Reassign"

3. When hitting "Approve / Reject" a new tab opens with the page /p/process/ProcessInstanceWorkitemWizardStageManager (in Classic I see the page in the same tab). In that page the buttons "Back to [Object]: [id]", "Cancel", "Approve", "Reject" don't redirect me back to the object, I get the js error in the console:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('[my_org].lightning.force.com') does not match the recipient window's origin ('[my_org].my.salesforce.com').

Is there a different way to include the approval history and these buttons in a VS page when running in Lightning Experience or should we implement a custom list with custom buttons to approve, reject, reassign, submit for approval and recall since this is not supported in Lightning? Thanks

Answer 1

Since you already know it's not supported in Lightning, your code should be written such that it's context sensitive. You can use code such as what's contained in this Trailhead Module on multipurpose pages to write code that adapts behavior depending on whether you're in LEX or Classic. In that way you can use the standard related list in Classic, then use the custom list approach you've mentioned when in LEX.