BloomMakerコンテンツ：変数に一覧データから「複数」選択したものを代入する

##はじめに
**参考サイト①**案内しているのは単一選択したレコードをオブジェクトに代入する方法です。
「変数に一覧データから選択したものを代入する」での複数選択はできません・・・
IM-BISの「一覧選択」アイテムに[「マルチセレクト」](http://accel-archives.intra-mart.jp/2021-spring/document/bis/public/bis_designer_help/item_help/common/item/product/80/itemSelect/std.html?highlight=%E3%83%9E%E3%83%AB%E3%83%81%E3%82%BB%E3%83%AC%E3%82%AF%E3%83%88)機能はありますが・・・
この記事では **BloomMaker**のエレメントとアクションで、複数選択機能を作ってみました。

2021/10追記
２０２１Summer~ 以下の改善要件がありました。
[アクションアイテム「変数○に一覧データ○から選択したものを複数代入する」を提供します。](https://issue.intra-mart.jp/issues/33025)
残念ですが、個別バッチモジュールはない。古いバージョンでは使えません。
そして、BloomMakerのソースは公開していませんので、独自でカスタマイズも出来なさそう。

##参考サイト
①[IM-BloomMaker のアクション「変数に一覧データから選択したものを代入する」](https://dev.intra-mart.jp/cookbook163551/)
②[IM-BloomMaker 繰り返しエレメントでの変数の使い方](https://dev.intra-mart.jp/cookbook163289/)
##大まかな流れ
・リッチテーブルの複数選択機能を利用する
・リッチテーブルをダイアログに表示する
・選択したレコードを変数に設定する
・テーブル（繰り返し）エレメントに設定して検証する
##変数例
    {
      "sample_multiSelect_indexList1": [],
      "sample_multiSelect_indexList2": [],
      "sample_multiSelect_selectedData1": [
        {
          "string": null,
          "number": null,
          "date": null,
          "boolean": null
        }
      ],
      "sample_multiSelect_selectedData2": [
        {
          "string": null,
          "number": null,
          "boolean": null
        }
      ],
      "sample_headerDesigner1": {
        "string": "string",
        "number": "number",
        "date": "date",
        "boolean": "boolean"
      },
      "sample_headerDesigner2": {
        "string": "string",
        "number": "number",
        "boolean": "boolean"
      },
      "sample_listData1": [
        {
          "string": "value1",
          "number": 100,
          "date": "2019-01-01T00:00:00.000Z",
          "boolean": true
        },
        {
          "string": "value2",
          "number": 200,
          "date": "2019-02-02T00:00:00.000Z",
          "boolean": false
        },
        {
          "string": "value3",
          "number": 300,
          "date": "2019-03-03T00:00:00.000Z",
          "boolean": true
        },
        {
          "string": "value4",
          "number": 400,
          "date": "2019-04-04T00:00:00.000Z",
          "boolean": false
        },
        {
          "string": "value5",
          "number": 500,
          "date": "2019-05-05T00:00:00.000Z",
          "boolean": true
        },
        {
          "string": "value6",
          "number": 600,
          "date": "2019-06-06T00:00:00.000Z",
          "boolean": false
        }
      ],
      "sample_listData2": [
        {
          "string": "value1",
          "number": 100,
          "boolean": true
        },
        {
          "string": "value2",
          "number": 200,
          "boolean": false
        },
        {
          "string": "value3",
          "number": 300,
          "boolean": true
        },
        {
          "string": "value4",
          "number": 400,
          "boolean": false
        },
        {
          "string": "value5",
          "number": 500,
          "boolean": true
        },
        {
          "string": "value6",
          "number": 600,
          "boolean": false
        }
      ]
    }
上記をJSONエディターに貼り付けた後、変数の型を確認してください、一部を変換する必要はあります。
![変数例.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609679/37cb6836-572c-0fe6-09e7-5f861cf1b96f.png)

##実装例
#####画面作成（エレメント配置）
※具体的な設定は省略・・・
Main画面
![Main画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609679/b1609a83-3467-acde-2adf-f96ae69da34b.png)
一覧選択画面（「一覧選択２」はコピーして作ってね）
![一覧選択画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609679/ac6fc0df-ac47-d66e-4012-9ac2c1a410d2.png)
#####アクション作成
※一覧選択の決定ボタン押下のイベント処理のみを例として挙げますね。
残りのアクションは適当に実装してください〜
![アクション作成_選択決定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609679/c7254421-5447-1206-e864-343f6a2f3c0b.png)
#####エレメント設定
リッチテーブル
![エレメント設定RichTable.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609679/350cad42-d4e4-3186-903f-e3e86bc5ce79.png)
##結果
選択
※FormaDesignerの「一覧選択アイテム」と違って、ページ跨いても選択可能。
　以下の例では１ページ目のvalue１と２ページ目のvalue6になります
![選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609679/15c5f5ef-88f7-b63b-8339-0c2c1b03523d.png)
Main画面に表示
![Main画面一覧に表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609679/a346816a-0599-602e-8d14-b9a0903b96a8.png)
##まとめ
今回のサンプルでは以下の点を勉強しました・・・
>テーブル（繰り返し）の使い方
>リッチテーブルの使い方
>決定ボタン押下時のカスタムスクリプトの書き方

上記のサンプルでは一つの画面に2つの「複数選択機能のエレメント群」を設定しています。
もし、もっと選択機能を配置したい場合、多少手間かかりますね・・・

２０２０Summerから[ エレメントセット ](http://accel-archives.intra-mart.jp/2021-spring/document/bloommaker/public/im_bloommaker_user_guide/texts/guidance/element_sets/index.html)という機能が提供し始めました。重複なエレメント群とアクション設定などを共通部品として作れるかもしれませんね。試しているところです・・・
2021/11/27追記：変数に属性名を設定しないと、自動で変換してもらえないので、実現できませんでした。


（IML資格目指し、eLearning受講中です・・・誤りがありましたら、ご意見いただければ助かります！:relaxed:・・・）