JavaScript前へ3456789101112次へポートレットタイプ「一覧」を再利用し、Wagbyで定義したモデルの情報を取得するサンプルコードを説明します。APIを使って任意のモデルの値を取得することができます。いう形式で得られます。API経由でJSONデータを取得します。JavaScriptを使ってJSONのデータを解析し、必要な情報を取得してポートレット画面に埋め込むことができます。「お知らせ」ポートレットは、このような作り方になっています。同ポートレットのコンテンツとスクリプトを教材として使うことができます。「日報」モデルを用いてサンプル実装を行ないます。このモデルは、毎日の営業状況(問合せ数、販売数、クレーム数)を管理することができます。この営業状況を確認できます。図2における一覧表示の値を取得し、ポートレットに図3のように表示するようにします。使って日報モデルの一覧表示を取得します。取得したJSONの構造を確認します。JSONの構造を確認するここではentity要素の最初の配列内に含まれるcountOfAsk_という値を取得するようにします。いうポートレットを用意します。値を表示するためのdisplayCountOfAskポートレットを用意したこのポートレットの設定を図6,図7に示します。任意の文字列とします。英数字の組み合わせとします。いう入れ物に格納します。ポートレット画面に表示されるタイトルです。任意の文字列を設定します。ポートレットの縦、横のサイズ(ピクセル値)を指定します。横幅は、同じ表示エリアに属する他のポートレットと合わせるとよいでしょう。同じ表示エリアの中での初期表示順を指定します。整数値を指定してください。どの表示エリアにポートレットを表示させるかを指定します。整数値を指定してください。ユーザーが作成した日報モデル「今日の活動」を指定します。呼び出し時のパラメータを付与することができます。ここでは「本日の日付」を範囲検索の条件として渡しています。提供する特別な表記です。パラメータ名は、検索条件画面のWebフォームに埋め込まれたinput要素のid値を用います。(自動生成されたJSPファイルから、該当する項目のid値を探してください。dailyreport_cp$002fmdate1jshparamdailyreport_cp$002fmdate2jshparamコンテンツ図7のコンテンツ部は次のように設定しています。auto;"></div>この空のdiv要素に対して、スクリプトから値が設定されます。スクリプト図7のスクリプト部は次のように設定しています。"displayCountOfAskArea");dataは、ポートレットタイプが「一覧」のときに利用できます。検索結果が格納されています。取得し、これをvalueという変数に格納しています。2行目で、コンテンツ部に用意した空のdiv要素に、valueを格納します。全体はdiv要素で囲まれます。dataの並びは一覧表示での並びと同様となります。(検索時に指定できるパラメータにソートキーを指定した場合は、指定に準じた並びとなります。ポートレットタイプが「一覧」の場合、すぐに利用することができるようにしています。マニュアルをお読みください。値を中央揃えにし、文字色を青としました。フォントサイズも大きくしています。設定コンテンツ部にCSSのクラスを定義しています。スクリプトでは、このCSSを使うように指定しています。