Skip to content

【UiPath】UiPathでカレンダー入力

Posted in ノート

Last updated on 2023年2月24日

「UiPathでのカレンダー入力はできるのか?」

ユーザビリティの向上を考えていた時こんなことが思い浮かんでしまい気になって試してみました。

この記事では(参考になるかは不明ですが)UiPathでカレンダー入力させる方法について紹介します。


【カスタム入力】アクティビティを使っていきます!

本記事では、UiPath Ver 2021.10.4 を使用しています。

カスタム入力アクティビティとは

カスタム入力アクティビティとはなんでしょうか。

おそらくほとんどの方がこのアクティビティを利用したことないのではないかと思います。

このアクティビティは、ユーザの入力を前提とするワークフローにおいて、ユーザにより適した方法でデータを入力してもらいたいときに利用するアクティビティとなります。

使い方は、専用のHTMLを作成し、そこで入力を行ってもらったデータを受け取り後続処理を行うようなイメージとなります。

私も今回初めて使いましたw

カレンダー入力を行うHTMLを作成してみる

開発ですが、 HTML と Javascript の知識が必要となります。

加え「かっこいいフォームを作りたい」となれば CSS の知識も必要となります。

とりあえず、作成してみたので下記コード記載します。

HTML5のインプットタイプ(date)を利用してもできるのですが、IEがHTML5に対応していないケースを考慮し Jquery のDatePicker を利用し開発しました。

<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- jQuery -->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- jQueryUI -->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <!-- jQueryUI DatePicker-->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
  <!-- カレンダースタイル -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
  <script>
    $(function () {
      $.datepicker.setDefaults($.datepicker.regional["ja"]);
      $("#calender_input").datepicker();
    });
    $(document).ready(function () {
      $('button').click(function () {
        var date = document.getElementById("calender_input").value;
        window.external.setResult(date);
        return true;
      });
    });
  </script>
  <style type="text/css">
    /* CSSはここに記入 */
  </style>
  <title>カレンダー入力</title>
</head>
<body>
  <h1 align="center">カレンダー入力</h1>
  <form name="mainForm" id="content">
    <div align="center">
      <p>年月日: <input type="text" id="calender_input" /></p>
      <button type="button" id="button">決定</button>
    </div>
  </form>
</body>
</html>

今回、CSSはしようしておらず、DataPicker のスタイルもデフォルトとなっています。

かっこいいフォームを作成したい方は、CSSを追加カスタマイズしてみてください。


実行してみる

今回は非常に簡素な【カスタム入力】→【メッセージボックス】というワークフローを作成しました。

ちなみに、【カスタム入力】アクティビティのプロパティは次のようになっています。

【URL】にて、利用するHTMLの場所を指定し、【結果】にてHTML上の入力結果を受け取ります。

では、ポチッと実行してみましょう。

簡単なHTMLが表示されましたね。

入力欄をクリックしてみます。

カレンダーが表示されました。

しっかり想定どおりの入力方法が実現できています。

4月5日をクリックし日付を決定してみます。

メッセージボックスに日付が表示されました。

ミッションコンプリートです。

MISSION COMPLETE

最後に


今回はUiPathで少し変わったことをしてみました。
ただこれ開発が大変になりますね。【カスタム入力】アクティビティの使い方がまだ完全に把握できていないのでもし需要があるようであれば引き続き共有したいと思います。

今回も最後までお読みいただきありがとうございました。

では!