Versions Compared

Old Version 11

changes.mady.by.user Martin Trgiňa

Saved on

compared with

New Version Current

changes.mady.by.user Martin Trgiňa

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Removed translated content for 'cs'
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:

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.

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

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.

     

  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.

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.

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でテーブルのレイアウトを変更できます。この拡張機能を使用して、次のようなテーブルを表示できます:

拡張管理

ここから拡張機能をダウンロードすることができます。

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

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

ビューIDを取得するには、開発者モードに切り替えて、新しく表示されたボタンAPIをクリックします。

レポートのカスタムテーブルを使用したビューの表示

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

     

  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. ソーステーブルでビューを非表示 - ソーステーブルは、ほとんどの場合レポートに表示する必要はありません。テーブルの外観に移動し、[表示モードでビューを非表示にする]オプションを選択します。

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

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

ヘッダーの色の変更

タグ.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によって定義されます。適用されたフォントを変更するには、既存のフォントを別のフォントに置き換えます。

Sv translation
languagede

Mit dieser Erweiterung können Sie das Layout Ihrer Tabelle in BellaDati ändern. Diese Erweiterung kann verwendet werden, um Tabellen wie folgt anzuzeigen:

VERWALTUNG DER ERWEITERUNG

Laden Sie die Erweiterung von hier herunter.

Importieren Sie die Erweiterung zu BellaDati.

Gehen Sie zu den Parametern und fügen Sie die ID der View mit Tabelle hinzu, die Sie mit einem benutzerdefinierten Layout rendern möchten.

Um die View-ID zu erhalten, wechseln Sie in den Entwicklermodus, klicken Sie auf die neu angezeigte Schaltfläche API.

Anzeigeansicht mit benutzerdefinierter Tabelle im Report

  1. Der Quellreport sollte die Option zum Anzeigen von Drill-Down und Zellensteuerungen deaktiviert haben - wählen Sie die Option Drill-Down-Zellensteuerungen ausblenden in den Einstellungen zur Tabellenansicht.

     

  2. Erstellen Sie eine benutzerdefinierte Inhaltsansicht, die iFrame mit benutzerdefinierter Tabelle anzeigt.
    1. Erstellen einer benutzerdefinierten Inhaltsansicht
    2. In den html-Modus wechseln

    3. Verwenden Sie HTML-Code wie folgt:

      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. Ansicht mit der Quelltabelle ausblenden - die Quelltabelle ist wahrscheinlich nicht notwendig, um im Report angezeigt zu werden. Gehen Sie zur Tabellenansicht und wählen Sie die Option
    Ansicht ausblenden im Anzeigemodus.

Anpassen des benutzerdefinierten Tabellenlayouts

Das Tabellenlayout wird durch das in der Erweiterung gespeicherte CSS-Stylesheet definiert. In diesem Abschnitt werden Beispiele für die Anpassung des Layouts von benutzerdefinierten Tabellen beschrieben. Um auf die Definition des Stylesheets zuzugreifen, gehen Sie zum Abschnitt Text und binäre Ressourcen und klicken Sie auf die Datei table table-styles.css.

Ändern der Farbe der Kopfzeile

Die Hintergrundfarbe des Tabellenkopfes kann durch Aktualisieren des Codes des Parameterhintergrundes in tag.bd-table thead geändert werden. Die Farbe der Schrift kann durch Aktualisieren der Parameterfarbe in tag.bd-table thead geändert werden.

Ändern der Farbe des Tabellenkörpers

Die Hintergrundfarbe des Tabellenkörpers kann geändert werden, indem der Code des Parameterhintergrunds in tag.bd-table tbody tr:nth-child(odd) für ungerade Zeilen und tag.bd-table tbody tr:nth-child(even) für gerade Zeilen aktualisiert wird. Die Schriftfarbe kann geändert werden, indem die Parameterfarbe in tag.bd-table tbody tr:nth-child(odd) für ungerade Zeilen und tag.bd-table tbody tr:nth-child(even) für gerade Zeilen aktualisiert wird.

Ändern der in der Tabelle verwendeten Schriftart

Angewandte Schriften werden durch den Parameter font-family in tag.bd-table definiert. Um die angewandten Schriften zu ändern, ersetzen Sie die vorhandene Schrift durch eine andere.