Page History

Sv translation

language	en

You can create you own Table view in Report and Dashboard by BellaDati Extensions feature. This tutorial describes how to create customized Table view with following specification:

custom look & feel (e.g. colors, padding, borders, resizing table columns, etc.)
displays data from existing DataSet by selected options in Filter view
user can select multiple table rows
user can invoke specific Client API endpoints and use selected table rows as parameters

Table of Contents:

Table of Contents

Introduction

Imagine situation that you have a list of PDF files somewhere on your filesystem and metadata about each PDF file stored in the DataSet, e.g.:

Country	City	Date	File Path
France	Paris	2016-01-01	C:\Orders\FRA\Paris-2016-01-01.PDF
France	Paris	2016-02-01	C:\Orders\FRA\Paris-2016-02-01.PDF
...
Germany	Berlin	2016-02-22	D:\Rechnung\Berlin\Akte 22. Februar 2016.PDF
Germany	Düsseldorf	2016-02-22	D:\Bestellen\Düsseldorf\Akte 22. Februar 2016.PDF
...

Users want to access (open/download) these files directly from BellaDati Report through their web browsers. User's second use case is to select multiple PDF files, merge them into one PDF file and download only this one PDF file. Of course, users want to filter PDF files displayed in the table by various attributes (e.g. country, city, date, etc.).

Proposal

We will create Report with Filter view and Table view. Then we will create Extension that will act as customized table renderer. It will use Client API endpoints to load JSON data of existing Table view and render new table with customized CSS styles and additional features. Extension will have type "Create new page" and therefore we will embed this new page into Custom content in Report. The last step will be just hide original Table view.

Info
You can find all source codes including prepared extension on our GitHub.

Preconditions

You have BellaDati instance in version 2.7.18+.
You have role Super Admin in multi-domain environment or Domain Admin in single-domain environment.
You are familiar with JavaScript, CSS, HTML.
You have set of test PDF files and metadata stored in some file or database.
You read our user's documentation related to extensions.

Environment Setup

Enable Developer mode in your user profile. Please see section Appearance settings at Managing User Profile for more details.
Prepare DataSet with data. Prepare Report with Table view and Filter view. This step is not covered by this tutorial. Please see our documentation for more details.
Tip
You can prepare DataSet and Report very simply by importing prepared BellaApp.
Prepare testing PDF files in some directory.
To enable file access in your BellaDati instance and domain go to Administration and then Configuration. Please check option Enable file access. Then:
1. For single-domain environment please set specific files paths (directory where PDF files are located) into Allowed file paths.
2. For multi-domain environment please click Edit on Manage Domain page, go to Restrictions tab. Then check option Enable file access and set specific files paths (directory where PDF files are located) into Allowed file paths.

Tutorial

Please refresh extension page after each step to verify that your changes were applied correctly.

Step 1. Import and setup basic Table Renderer extension

We will use basic Table Renderer extension provided by BellaDati on GitHub. It creates a new BellaDati page with table. This table contains data from source table view that is specified as parameter. We will customize this extension to bring new features.

Please download this ready–made extension from GitHub.
Go to Manage extensions page that is available in the Extensions section, under Administration menu, and import this extension into your BellaDati instance.
Go to your report and determine ID of source table view - Click on API button located at the top left corner of table view and see API URL value. Table view ID is a text after last "/".
Set ID of table view as extension parameter called tableViewID.

At the end of this step please verify setup of extension. Go to Extension Gallery and click on name of imported extension. You should see new page with table that contains data from source table.

Step 2. Get familiar with basic Table Renderer extension

We will customize basic extension in next steps and therefore you need to get familiar with it at first.

Go to Manage extensions page and click on extension name. You will be redirected to the Edit extension page.
Please explore all parts of this extension. The best approach to understand how this basic extension works is play with it, and so please change prefix of CSS class names and prefix of ID attributes from "bd-" to "bd-custom-" in all parts of extension (HEAD, BODY, JavaScript and CSS). Behavior of extension will remain the same if you will do it right.
Please inspect also text resource called table-renderer.js. It contains JavaScript code that we will modify in next steps.

Step 3. Add new parameters

