logo

サイト内検索
ココログ最強検索 by 暴想

最近のトラックバック

無料ブログはココログ

« Reports Connect for Salesforce:Subreportで複合的な帳票を作成 | トップページ | Reports Connect for Salesforce 標準画面からの印刷呼び出し方法 »

Reports Connect for Salesforce ダウンロード画面のカスタマイズ

Reports Connect for Salesforceでは、PDFダウンロード時に別Windowが開いて、このような画面が出ます。

Rc4dev01
この画面をカスタマイズすることができます。

自分のアプリケーションの名前を出すなど、アプリに応じて自由なデザインの画面にすることができます。

カスタマイズ可能な画面は以下の3種類です。

ダウンロード時の画面:dl.html
上記画面

印刷エラー時の画面:dlErr.html

Rc4dev02
印刷対象なしの画面:dlNodata.html

Rc4dev03
以上の3つのjspのオリジナルのソースコードは、以下のリンクからダウンロード可能です。

カスタマイズ方法は実に簡単です。上記jspファイルを参考に、カスタマイズしたhtmlファイルをjrxml等のファイルと同様に、帳票レコードに添付するだけです。

実際にカスタマイズができるか、やってみましょう。

上記リンクからダウンロードしたdl.jspのソースコードは以下のとおりです。

-------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="image/x-icon" rel="shortcut icon"
    href="http://techsupport.kpscorp.jp/templates/newkokyakuroku/favicon.ico">
<link rel="stylesheet" type="text/css"
    href="${baseUrl}/resources/common.css">
<link rel="stylesheet" type="text/css"
    href="${baseUrl}/resources/extended.css">
<link rel="stylesheet" type="text/css"
    href="${baseUrl}/resources/elements.css">
<link rel="stylesheet" type="text/css"
    href="${baseUrl}/resources/security_page.css">
<style type="text/css">
#main-logo {
    display: block;
    font-size: 30pt;
    height: 80px;
    overflow: hidden;
    position: absolute;
    width: 300px;
    z-index: 12;
    margin-top: 0px;
    padding-top: 20px;
    padding-left: 10px;
    color: Snow;
}
</style>
<title>ダウンロードページ</title>
</head>
<body>
    <div id="pagewrap">
        <a id="main-logo"
            href="http://techsupport.kpscorp.jp/reportsconnect.html">ReportsConnect</a>
        <div id="headerwrap">
            <div id="header">
                <div id="headertext">KPSの印刷ソリューション</div>
                <!-- .header-text-->
            </div>
        </div>
        <!-- .headerwrap -->
        <div id="contentwrap">
            <div class="oauthcontent" id="oauthcontent" style="height: 259px;">
                <div id="client_details" style="padding-top: 50px;">
                    <img
                        src="${baseUrl}/resources/ReportsConnect.png">
                    <div id="client_description">印刷サーバーにPDFファイルの作成を要求しました。</div>
                </div>
                <div class="arrow"></div>
                <div id="perms_wrap" style="padding-top: 60px;">
                    <h2 id="shorih">ただ今処理中...</h2>
                    <div class="oauth_text bullets">
                        PDFファイルのダウンロードが始まるまで、少々お待ちください。</div>
                    <div class="oauth_text">
                        ダウンロード完了後、このウインドウを閉じてください。</div>
                    <div id="acceptdeny">
                        <input type="button" title="閉じる" class="btnPrimary btn allowBtn"
                            value=" 閉じる " onClick="window.close();"">
                    </div>
                </div>
            </div>
            &nbsp;
        </div>
        <!-- #footer -->
    </div>
    <script type="text/javascript">
        function addLoadEvent(func) {
            var oldonload = window.onload;
            if (typeof window.onload != 'function') {
                window.onload = func;
            } else {
                window.onload = function() {
                    oldonload();
                    func();
                }
            }
        }
        function doDl() {
            location.href = "dl2?state=${key}";
        }

        if ("${key}" != "") {
            //location.href = "dl?state=${key}";
            addLoadEvent(doDl);
        }
    </script>

</body>
</html>

---------------

このソースには、JSP風の変数が使用できます。

使用出来る変数は以下の通り。

{!baseUrl}    サーバーのコンテキストのURL

{!erroe}      エラー名

{!error_description}   エラー記述

{!key}      PDFダウンロード時に指定する

このソースは、一見JSP風にも見えますが、JSPではありません。JSPをカスタマイズに使用する事は、セキュリティー上の理由からできません。

この画面の左上のReportsConnectの文字を変えてみます

        <a id="main-logo"
            href="http://techsupport.kpscorp.jp/reportsconnect.html">ReportsConnect</a>

      ↓

        <a id="main-logo"
            href="http://techsupport.kpscorp.jp/reportsconnect.html">カスタマイズ済み</a>

修正したソースを帳票レコードに添付します。

20121218_13h36_09

これで、印刷してみると...

おー、見事に変わりました。

Rc4dev05

同様に他の2つのhtmlに関しても添付するだけで修正が可能です。

なお、すべての帳票にカスタマイズ画面を適用したい場合は、「管理レコード」のチェックをつけた帳票レコードを1件用意して、そちらに添付することで可能です。

20121218_13h37_22

« Reports Connect for Salesforce:Subreportで複合的な帳票を作成 | トップページ | Reports Connect for Salesforce 標準画面からの印刷呼び出し方法 »

Force.com」カテゴリの記事

Reports Connect」カテゴリの記事

Salesforce」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1482716/47782454

この記事へのトラックバック一覧です: Reports Connect for Salesforce ダウンロード画面のカスタマイズ:

« Reports Connect for Salesforce:Subreportで複合的な帳票を作成 | トップページ | Reports Connect for Salesforce 標準画面からの印刷呼び出し方法 »