ServiceNow からフォームにデータをマッピングする

次の例を使用して、ServiceNow でホスト データを転送および消費する iFrame ウィジェットを開発する際にコードをモデル化できます。

開始する前に

次の例では、ServiceNow をホスト アプリケーションとして使用し、HTML と JavaScript を使用してホストから Automation Co-Pilot (iFrame ウィジェット) へのデータ転送を可能にしています。参照されたコードは、ホスト ページ (ServiceNow) から Automation Co-Pilot プロセスの初期フォーム要素に既存の値をマッピングします。この例のコードは汎用性があり、同様のアプリケーションで使用して、特定のビジネス ニーズの要素に加えられた編集の構造をモデル化できます。iFrame ウィジェットの開発と設定は、ServiceNow パラメーターに固有です。

次のことが完了していることを確認してください。
  • エンド ユーザーに対し、システムで作成された [AAE_Robotic_Interface User] ロールが指定されている。
  • Web インターフェースの ビジネスユーザー向け Automation Co-Pilot にアクセスできる。
  • iFrame テクノロジーをサポートしている任意のホスト Web アプリケーションにアクセスできる。
  • iFrame ウィジェットをすでにセットアップしている。詳細については、「Web アプリケーションで iFrame ウィジェットを構成する」を参照してください。

手順

  1. ServiceNow から、[ビルドの開始] をクリックします。これにより、対応する開発者アカウントにリダイレクトされます。 ServiceNow 開発者アカウント
  2. 次の順に選択します。[すべて] > [サービス ポータル] > [サービス ポータルの設定] > [サービス ポータルの設定] > [ウィジェット エディター] > [新しいウィジェットの作成]。
  3. ウィジェットの作成中に [テスト ページの作成] を有効にすると、開発中に HTML テンプレートとクライアント スクリプトを表示できます。
  4. [プレビューの有効化] をクリックし、目のアイコンをクリックすると、[プレビュー] タブが表示され、コードの変更をテストできます。
  5. 次のサンプルを使用して、ビジネス要件で使用するコードをモデル化します。
    注: この例のコードは汎用性があり、モデルとして同様のアプリケーションで使用することができます。iFrame ウィジェットの開発と設定は、ServiceNow パラメーターに固有です。参照: HTML からフォームにデータをマッピングする。
    1. クライアント スクリプトに対応するコードを追加します。
    2. HTML テンプレートに Automation Co-Pilot iFrame 要素を追加します。
    3. クロス オリジンの問題を回避するために、パラメーター referrerpolicy=”origin” が HTML テンプレート内にあることを確認してください。
  6. ウィジェットを保存します。プレビューが読み込まれます。
  7. プレビューを確認し、HTML テンプレートとクライアント スクリプトに必要な編集を加えます。
  8. 変更内容を [保存] します。

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);
};