Our extension should be parametrized to allow users to change extension behavior without changing implemented code, therefore we need to add these parameters:

Name	Type	Description	Value
enableResizingColumns	Boolean	Enable/disable resizing columns in table	false
hideColumnWithPath	Boolean	Show/hide column where file path is located	false
indexOfColumnWithPath	Integer	Index of column where file path is located	3
linkGetFile	String	Link to our Client API endpoint that returns file from given absolute path	/bi/utils/api:file?path=
linkMergePdfFiles	String	Link to our Client API endpoint that merges PDF files into one PDF file	/bi/utils/api:mergePdfFiles?paths=
linkViewDetail	String	Link to our Client API endpoint that loads the view detail with data	/bi/report/api:viewDetail/

Step 4. Create DIV containers in HTML body for controls

Set following code into Content of HTML body:

Code Block

language	xml
collapse	true

<div id="bd-custom-controls">
  <div id="bd-custom-link"></div>
  <div id="bd-custom-label"></div>
</div>
<div id="bd-custom-table-container"></div>

Add new CSS styles for new elements into text resource called table-styles.css:

Code Block

language	css
collapse	true

#bd-custom-controls {
  margin-bottom: 0.5em;
}
#bd-custom-controls #bd-custom-link {
  display: inline;
}
#bd-custom-controls #bd-custom-link .disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}
#bd-custom-controls #bd-custom-link button {
  width: 160px;
  background-color: #4d94ff;
  border-color: white;
  color: white;
}
#bd-custom-controls #bd-custom-label {
  display: inline;
  margin-left: 1em;
}

Step 5. Add checkbox as first column

Update code of table-renderer.js before both loops over header columns and body columns.

Code Block

language	js
collapse	true

var theadCellIndex = 0;
 
// insert first cell into each THEAD row
var checkboxCell = theadRow.insertCell(theadCellIndex++);
checkboxCell.style.width = '1em';

// iterate over all cells in a THEAD row
var columns = data.header[i];
for (j = 0; j < columns.length; j++) {
  ...
}

...
 
var tbodyCellIndex = 0;

// insert first cell with checkbox into each TBODY row
var checkboxCell = tbodyRow.insertCell(tbodyCellIndex++);
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkboxCell.appendChild(checkbox);
     
// iterate over all cells in a TBODY row
var columns = data.body[i];
for (j = 0; j < columns.length; j++) {
  ...
}

Step 6. Register events for checkboxes

Add following code into table-renderer.js at the end of success function that handles response from Client API:

Code Block

language	js
collapse	true

// register events for rows in tbody and checkboxes
$('.bd-custom-table tbody tr').click(function(event) {
  if (event.target.type !== 'checkbox') {
    $(':checkbox', this).trigger('click');
  }
});

$("input[type='checkbox']").change(function(e) {
  if ($(this).is(":checked")) {
    $(this).closest('tr').addClass("highlight_row");
    refreshControls();
  } else {
    $(this).closest('tr').removeClass("highlight_row");
    refreshControls();
  }
});

refreshControls();

Create function in table-renderer.js:

Code Block

language	js
collapse	true

function refreshControls() {
  // clear existing controls
  $('#bd-custom-link').empty();
  $('#bd-custom-label').empty();

  // compute count and paths    
  var count = 0;
  var paths = "";
  $('.bd-custom-table tr').filter(':has(:checkbox:checked)').find('td').filter('.bd-cell-with-link').each(function() {
    count++;
    paths += paths ? (";" + this.id) : this.id;
  });

  // refresh link for PDF merge
  var button = document.createElement('button');
  button.type = "button";
  button.appendChild(document.createTextNode("Preview Drawing"));

  var link = document.createElement('a');
  link.appendChild(button);
  link.href = "#PARAM=linkMergePdfFiles#" + paths;
  if (count == 0) {
    link.setAttribute('class', 'disabled');
  }
  document.getElementById('bd-custom-link').appendChild(link);

  // refresh label with count
  var label = document.createTextNode("Selected Drawings: " + count);
  document.getElementById('bd-custom-label').appendChild(label);
  console.log(new Date().toLocaleString() + ': Selected files: ' + paths);
}

