ServiceNow의 데이터를 양식에 매핑
- 최종 업데이트2024/10/31
ServiceNow의 데이터를 양식에 매핑
다음 예제는 ServiceNow에서 호스트 데이터를 전송하고 사용하는 iFrame 위젯을 개발할 때 코드를 모델링하는 데 사용할 수 있습니다.
시작하기 전에
다음 예는 ServiceNow를 호스트 애플리케이션으로 사용하여 HTML 및 JavaScript를 통해 호스트에서 Automation Co-Pilot(iFrame 위젯)로 데이터를 전송하는 방법을 보여줍니다. 참조된 코드는 호스트 페이지(ServiceNow)의 기존 값을 Automation Co-Pilot 프로세스 초기 양식 요소에 매핑합니다. 이 예의 코드는 일반적이며, 특정 비즈니스 요구사항의 요소를 편집하기 위해 모델 구조와 유사한 애플리케이션에 사용할 수 있습니다. iFrame 위젯의 개발 및 설정은 ServiceNow 매개변수에만 해당됩니다.
다음을 완료하도록 하십시오.
- 최종 사용자에 대해 시스템에서 생성한 AAE_Robotic_Interface User 역할을 제공했습니다.
- 웹 인터페이스에서 비즈니스 유저용 Automation Co-Pilot에 액세스할 수 있습니다.
- iFrame 기술을 지원하는 (사용자가 선택한) 호스트 웹 애플리케이션에 액세스할 수 있습니다.
- iFrame 위젯이 설정되어 있습니다. 자세한 내용은 웹 애플리케이션에서 iFrame 위젯 구성을 참조하십시오.
절차
- ServiceNow에서 작성 시작을 클릭합니다. 이렇게 하면 해당 개발자 계정으로 리디렉션됩니다. ServiceNow 개발자 계정
- 다음을 탐색합니다. .
- 위젯 생성 시 테스트 페이지 생성을 활성화하면 개발 중 HTML 템플릿과 클라이언트 스크립트를 확인할 수 있습니다.
- 미리보기 활성화를 클릭하고 눈 아이콘을 클릭하면, 코드 변경 사항을 테스트할 수 있는 미리보기 탭이 표시됩니다.
- 다음 샘플을 사용하여 비즈니스에 사용할 코드를 모델링하십시오.주: 이 예의 코드는 일반적이며 유사한 애플리케이션에서 모델로 사용할 수 있습니다. iFrame 위젯의 개발 및 설정은 ServiceNow 매개변수에만 해당됩니다. 참조: HTML의 데이터를 양식에 매핑.
- 클라이언트 스크립트에 해당 코드를 추가합니다.
- HTML 템플릿에 Automation Co-Pilot iFrame 요소를 추가합니다.
- 원본 간 문제를 방지하려면
referrerpolicy=”origin”매개변수가 HTML 템플릿에 있는지 확인하십시오.
- 위젯을 저장합니다. 미리보기가 로드됩니다.
- 미리보기를 검토하고 HTML 템플릿과 클라이언트 스크립트를 필요에 따라 편집합니다.
- 변경 사항을 저장합니다.
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>
클라이언트 스크립트 샘플
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);
};