UiPath.Form.Activitiesって、こんなに便利だったのね！

## 皆もすなるQiitaといふものを、儂もしてみむとてするなり。

と言う訳で、こん＊＊は！はなっち！です。

UiPathブログ発信チャレンジ2022サマーの14日目の、@shuy(TIS株式会社)さんの記事はいかがでした？
まだの方は、ぜひこちらからどうぞ！
[【UiPath】On-Prem Orchestratorの運用設計を考えてみる（バックアップ編）](https://qiita.com/shuy/items/8517272a1d4fad3e4a79)

この記事はUiPathブログ発信チャレンジ2022サマーの15日目の記事です。

## 【序章】
「１画面内に、年と月を別々のフィールドに入力したいんだよね」ってお客様に言われて。
だったらFORMですねぇ～…「フォームを作成」アクティビティを配して、「フォームデザイナーを開く」から、「テキスト フィールド コンポーネント」をドラッグアンドドロップして。。。

ところが、実装した割にお客様のウケが良くない。EXCEL-VBAでのUserFormみたいなのをイメージしていたようで、仕様差し戻しになりました。。。

と言う **ダークな過去** があったので、UiPath.Form.Activitiesには寄らず触らずにいたのです。

今年度になって、ある業務をＡさんと私とで担当した時、複数ロボにしていこうって話から、それぞれで頑張っていきましょう！って、別々の組み方で作っていったのでした。

例えばファイル選択。

私は「シーケンス」アクテイビティに、「ファイルを選択」を使って、実装。
Ａさんは「フローチャート」アクテイビティに、「フォームを作成」を使って、実装。

「シーケンス」アクテイビティを使うか、「フローチャート」アクテイビティを使うかはともかく、同じ業務のロボで、操作性が違うのはダメだなと思って、私は、 **「フォームを作成」の函を開ける** 事になったのです。

## 【本題】
まず、私がイヤになったFORMの状況を確認しましょう。と言っても、もうアクティビティパックのバージョンは忘れてしまったので、最新のとマイナーバージョンが違う「1.8.0」と比較します。

### 「1.8.0」のインストール
無論、「パッケージを管理」から、"FORM”で検索して、表示された"UiPath.Form.Activities"を選択して、バージョンを「1.8.0」としてから、インストールします。この手順は不変ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/08e7321e-4c61-f743-89e7-3ce33783ea8b.png)

### 「1.8.0」の「ファイル/フォルダー パス コンポーネント」
「ファイル/フォルダー パス コンポーネント」を画面上にドラッグ アンド ドロップして、ファイルを選択させるシーンとするので「選択の種類」を「ファイル」に指定し、ファイル拡張子を決め、保存。
![FORM_1.8.0_001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/bfb5732a-8c3f-0b5c-1d73-aae48f19703b.png)
![FORM_1.8.0_002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/01bd8593-e0e0-1e89-dbdd-9cc02d594b3e.png)
こんな感じで実装可能なのは、皆さんご存知ですね。
ファイルが選択されていようがいまいが、ファイル名の受け渡しが行わわれるフィールドキーの変数はチェックしなければならないのでした。これは後続アクティビティでの実装ですね。

### 「1.9.6」のインストール
「パッケージを管理」からバージョンアップ対象の"UiPath.Form.Activities"を選択して、バージョンを「1.9.6」としてから、インストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/2b76a93f-d24b-e044-f63d-10f09e349650.png)

### 「1.9.6」の「ファイル/フォルダー パス コンポーネント」
基本的な設定の画面は変わりませんね。ただ、「1.8.0」の時は「設定の種類」は空白で、設定し忘れるとエラーになっていたのが、「1.9.6」では、初期値として「設定の種類」は「ファイル」になっています。
![FORM_1.9.6_001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/20dfe339-bf01-9543-4be3-cd29bce77a8b.png)
おぉ！必須指定のチェックボックスが新設されていますね！！これはいい！
![FORM_1.9.6_002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/f6cb759d-7994-79eb-67f8-ee42a21c8169.png)
この画面上の設定は変わりません。
![FORM_1.9.6_003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/469826b4-8e92-eb89-4fef-359b4b5892bc.png)

### 発展！
自分が知らなかっただけなのかもしれませんが、面白い機能を見つけましたので、書き連ねます。
+ 基本系（ユーザマスタを入力させようと、「ラベル」「ファイル選択肢」「必須」を設定しました！
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/04518372-06ff-f34e-5da8-68bd30d52f98.png)

+ [Select]を「選択」に変えたい！
該当コンポーネントへマウスオーバーすると、こんなダイアログが表示されます。
左から、「設定」「移動」「JSONを編集」「コピー」「削除」の機能アイコンです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/502a8ae9-c3d4-96d9-3f27-b03b22818eb7.png)
その「JSONを編集」を選択すると、異なる画面が表示されました。左側には **JSON形式の何か** が見えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/458fad7b-cb5c-66c6-b3b8-6a4ff78c32c9.png)
```
{
  "label": "ユーザマスタ",
  "customClass": "filePath",
  "showAllFileTypes": false,
  "validate": {
    "required": true
  },
  "key": "ユーザマスタ",
  "filePathExtension": [
    {
      "displayName": "ユーザ",
      "value": "*.xls*"
    }
  ],
  "input": true,
  "suffix": "Select ",
  "tableView": true,
  "type": "filePath"
}
```
ボタンに表示されている"Select"が、"suffix"ってキーのところに見えますね！
ここを変えてみましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/ff5f37ca-315a-5777-cc8d-bc4c9a45a6ff.png)
「Select」ボタンが、「決定」表示になりましたね！
```
{
  "label": "ユーザマスタ",
  "customClass": "filePath",
  "showAllFileTypes": false,
  "validate": {
    "required": true
  },
  "key": "ユーザマスタ",
  "filePathExtension": [
    {
      "displayName": "ユーザ",
      "value": "*.xls*"
    }
  ],
  "input": true,
  "suffix": "決定",
  "tableView": true,
  "type": "filePath"
}
```

