+ Start a Discussion
isalewisalew 

Default styling for Lightning Out in Visualforce

Trying to implement a mobile action but having difficulties using Visualforce or Lightning.

Requirements
  • Create a new record via mobile action from an Account or Opportunity record
  • On action, create, save, and display the record for editing
  • On cancel, delete the record
  • On save, update the record
  • NOTE: This record is created differently than standard records. It must be created and saved, then displayed for editing. If the user cancels this interaction, then the record is deleted. This differs from the standard Salesforce create action, where no record is created until saved.
Implementation Attempts

Attempt #1: Visualforce Page Redirect
  • On action, creates and displays record with standard “Cancel” and “Save” actions
  • On cancel, returns to action page, which creates a second record
  • On save, returns to action page, which creates a second record
  • Cannot override standard Cancel and Save actions
This means I cannot use a simple Visualforce page redirect because I cannot override the standard “Cancel” and “Save” buttons.

Attempt #2: Lightning Standalone App
  • On open from lightning tab, creates and displays record (but no parent record, since launched from tab menu)
  • On cancel, deletes the record, returns to originating record
  • On save, updates the record, redirects to new record
This works, except I cannot launch this page from a parent Account or Opportunity record via mobile action. This also creates an extra global menu item when a mobile action is much better UX.

Attempt #3: Lightning Component Embedded in Visualforce Page via Lighting Out
  • On action, creates and displays record (but displays without formatting, so lookups don’t work)
  • On cancel, deletes the record, returns to originating record
  • On save, updates the record, redirects to new record
The actions on this page work, but the page formatting breaks, so the user cannot enter critical data, such as lookups. The page is using the <force:recordEdit/> component to display the record details, so manual override of all input element styling is not feasible. Manually recreating the standard edit page with custom input fields is not sustainable either. Adding the <apex:includeLightning/> tag doesn't change any styling either.

Conclusion
I’m finding that Lightning components / apps do not officially support being launched via mobile action, so you have to embed Lightning components inside a visual force page via Lightning Out. This would work, except the automatic formatting typically provided to a lightning page when launched from a standalone Lightning App tab is stripped away when embedded in Visualforce, thereby breaking functionality like lookup fields.

Does anyone have a recommendation on how to navigate this kind of record create scenario in mobile? Is there a trick to using Visualforce? Or is there a way to include default styling via Lightning Out?