Cas d’utilisation : Intégration de CPQ l’interface utilisateur dans une page Salesforce VisualForce
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.
« 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.
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.