Step 7. Add specific functionality into column with file path

At first we need to know which column should be customized, and therefore we will add this helper function into table-renderer.js:
Code Block
language js
collapse true
function isColumnWithPath(columnIndex) { return columnIndex == #PARAM=indexOfColumnWithPath#; }

Based on result from this function we will customize column title in table header:

Code Block

language	js
collapse	true

// set column title with appropriate header
var textValue = column.value;

if (isColumnWithPath(column.i)) {
   textValue += " (Link)";
}

theadCell.appendChild(document.createTextNode(textValue));

Based on result from this function we will customize cell content in table body:

Code Block

language	js
collapse	true

// fill cell with appropriate link or text
if (isColumnWithPath(column.i)) {
  var aLink = document.createElement('a');
  aLink.appendChild(document.createTextNode(escapedValue));
  aLink.href = "#PARAM=linkGetFile#" + escapedValue;

  tbodyCell.appendChild(aLink);
  tbodyCell.setAttribute('id', escapedValue);
  tbodyCell.setAttribute('class', 'bd-cell-with-link');
} else {
  tbodyCell.appendChild(document.createTextNode(escapedValue));
}

Step 8. Add functionality to hide column with file path

At first we need to know which column should be hidden and also recalculate colspans, and therefore we will add these helper functions into table-renderer.js:

Code Block

language	js
collapse	true

function shouldBeColumnHidden(columnIndex) {
  return isColumnWithPath(columnIndex) && #PARAM=hideColumnWithPath#;
}

function computeColspanByHiddenColumn(columnIndex, colspan) {
  if (#PARAM=hideColumnWithPath#) {
    if (columnIndex <= #PARAM=indexOfColumnWithPath# && #PARAM=indexOfColumnWithPath# < (columnIndex + colspan)) {
      return colspan - 1;
    } else {
      return colspan;
    }
  } else {
    return colspan;
  }
}

Based on results from these functions we will customize rendering of table header cells:

Code Block

language	js
collapse	true

// hide cell with link
if (shouldBeColumnHidden(column.i)) {
  theadCell.style.display = 'none';
}

// set colspan attributes
if (typeof column.colspan != 'undefined') {
  theadCell.setAttribute('colspan', computeColspanByHiddenColumn(column.i, column.colspan));
}

Based on results from these functions we will customize rendering of table body cells:

Code Block

language	js
collapse	true

// hide cell with link
if (shouldBeColumnHidden(column.i)) {
  tbodyCell.style.display = 'none';
}
// set colspan attributes
if (typeof column.colspan != 'undefined') {
  tbodyCell.setAttribute('colspan', computeColspanByHiddenColumn(column.i, column.colspan));
}

Step 9. Make table columns resizable

There are various JavaScript and jQuery implementations that allows you to resize columns in HTML table by drag and drop. We will use jQuery plugin colResizable in this tutorial.

Download minified version colResizable from GitHub and upload it into extension as a new text resource with type JavaScript.

Register table in this jQuery plugin by following JavaScript code - add it into table-renderer.js at the end of success function:

Code Block

language	js
collapse	true

// register resizable columns - see https://github.com/alvaro-prieto/colResizable
if (#PARAM=enableResizingColumns#) {
  $(".bd-custom-table").colResizable({
    fixed:false,
    liveDrag:true
  });
};

Step 10. Replace source table view with extension page

Go to Extension Gallery, click on name of this extension and copy URL from address bar of your web browser.
Go to Report and create new Custom Content view with following code (use copied URL from previous step instead of "XXX"):
Code Block
language xml
collapse true
<iframe src="XXX" width="100%" height="500" />
Go to Table appearance settings of source table view and select checkbox Hide view in view mode in Options section.

Result

Tip
You can find all source codes and also download ready-made extension from our GitHub.

Sv translation

language	ja

BellaDati拡張機能によりレポートでのテーブルビューやダッシュボードを作成することができます。このチュートリアルでは、以下の仕様にカスタマイズされたテーブルビューを作成する方法について説明します。

ルック＆フィールカスタム（色、パディング、ボーダー、カラムテーブルリーサイズなど）
フィルタービューで選択したオプションによって既存のDataSetからデータを表示すること
ユーザが複数の行テーブルを選択できること
ユーザは、特定のClient APIエンドポイントを呼び出し、パラメータとして選択された行テーブルを使用できること。

コンテンツのテーブル

Table of Contents

紹介

あなたがDataSetに格納された各PDFファイルとファイルシステムとメタデータのどこかにPDFファイルのリストを持っている状況を想像してみてください：

国	都市	日付	ファイルパーツ
France	Paris	2016-01-01	C:\Orders\FRA\Paris-2016-01-01.PDF
France	Paris	2016-02-01	C:\Orders\FRA\Paris-2016-02-01.PDF
...
Germany	Berlin	2016-02-22	D:\Rechnung\Berlin\Akte 22. Februar 2016.PDF
Germany	Düsseldorf	2016-02-22	D:\Bestellen\Düsseldorf\Akte 22. Februar 2016.PDF
...

ユーザーは、自分のWebブラウザを介してBellaDatiレポートからこれらのファイルを直接にアクセス（オープン/ダウンロード）したいです。ユーザーの第二利用の場合は、複数のPDFファイルを選択して1つのPDFファイルにマージし、それからこのPDFファイルのみをダウンロードすること。もちろん、ユーザーはさまざまな属性（国、都市、日付など）によってテーブルに表示されたPDFファイルをフィルタリングたいことです。

提案

私たちは、フィルタービューとテーブルビューでレポートを作成します。その後、カスタマイズされたテーブルレンダラとして実行する拡張機能を作成します。これは、既存のテーブルビューのJSONデータをロードするためにClient APIエンドポイントを使用して、カスタマイズされたCSSスタイルと追加機能を持つ新テーブルをレンダリングする拡張子は「新規ページ作成」タイプを持っていますので、レポートのカスタムコンテンツにこの新規ページを埋め込みます。最後のステップは、単に元のテーブルビューを非表示にします。

Info
あなたは私たちのGitHub上で準備された拡張子を含むすべてのソースコードを見つけます。

前提条件

- - 2.7.18+バージョンでBellaDatiインスタンスを持つ事。
  - マルチドメイン環境でのSuper Adminまたは単一ドメイン環境でDomain Adminとして権限をもつ必要があること。
  - JavaScript、CSS、HTMLに精通している事。
  - いくつかのファイルやデータベースに格納されたテストPDFファイルとメタデータセットを持つ事。
  - 拡張子に関する当社のユーザーのドキュメントを読んだ事。

環境設定

ユーザープロファイル内の開発者モードを有効にします。詳細については、ユーザープロファイルの管理でセクションの画面設定を参照してください。
データを使用してDataSetを用意します。テーブルビューとフィルタービューでレポートを用意します。このステップは、このチュートリアルで含めません。詳細については、マニュアルを参照してください。
Tip
あなたは用意されたBellaAppアプリケーションを取り込むことにより、非常に簡単にデータセットとレポートを用意する可能です。
いくつかのディレクトリにテスト用のPDFファイルを用意します。
あなたのBellaDatiインスタンス内のファイルへのアクセスを許可するために、Administrationに移動して、それからConfigurationを実行します。オプションは、ファイルへのEnable file accessをオプションを選択してください。次は：
1. 単一ドメイン環境に対してAllowed file pathsへ特定のファイルパス（PDFファイルが配置されているディレクトリ）を設定してください。
2. 複数の環境の場合はtrang Manage DomainのEditをクリックして、Restrictionsタブに移動してください。その後、Enable file accessオプションをチェックして、許可されたファイルパスへ特定のファイルパス（PDFファイルが配置されているディレクトリ）を設定してください

チュートリアル

変更が正しく適用されたことを確認するために、各工程の後に拡張ページを更新してください。

ステップ１.基本的なレンダーテーブル拡張を取り込んで設定すること

私たちは、GitHubの上BellaDatiによって提供された基本的なTable Renderer extensionを使用します。これは、テーブルで新規BellaDatiページを作成します。このテーブルは、パラメータとして指定されたソーステーブルビューからのデータが含まれます。私たちは、新しい機能をもたらせるようにこの拡張機能をカスタマイズします。

GitHubからこの既製の拡張機能をダウンロードしてください。
Administration メニュの下にExtensions で利用可能なManage extensionsを選んで、あなたのBellaDatiインスタンスへこの拡張機能を取り込みます。
あなたのレポートに移動し、ソーステーブルビューのIDを決定して、テーブルビューの左上隅にあるAPIボタンをクリックして、API URL値を参照してください。テーブルビューのIDは、最後の「/」の後のテキストです。
tableViewID.と呼ばれる拡張パラメータとしてテーブルビューのIDを設定します。

このステップの終わりに拡張設定を確認してください。Extension Galleryに移動し、取り込んだ拡張機能の名前をクリックしてください。あなたは、ソーステーブルからのデータを含むテーブルを使用する新規ページが表示されます。

ステップ2.基本的なテーブルのレンダリング拡張子に慣れること

私たちは、次のステップで基本的な拡張機能をカスタマイズして、したがって、あなたがとりあえずそれに慣れる必要があります。

Manage extensionsページを移動し、拡張子名をクリックします。あなたがEdit extensionページにリダイレクトされます。
この拡張機能のすべての部分を探索してください。最善のアプローチはそれと遊ぶことです。それで、"bd-"を"bd-custom-"になるように拡張子でのすべての部分でのCSSクラス名とIDの接頭語属性を変更してください(HEAD, BODY, JavaScript and CSS)。正しく設定すれば拡張の挙動が同じままに保持されます。
table-renderer.jsと呼ばれるテキストリソースも検査してください。次のステップで変更するJavaScriptコードが含まれます。

ステップ3.新しいパラメータを追加すること

拡張子にはユーザーが実装されるコードを変更ずに拡張挙動を変更できるようにパラメータ化する必要があります。したがって、我々はこれらのパラメータを追加する必要があります。

名	タイプ	説明	値
enableResizingColumns	Boolean	テーブル内のリーサイズカラムを有効/無効にします	false
hideColumnWithPath	Boolean	ファイルのパスが配置されているカラムを表示/非表示します	false
indexOfColumnWithPath	Integer	ファイルのパスが配置されているカラムのインデックス	3
linkGetFile	String	与えられた絶対パスからファイルを返却するクライアントAPIエンドポイントへの遷移します	/bi/utils/api:file?path=
linkMergePdfFiles	String	1つのPDFファイルにPDFファイルをマージし、当社のクライアントAPIエンドポイントへの遷移します	/bi/utils/api:mergePdfFiles?paths=
linkViewDetail	String	データを持つビューの詳細をロードし、当社のクライアントAPIエンドポイントへ遷移します	/bi/report/api:viewDetail/

ステップ4.制御HTML本文中にDIVコンテナを作成すること

HTML本文の内容に以下のコードを配置します:

Code Block

language	xml
collapse	true

<div id="bd-custom-controls">
  <div id="bd-custom-link"></div>
  <div id="bd-custom-label"></div>
</div>
<div id="bd-custom-table-container"></div>

table-styles.cssを呼ばれるテキストリソースへの新要素に新CSSスタイルを追加します。

Code Block

language	css
collapse	true

#bd-custom-controls {
  margin-bottom: 0.5em;
}
#bd-custom-controls #bd-custom-link {
  display: inline;
}
#bd-custom-controls #bd-custom-link .disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}
#bd-custom-controls #bd-custom-link button {
  width: 160px;
  background-color: #4d94ff;
  border-color: white;
  color: white;
}
#bd-custom-controls #bd-custom-label {
  display: inline;
  margin-left: 1em;
}