JSONの中身を変える事で、見せ方が変わる事が分かったと事で、そのウィンドウの下にある **□ Full Schema** のチェックをONにしてみましょう！
表示していた行が、19から82と格段に増えましたね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/61907ffd-c245-e98e-74e7-135e2d32b06d.png)

```
{
  "label": "ユーザマスタ",
  "customClass": "filePath",
  "showAllFileTypes": false,
  "validate": {
    "required": true,
    "custom": "",
    "customPrivate": false,
    "strictDateValidation": false,
    "multiple": false,
    "unique": false,
    "minLength": "",
    "maxLength": "",
    "pattern": ""
  },
  "key": "ユーザマスタ",
  "filePathExtension": [
    {
      "displayName": "ユーザ",
      "value": "*.xls*"
    }
  ],
  "input": true,
  "suffix": "決定",
  "tableView": true,
  "type": "filePath",
  "placeholder": "",
  "prefix": "",
  "multiple": false,
  "defaultValue": null,
  "protected": false,
  "unique": false,
  "persistent": true,
  "hidden": false,
  "clearOnHide": true,
  "refreshOn": "",
  "redrawOn": "",
  "modalEdit": false,
  "dataGridLabel": false,
  "labelPosition": "top",
  "description": "",
  "errorLabel": "",
  "tooltip": "",
  "hideLabel": false,
  "tabindex": "",
  "disabled": false,
  "autofocus": false,
  "dbIndex": false,
  "customDefaultValue": "",
  "calculateValue": "",
  "calculateServer": false,
  "widget": {
    "type": "input"
  },
  "attributes": {},
  "validateOn": "change",
  "conditional": {
    "show": null,
    "when": null,
    "eq": ""
  },
  "overlay": {
    "style": "",
    "left": "",
    "top": "",
    "width": "",
    "height": ""
  },
  "allowCalculateOverride": false,
  "encrypted": false,
  "showCharCount": false,
  "showWordCount": false,
  "properties": {},
  "allowMultipleMasks": false,
  "mask": false,
  "inputType": "text",
  "inputFormat": "plain",
  "inputMask": "",
  "spellcheck": true,
  "id": "eghf5c",
  "keyModified": true
}
```

+ "tooltip"ってなんだ？
よくあるツールチップは、マウスオーバーすると説明書きがフワッと表示されますね。ここでの"tooltip"はどんなものでしょう。

```
  "tooltip": "ここはtooltopです",
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/d463b9b2-f72c-abb8-d2b8-3430bba1ad9d.png)
「ラベル」（ユーザマスタ）の脇に「？」が設定されましたね。
マウスオーバーしてみましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/b0ef240a-bc2d-cecc-08ab-151240812058.png)
はい！こんな感じで、tooltipに設定した文字列が表示されました！

+ "description"ってなんだ？
よくあるdescriptionは、いわゆる"説明"なのですが、ここでの"description"はどんなものでしょう。
```
  "description": "ここはdescriptionです",
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/4dc826cd-3fa1-9eb2-7ce0-c1e88c8a2df2.png)
ファイル選択した後に設定される選択したファイルのフルパス情報が表示されるフィールドの下に、表れました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/5f355189-ce9e-7191-877f-d37eee8ff07f.png)

+ "multiple"ってなんだ？
普通に考えると、ファイル選択ボタンに対して、選択できるファイルは一つですね。時として、同じようなファイルを一気に複数選びたい！なんて事もあります。こういった場合は、 **[かんたんファイル選択アクティビティ](https://marketplace.uipath.com/ja/listings/s2ppbkzlm6gnqdsvaz7fnq)** を使っていただくと嬉しいのですが、そこまでは要らないって方には、朗報な機能でした！

やってみましょう！
```
  "multiple": true,
```
[＋さらに追加]と言うボタンが追加されました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/c0b1e47c-e914-9181-cff0-260d608f9517.png)

プレビューしてみましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/b245126a-7aa5-5de4-2c91-898143896ce0.png)
[＋さらに追加]をクリックする事で、同じファイルですが選択する事が出来ました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/f5ecb131-8ebe-1c32-a0ce-2e079afef50e.png)
因みに右側の[×]をクリックする事で、不要なファイルの選択が削除できました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/188f87fd-12d5-94c3-e88c-7482188d059b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/ce2a3572-40bc-d6cb-dee9-17feddc042fc.png)

## 【気を付ける事】
今回、色々JSONを設定してどんな挙動をするのかを試してみました。その際、 **□ Full Schema** をオン/オフすると、修正したあとに保存していないと、初期状態に戻ってしまいます。これは忘れずに！か、"コンポーネント JSON"をコピペして、テキストファイル辺りで保存しておくといいですね。

それと、JSON形式がずれたまま
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/f1b09247-6354-cda5-76aa-9deae3085b91.png)
保存してしまうと、"UnKnown Component: Undefined"エラーになってしまいます（当然か...）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/8cf2cefc-03d8-67d6-348e-f7f6480708b9.png)
そういった時に、"JSONを編集"おろか、"編集"すら効きませんのでご注意ください！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669015/4d7e9b0e-23e7-3bd3-6022-79f053159de0.png)

## おわりに
いかがでした？

JSONで色んな挙動をするFORMが制御できるのですね。まだまだパラメタは他にもたくさんあります。ちょっと一山着いたら、また情報共有していこうと思います。

今回も読んでいただきありがとうございました！
是非UiPathでのロボ開発の一助になればと思っています。

ありがとうございました！