Cas d’utilisation : intégrer l’interface CPQ utilisateur dans une page HTML
Découvrez comment intégrer l’interface CPQ utilisateur dans un iFrame HTML.
Cet article explique comment un administrateur peut afficher l’interface CPQ utilisateur dans un iframe dans n’importe quelle page HTML. En bref, la recette se compose de :
- les données que l’application hôte transmettra à la page HTML hôte, au format JSON
- la page HTML de l’hôte
- les paramètres de la Politique de sécurité du contenu [CSP], ajustés sur le CPQ serveur
Initialisation de la configuration au format de données JSON
Pour initialiser la configuration, transmettez les données de champ de base à la page. Voici les paramètres que vous pouvez transmettre, représentés au format JSON :
{
"runtimeToken": "...",
"quote": {
"SBQQ__PricebookId__c": "...",
"LGK__QueriedEditAccess__c": "Active",
"LGK__FlightPath__c": "None"
},
"product": {
"configuredProductId": "...",
"configurationAttributes": {
"Logik__Id__c": null
},
"optionConfigurations": {
"Dynamic": []
}
},
"layoutVarName": "someLayoutVarName"
}Remplacez les ellipses dans le JSON ci-dessus par les valeurs appropriées de l’environnement, du catalogue de prix et de l’ID CPQ du produit.
Parfois, vous souhaiterez peut-être afficher une mise en page par défaut 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 avec laquelle la page de CPQ configuration se charge, transmettez « layoutVarName » : « <nom variable de la mise en page à afficher par défaut> » au niveau supérieur du JSON ci-dessus.
Page HTML de l’hôte
Vous devrez héberger l’application parente. Pour des raisons de sécurité, cette page HTML d’application/d’hôte ne peut pas être localhost. L’exemple HTML suivant est un proxy pour la page hôte dans laquelle vous avez l’intention d’intégrer l’interface CPQ utilisateur. La page importe la bibliothèque JavaScript easyXDM, ce qui facilite la communication avec l’interface CPQ utilisateur. Ensuite, easyXDM analyse l’entrée JSON, la transpose et transmet les données à la page en tant qu’appel CPQ de procédure distante.
Pour traiter les données transmises depuis l’interface CPQ utilisateur et les exploiter sur cette page HTML, examinez les valeurs écrites dans la console du navigateur dans la ligne console.log de couleur bleue de JavaScript ci-dessous. Les administrateurs avancés peuvent exploiter ces données en ajoutant plus de JavaScript dans cette zone.
Remplacez l’espace réservé <BASE_LOGIK_URL> par l’URL de base de l’environnement CPQ .
<!DOCTYPE html>
<html lang="en">
<head>
<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="assets/js/easyXDM/2.5.0/easyXDM.min.js"
ssorigin="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 CPQ
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>
</html>Paramètres de la politique de sécurité du contenu
Pour intégrer l’application CPQ dans un iframe, vous devez la configurer de manière à autoriser le domaine de l’application hôte. Enregistrez un ticket auprès CPQ du support, décrivez votre intention d’intégrer CPQ l’interface utilisateur dans une page HTML et demandez que les paramètres CSP de votre CPQ serveur soient configurés pour prendre en charge l’URL de domaine de l’application parente.
La bibliothèque EasyXDM
Pour en savoir plus sur la bibliothèque easyXDM, consultez la rubrique XDM.net facile.