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

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.The description of the target model is "Announcement portletPlease read.

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.For details, refer to "Basic guide for customized developersIt explains with.

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.It is a Google Chrome plugin POSTMAN I will explain it using.

Introduction Logon authentication is performed from POSTMAN to Wagby.The URL is "http: // localhost: 8921/wagby/rest/session".Detail is"REST API usage guide> LogonPlease read.

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.Detail is"REST API usage guide> Detailed data acquisitionPlease read.

Fig. 3 Acquiring one notification data

The obtained sample data is as follows.

{"Entityp": {"jnewsid_": {"content_": "1000", "formatted_": null, "errorcode_": ""}, "jnewsdate_": {"content_": "July 16, "Formatted_": null, "errorcode_": ""}, "formatted_": null, "errorcode_": "" ", limitdate_": {"content_": "July 31, Title_ ": {" content_ ":"Jasmine Soft Beach Party Notice"," Formatted_ ": null," errorcode_ ":" "}," report_ ": {" content_ ":" We will hold an annual beach party from the evening of 31st July.\\ n Please come to the office on the day with a rough appearance."," Formatted_ ": null," errorcode_ ":" "}}," pkey ": null," formatted_ ": null," errorcode_ ":" : "" Jnewsid_ ": 1000," jnewsdate_ ":" "," jfcdebug ": []," jfcwarn ": []," jfcerror ": []," entity " 2015-07-16 "," limitdate_ ":" 2015-07-31 "," title_ ":" Notification of Jasmine Soft Beach Party "," report_ ":" We held an annual beach party from the evening of July 31 I will.\\ n Please come to the office on the day with a rough appearance."," 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.


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 {
  Request ("http: // localhost: 8921 / wagby / rest / jnews / entry / 1000"). Ten (("dojo / request", function (request, domConstruct) Function (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.

Request ("http: // localhost: 8921 / wagby / rest / jnews / entry / 1000" "request ([" dojo / request ", function do (request, domConstruct), { handleAs: "json" }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.

Request ("http: // localhost: 8921 / wagby / rest / jnews / entry / 1000", {handleAs: "Json"}). Then (function (response) {
        var content = response.entityp.title_.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