ステッ5プ.最初のカラムとしてチェックボックスを追加すること

両方のヘッダカラムとボディカラムがループがされた前にtable-renderer.js のコードを更新します。

Code Block

language	js
collapse	true

var theadCellIndex = 0;
 
// insert first cell into each THEAD row
var checkboxCell = theadRow.insertCell(theadCellIndex++);
checkboxCell.style.width = '1em';

// iterate over all cells in a THEAD row
var columns = data.header[i];
for (j = 0; j < columns.length; j++) {
  ...
}

...
 
var tbodyCellIndex = 0;

// insert first cell with checkbox into each TBODY row
var checkboxCell = tbodyRow.insertCell(tbodyCellIndex++);
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkboxCell.appendChild(checkbox);
     
// iterate over all cells in a TBODY row
var columns = data.body[i];
for (j = 0; j < columns.length; j++) {
  ...
}

ステップ6.チェックボックスのイベントを登録すること

Client APIからのレスポンスを処理するsuccess関数の最後にtable-renderer.js に次のコードを追加します

Code Block

language	js
collapse	true

// register events for rows in tbody and checkboxes
$('.bd-custom-table tbody tr').click(function(event) {
  if (event.target.type !== 'checkbox') {
    $(':checkbox', this).trigger('click');
  }
});

