ServiceNow からフォームにデータをマッピングする
- 更新日 2023/11/10
ServiceNow からフォームにデータをマッピングする
次の例を使用して、ServiceNow でホスト データを転送および消費する iFrame ウィジェットを開発する際にコードをモデル化できます。
開始する前に
次の例では、ServiceNow をホスト アプリケーションとして使用し、HTML と JavaScript を使用してホストから Automation Co-Pilot (iFrame ウィジェット) へのデータ転送を可能にしています。参照されたコードは、ホスト ページ (ServiceNow) から Automation Co-Pilot プロセスの初期フォーム要素に既存の値をマッピングします。この例のコードは汎用性があり、同様のアプリケーションで使用して、特定のビジネス ニーズの要素に加えられた編集の構造をモデル化できます。iFrame ウィジェットの開発と設定は、ServiceNow パラメーターに固有です。
次のことが完了していることを確認してください。
- エンド ユーザーに対し、システムで作成された [AAE_Robotic_Interface User] ロールが指定されている。
- Web インターフェースの Automation Co-Pilot for Business Users にアクセスできる。
- iFrame テクノロジーをサポートしている任意のホスト Web アプリケーションにアクセスできる。
- iFrame ウィジェットをすでにセットアップしている。詳細については、「Web アプリケーションで 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/aari/#/embedded?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
}
};
}
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);
};