It is possible to have Pricefx Unity displayed as a modal window in Salesforce Lightning.

Open

Task

Implement a Lightning Component over a defined/existing CanvasApp, then add it as an action to the page layout.

Prerequisites

Make sure you have access to Salesforce with appropriate rights to add Lightning Component and edit the Opportunity page layout.

Define a canvas app for Unity integration and name it “QuoteConfigurator_demo_master”.

Steps

Create Lightning Component

1. To do this, use Developer Console. You can open it from the Setup menu in the top right corner.

   Open

   

    

2. Click File > New > Lightning Component to create a new Lightning Component.

3. Name it for example “QCLightningComp”. You will see supported bundle’s definitions in the right pane.

4. Click “COMPONENT” or press “Ctrl+Shift+1” (Windows) or “Command+Shift+1“ (Mac) to add a component script. To include AppCanvas, use the “force” namespace:

5. Here is the script:

   <aura:component implements="force:appHostable,lightning:isUrlAddressable,force:hasRecordId,force:lightningQuickActionWithoutHeader" > <force:canvasApp developerName="QuoteConfigurator_demo_master" /> </aura:component>

   [force:appHostable] – Allows component to be used as a custom tab in Lightning Experience or Salesforce mobile app.
   [force:hasRecordId] – Makes this component available only when the target object has recordId (not in creation).
   [force:lightningQuickActionWithoutHeader] – Type of the component use; in this case it is a Lightning quick action to open in a modal.
   [force:canvasApp] – The defined canvas app to be wrapped as a Lightning component; the “developerName” attribute points to the exact canvasApp.

6. To specify a fixed size for a modal, you can modify the script of the Lightning component in the developer console (optional).

   1. Add this CSS code before <force:canvasApp>:

      <aura:html tag="style"> .slds-modal__container { width: 95% !important; max-width: 95% !important; height: 100% !important; max-height: 100% !important; } .slds-modal__container .modal-body { width: 100% !important; max-width:100% !important; height:100% !important; max-height: 100% !important; } .slds-modal__container iframe { width: 100% !important; max-width:100% !important; } .slds-modal__container .quick-actions-panel .slds-modal__content { height:100% !important; max-height: 100% !important; } </aura:html>

Create Component as a Modal (Page action) or a Tab (in Page)

1. Add the component to the Opportunity page as an action.

2. Go back to the Setup menu and click the Setup menu item this time.

3. Choose Object Manager > Opportunity, select the Buttons, Links and Actions section and then click New Action. You will be able to create a new action opening up the created Lightning Component in a modal.

   Select the correct option for the following fields:

   1. Action Type: Lightning Component

   2. Lightning Component: c:QCLightningComp (the one that you have just created)

   3. Label & Name: Enter any value of your choice but keep in mind that you will choose the right action based on this label later.

   4. Finally, click Save.

4. To use Visualforce page as a tab inside a page you will need to select one check-box in Visualforce pages setting menu (optional).

   1. Go to Visualforce pages.

   2. Click Edit on the page which you want to show in the tab and make sure that the Available for Lightning Experience, Experience Builder sites, and the mobile app option is selected.

5. Search the Lightning App Builder and edit the desired layout (in our case it is “Praveen Opportunity Record Page”).

6. Select Highlights Panel and click Add Action. In the pop-up find the recently created action and click Done.

7. Click Save.

Create Component as a Tab

1. Go back to the Setup menu and select Tabs.

2. Find “Lightning Component Tabs” section and click New to define a new tab. You will be able to create a new tab opening up the created Lightning Component.

How to Verify our Work

1. Open the Opportunity to see the result. If you do not see the button, it is under the More button.

2. Clicking it will open the modal view as is.

Create Modal in Old-Fashion Way with “Page Layouts”

1. Select the “Page Layouts” section, open and edit the desired layout (in our case it is “Opportunity Layout”).

2. Select “Mobile & Lightning Actions” inside the layout options. You will see the action you have just created. Drag it to the “Salesforce Mobile and Lightning Experience Action” section.

3. Click Save and verify your work.