$("input[type='checkbox']").change(function(e) {
  if ($(this).is(":checked")) {
    $(this).closest('tr').addClass("highlight_row");
    refreshControls();
  } else {
    $(this).closest('tr').removeClass("highlight_row");
    refreshControls();
  }
});

refreshControls();

table-renderer.jsに関数を作成すること:

Code Block

language	js
collapse	true

function refreshControls() {
  // clear existing controls
  $('#bd-custom-link').empty();
  $('#bd-custom-label').empty();

  // compute count and paths    
  var count = 0;
  var paths = "";
  $('.bd-custom-table tr').filter(':has(:checkbox:checked)').find('td').filter('.bd-cell-with-link').each(function() {
    count++;
    paths += paths ? (";" + this.id) : this.id;
  });

  // refresh link for PDF merge
  var button = document.createElement('button');
  button.type = "button";
  button.appendChild(document.createTextNode("Preview Drawing"));

  var link = document.createElement('a');
  link.appendChild(button);
  link.href = "#PARAM=linkMergePdfFiles#" + paths;
  if (count == 0) {
    link.setAttribute('class', 'disabled');
  }
  document.getElementById('bd-custom-link').appendChild(link);

  // refresh label with count
  var label = document.createTextNode("Selected Drawings: " + count);
  document.getElementById('bd-custom-label').appendChild(label);
  console.log(new Date().toLocaleString() + ': Selected files: ' + paths);
}

