徹底解説：UiPath From Activity（フォームアクティビティ）の使い方 - 上級編

#更新履歴
2020/12/11 ： 新規作成

#対象者
UiPath Form Activity を利用した以下の実装方法を知りたい方 
- 画像の表示
- PDFの表示
- 動的ドロップダウン
- カスケードドロップダウン
- Advanced Logic 機能

#前提知識
- UiPath Form Activity の基本的な使い方

「そもそもUiPath Form ってなんだ？？」、「まずは基本的な使い方を知りたい」という方は
↓ こちらの記事で基本的な使い方を徹底解説しています。デモ動画付きなので、興味があれば読んでみてください！
[徹底解説：UiPath Form Activity（フォーム アクティビティ）の使い方- 各部品の設定方法まとめ
](https://medium.com/kuratech5/%E5%BE%B9%E5%BA%95%E8%A7%A3%E8%AA%AC-uipath-from-activity-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0-%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%93%E3%83%86%E3%82%A3-%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9-%E5%90%84%E9%83%A8%E5%93%81%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95%E3%81%BE%E3%81%A8%E3%82%81-1ad4cff670cd)

#参考
- [UiPath Docs: About the Form Activities Pack] (https://docs.uipath.com/activities/docs/about-the-form-activities-pack)
- [From.io Help | User's Guide](https://help.form.io/userguide/introduction/)




#目次
1. 画像の表示
2. PDFの表示 (随時、追記予定）
3. 動的ドロップダウン (随時、追記予定）
4. カスケードドロップダウン (随時、追記予定）
5. Advanced Logic 機能 (随時、追記予定）

# UiPath From Activity（フォームアクティビティ）の使い方 - 上級編
サンプルを使って説明していくよ

## 環境
UiPath Studio v2020.10.2
UiPath.Form.Activities v1.1.7

## 1. 画像の表示

###サンプル
以下のようにフォーム内に画像を表示させることができる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713594/143d09fb-50ad-9bfb-96c5-b060682340b6.png)

### 使う部品
画像を表示させる方法は3種類！
- 「コンテンツ」 コンポーネントを使って表示させる方法
- 「HTML要素」 コンポーネントでBase64 Encodeで表示させる方法
- 「HTML要素」 コンポーネントでファイルバスを指定して表示させる方法

・「コンテンツ」 コンポーネントを使って表示させる方法
フォームデザイナー内で「詳細設定」のカテゴリ内にある「コンテンツ」コンポーネントを配置したら、以下のような画像が表示されるので赤枠のボタンを押して、挿入したい画像を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713594/c9fdaf5a-8f59-f7e1-d4d0-d5593bd00b17.png)

すると、↓こんな感じで画像を挿入できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713594/bbc6e05d-f006-4e1d-1e3c-38ea7a715f05.png)


・「HTML要素」 コンポーネントでBase64 Encodeで表示させる方法
フォームデザイナー内で「詳細設定」のカテゴリ内にある「HTML要素」コンポーネントを配置する。バインド設定のプロパティ名はなんでもOK。
表示設定内の"コンテンツ"に以下を設定しておく。

```
<img src="{{data.strImgBase64}}" />
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713594/745de8d0-ff06-faf5-96b7-cd28d76dcda7.png)

次に、[フォームを作成]アクティビティのプロパティ- フォームフィールドコレクションを以下のように設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713594/6ea99ad7-94f9-9ec1-403e-0f007402864b.png)

あとは、↑ここで設定した `strImgBase64` という変数にImage型の変数をBase64 文字列にエンコードした値を渡して上げればOK。


[画像を読み込み]アクティビティで画像を読み込んで
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713594/a7679872-c464-673e-9c5a-1ac2b9ffc1d7.png)

[代入]アクティビティで

```
strImgBase64 = "data:image/png;base64,"+img.Base64
```
※`img` は[画像を読み込み]アクティビティの出力です。
※`data:image/png`の部分は画像の拡張子によって変更する必要があります。


完成したフロー図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713594/84037f39-3e15-ab36-1389-73759f8751ae.png)

実行するとちゃんと画像が表示されます！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713594/c529ebf9-b77f-23e1-b991-6cbafec0f43a.png)


・「HTML要素」 コンポーネントでファイルバスを指定して表示させる方法
フォームデザイナー内で「詳細設定」のカテゴリ内にある「HTML要素」コンポーネントを配置する。バインド設定のプロパティ名はなんでもOK。
表示設定内の"コンテンツ"に以下を設定しておく。

```
<img src="/file://{{data.filePath}}" />
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713594/895b928c-bafd-5b2d-198d-c306e340c502.png)

あとは、 `filePath` に画像ファイルのパスを設定してあげるだけ

## 2. PDFの表示

サンプル
使う部品
フォームフィールドコレクションの設定
バインドの設定


## 3. 動的ドロップダウン

サンプル
使う部品
フォームフィールドコレクションの設定
バインドの設定

## 4. カスケードドロップダウン

サンプル
使う部品
フォームフィールドコレクションの設定
バインドの設定

## 5. Advanced Logic 機能

サンプル
使う部品
フォームフィールドコレクションの設定
バインドの設定