Breadcrumbs

Setting Up an External Client App in Salesforce with Lightning Component

This guide describes how to configure a Connected App in Salesforce with Lightning Component, integrate it with Pricefx, and set up authentication and the application layout.

Create an External Client App

Step-by-Step Instructions

  1. Log in to Salesforce as an Administrator.

  2. Click the Gear icon (⚙️) and select Setup.

    Screenshot 2022-12-08 at 15.04.36.png

  3. In the Quick Find box, search for "External Client App Manager".

  4. Click the New External Client App button.

    Screenshot 2026-02-16 at 12.20.35.png

  5. Fill in Basic Information

    1. External Client App Name:
      Enter a unique name, e.g., ECA E2E Staging.

    2. API Name:
      Automatically generated from the App Name (no spaces or special characters), e.g., ECA_E2E_Staging.

    3. Contact Email:
      support@pricefx.com

      Screenshot 2026-02-16 at 12.36.28.png

  6. Enable OAuth Settings

    1. Set the Callback URL:
      https://<cluster name>.pricefx.com/
      (This URL may vary; contact Pricefx support for the correct one.)

    2. In Selected OAuth Scopes, add:
      Full access (full)

      Screenshot 2026-02-16 at 12.39.52.png

  7. Web App Settings
    If Salesforce acts as the Identity Provider (IdP):

    1. Check Enable SAML.

    2. Enter the Entity ID:
      https://<cluster>.pricefx.com/pricefx/<partition>/saml/consume/<SAML Configuration Name>?RelayState=<RelayState>.

    3. Enter the ACS URL (same as Entity ID).

    4. Set Signing Algorithm for SAML Messages to SHA256.

      Screenshot 2026-02-16 at 12.43.18.png

      🔎 Tip: You can find required values for Entity ID, ACS URL etc. in the SAML Configuration page in Pricefx. Select SAML configuration, Relay States Tab, one particular Relay State Name and click on “Show value for CRM”.

      Screenshot 2026-02-16 at 12.48.55.png
      Screenshot 2026-02-16 at 12.50.23.png


  8. Canvas App Settings

    1. Enable Canvas.

    2. Enter Canvas App URL:
      https://<cluster name>.pricefx.com/
      (Confirm with Pricefx support or SAML Configuration page.)

    3. Access Method:
      Leave as Signed Request (POST).

    4. SAML Initiation Method:
      Choose between:

      • Identity Provider Initiated

      • Service Provider Initiated (if Salesforce is not the IdP)

    5. Locations:
      Select:

      • Lightning Component

      • Mobile Nav

        Screenshot 2026-02-16 at 13.05.03.png

  9. Click on Create button.

Set App Permissions

  1. Go to External Client App Manager and locate your newly created app.

  2. Screenshot 2026-02-16 at 13.09.38.png

  3. Click Edit, on the Policies tab.

    Screenshot 2026-02-16 at 13.11.02.png

  4. Add all relevant profiles that will use this application

    Screenshot 2026-02-16 at 13.14.11.png

  5. Under OAuth Policies, change:

    • Permitted Users to Admin approved users are pre-authorized.

    Screenshot 2026-02-16 at 13.14.50.png


  6. Click Save.

Create Lightning Component

Take the following steps:

  1. Open the Developer Console in Salesforce.
    (Setup > Developer Console)

    Screenshot 2022-12-08 at 15.15.56.png

  2. Create a new Lightning Component.

    image-20250721-092833.png

  3. Name it, for example: pricefx_app.

    image-20250721-093001.png

  4. Insert the Following Code

    1. COMPONENT Section:
      📢 Note:
      In our example, we are using a connected app with the API name pricefx_app.
      In your case, this name may be different — make sure to replace it in the developerName field in the code below.

      <aura:component
  implements="force:appHostable,lightning:isUrlAddressable,force:hasSObjectName,force:hasRecordId,flexipage:availableForRecordHome"
  access="global"
>
  <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>
  <aura:attribute name="getRecordId" type="Object"/>    
    <aura:attribute name="opportunityRecord" type="Object"/>
    <aura:attribute name="recordLoadError" type="String"/>
    <force:recordData aura:id="recordLoader"
        recordId="{!v.recordId}"
        fields="Id,AccountId"
        targetFields="{!v.opportunityRecord}"
        targetError="{!v.recordLoadError}"
    />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <force:canvasApp developerName="pricefx_app" width="100%" parameters="{!v.getRecordId}"/>
</aura:component>

    2. CONTROLLER Section:

      ({
	doInit: function(cmp) {
        var recordId = cmp.get("v.recordId");
        var sObjectName = cmp.get("v.sObjectName");
        // NOTE: Lightning is very picky about quotes.
        // JSON keys and values MUST be wrapped with double quotes.
        // See: https://salesforce.stackexchange.com/questions/120473/canvas-app-in-lightning-component        
    	var output = '{"recordId": "' + recordId + '","type":"' + sObjectName + '"}';
    	cmp.set("v.getRecordId", output);
    }
})

      📢 This code enables communication between Pricefx and Salesforce.

    3. Save All your changes

Embed Lightning Component into Salesforce Object

  1. Open the object page in App Builder:
    (Setup > Edit Page on the target object)

    image-20250721-110100.png

  2. Locate your Lightning Component in the Custom Components section.

  3. Drag and drop it into the desired tab or layout region.

    Screenshot From 2025-07-21 12-57-08.png

  4. Save and Activate the page if needed.

Adjusting the Pricefx Lightning Component Height in Salesforce

When editing feature flags, ensure you are modifying the correct configuration file.
Please note that the embedded application may use a different configuration file than the standalone application.

  1. Open the Salesforce window where the Pricefx app is embedded and where you want to change the height.

  2. Navigate to the Feature Flags page in Pricefx:
    Administration > Feature Flags

    image-20250721-112528.png

     

  3. Locate the flag:
    environmentSettings.salesforce.displayLocation.Aura.

  4. Change its value to the desired height in pixels, e.g.: 1000px.

  5. Reload the Salesforce page to apply the new height.

To manually control the height, disable the auto-resize behavior by setting the following flag to false: environmentSettings.salesforce.displayLocation.Aura.autoGrow

One Canvas App for All Partitions

Instead of having one canvas app for each partition, you can have a configuration in which there is just one app that redirects the user to the correct partition.

In this configuration, the app's URL does not point to a concrete partition but to 'system'. For example:

https://pricefx.eu/pricefx/system/saml/consume?RelayState=quoteConfigurator&applicationEnvironment=salesforce

When this request is sent to Pricefx, it is consumed by 'system' SAML Consume service. This backend service resolves the target partition based on the user ID or email address. The service utilizes a user-partition map and redirects the authenticated user to the partition where the user has an account.

In cases when the same email address or user ID exists in multiple partitions (e.g., IT support users), the user will be redirected to a so called "preferred partition". The preferred partition is set on the Pricefx side as a feature flag. 

Note: This solution is suitable only for customer dedicated clusters.