ステップ7.ファイルパスがあるカラムに特定の機能を追加すること。

まずはどんなカラムがカスタマイズする必要あるのか知っている必要があり、したがって、table-renderer.jsにこのヘルパー関数を追加します
Code Block
language js
collapse true
function isColumnWithPath(columnIndex) { return columnIndex == #PARAM=indexOfColumnWithPath#; }

この関数から結果に基づいて、私たちはテーブルヘッダーでカラムタイトルをカスタマイズします。

Code Block

language	js
collapse	true

// set column title with appropriate header
var textValue = column.value;

if (isColumnWithPath(column.i)) {
   textValue += " (Link)";
}

theadCell.appendChild(document.createTextNode(textValue));

この関数から結果に基づいて、私たちはテーブルヘッダーでセルコンテンツをカスタマイズします。

Code Block

language	js
collapse	true

// fill cell with appropriate link or text
if (isColumnWithPath(column.i)) {
  var aLink = document.createElement('a');
  aLink.appendChild(document.createTextNode(escapedValue));
  aLink.href = "#PARAM=linkGetFile#" + escapedValue;

  tbodyCell.appendChild(aLink);
  tbodyCell.setAttribute('id', escapedValue);
  tbodyCell.setAttribute('class', 'bd-cell-with-link');
} else {
  tbodyCell.appendChild(document.createTextNode(escapedValue));
}

ステップ8.ファイルパスがあるカラムを非表示にする機能を追加すること

まずはどんなカラムがカスタマイズする必要あるのか知っている必要があり、再度計算して、したがって、table-renderer.jsにこのヘルパー関数を追加します。

Code Block

language	js
collapse	true

function shouldBeColumnHidden(columnIndex) {
  return isColumnWithPath(columnIndex) && #PARAM=hideColumnWithPath#;
}

function computeColspanByHiddenColumn(columnIndex, colspan) {
  if (#PARAM=hideColumnWithPath#) {
    if (columnIndex <= #PARAM=indexOfColumnWithPath# && #PARAM=indexOfColumnWithPath# < (columnIndex + colspan)) {
      return colspan - 1;
    } else {
      return colspan;
    }
  } else {
    return colspan;
  }
}

この関数から結果に基づいて、私たちは、テーブルのヘッダーセルのレンダリングをカスタマイズします。

Code Block

language	js
collapse	true

// hide cell with link
if (shouldBeColumnHidden(column.i)) {
  theadCell.style.display = 'none';
}

// set colspan attributes
if (typeof column.colspan != 'undefined') {
  theadCell.setAttribute('colspan', computeColspanByHiddenColumn(column.i, column.colspan));
}

この関数から結果に基づいて、私たちは、テーブルのボディセルのレンダリングをカスタマイズします

Code Block

language	js
collapse	true

// hide cell with link
if (shouldBeColumnHidden(column.i)) {
  tbodyCell.style.display = 'none';
}
// set colspan attributes
if (typeof column.colspan != 'undefined') {
  tbodyCell.setAttribute('colspan', computeColspanByHiddenColumn(column.i, column.colspan));
}

ステップ9.テーブルのカラムがリーサイズさせること

ドラッグ＆ドロップによりHTMLテーブルのカラムのサイズを変更できる様々なJavaScriptとjQuery実装があります。このチュートリアルではjQuery plugin colResizableを使用します。

GitHubのから縮小さバージョンcolResizableをダウンロードして、JavaScriptタイプで新テキストリソースとして拡張へそれをアップロードします。

以下のようなJavaScriptコードを使用することでこのjQueryプラグインでテーブルを登録します- success関数の終わりにrenderer.jsにそれを追加します。

Code Block

language	js
collapse	true

// register resizable columns - see https://github.com/alvaro-prieto/colResizable
if (#PARAM=enableResizingColumns#) {
  $(".bd-custom-table").colResizable({
    fixed:false,
    liveDrag:true
  });
};

ステップ10.拡張ページでテーブルビューソースを差し替えること

Extension Galleryに移動して、この拡張子の名前をクリックして、あなたのウェブブラウザのアドレスバーからURLをコピーします。
Reportに移して、以下のコードと新規Custom Contentビューを作成します。（"XXX"のかわりに、以前にコピーしたURLを使用します)。
Code Block
language xml
collapse true
<iframe src="XXX" width="100%" height="500" />
テーブルビューソースのTable appearance設定に移して、OptionsセクションにHide view in view modeチックボックスを選択します。

