ログインユーザーの背景色でスタイルシートを動的に変更する

2018-02-07イントラマート

イントラマートのログインユーザーでスタイルシートを動的に変更する方法です。

イントラマートとは
株式会社NTTデータイントラマート社が開発・販売している、Webアプリケーションシステムのシステム共通基盤(統合型フレームワーク)で、国内の著名企業を中心に6,000社以上に導入されています。 イントラマートを導入することにより、Webシステム開発における短納期・低コスト・標準化推進・品質向上を実現できます。
詳しくはこちらをご覧ください。

ログインユーザーでスタイルシートを動的に変更

イントラマートのincludeタグを使用して各ログインユーザーでスタイルシートを動的に変更します。

1.ファンクションコンテナ(myColor.js)

ファンクションコンテナでログインユーザーのカラーパタンを取得します。
取得にはModule.client.get()を利用します。

var colorPatternId ;
function init( request )
{
    //ログインユーザーのカラーパターンを取得する
    //(配色関連のスタイルシートを使い分けるのに使用する。)
    colorPatternId = Module.client.get( "colorPatternId" ) ;
}

2.動的に変更するプレゼンテーションページ

myColor.htmlは以下のようにログインユーザーのカラーパタンで読み込むスタイルシートを切り分けします。

<IMART type="decision" case="blue"   value=colorPatternId><IMART type="include" page="myColor_blue"></IMART></IMART>
<IMART type="decision" case="red"    value=colorPatternId><IMART type="include" page="myColor_red"></IMART></IMART>
<IMART type="decision" case="green"  value=colorPatternId><IMART type="include" page="myColor_green"></IMART></IMART>
<IMART type="decision" case="gray"   value=colorPatternId><IMART type="include" page="myColor_gray"></IMART></IMART>
<IMART type="decision" case="orange" value=colorPatternId><IMART type="include" page="myColor_orange"></IMART></IMART>

3.動的変更を行うためのスタイルシート

スタイルシート(CSS)はファンクションコンテナのmyColor_XXXX.jsにカラーパタン毎に
作成しておきます。

<style type="text/css">
    <!-- 一覧表の選択行 -->
    .select_on{
        background-color    : #CBCFED ;  /*この例ではここの色をカラーパタンごとに変える*/
        font-weight         : normal ;
        margin-top          : 0px ;
        margin-right        : 0px ;
        margin-bottom       : 0px ;
        margin-left         : 0px ;
        padding-top         : 0px ;
        padding-right       : 0px ;
        padding-bottom      : 0px ;
        padding-left        : 0px ;
        border-top-width    : 0px ;
        border-right-width  : 0px ;
        border-bottom-width : 0px ;
        border-left-width   : 0px ;
    }
</style>

4.切り替えを行うファンクションコンテナ

カラーパターンで切り分けを行うプレゼンテーションページでmyColorをインクルードします。

<IMART type="include" page="myColor"></IMART>

これでログインユーザーのカラーパタンを変更されても、そのカラーパタンにあった
スタイルシートを読み込むことができます。

株式会社システムトラスト

イントラマートの導入・開発についてなど気軽にご相談ください。

お問合せ