サポート > リポジトリ > ポータル > お知らせポートレット

お知らせポートレットを使うと、ポータル画面に任意のメッセージを表示させることができます。

お知らせ情報の登録は「システム管理者」または「お知らせ管理者」のプリンシパルをもったアカウントで行うことができます。

図1 お知らせ管理者プリンシパル
図2 お知らせ検索メニュー

新しいお知らせ情報を一件、登録します。(図3)

図3 お知らせ情報の登録画面を開く

お知らせ情報は表示期限を設定する必要があります。この日付になるまで、お知らせが表示されます。

図4 お知らせ情報を登録する

「お知らせ」のポートレットに、登録した情報が表示されます。

図5 お知らせ情報がポートレットに表示されている

お知らせポートレット内のタイトル部をクリックすると、お知らせの詳細画面へ遷移します。

図6 お知らせ情報の詳細表示
「表示期限日」を過ぎた "お知らせ" は表示されません。

ポートレットは自身の表示幅と高さの情報をもっています。ここでは高さを変更して、2件のお知らせを表示できるように調整します。

2件のお知らせ情報が掲載されるようになった例を示します。

図7 お知らせポートレットの縦をひろげた例

設定

お知らせポートレットの更新画面を開きます。ポートレット本体の縦サイズ(高さ)を200ピクセルへ変更します。

図8 お知らせポートレットの縦サイズ(高さ)を変更する

お知らせポートレットは、ポートレット内にも表示領域としての div 要素を持っています。その高さ設定も145ピクセルへ変更します。

図9 お知らせポートレット内のdiv要素の高さを変更する

検索条件パラメータとして、次の設定を行うことができます。

パラメータ名 説明
jnews_cp$002flimitdate1jshparam ${today} お知らせモデルの limitdate 項目は、表示期限日が設定されるようになっており、かつ検索項目として定義されています。この設定により、本日以降の表示期限となっているお知らせだけを表示できるようになります。
jnews_cp$002fcreateuser ${userid} お知らせモデルの createuser 項目は、標準でログオンIDが設定されるようになっており、かつ検索項目として定義されています。この設定により、お知らせを作成したアカウントのみに表示されるようになります。
jnews_cp はお知らせモデルの検索条件であることを示します。limitdate の接尾語 "1jshparam" は検索範囲の開始を示します。詳細は「コンディションモデル」の説明をお読みください。
図10 ログオンIDで絞り込む設定を追加した

お知らせポートレットは「コンテンツ」と「スクリプト」から構成されています。コンテンツには CSS のスタイル定義と HTML を記述します。「スクリプト」には JavaScript を記述します。

お知らせポートレットは JavaScript で、(REST API 経由で取得した)お知らせ情報を HTML に変換し、これをコンテンツ部に用意した div 要素 (id属性が "jnewsItemList") へ埋め込むという動作になっています。

ここではコンテンツ部のCSSと、スクリプトを一部変更し、図11のように表示されるようにしてみます。

図11 お知らせポートレットの表示スタイルの変更

コンテンツ

jnewsクラスから枠線の指定を除去しました。新たにdateinfoクラスを定義し、青色で右に余白を備えるようにしました。

<style type="text/css">
.jnews {
  padding: 2px;
}
.jnews .title {
  font-weight: bold;/* borderの設定を除去 */
}
.dateinfo {/* dateinfoを追加 */
  color: #008;
  padding-right:8px;
}
.nomsg { 
  color: #333;
}
</style>
<div id="jnewsItemList" style="height: 80px; overflow-y: auto;"></div>

スクリプト

div要素からspan要素へ変更し、新たに追加したCSSクラスを指定しました。(またはstyle属性を直接、指定しています。)

var displayJnewsItem = function(item) {
  var itemContainer = domConstruct.create("div", {'class': 'jnews'}, "jnewsItemList");
  var dateContainer = domConstruct.create("span", {'class':'dateinfo', innerHTML: item.jnewsdate_}, itemContainer);
  var href = "showJnews.do?jnewsid=" + item.jnewsid_;
  var titleLink = domConstruct.create("a", {href: href, innerHTML: item.title_}, itemContainer);
  if (item.report_) {
    var report = item.report_.replace(/\r?\n/g, "<br/>");
    var reportContainer = domConstruct.create("span", {'style':'padding-left:8px;', innerHTML: report}, itemContainer);
  }
};

if (data.entity.length > 0) {
  array.forEach(data.entity, function(item) {
    displayJnewsItem(item);
  });
} else {
  domConstruct.create("div", {'class': 'nomsg', innerHTML: 'お知らせはありません'}, "jnewsItemList");
}

上のコードにある domConstruct は、Dojotoolkit が提供する DOM 操作のためのモジュール dojo/dom-construct を使っています。ポートレットタイプが「一覧」の場合、すぐに利用することができるようにしています。dojo/dom-construct の使い方の詳細は、Dojotoolkit のマニュアルをお読みください。