Mappage des données de ServiceNow vers un formulaire
- Dernière mise à jour2024/10/31
Mappage des données de ServiceNow vers un formulaire
Vous pouvez utiliser l'exemple suivant pour modéliser le code lors du développement du Widget iFrame en vue de transférer et de consommer les données de l'hôte dans ServiceNow.
Avant de commencer
Dans l'exemple suivant, nous utilisons ServiceNow comme application hôte pour illustrer l'utilisation de HTML et de JavaScript permettant le transfert de données de l'hôte vers Copilote d\'automatisation (Widget iFrame). Le code référencé mappe les valeurs existantes de la page hôte (ServiceNow) sur les éléments du formulaire initial du processus Copilote d\'automatisation. Le code de cet exemple est générique et peut être utilisé dans des applications similaires pour modéliser la structure des modifications apportées aux éléments selon vos besoins spécifiques. Le développement et la configuration du Widget iFrame sont propres aux paramètres de ServiceNow.
- A fourni un rôle AAE_Robotic_Interface User créé par le système pour l'utilisateur final.
- A accès à l'Automation Co-Pilot pour utilisateurs professionnels sur l'interface Web.
- A accès à l'application Web hôte de votre choix qui prend en charge la technologie iFrame.
- Vous avez déjà configuré le widget iFrame. Pour plus de détails, consultez l'article Configurer un widget iFrame dans une application Web.
Procédure
- Dans ServiceNow, cliquez sur Start Building. Vous êtes redirigé vers votre compte de développeur correspondant. Compte de développeur ServiceNow
- Accédez aux pages suivantes : .
- Activez l'option Créer une page de test lors de la création du widget pour afficher le modèle HTML et le script client pendant le développement.
- Cliquez sur Enable Preview (Activer l'aperçu) et cliquez sur l'icône d'œil pour afficher l'onglet d'aperçu permettant de tester les modifications du code.
- Utilisez l'exemple suivant pour modéliser le code que vous utiliserez dans le cadre de votre activité professionnelle.Remarque : Dans cet exemple, le code est générique et peut être utilisé comme modèle dans des applications similaires. Le développement et la configuration du Widget iFrame sont propres aux paramètres de ServiceNow. Voir : Mappage des données de l'HTML vers un formulaire.
- Ajoutez le code correspondant au script du client.
- Ajoutez l'élément iFrame Copilote d\'automatisation au modèle HTML.
- Veillez à ce que le paramètre
referrerpolicy=”origin”figure dans votre modèle HTML afin d'éviter les problèmes entre origines.
- Enregistrez votre widget. L'aperçu va se charger.
- Passez en revue l'aperçu et apportez les modifications nécessaires au modèle HTML et au script du client.
- Enregistrez vos modifications.
Exemple de HTML
<div>
<!-- your widget template -->
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" value="sikha"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" value="poyyil"><br><br>
<iframe
src='https://aa-pet-us-17.my.automationanywhere.digital/copilot?tags=%5B%5D'
name="aari-embedded-app"
width="100%"
height="500px"
style="border: none;"
referrerpolicy="origin">
</iframe>
</div>
Exemple de script client
api.controller=function() {
/* widget controller */
var c = this;
console.log(c)
console.log(window)
var getLatestData = function() {
return {
167 : {
TextBox0: document.getElementById("fname").value,
TextBox1: document.getElementById("lname").value,
hiddenVariable0: document.getElementById("id").value
}
};
}
console.log("Data" + JSON.stringify(getLatestData()));
console.log(event)
setTimeout(function() {
window.addEventListener('message', function(event) {
if(event.data.aariDataRequest === 'aari-data-request') {
var mappedHostData = getLatestData();
var id = event.data.processId ||event.data.botId;
console.log("Event data: " + JSON.stringify(event.data));
console.log("Data passed: " + JSON.stringify(mappedHostData[id]));
var iframeElement = document.getElementsByName("aari-embedded-app")[0];
iframeElement.contentWindow.postMessage({data: mappedHostData[id]
},
iframeElement.getAttribute("src"));
}
});
}, 100);
};