ValenceのGridウィジェットは多機能で、様々な表現を行うことができます。
カスタムフォーマットを使用して、Gridウィジェット内に画像や、進捗バーを表示するようなことも可能です。また、アイコン列を使用することで操作用のUIを追加することもできます。
Tipsでは、Gridウィジェットの様々な表示方法をご紹介します。
Gridウィジェットについて
Valence AppBuilderでアプリケーションを作成する場合、最も使用するウィジェットだと思います。
Gridウィジェットは、データソースの情報を一覧形式で表示することのできるウィジェットです。
データソースのデータをExcelファイル、csvファイル、pdfファイル、xmlファイル、jsonファイルとしてファイル出力できたり、ソート順を指定してデータを並び替えたり、グルーピングの機能を使用して、集計するようなことが可能です。
また、Gridウィジェットには、フォーマット機能があり様々な形式でデータを表示できます。
また、列に対して出力するHTMLを動的に変更することができるカスタムフォーマットの機能もあります。
今回のTipsでは、多機能なGridウィジェットの様々な表示方法として、フォーマット機能、カスタムフォーマット機能、RowBody機能についてご紹介します。
フォーマットを使用した表示拡張
フォーマットの設定
フォーマットの機能は、データソースで出力されるデータ形式に合わせて、表示を設定することができます。
チェックボックス
メールアドレス
HyperLink
進捗バー表示
上記のフォーマットは一例です。
通貨、日付等様々なフォーマットが用意されています。
カスタムフォーマット
JavaScriptで、特定値の場合に別の表現や値でGrid上のセル表示をすることができます。
例えば、データソースに性別のデータが1、2 のように登録されている場合、1の場合には男性、2の場合には女性 のように出力ができます。
また、タグを出力することで、セルに画像を表示するようなことも可能です。
RowBodyによる追加表示
RowBodyを使用することで、Gridの行の下部に追加データを表示することができます。
RowBodyにはhtmlやCSSが追加記述できるため、自由な表現が可能です。
RowBodyの機能は、「活動セッション」アプリでも使用されています。
おわりに
Tipsでは、GridウィジェットのフォーマットやRowbodyを使用した表示方法についてご紹介しました。
次回以降のTipsでも引き続き、Grid機能の様々な機能をご紹介します。