結果

Tip
全てのソースコードを探すことだけではなく私達のGitHubから利用可能作成の拡張もダウンロードできます。

ユーザープロファイル内の開発者モードを有効にする。詳細については、ユーザープロファイルの管理でセクションの画面設定を参照してください。

いくつかのディレクトリにテスト用のPDFファイルを用意する。

Page tree

Versions Compared

Old Version 18

New Version 19

Key

Introduction

Proposal

Preconditions

Environment Setup

Tutorial

Step 1. Import and setup basic Table Renderer extension

Step 2. Get familiar with basic Table Renderer extension

Step 3. Add new parameters

Step 4. Create DIV containers in HTML body for controls

Step 5. Add checkbox as first column

Step 6. Register events for checkboxes

Step 7. Add specific functionality into column with file path

Step 8. Add functionality to hide column with file path

Step 9. Make table columns resizable

Step 10. Replace source table view with extension page

Result

紹介

提案

前提条件

環境設定

チュートリアル

ステップ１.基本的なレンダーテーブル拡張を取り込んで設定すること

ステップ2.基本的なテーブルのレンダリング拡張子に慣れること

ステップ3.新しいパラメータを追加すること

ステップ4.制御HTML本文中にDIVコンテナを作成すること

ステッ5プ.最初のカラムとしてチェックボックスを追加すること

ステップ6.チェックボックスのイベントを登録すること

ステップ7.ファイルパスがあるカラムに特定の機能を追加すること。

ステップ8.ファイルパスがあるカラムを非表示にする機能を追加すること

ステップ9.テーブルのカラムがリーサイズさせること

ステップ10.拡張ページでテーブルビューソースを差し替えること

結果