HTML 書式設定の適用
HTML テンプレート エディターでテンプレートを作成するときに、CSS インライン スタイル要素を適用できます。
テスト
アプリの作成ではサンプル ファイルを使用できます。サンプル ファイルのダウンロードについては、「サンプル ファイル (英語のみ)」を参照してください。
グラフ全体に CSS インライン スタイル要素の適用を許可する
オブジェクトをテーブルとして追加した後、以下を行います:
以下を実行します。
- [プロパティ] が表示されている場合は、手順 3 へスキップします。表示されていない場合は [テーブル] ノードを右クリックします。
- [プロパティ] を選択します。
- [Keep Source Formats] チェックボックスを選択解除します。
これにより、テーブルのすべての列のすべてのセルの内容が QlikView から書式設定なしでエクスポートされます。HTML テンプレートで設定した CSS インライン スタイル要素の適用が実行されます。[Keep Source Formats] が選択されている場合とされていない場合の出力を比較してください。
特定の列に CSS インライン スタイル要素の適用を許可する
テーブル オブジェクトが QlikView のストレートテーブルであることを確かめてください。QlikView ピボットテーブルは、選択して [Qlik NPrinting テーブル] ノードに含める前にストレートテーブルに変換する必要があります。変換しない場合、個別のフィールド/列にアクセスすることができません。 ほとんどの列に対して元の書式設定を保持する場合は、テーブル全体としては [Keep Source Formats] チェックボックスをオンのままにしておき、次のように行います:
- テーブル ノードを展開します。
- CSS インライン スタイル要素を適用する列を選択します。
- [Keep Source Formats] チェックボックスを選択解除します。
-
[HTML Encode] チェック ボックスが選択されている場合、HTML タグ要素として解釈できる英数字以外のシンボル (< や/> など) はHTML エンティティに変換されます。
HTML Encode チェック ボックスをオフにすると、HTML タグ要素として解釈できる英数字以外のシンボルは、Qlik NPrinting HTML テンプレート エディターで使用されている下層の HTML コードによって描画されます。
これにより、テーブル上の選択された列のすべてのセルの内容が QlikView から書式設定なしでエクスポートされますが、HTML テンプレート内で適用した CSS インライン スタイル要素の適用は行われます。この手順を個別の列に対していくつでも行うことができます。
列に書式設定を適用する
以下を実行します。
- HTML Report (Sales) で、Gross Profit を選択します。
- [Format] フィールドに「$#.##,00」と入力します。
テーブルの構築
以下を実行します。
-
1 行のデータ セルで HTML テーブルを構築します。ソース コードはこのようになります:
<table> <tr> <td></td> <td></td> <td></td> </tr> </table> -
テーブル データ セル タグの間にあるテーブル列ノード アイコンをドラッグします。
列の選択中に Ctrl キーまたは Shift キーを押し続けることで複数の値を選択することができます。テンプレートにドラッグ アンド ドロップします。これによりすべてのタグが作成され横方向の一連のセルに挿入されます。
[Gross Profit] (総利益) 列の [Keep Source Formats] チェック ボックスはオフになっています。
- 最初の行の上に別の行を追加します。
- 新しい行にテーブル ヘッダー セルを挿入します。
- 必要なヘッダーを入力します。
- テンプレートに追加した各列の [プロパティ] ダイアログ ウィンドウを再度 1 つずつ開きます。
-
[Show Header] 行の [Value] 列をクリックします。セルの値は [Show] です。
- 表示されたドロップダウン メニュー ボタンをクリックし [Hide (非表示)] を選択します。
これが元のテーブルの 2 つの列に対して [Keep Source Formats] チェックボックスをオフにし、ヘッダー行を追加し、すべての列の元のテーブル ヘッダーを非表示にしたものです。
インライン スタイル要素の適用
この場合、例の出力はシンプルですが、どのようなことが可能であるかの一例を示しています。
以下が全体のコードです:
<html>
<body>
<table cellspacing=0 style="border-collapse:collapse;">
<tr style="width:0*; font-family:Verdana; font-size:small; font-variant:small-caps;">
<th style="border:grey dashed 1px;"> Product Name </th>
<th style="border:grey dashed 1px;"> Total Sales </th>
<th style="border:grey dashed 1px;"> Gross Profit </th>
<th style="border:grey dashed 1px;"> GP% </th>
<th style="border:grey dashed 1px;"> Quantity </th>
</tr>
<tr>
<td style="width:0*; font-family:Verdana; font-size:small; font-weight:bold; font-variant:small-caps;"> %%ProductName%% </td>
<td> %%Total Sales%% </td>
<td> %%Gross Profit%% </td>
<td> %%GP%_1%% </td>
<td style="width:0*; color:red; font-family:Georgia; font-size-adjust:0.40; background-color:Yellow; border:green solid 2px; text-align:right;"> %%Quantity_1%% </td>
</tr>
</table>
</body>
</html>