Breadcrumbs

Setting Up a Connected App in Salesforce with Lightning Component Aura

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 a Connected 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 Settings".

  4. Enable the option “Allow creation of connected apps”.

    image-20250721-085056.png

  5. After allowing connected apps you will be presented with a button “New Connected App”, click on it to continue.

  6. Fill in Basic Information

    1. Connected App Name:
      Enter a unique name, e.g., pricefx app.

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

    3. Contact Email:
      support@pricefx.com

      image-20250721-084846.png

  7. 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 2022-12-08 at 14.45.29.png

  8. 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.

      image-20250721-091323.png
      image-20250721-091617.png
      image-20250721-091732.png

      🔎 Tip: You can find required values for Entity ID and ACS URL in the SAML Configuration page in Pricefx (look for “Show value for CRM”).

  9. 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

        image-20250721-111541.png

  10. 💾 Click Save to create the connected app.

Set App Permissions

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

    Screenshot 2023-02-17 at 09.16.03.png

  2. Click Manage, then Edit Policies.

  3. Under OAuth Policies, change:

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

    Screenshot 2023-02-17 at 09.17.41.png

  4. Click Save.

  5. Click the app name again and go to Manage Profiles.

  6. Add all relevant profiles that will use this application.

    image2022-1-26_13-59-39.png

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.

      HTML
      <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:

      JavaScript
      ({
	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.

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.