カスタム HTML を使用してフォームを設計する

Studio で構築した uiform ファイルを使用してフォームを作成する代わりに、プロジェクト内にアップロードした HTML ファイルを使用してカスタム フォームを作成できます。このチュートリアルでは、HTML ファイルを使用してシンプルなフォームを作成および表示する方法を説明します。ユーザーがこのフォームを操作すると、短いメッセージ、2 つのボタン、および現在の日時が表示されます。

ヒント:

これらの手順を適用してカスタムの HTML 吹き出しファイルを作成することもできます。

フォームの値を取得・設定したり、フォーム イベントをトリガーしたりできるカスタム HTML フォームを構築するには、特定の UiPath API を使用する必要があります。以下のサンプルには、お使いのカスタム HTML フォームに統合する必要がある UiPath 固有の API が 3 つ含まれています。

• getValue: function (elementId) - フォームの値を取得できます。
• setValue: function (elementId, value) - フォームの値を設定できます。
• sendMessage: function (id, value) - [終了] などのフォーム イベントをトリガーできます。[フォーム トリガー アクティビティ] 内では、この API を使用して作成したフォーム イベントにはフォーム メッセージ イベントとしてのみアクセスできます。

カスタム HTML フォーム ファイルに以下のサンプル API を追加します。

<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>

このチュートリアルの結果については、以下のビデオをご覧ください。

ワークフローの例

この手順に従ってチュートリアルをご自身で試してみるには、こちらのサンプル プロジェクトをご覧ください。