UiPath Action Center フォームタスクのフォーマットを動的に作成

## はじめに
今回はUiPath Action Centerに作成したフォームを表示する際に動的にフォーマットを作成したいと思います。

UiPath Action Centerのフォームタスクについては下記を参照ください。

https://www.uipath.com/ja/community-blog/tutorials/action-center

## 環境設定
**Studio及びOrchestrator**
- Studio：19.10以上
- Orchestrator：19.10以上

**開発環境**
プロセスで作成せずにオーケストレーションプロセスで作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736921/0c682f9e-5bb5-8ae3-02a7-2871734d4870.png)

**Studioパッケージインストール**
- UiPath.Form.Activities
- UiPath.FormActivityLibrary
- UiPath.Persistence.Activities 
:::note warn
**注意**
UiPath.Form.ActivityLibrary✖
UiPath.FormActivityLibrary◯
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736921/b1d40c0c-15e9-0522-e202-778e255aec60.png)
:::

## 実装
### (1)テンプレート用のフォームフォーマットを作成
UiPath Form Designerでフォームのフォーマットテンプレートを作成できます。
名前を付けて保存を押下すると、Jsonファイルがダウンロードされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736921/8dd02ae9-fcb0-86f0-ae5c-01618787ea94.png)

```UiPath_Forms_Template.json
{
  "id": "00000000-0000-0000-0000-000000000001", ←フォームID
  "form": [
    {
      "collapsible": false,
      "key": "panel",
      "type": "panel",
      "label": "Panel",
      "input": false,
      "tableView": false,
      "components": [
      この部分を増やすことでテキスト生成
      ____________________________________
        {
          "label": "TextArea1", ←テキストラベル名
          "labelPosition": "left-left",
          "tableView": true,
          "key": "taxt",
          "type": "textarea",
          "labelWidth": 10,
          "input": true,
          "hideOnChildrenHidden": false
        },
        {
          "label": "TextArea2", ←テキストラベル名
          "labelPosition": "left-left",
          "tableView": true,
          "key": "taxt",
          "type": "textarea",
          "labelWidth": 10,
          "input": true,
          "hideOnChildrenHidden": false
        }
      ____________________________________
      ]
    },
    {
      "type": "button",
      "label": "Submit",
      "key": "submit",
      "disableOnInvalid": true,
      "input": true,
      "tableView": false
    }
  ]
}
```
「UiPath_Forms_Template.json」で開くと下記のフォーマットで表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736921/8d919a32-5e03-7b15-78fb-faae1c6dbca1.png)

### (2)フォームフォーマットJSONの生成
フォーム生成用のJsonテンプレートを作成します。

```Forms_Template.json
{
  "id": "{0}", ←フォームID
  "form": [
    {
      "collapsible": false,
      "key": "panel",
      "type": "panel",
      "label": "Panel",
      "input": false,
      "tableView": false,
      "components": [
      {1}
      ]
    },
    {
      "type": "button",
      "label": "Submit",
      "key": "submit",
      "disableOnInvalid": true,
      "input": true,
      "tableView": false
    }
  ]
}
```
Forms_Template.jsonの{0}には重複しないフォームIDを生成してください。

:::note warn
**フォームID**
8-4-4-4-12(00000000-0000-0000-0000-000000000000)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736921/a7b03948-2f67-9a78-3ef5-f28924b15a38.png)
:::

:::note alert
**フォームIDの生成(回避策)**
アセットなどでフォームID用のカウントすると良い。
:::

Forms_Template.jsonの{1}にTextArea用のテンプレートを追加していきます。

```TextArea_Template.json
{
    "label": "{0}", ←テキストラベル名
    "labelPosition": "left-left",
    "tableView": true,
    "key": "{1}", ←プロパティ名
    "type": "textarea",
    "labelWidth": 10,
    "input": true,
    "hideOnChildrenHidden": false
}
```
TextArea_Template.jsonの{0}/{1}にはテキストラベル名/プロパティ名を設定します。

### (3)フォームフォーマットのJSONファイルを取り込む
ローカルのフォームファイルを使用：オン
フォームファイルのパス：JSONファイルパス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736921/edb831a1-1c76-27d9-5480-c4795a7ebde6.png)

### (4)完成
フォームJSONの生成はうまいこと設定してもらえれば良いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736921/9e9f8cfc-bf3b-d7e0-3aea-1c5c6926645e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736921/fcde03e0-0347-e88c-faea-7dbc0a28dd2f.png)

## 結果
UiPath Action Centerに5個のタスクを作成し、フォームのフォーマットも動的に生成できるようになりました。
フォーマットを動的にする場合は出力から結果を取得します。
1
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736921/7c71156c-622d-1f5c-3dbf-f8f9ae9b06b5.png)
2
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736921/30e33ca9-c3ea-c29c-dafc-0798dc61a209.png)
　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　・
5
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736921/ab5b3569-3657-6001-e3ff-f97229d4d216.png)

## まとめ
フォーム抽出器で取得した値をフォームタスクで表示/非表示することも可能です。
パーセントとかつければそれっぽいフォームを作成できます。
今後、フォーム抽出器も取り扱ってみたいと思います。

UiPath Action Centerのフォームタスクについては下記を参照ください。

https://www.uipath.com/ja/community-blog/tutorials/action-center