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

2018/02/072020/06/24イントラマートintra-mart ver7.2,スクリプト開発

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

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

イントラマートの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>

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

システムトラストでは、システムエンジニア、プログラマーなどを随時募集中です。気軽にご相談ください。

お問合せ