メニュー領域の表示形式を変更する

業務実行画面のメニュー領域の表示形式をカスタマイズする手順を次に示します。

手順

テキストエディタで，メニュー領域に表示させるHTMLファイルを作成します。
作成するファイルの記述形式を次に示します。
なお，太字で示した行は必ず記述してください。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/ucnpBase/adportlets/ucnp/js/tools/UcnpCustomTools.js"></script>
    <script type="text/javascript">
    function menu_onload() {
        var lContentId = ucnp_menu_get_contentId();
        if (lContentId !== null) {
            ucnp_menu_show_flow(lContentId);
        }
    };
    </script>
</head>
 
<body onload="menu_onload();">
 
この部分に，HTMLタグおよびナビゲーション プラットフォームで提供している
JavaScript関数を使用して，メニューの内容を記述します。
 
</body>
</html>

ナビゲーションプラットフォームで提供しているJavaScript関数の詳細は，「9.　JavaScript関数」を参照してください。

作成したファイルをコンテンツ格納先ディレクトリに格納します。
デフォルトのコンテンツ格納先ディレクトリを次に示します。
```
ナビゲーション プラットフォームインストールディレクトリ\PP\uCPSB\httpsd\htdocs
```
コンテンツ格納先ディレクトリの注意事項

ナビゲーションプラットフォームインストールディレクトリ\PP\uCPSB\httpsd\htdocsの直下に，「ucnp」で始まるファイルまたはディレクトリを作成しないでください。「ucnp」はナビゲーションプラットフォームのシステムで予約されている名称のためです。この名称のファイルまたはディレクトリを作成した場合の動作は保証しません。
ユーザプロパティファイル（ucnp_user.properties）のucnp.base.server.custom.menuプロパティに，HTMLファイルの格納先のパスを指定します。
プロパティの詳細は，「7.4.4(13)　カスタマイズしたメニューのHTMLファイルの相対パス（ucnp.base.server.custom.menu）」を参照してください。

＜この項の構成＞: (1)　カスタマイズしたメニュー領域のソース例; (2)　カスタマイズしたメニュー領域の表示例

カスタマイズしたメニュー領域のソース例を次に示します。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/ucnpBase/adportlets/ucnp/js/tools/UcnpCustomTools.js"></script>
    <script type="text/javascript">
    function menu_onload() {
        var lContentId = ucnp_menu_get_contentId();
        if (lContentId !== null) {
            ucnp_menu_show_flow(lContentId);
        }
    };
    </script>
</head>
 
<body onload="menu_onload();">
    <table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
        <tr bgcolor="#00ccff"><td><font size="4"><b>顧客対応業務</b></font></td></tr>
        <tr bgcolor="#0033ff"><td></td></tr>
        <tr bgcolor="#0033ff"><td></td></tr>
        <tr><td><br></td></tr>
        <tr><td style="padding-left:14px;">
            <li><a href="javascript:void(0);" onclick="ucnp_menu_show_flow('「契約情報の確認」の業務コンテンツID'); return false;">契約情報の確認</a></li>
        </td></tr>
        <tr><td style="padding-left:14px;">
            <li><a href="javascript:void(0);" onclick="ucnp_menu_show_flow('「契約への問い合わせ」の業務コンテンツID'); return false;">契約への問い合わせ</a></li>
        </td></tr>
        <tr><td style="padding-left:14px;">
            <li><a href="javascript:void(0);" onclick="ucnp_menu_show_flow('「新規契約受付」の業務コンテンツID'); return false;">新規契約受付</a></li>
        </td></tr>
    </table>
    <br>
    <table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
        <tr bgcolor="#00ccff"><td><font size="4"><b>社内業務</b></font></td></tr>
        <tr bgcolor="#0033ff"><td></td></tr>
        <tr bgcolor="#0033ff"><td></td></tr>
        <tr><td><br></td></tr>
        <tr><td style="padding-left:14px;"><li><a href="http://****/****/****.***" target="_blank">出張申請</a></li></td></tr>
        <tr><td style="padding-left:14px;"><li><a href="http://****/****/****.***" target="_blank">備品申請</a></li></td></tr>
    </table>
</body>
</html>

（凡例）: ****：任意の文字列

6.1.1 メニュー領域の表示形式を変更する

(1) カスタマイズしたメニュー領域のソース例

(2) カスタマイズしたメニュー領域の表示例

6.1.1　メニュー領域の表示形式を変更する

(1)　カスタマイズしたメニュー領域のソース例

(2)　カスタマイズしたメニュー領域の表示例