HTMLテンプレートの活用術 – MONO-X Portal

HTMLテンプレートは、クエリーの実行結果を任意のHTMLで表示することができる機能です。

出力フィールド数が多く、結果が横に長いクエリーの場合、HTMLテンプレートを利用することですっきり見やすくなります。また、HTMLソースで記載するため、IFS上にある画像ファイルやリンクも表示することが可能です。

【通常クエリーで実行した時の結果】
横長に結果が表示されるため、横にスクロールしないと全ての結果をみることができず、見にくい。

【HTMLテンプレートを設定した時の結果】
横長に表示されていた結果を好きなレイアウトで表示することができ、画像とリンクの設定も可能。

～大まかな流れ～

基本となるクエリーを作成
HTMLテンプレートを作成
作成したHTMLテンプレートをPHPQUERYに登録

【HTMLテンプレート】

<style type="text/css">
#phpqdemo10_table{
  table-layout:fixed;
  border-collapse:collapse;
  font-size:18px;
  min-width:375px;
}

#phpqdemo10_table th,
#phpqdemo10_table td{
  border:1px solid #aaa;
  padding:8px 10px;
}

#phpqdemo10_table th{
  font-weight:bold;
  background-color:#0070c0;
  color:#ffffff;
  width:160px;
  text-align:left;
}

#phpqdemo10_table td{
  text-align:right;
}

#phpqdemo10_table img{
  width:200px;
}

#phpqdemo10_table td.center{
  text-align:center;
}

#phpqdemo10_table td.left{
  text-align:left;
}
</style>

<div style="padding:20px;">
  <div style="font-size:30px;font-weight:bold;margin-bottom:20px;">商品マスター照会</div>
  <div loop=true style="margin-bottom:20px;">
    <table id="phpqdemo10_table">
      <tr>
        <th>商品コード</th>
        <td id="WKSHCD_0" colspan="2" class="left"></td>
      </tr>
      <tr>
        <th>商品名</th>
        <td id="WKSHNM_0" colspan="2" class="left"></td>
      </tr>
      <tr>
        <th>商品金額</th>
        <td id="WKZITK_0" colspan="2" class="left"></td>
      </tr>
      <tr>
        <th>商品備考</th>
        <td id="WKBIKO_0" colspan="2" class="left"></td>
      </tr>
      <tr style="display: none;">
        <th>ENCODE</th>
        <td id="ENCODE_9999" class="encode"></td>
      </tr>
      <tr>
        <th>商品倉庫住所</th>
        <td id="WKSONM_0" class="left"></td>
        <td class="left">
          <a onclick="this.href='https://maps.google.co.jp/maps?output=classic&q='+this.parentElement.parentElement.parentElement.querySelector('.encode').innerHTML.trim()" id="link" href="" target="_blank">
            グーグルマップで表示
          </a>
        </td>
      </tr>
      <tr>
        <td colspan="3" class="center">
          <img img_url="http://192.1.1.1/shohin/" img_id="WKSHCD_0" img_extension="jpg">
        </td>
      </tr>
    </table>
  </div>
</div>

結果に表示するフィールドは、HTMLコンポーネントのidに「フィールドID_」+「ファイルのINDEX」で設定します。
プライマリーファイルにあるフィールドの場合は「フィールドID_0」とし、結果フィールドの場合は「フィールドID_9999」となります。

リンクはHTMLタグに存在している「HREFタグ」を使用し、画像は「IMGタグ」を使用して設定します。

【作成したHTMLテンプレートをPHPQUERYに登録】

メニュー＞管理＞クエリー　から作成したクエリーの「実行設定」＞「HTMLテンプレート」を選択すると小ウィンドウが表示されるので、選択ボタンから作成したHTMLファイルを選択します。
1ページ表示件数は、1ページに何件の結果を表示するかの設定になります。
全ての設定が完了したら、保存ボタンをクリックして完了です。
HTMLテンプレートの設定が完了したら、あとはクエリーをいつも通り実行すれば結果がHTML形式で表示されます。

HTMLテンプレートでは、画像が設定できるので、マスタ照会や商品照会などの活用をお勧めします。
また、リンクはWEBサイトに限らず、IFS上にあるPDFファイルなども設定可能ですので、IFS上にある受注ファイルをリンクに設定し、参照するといった使い方も可能です。

【HTMLテンプレート】

【作成したHTMLテンプレートをPHPQUERYに登録】

関連記事