UiPath カスタム入力の使い方

# UiPath カスタム入力について
UiPathでユーザーにIDやパスワードなどを入力させてから処理を開始したいときに、入力ダイアログ１つずつしか入力が出来ないため、複数項目がある際に入力が少しめんどうになる。

しかし、カスタム入力だとHTMLファイルを表示し、入力フォームの項目などを自分で設定出来るため一括で入力できるようになり結構便利になる。

（不特定多数の人が利用するもので、毎回読み込むファイルを書き換えるのがめんどくさいときに凄い便利だったから自分用のメモとして。）

## UiPathカスタム入力作成方法

### カスタム入力用HTMLファイルの作成

```CustomForm.html
<!DOCTYPE html>
<html lang="ja">

<head>
   
  <meta charset="utf-8">
   
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <title>UiPath CustomForm</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
   <div class="form-wrapper w-50" style="margin-left: auto; margin-right: auto; margin-top: 5%;">
         <div class="form-group">
             <label for="exampleInputName">氏名</label>
             <input type="text" class="form-control" id="Name">
           </div>
         <div class="form-group">
             <label for="exampleInputID">ID</label>
             <input type="text" class="form-control" id="Id">
           </div>
         <div class="form-group">
             <label for="exampleInputPassword">Password</label>
             <input type="password" class="form-control" id="Password">
           </div>
         <button type="submit" class="btn btn-primary" onclick="SubmitValues()">OK</button>
  </div>

   <script type="text/javascript">
    function SubmitValues() {
      var Name = document.getElementById("Name").value;
      var Id = document.getElementById("Id").value;
      var Password = document.getElementById("Password").value;
      window.external.setResult(Name + "," + Id + "," + Password);
      return true;
    }
  </script>

</body>
</html>

```

上記の内容でCustomForm.htmlファイルを作成する。
CSSは[Bootstrap](https://getbootstrap.com/)を使っています。（見ればわかるかもしれないですが一応。。。）
https://docs.uipath.com/activities/lang-ja/docs/custom-input
こちらを参考に作っています。

### UiPathでカスタム入力アクティビティを配置する
UiPathのアクティビティ内の `システム` -> `ダイアログ` -> `カスタム入力`を利用します。
アクティビティ検索（Ctrl + Alt +F)でカスタム入力で検索するとすぐに出てきます。

![activity.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545124/bee0d9e3-01e3-c88d-87dc-882b70933c14.png)

`URI`（URLの間違いじゃないのかな・・・）に先ほど作成した`CustomForm.html`を指定します。
右側の`...`をクリックするとファイル選択画面が出てきます。
`結果`にはString型の変数を指定します。画像では`input_data`としてまいす。

![Main.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545124/59171067-c1e3-4140-02ce-8ce080c84f18.jpeg)


上記の画像のように`代入`と`繰り返し（コレクションの各要素）`と`１行を書き込み`アクティビティを配置します。
変数の`input_array`はString配列です。

```vb
' 代入アクティビティ
input_array = Split(input_data, ",")
' もしくは
input_array = input_data.Split(","c)
```

### 実行する

![kekka.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545124/5789bb60-d27f-ba97-f92a-714d39749470.png)

セキュリティソフトやIEの設定で画像上側のポップアップが出るかもしれませんが、クリックして許可をすれば動きます。（ポップアップが出ない何か対策法があればどなたか教えてくれるとありがたいです。）

![kekka2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545124/54265ae0-a9c1-a830-aa38-ae32c639e25c.png)

- 氏名：user
- id：id
- Password：pass

と入力してOKを押します。（OKボタンがなんかショボい）

### 出力結果

![output.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545124/a39275dd-7851-e649-a0ae-c2f27a6aae89.png)

`input_data`には入力した内容が`","(コンマ)`区切りで出力されます。
そのため、`代入`でString配列にし、 `繰り返し（コレクションの各要素）`で値を全て出力するようにします。
もう少しフォームはきれいに表示したいと思います。