Support > Repository > Portal > Display values ​​of arbitrary models (2)

Here is a sample code that defines a new portlet and displays the JSON object obtained via the REST API. (The description on this page is for programmers.)

Here, we will explain how to acquire one "notification" information and output it to the portlet.For the explanation of the target model, please read "Notice Portlet".

Wagby deals with the form of "store model" and "presentation model" to express one piece of data.The store model is content that is persisted to the database, and the presentation model is for screen display.This details is explained in "Basic Guide for Customized Developers".

This time I will deal with "presentation model".First of all, I confirm this content.

We shall handle the information shown in Figure 1.

Fig. 1 Sample data of notification
The "Notification" model above has changed the date format of "creation date" and "display expiration date" to Japanese calendar.Since there is no influence on the explanation of this sample itself, the following explanation may use the "announcement" model included at the time of shipment of Wagby as it is.

Confirmation using POSTMAN

Let's check this data in JSON format using REST API.I will explain it using POSTMAN which is a Google Chrome plug-in.

Introduction Logon authentication is performed from POSTMAN to Wagby.The URL is "http:// localhost: 8921/wagby/rest/session".For details, please read "REST API Utilization Guide> Logon".

Fig. 2 Logon authentication with POSTMAN

As shown in the figure, account and password are parameters of x - www - form - urlencoded and sent by PUT.

After successful logon authentication, try checking the notification information of the primary key 1000.The URL is http:// localhost: 8921/wagby/rest/jnews/entry/1000.For details, please read "REST API utilization guide> Detailed data acquisition".

Fig. 3 Acquiring one notification data

The obtained sample data is as follows.

{
  "entityp": {
    "jnewsid_": {
      "content_": "1000",
      "formatted_": null,
      "errorcode_": ""
    },
    "jnewsdate_": {
      "content_": "平成27年7月16日",
      "formatted_": null,
      "errorcode_": ""
    },
    "limitdate_": {
      "content_": "平成27年7月31日",
      "formatted_": null,
      "errorcode_": ""
    },
    "title_": {
      "content_": "ジャスミンソフトビーチパーティのお知らせ",
      "formatted_": null,
      "errorcode_": ""
    },
    "report_": {
      "content_": "7月31日夕方より恒例のビーチパーティを開催します。\\\n当日はラフな格好で出社してください。",
      "formatted_": null,
      "errorcode_": ""
    },
    "createuser_": {
      "content_": "admin",
      "formatted_": null,
      "errorcode_": ""
    }
  },
  "pkey": null,
  "errors": {
    "jfcinfo": [],
    "jfcdebug": [],
    "jfcwarn": [],
    "jfcerror": []
  },
  "entity": {
    "jnewsid_": 1000,
    "jnewsdate_": "2015-07-16",
    "limitdate_": "2015-07-31",
    "title_": "ジャスミンソフトビーチパーティのお知らせ",
    "report_": "7月31日夕方より恒例のビーチパーティを開催します。\\\n当日はラフな格好で出社してください。",
    "createuser_": "admin"
  },
  "status": "showJnews.input”
}

Wagby's presentation model can be handled with the name "entityp" using the REST API.For example, title information (marked in red in the above example) can be handled using JavaScript as follows.

entityp.title_.content_

Let's create a new portlet.The portlet type is "free".

Figure 5 Sample portlet (1)
Figure 6 Sample portlet (2)

We prepare an empty div element for the contents section.Set the value here by script (JavaScript) to be described later.

<div id="jnewsContent" style="height: 480px; overflow-y: auto;"></div>

The script code is shown below.

try {
  require(["dojo/request","dojo/dom-construct"],
    function(request,domConstruct) {
      request("http://localhost:8921/wagby/rest/jnews/entry/1000").then(
        function(response) {
          /*console.log(response);*/
          domConstruct.create("div", { innerHTML: "<p>"+response+"</p>" }, "jnewsContent");
        }
      );
    }
  );
} catch (e) {
  console.error(e);
}
  • It is for debugging to surround the whole with try ... catch.If an error occurs while displaying the portlet, an error message is written in the JavaScript console of the browser.(It is best to display the JavaScript console during development.After debugging, you can omit this try catch.
  • In this example we are using dojo/request module and dojo/dom-construct module.In Wagby's portlet development, you can use Dojotoolkit immediately.After require, specify the module you want to use.
  • For details on how to use request and domConstruct, please read the Dojotoolkit manual.Request performs HTTP communication.DomConstruct performs page rewriting.
  • By enabling console.log which is a comment, it is possible to display the value in JavaScript console as well.Please use it when debugging.

If you enable this portlet, it will be displayed as shown in Figure 7.

You can see that the result of REST API is displayed as it is as a character string.

Figure 7 Portlet display example

Next, let the string returned by the REST API be treated as a JSON object.Grant the handleAs specification when using request.

require(["dojo/request","dojo/dom-construct"],
  function(request,domConstruct) {
    request("http://localhost:8921/wagby/rest/jnews/entry/1000", { handleAs: "json" }).then(
      function(response) {
        console.log(response);
        domConstruct.create("div", { innerHTML: "<p>"+response+"</p>" }, "jnewsContent");
      }
    );
  }
);

As a result, you can see that the following appears on the JavaScript console.

Object {entityp: Object, pkey: null, errors: Object, entity: Object, status: "showJnews.input"}

Since we are able to convert to JSON objects, I will scan the presentation model using JavaScript.

Modify the script code as follows.

require(["dojo/request","dojo/dom-construct"],
  function(request,domConstruct) {
    request("http://localhost:8921/wagby/rest/jnews/entry/1000", { handleAs: "json" }).then(
      function(response) {
        var content = response.entityp.title_.content_;
        /*console.log(content);*/
        domConstruct.create("div", { innerHTML: "<p>"+content+"</p>" }, "jnewsContent");
      }
    );
  }
);

This will cause the screen to look like this:You can see that you can get the value from the presentation model.

Figure 7 Portlet display