ValenceのGridウィジェットは多機能で、様々な表現を行うことができます。
カスタムフォーマットを使用して、Gridウィジェット内に画像や、進捗バーを表示するようなことも可能です。また、アイコン列を使用することで操作用のUIを追加することもできます。
Tipsでは、Gridウィジェットの様々な表示方法をご紹介します。
Gridウィジェットについて
Valence AppBuilderでアプリケーションを作成する場合、最も使用するウィジェットだと思います。
Gridウィジェットは、データソースの情報を一覧形式で表示することのできるウィジェットです。
データソースのデータをExcelファイル、csvファイル、pdfファイル、xmlファイル、jsonファイルとしてファイル出力できたり、ソート順を指定してデータを並び替えたり、グルーピングの機能を使用して、集計するようなことが可能です。
また、Gridウィジェットには、フォーマット機能があり様々な形式でデータを表示できます。
また、列に対して出力するHTMLを動的に変更することができるカスタムフォーマットの機能もあります。
今回のTipsでは、多機能なGridウィジェットの様々な表示方法として、フォーマット機能、カスタムフォーマット機能、RowBody機能についてご紹介します。
フォーマットを使用した表示拡張
フォーマットの設定
フォーマットの機能は、データソースで出力されるデータ形式に合わせて、表示を設定することができます。
![フォーマッティングとカスタムフォーマット](https://i0.wp.com/www.migaro.co.jp/tips/wp-content/uploads/2023/06/Tips-image202306_01.png?resize=960%2C540&ssl=1)
![フォーマッティングの設定](https://i0.wp.com/www.migaro.co.jp/tips/wp-content/uploads/2023/06/Tips-image202306_02.png?resize=960%2C540&ssl=1)
チェックボックス
![チェック表示](https://i0.wp.com/www.migaro.co.jp/tips/wp-content/uploads/2023/06/Tips-image202306_03.png?resize=960%2C540&ssl=1)
メールアドレス
![mail:to表示](https://i0.wp.com/www.migaro.co.jp/tips/wp-content/uploads/2023/06/Tips-image202306_04.png?resize=960%2C540&ssl=1)
HyperLink
![パイパーリンク表示](https://i0.wp.com/www.migaro.co.jp/tips/wp-content/uploads/2023/06/Tips-image202306_05.png?resize=960%2C540&ssl=1)
進捗バー表示
![進捗表示](https://i0.wp.com/www.migaro.co.jp/tips/wp-content/uploads/2023/06/Tips-image202306_06.png?resize=960%2C540&ssl=1)
上記のフォーマットは一例です。
通貨、日付等様々なフォーマットが用意されています。
カスタムフォーマット
JavaScriptで、特定値の場合に別の表現や値でGrid上のセル表示をすることができます。
例えば、データソースに性別のデータが1、2 のように登録されている場合、1の場合には男性、2の場合には女性 のように出力ができます。
![カスタムフォーマット例](https://i0.wp.com/www.migaro.co.jp/tips/wp-content/uploads/2023/06/Tips-image202306_07.png?resize=960%2C540&ssl=1)
また、タグを出力することで、セルに画像を表示するようなことも可能です。
![カスタムフォーマット画像表示](https://i0.wp.com/www.migaro.co.jp/tips/wp-content/uploads/2023/06/Tips-image202306_08.png?resize=960%2C540&ssl=1)
RowBodyによる追加表示
![Rowbody表示](https://i0.wp.com/www.migaro.co.jp/tips/wp-content/uploads/2023/06/Tips-image202306_09.png?resize=960%2C540&ssl=1)
RowBodyを使用することで、Gridの行の下部に追加データを表示することができます。
RowBodyにはhtmlやCSSが追加記述できるため、自由な表現が可能です。
RowBodyの機能は、「活動セッション」アプリでも使用されています。
![RowBody例](https://i0.wp.com/www.migaro.co.jp/tips/wp-content/uploads/2023/06/Tips-image202306_10.png?resize=960%2C469&ssl=1)
おわりに
Tipsでは、GridウィジェットのフォーマットやRowbodyを使用した表示方法についてご紹介しました。
次回以降のTipsでも引き続き、Grid機能の様々な機能をご紹介します。