MotionBoardのボードから明細表データを更新する

# はじめに
MotionBoardのボードでは、各種データを表示するだけではなく、ボード上で明細表形式のデータを更新することが可能です。
ここでは、データ更新の設定方法や注意点などを備忘録としてまとめます。

:::note info
補足
本記事の内容・キャプチャ等はMotionBoard Ver.6.3のものです。
詳細は[MotionBoard Ver.6.3公式マニュアル＞明細表アイテムからデータソースを更新する](https://cs.wingarc.com/manual/mb/6.3/ja/UUID-e6684b01-fd02-c857-543b-251c9295c93d.html#UUID-96c683d3-ebb3-5b67-b219-aea979bed086)を参照してください。
:::

# 前提
データ更新は下記条件で実装可能となります。

・設定は「ボード管理者」のシステムロールを持つユーザーで行う必要がある
・設定済ボードのデータ更新は「一般ユーザー」のシステムロールを持つユーザーでも実施可能
・元データはDr.Sumのテーブルまたは共有アイテムに格納したCSVのいずれか

:::note warn
注意
上記の元データに関する前提は、マニュアルにはっきり記載した箇所が見つけられなかったため、個人的に動作確認できた範囲で書いています。
CSVでもボード専用CSVでは、データソースエディタ画面で「入力」メニューが表示されないためデータ更新設定ができませんでした。
また、Excelに関しては共有アイテムでもボード専用でもどちらでもデータソースエディタ画面で「入力」メニューが表示されずデータ更新設定ができませんでした。
:::

# 共有CSVの用意とデータソースの作成

CSVを用意し、ボードを編集モードにして画面上部のボードメニューの「管理＞共有アイテム管理」から「CSV/Excel」タブを開き、用意しておいたCSVファイルをアップロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780637/86b328a6-f423-4f70-de39-0375cd1dab49.png)

画面下部のエディタメニューから明細表作成ボタンをクリックし、レイアウト上に配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780637/d54e6989-b5dd-0f60-5738-db296d90f40e.png)

「明細表新規作成」画面で、アイテム名称を入力してデータソースを新規作成します。
（専用データソース、共有データソースどちらでも構いません）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780637/93c7abcd-246b-b13d-0ca0-bd208b6c1ac7.png)

「OK」をクリックすると「データソース選択」画面が表示されます。
接続先から「text」を選択すると下に共有アイテムに格納してあるCSVが一覧表示されるので選択し、「OK」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780637/77b44f07-bd45-aa9f-fba4-d7a598027dad.png)

元の画面に戻ったら「OK」をクリックするとボード上のレイアウトに明細表アイテムが追加されます。

# データソース編集＞データベース入力設定
追加された明細表をクリック⇒「データソース編集」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780637/ff255101-5111-e0c2-585d-5518db4eb3ec.png)

データソースエディタが表示されたら「入力」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780637/6c692fb7-c642-8aa3-113a-237eae5ad409.png)

「データベース入力」画面が表示されたら、「項目値の編集を許可する」にチェックを入れて、追加・更新・削除を許可するチェックボックスを利用用途に応じて設定してください。
※今回のサンプルでは全てチェックを入れてみます。
「Ok」をクリックし、元のデータソースエディタが表示されたら「OK」をクリックして設定を確定し、ボードを保存⇒ボードの編集を終了します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780637/e9a1e118-8e06-571e-5063-d5f7d29feb9c.png)

# 設定済のボードでデータ入力する
ここまでで設定は完了したので、実際にデータを更新してみましょう。
明細表からデータを修正すると青色にハイライトされます。
また、削除のチェックボックスにチェックを入れると濃赤色にハイライトされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780637/1a1d760a-8b20-41a1-a033-83bff6fd2cf2.png)

この状態で保存ボタンをクリックすると、ダイアログが表示されるので「OK」をクリックすると修正内容が確定されてデータソースが更新されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780637/26807f46-8955-f40f-eb3b-7bcf3b56cf73.png)

# カスタマイズ

明細表のアイテムプロパティから表示スタイルを「一覧形式」⇒「詳細形式」に変更すると、レコード単位の表示にすることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780637/acf4189b-9ddb-e51d-ec0b-95dc173983d6.png)

↓

レコード単位で表示すると、選択している１レコードだけが表示されるので、必要なレコードだけを確実に修正・更新するのに向いています。
※上部の右向き・左向き三角マークをクリック、またはレコード番号を入力するとレコードを移動できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780637/b4b7cbec-5354-5bd3-6cda-5e86fe2beccb.png)

また、明細表のアイテムプロパティの「メニュー」タブから、メニューやボタンの表示/非表示を設定できます。
ユーザーにとって不要なボタンなどを非表示にすることで、画面を見やすくすることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780637/5b2c853a-192f-10af-a219-0c1e9dec3a51.png)

また、データベースエディタで「入力」をクリックし表示される「データベース入力」画面から「バリデーション設定」をクリックすると、データ入力時のバリデーションを設定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780637/f6694a20-ad20-1115-ce91-28fce3cfdaed.png)

例えば、社員コードや氏名はユーザーが更新できないように入力禁止にしたり、受注日や顧客コードは必須項目にして空にできないようにしたりすることができます。
また、入力データの型を整数や日付型などに制限することもできます。
バリデーション設定の詳細は、「[公式マニュアル＞項目値のチェック条件（バリデーション）を指定する](https://cs.wingarc.com/manual/mb/6.3/ja/UUID-e6daf5c1-e29f-2e35-a9ae-883b0377dc26.html#UUID-c1f8539c-6feb-2441-f2f4-21e38d661ced)」を参照してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780637/377ea0f4-b025-9e08-e953-c0f3af23b244.png)

データ入力の設定方法については以上となります。
上手く使用すると、これまでファイルサーバやメール等でやり取りしていたドキュメントをMotionBoard上に移行することができ、すぐにMotionBoard上で集計・表示したり他のデータソースと結合して使えたりするので便利です。ぜひ活用してみてください。