Support > Repository > Portal > Announcement portlet

By using the notification portlet, you can display any message on the portal screen.

Notification information can be registered with an account with a "system administrator" or "notification manager" principal.

Figure 1 Announcement Administrator Principal
Figure 2 Announcement Search Menu

We will register one new notification information.(Figure 3)

Fig. 3 Open the notification information registration screen

You need to set a display deadline for the notification information.Notifications are displayed until this date.

Figure 4 Registering notification information

Registered information is displayed in the "Notification" portlet.

Fig. 5 Notice information displayed on portlet

When you click on the title part in the notification portlet, it will shift to the details screen of the notification.

Fig. 6 Detailed display of notification information
"Notice" past "display expiration date" is not displayed.

The portlet has its own display width and height information.Here, adjust the height so that two notifications can be displayed.

An example

Two examples of notification information are now shown.

Figure 7 An example in which the notice portlet is expanded vertically


Notice Open the update portlet screen.Change the portlet's vertical size (height) to 200 pixels.

Fig. 8 Change the portrait vertical size (height)

An announcement portlet also has a div element as a display area in the portlet.Also change its height setting to 145 pixels.

Figure 9 Changing the height of the div element in the notification portlet

Announcement portlet consists of "content" and "script".In the content, describe the CSS style definition and HTML.Write JavaScript in "script".

The announcement portlet is JavaScript, which converts announcement information (acquired via the REST API) into HTML and embeds it in a div element (id attribute "jnewsItemList") prepared in the content part.

Let's change the CSS of the content part and the script partly so that it is displayed as shown in Fig.

Figure 10 Changing display style of announcement portlet


Border designation removed from jnews class.We newly defined the dateinfo class so that it has a blue color and a margin on the right.

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


We changed from div element to span element and specified newly added CSS class.(Or you directly specified the style attribute.)

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 = "" + 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) {
} else {
  domConstruct.create("div", {'class': 'nomsg', innerHTML: 'お知らせはありません'}, "jnewsItemList");

DomConstruct in the above code uses module dojo/dom-construct for DOM manipulation provided by Dojotoolkit.When the portlet type is "list", we make it available soon.For details on using dojo/dom-construct, please read the Dojotoolkit manual.