Versions Compared

Old Version 3

changes.mady.by.user Radek Micka

Saved on

compared with

New Version 4

changes.mady.by.user Unknown User (huyennth@fpt.com.vn)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Sv translation
languageen

This extension can be used to change the layout of your table in BellaDati. This extension can be used to display table like following:

Image Modified

MANAGING EXTENSION

Download extension from here.

Import extension to BellaDati.

Go to parameters and add id of the view with table which you would like to render with custom layout.

Image Modified

In order to get the view id, switch to developer mode, click on newly displayed button API.

Image Modified

Display view with custom table in the report

  1. Source report should have disabled option to display drill-down and cell controls – select option Hide drilldown cell controls in Table appearance settings.Image Modified

     

  2. Create custom content view which will display iFrame with custom table
    1. Create custom content view
    2. Switch to html mode

    3. Use html code like following:

      Code Block
      <iframe id="tableExtension" src="http://localhost:8080/extension/detail/5"></iframe>
<script>

var iframe = document.getElementById("tableExtension");
// get view container
var viewContainer = $(iframe).parents('div.t-bdlayout-content');
iframe.width = viewContainer.width();
iframe.height = viewContainer.height() - 90;
</script>
  3. Hide view with the source table - source table probably will not be necessary to display in the report. Go to table appearance and select option Hide view in view mode.Image Modified

Adjusting the custom table layout

Table layout is defined by the CSS stylesheet stored in the extension. This section describes examples how to adjust layout of custom tables. In order to access the definition of stylesheet, go to section Text and binary resources and click the file table-styles.css.

Image Modified

Changing color of header

Background color of table header can be changed by updating code of parameter background in tag .bd-table thead. Color of font can be changed by updating parameter color in tag .bd-table thead.

Changing color of table body

Background color of table body can be changed by updating code of parameter background in tag .bd-table tbody tr:nth-child(odd) for odd rows and tag .bd-table tbody tr:nth-child(even) for even rows. Font color can be changed by updating parameter color in tag .bd-table tbody tr:nth-child(odd) for odd rows and tag .bd-table tbody tr:nth-child(even) for even rows.

Changing font applied in the table

Applied fonts are defined by parameter font-family in tag .bd-table. In order to change applied fonts replace existing font with different ones.

 

Sv translation
languageja

この拡張機能ではBellaDatiのテーブルのレイアウトを変更することができます。この拡張機能を利用することで、以下のようにテーブルを表示することができます:

Image Added

拡張管理

ここでダウンロードすることができます。

BellaDatiに拡張機能をインポートします。 

パラメータに移動し、カスタムレイアウトでレンダリング対象テーブルのビューのIDを追加します。

Image Added

ビューIDを取得できるように開発者モードに切り替え、新しく表示されたAPIボタンを押下します。

Image Added

レポートにカスタムテーブルでビューを表示する

  1. ソースレポートにはドリルダウン及びセルコントロールを表示するオプションを無効にする必要があります。テーブル外観設定でドリルダウンセルコントロールを非表示にするオプションを選択します。

    Image Added

     

  2. カスタム表を含むiFrameを表示するカスタムコンテンツビューを作成します:

    1. カスタムコンテンツビューの作成

    2. htmlモードへの切り替え

    3. 以下のようにhtmlコードを使用します:

      Code Block
      <iframe id="tableExtension" src="http://localhost:8080/extension/detail/5"></iframe>
<script>

var iframe = document.getElementById("tableExtension");
// get view container
var viewContainer = $(iframe).parents('div.t-bdlayout-content');
iframe.width = viewContainer.width();
iframe.height = viewContainer.height() - 90;
</script>
  3. ソーステーブルに属するビューを非表示にする-レポートへの表示時にソーステーブルは不要です。テーブル外観に移動し、ビューモードでのビューを非表示にするオプションを選択します。Image Added

カスタムテーブルのレイアウトを調整します

テーブルレイアウトは拡張機能に保存されているCSSスタイルシートに定義されます。このセクションではカスタムテーブルのレイアウトを調整する方法の例を説明します。スタイルシートの定義にアクセスできるように、テキストとバイナリリソースのセクションに進み、ファイルtable-styles.cssをクリックします。

Image Added

ヘッダの色の変更

テーブルヘッダの背景色は、タグ「.bd-table thead」のパラメータ「background」を更新することで変更することができます。フォントの色は、タグ「.bd-table thead」のパラメータ「color」を更新することで変更することができます。

テーブル本体の色の変更

テーブル本体の背景色は、奇数行のタグ「.bd-table tbody tr:nth-child(odd)」及び偶数行のタグ「.bd-table tbody tr:nth-child(even)」のパラメータ「background 」のコードを更新することで変更することができます。フォント色は奇数行のタグ「.bd-table tbody tr:nth-child(odd)」及び偶数行のタグ「.bd-table tbody tr:nth-child(even)」のパラメータ「color」のコードを更新することで変更することができます。

テーブルに適用されているフォントの変更

適用フォントは、タグ「.bd-table」のパラメータ「font-family」に定義されます。適用フォントを変更できるように、既存のフォントは別のものに置き換えます。