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

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

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

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

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

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

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

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

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

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

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

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

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

動作例

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

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

設定

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

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

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

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

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

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

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

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

コンテンツ

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 のマニュアルをお読みください。