Data Grid コンポーネントの解説動画

Forgeに最近追加された、Data Gridコンポーネントの使い方を解説した動画のメモです。

YouTubeのプレイリスト(2019/05/26時点で3本)があります。

以下、各動画のメモです。

Data Gridとは

OutSystemsに、JavaScriptで作られたグリッド(表形式にデータを表示/更新する機能を提供するもの。ソートやグループ化などの機能も備えている)を提供するForgeのコンポーネントです。

Forgeで「Data Grid」で検索すれば見つかります。

サンプルサイトを見るのがイメージをつかむ近道です。Excelそのものほどの自由度はありませんが、Excel風のUIを提供してくれます。

How to Add a Data Grid to an OutSystems Web Application

OutSystems11でついてくるようになった、サンプルデータベースをREST APIにラップし、グリッドに表示するまでの手順が示されている。

Data Gridコンポーネントの各要素(Web Blockなど)は、DataGridComponentと言うモジュールにあります。動画で出てくる部品をService Studioで見つけられなかったら、このモジュールの参照を追加してください(ショートカットキー:Ctrl + Q)。

グリッドそのものに対応するWeb BlockはGridContainerです。

表の列を任意に設定していくこともできるのですが、この動画中では、コンポーネントが取得したデータ構造から自動的に列を生成するオプションを使ってます(AutoGenerateColumnというプロパティをTrueに設定)。

Data Grid Column Basics

AutoGenerateColumnを使わずに、開発者が手動で列を設定する方法を解説する動画。

配置したGridContainerにGridPlaceholderというPlaceHolderがあるので、列に表示するデータ型に対応するWeb Blockをドラッグ&ドロップで配置していきます(Text型ならGridColumnTextなど)。

REST API戻り値のオブジェクト内で、値を特定するため、項目名をJSONFieldと言うプロパティに設定しています。この例は、REST APIのOutput Parameter「Products」の各要素オブジェクトから、Descriptionと言う項目の値を画面に配置したGridColumnTextに紐付け。

How To Use the Advanced Column Widget

列の表示内容を自由なHTMLを記述して決定する方法を解説。

Grid Column Advanced Web Blockを使います。ContentプロパティにJavaScript関数設定。その関数が返したHTMLタグを表示する仕組みです。

動画中では、画像とボタンのパターンがありました。

(2019/06/26追記)ここから下に認証の問題を書いてますが、DataGrid内に解決するためのExtensionがありました。以下Tweet参照

実は問題が1つあって、Webアプリケーションのモジュール内に配置したREST APIは、Webアプリケーションと認証を共有しないようです。REST API内でGetUserId()を呼ぶと結果が0(NullIdentifier():認証されていないことを示す)なので。

将来ここをうまく片付ける方法の解説が出るといいんですが。

今なんとか回避する方法を考えると

  • 認証クッキーは届いているので、Login Actionで認証してしまう(安全かどうか確証はないです)
  • 動画でも画像ダウンロードに使っていた方法ですが、REST APIで返すのと同じJSONを返すための画面を作成する

くらいが今のところ考えられます。

Ajax呼び出しでも安全に使える認証方法がある環境ならいいんですが。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする