Cas d’utilisation : Intégration de CPQ l’interface utilisateur dans une page Salesforce VisualForce

  • Rversion finale: Australia
  • Mis à jour 12 mars 2026
  • 3 minutes de lecture

    • Découvrez comment incorporer l’interface CPQ utilisateur dans une page Salesforce VisualForce.

    Cet article explique comment afficher l’interface CPQ utilisateur sur une page Salesforce VisualForce, telle que Salesforce B2B Commerce.

    Prérequis

    Cet exemple nécessite que la bibliothèque easyXDM soit chargée dans Salesforce [SFDC]. Navigation : SFDC → configuration → ressources statiques → nouveau. Chargez le https://drive.google.com/file/d/1T0TqffMjlZcEjFke__Re23NdZ_1gWkaJ/view fichier. Pour les besoins de cet exemple, définissez le nom de la ressource sur « XDMFile1 ».

    Vous devez également configurer votre client d’exécution dans Logik Admin pour avoir les origines de votre domaine Salesforce ainsi que de l’URL personnalisée CPQ de votre environnement

    Format de données d’initialisation de la configuration

    Pour initialiser la configuration, les données de champ de base doivent être transmises à la page. Voici les paramètres qui peuvent être transmis, représentés dans un joli format JSON :

    {
	"runtimeToken": "...",
	"quote": {
		"SBQQ__PricebookId__c": "...",
		"LGK__QueriedEditAccess__c": "Active",
		"LGK__FlightPath__c": "None"
	},
	"product": {
		"configuredProductId": "...",
		"configurationAttributes": {
			"LGK__Logik_Id__c": null
		},
		"optionConfigurations": {
			"Dynamic": []
		}
	},
	"layoutVarName": "someLayoutVarName"
}

    Remplacez les ellipses du JSON ci-dessus par les valeurs appropriées de votre environnement, de votre catalogue de prix et de votre CPQ productID.

    Remarque :
    Le script est sensible à la casse. Assurez-vous que la capitalisation correspond exactement au script. Par exemple, si votre script contient « LGK__Logik_Id__c » : Null (avec un N majuscule) au lieu de « LGK__Logik_Id__c » : null, cela peut entraîner une erreur 403 Interdit : vous n’avez pas l’autorisation d’accéder à cette ressource erreur.

    Afficher la mise en page par défaut

    Parfois, vous souhaiterez peut-être afficher une mise en page par défaut spécifique qui n’est pas classée en premier dans la liste des mises en page du plan. Pour désigner une mise en page de départ spécifique avec les chargements de page CPQ de configuration, transmettez « layoutVarName » : « <nom variable de la mise en page à afficher par défaut> » au niveau supérieur du JSON ci-dessus.

    Page VisualForce de l’hôte

    L’exemple de code VisualForce suivant est un proxy pour la page hôte dans laquelle vous avez l’intention d’intégrer l’interface utilisateur Logik. Composants clés :

    • La page importe la bibliothèque Javascript easyXDM, qui facilite la communication avec l’interface utilisateur Logik.
    • easyXDM analyse l’entrée JSON, la transpose et transmet les données à la page Logik en tant qu’appel de procédure à distance.

    Exemple de page VisualForce :

    <apex:page>
	<head>
		<apex:includeScript value=”{!$Resource.XDMFile1}”/>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="theme-color" content="#000000" />
		<meta    name="description"    content="Logik Configuration Wrapper"   />
		<title>Logik Wrapper</title>
		<style>
			iframe {
				width:100%;
				height:92vh;
			}
		</style>
		<script type="text/javascript" src="{!$Resource.XDMFile1}" crossorigin="anonymous">
		</script>
		<!-- easyXDM and Lightning for VF for passing config data to/from Salesforce CPQ -->
		<script type="text/javascript">
			var rpc = new easyXDM.Rpc({
				remote: "<BASE_LOGIK_URL>/ui/configure",
				container: "root"
			}, {
			// method defined in Logik
			remote: {
				postMessage: {}
			},

			local: {
				postMessage: function (message) {
					console.log("External Config JSON Received from iframe");
					configObj = JSON.parse(message);
					console.log(configObj);
		
					}
				}
		});

		var cfgData = {"runtimeToken":"<PLACEHOLDER>","quote":{"SBQQ__PricebookId__c":"
<PLACEHOLDER>","LGK__QueriedEditAccess__c":"<PLACEHOLDER>","LGK__FlightPath__c":"
<PLACEHOLDER>"},
"product":{"configuredProductId":"<PLACEHOLDER>","configurationAttributes":
{"LGK__LOGIK_Id__c":""},
"optionConfigurations":{"Dynamic":[]}},"layoutVarName":"<PLACEHOLDER>"};

			console.log(JSON.stringify(cfgData));
			rpc.postMessage(JSON.stringify(cfgData));
		</script>
	</head>
	<body>
		<div id="root"></div>
	</body>
</apex:page>

    Remplacez l’espace réservé <BASE_LOGIK_URL> en surbrillance dans VisualForce ci-dessus par l’URL de base de votre CPQ environnement.

    Remarque :
    Si vous avez nommé la bibliothèque easyXDM autrement que XDMFile1, mettez à jour les deux occurrences de XDMFile1 ci-dessus avec le nom que vous avez utilisé pour la ressource statique easyXDM.

    En fonction de ce que vous souhaitez faire, vous devez également associer une action pour le bouton « Devis ». Insérez l’action après la ligne console.log(configObj).

    Exemples :

    window.close() ; si vous souhaitez fermer toute la page du navigateur

    window.location = 'OùeverYouWantToRedirectTo' ; si vous souhaitez rediriger vers une autre page

    La bibliothèque EasyXDM

    Pour en savoir plus sur la bibliothèque easyXDM utilisée dans cette rubrique, consultez la rubrique easy XDM.net.