2017.05.23

Reactで参照専用の軽量DataTableのAppComponentを作成してみた

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

Visualforceページ、重くありませんか?
「既存のコンポーネントをReactで作り直したら速くなるのでは?」と思いReactでデータテーブルのAppComponentを作成したところ
想像以上に速かったので今回はそちらのご紹介をしたいと思います。

インストールはこちらから

リンクをクリックすると以下の画面が表示されます。
AppComponentをインストールしたい組織のID/パスワードを入れるとインストールが開始されます。




当コンポーネントは参照専用の軽めなデータテーブルです。データが多くてもあまり待たずに表示できます。

  • 主従・参照項目は親の名前項目の値が表示されます。
  • チェックボックス型はチェックボックスで表示されます。
  • URLやメール項目はハイパーリンクで表示されます。
  • リッチテキスト項目はリッチテキストとして表示されます。

また、全項目を対象としたローカルでの絞り込みも可能です。

※現状チェックボックス型の値も"true"/"false"という文字列として絞り込み対象となります

プロパティの説明

  • SObject データテーブルに表示するオブジェクトを指定します(ページ作成時に指定した主オブジェクトに関連するオブジェクトのみ選択可能です)
  • 主オブジェクトと関連する チェックを入れると主オブジェクトに紐づく子レコードのみが表示されます。チェックを外すと全レコードが表示されます。
  • Fields データテーブルに表示する項目を指定します。オブジェクトは「SObject」プロパティと同じものを指定してください。
  • ページング ページングの有無を指定します
  • ページ件数 1ページ当たりの件数です。ページングON時のみ有効
  • ヘッダー固定 ページングOFF時のみ有効。データテーブルをスクロール時にヘッダーを固定するかどうかを指定します。
  • 高さ ページングOFF時のみ有効。データテーブルの高さを指定します
  • テーブル内検索 ローカルでの絞り込みを有効化するかどうかを指定します


尚、配置可能なレイアウト・箇所は以下の通りです。

  • レイアウト: Salesforceレイアウト、自由レイアウト
  • 箇所: レイアウト直下、パネルグリッド、tab

注意

  • 当コンポーネントは非公式AppComponentでありサポート対象外です(フィードバックは歓迎します)。
  • 当コンポーネントの利用は自己責任でお願いします。
    当コンポーネントを使用することにより生じたいかなる損害についても株式会社テラスカイおよび筆者は責任を負わないものとします。

ソースをこちらに置きました。

1 件

関連する記事