Support > Repository > Portal > Display values ​​of arbitrary models

We will explain a sample code that reuses portlet type "list" and acquires information on model defined by Wagby. (The description on this page is for programmers.)

Wagby can get the value of an arbitrary model using the REST API.That information is obtained in the form of JSON.

Using this mechanism, we obtain JSON data from the portlet via the REST API.You can analyze the JSON data using JavaScript, obtain necessary information and embed it in the portlet screen.

"Announcement" portletThis is how it is made like this.You can use the content and script of the portlet as a teaching material.

An example

We will perform sample mounting using the "daily report" model.This model can manage the daily sales situation (the number of inquiries, the number of sales, the number of complaints).(Figure 1)

Fig.1 Daily report model display screen

You can check this sales situation also when displaying the list.(Figure 2)

Fig. 2 List display of daily report model

Acquire the value of the list display in Figure 2 and display it on the portlet as shown in Figure 3.

Figure 3 Visualize the latest business situation with portlet

Confirm JSON data

Retrieve daily report model list display using REST APITo do.POSTMANConfirm the structure of JSON obtained using.(Figure 4)

Fig. 4 Check the structure of JSON

In this case we should get the countOfAsk_ value contained in the first array of entity elements.

Preparing portlets

Prepare a portlet called "displayCountOfAsk".(FIG. 5)

Figure 5 DisplayCountOfAsk portlet for displaying values ​​prepared

Figures 6 and 7 show the settings of this portlet.

Fig. 6 Portlet setting (1)
Setting items Description Input example
Portlet ID Make an arbitrary character string.It is a combination of alphanumeric characters. displayCountOfAsk
Portlet type Select the list.We acquire the data with "list" for the target model and store the result in the container called "data". List
title The title displayed on the portlet screen.Set an arbitrary character string. Today's inquiries
size Specify the portrait's vertical and horizontal size (pixel value).It is a good idea to match the width with other portlets belonging to the same display area. 100 x 200
Display setting It is valid. Effectiveness
Display order Specify the initial display order in the same display area.Please specify an integer value. 1
Display area Specify in which display area the portlet is to be displayed.Please specify an integer value. 2
Reference model Specify the daily report model "Today's activity" created by the user. Today's activities
Parameters You can assign parameters when calling REST API of "list".Here, "Today's date" is passed as a range search condition.Note that $ {today} is a special notation provided by Wagby.
The parameter name uses the id value of the input element embedded in the Web form on the search condition screen.(Look for the id value of the corresponding item from the automatically generated JSP file.)


The content part of Fig. 7 is set as follows.

Fig. 7 Portlet setting (2)
<div id="displayCountOfAskArea" style="heigth:80px; overflow-y: auto;"></div>

For this empty div element, the value is set from the script.


The script part of Fig. 7 is set as follows.

var value=data.entity[0].countOfAsk_;
domConstruct.create("div", {innerHTML: value}, "displayCountOfAskArea");

Data can be used when the portlet type is "list".The search result is stored. JSON data follows "."On the first line we get the desired value (countOfAsk_) and store it in a variable called value.

On the second line, store value in the empty div element prepared for the content part.The whole is surrounded by div elements.

The sequence of data is the same as the list in the list display.(If sort key is specified as a parameter that can be specified at search time, it will be in accordance with the specification.)

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.

We made the values ​​centered and the letter color blue.The font size is also increased.(FIG. 8)

Figure 8 Modified display


CSS classes are defined in the content section. The script also specifies to use this CSS.

Figure 9 Corrected content and script
<style type="text/css">
.dailyreportinfo {
  padding: 2px;
  font-size: 24px;
  color: blue;
  text-align: center;
<div id="displayCountOfAskArea" style="heigth:80px; overflow-y: auto;"></div>
var value=data.entity[0].countOfAsk_;
domConstruct.create("div", {'class': 'dailyreportinfo', innerHTML: value}, "displayCountOfAskArea");