HTML フォーム ファイルを作成する

チュートリアルのこの部分では、UiPath API を使用してカスタム HTML フォーム ファイルを設計する方法を説明します。

1. HTML ファイルを作成し、<title> タグを使用してフォームにタイトルを付けます。
   たとえば、<title>My HTML Form</title> です。
2. ユース ケースに応じてフォームにスタイルを適用します。
   この例では、<style type="text/css"> タグを使用して CSS スタイルを適用します。
3. スタイルを適用した後、次のように UiPath API を JavaScript として HTML ファイル内に追加します。

   <script type="text/javascript">
   			var uiPathApi = {
                   getValue: function (elementId) {
                       // this is a callback, being called from the workflow
                       // enter your own code to get element values
                       var el = document.getElementById(elementId);
                       if (el.value == undefined) {
                           return el.innerHTML;
                       } else {
                           if (el.checked == undefined) {
                               return el.value;
                           } else {
                               return el.checked;
                           }
                       }
                   },
           
                   setValue: function (elementId, value) {
                       // this is a callback, being called from the workflow
                       // enter your own code to set element values
                       var el = document.getElementById(elementId);
                       if (el.value == undefined) {
                           el.innerHTML = value;
                       } else {
                           if (el.checked == undefined) {
                               el.value = value;
                           } else {
                               el.checked = value;
                           }
                       }
                   },
           
                   // Call this to trigger a "Form Message" event
                   // This function is set by the forms engine after the page loads,
                   // but declaring it here as empty helps with code autocompletion
                   sendMessage: function (id, value) { },
   			};
   	</script>

4. <script> タグ内で uipathAPI.sendMessage を使用して、各ボタンのフォーム イベントを作成します。
   この例では、[OK] ボタンがクリックされたときのイベントを作成します。

   function okClicked() {
   			uiPathApi.sendMessage("ok clicked");
   		}

   次に、[キャンセル] ボタンがクリックされたときのイベントを作成します。

   function cancelClicked() {
   			uiPathApi.sendMessage("cancel clicked");
   		}

5. コンポーネントを追加してフォームの構築を開始します。
6. フォームのタイトルを <div> タグ内に追加します。
   この例では、次のタイトルを使用します。

   <div>Welcome to UiPath! Click OK to continue or Cancel to close this automation.</div>

7. ボタン コンポーネントを追加して、このコンポーネントでトリガーするイベントを定義します。その方法は、ボタン コンポーネントをフォーム ビルダー内に設定する場合と同様です。
   この例では、次のボタンとそれに対応するイベントを追加します。

   <div class="actions">
   		<button class="confirm" onclick="okClicked()">OK</button>
   		<button class="cancel" onclick="cancelClicked()">Cancel</button>
   	</div>

8. time という名前の引数を使用して、フォームの下部に現在の日時を追加します。

   <div class="bottom">Current date/time is <span id="time">N/A</span></div>

HTML ファイルの設計が完了したら、このファイルを使用して Studio でプロジェクトの構築を開始します。